mycajt/pages/product/reply.vue

<template>
	<view class="container">
		<view class="reply_btn" style="width: 0; min-width: 100%;">
			<view class="flex">
				<view class="btn" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
					{{ item.text }}({{ item.number }})
				</view>
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadDate">
					<!-- 评论列表 -->
					<view v-for="(item, index) in tabItem.orderList" :key="index" class="eva-box">
						<view class="flex">
							<image class="portrait" :src="item.avatar" mode="aspectFill"></image>
							<view class="right">
								<view class="flex">
									<view class="name">{{ item.nickname }}</view>
									<view class="time">{{ item.add_time }}</view>
								</view>
								<view class="Rate"><uniRate activeColor="#F10F3C" disabled="false" text="1" size="10" margin="0" :value="item.star"></uniRate></view>
							</view>
						</view>
						<view class="content-boxs ">
							<text class="con">{{ item.comment }}</text>
							<view class="con_box">
								<view class="con_image" v-for="ls in item.pics"><image :src="ls"></image></view>
							</view>
						</view>
						<view class="content-boxs mid" style="padding: 20rpx;" v-if="item.merchant_reply_content">
							<view>
								<text class="con">
									<text style="color: #ff4b56;margin-right: 8rpx;">店家回复 :</text>
									{{ item.merchant_reply_content }}
								</text>
							</view>
							<view>
								<text class="cons">{{ item.merchant_reply_time }}</text>
							</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { reply_config, reply_list } from '@/api/reply.js';
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
	components: {
		uniRate
	},
	watch: {},
	data() {
		return {
			id: '', //商品id
			list: '', //评论列表
			reply: '', //评论配置
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '全部',
					loadingType: 'more',
					number: 0,
					orderList: [],
					page: 1, //当前页数
					limit: 5 //每次信息条数
				},
				{
					state: 1,
					text: '好评',
					loadingType: 'more',
					number: 0,
					orderList: [],
					page: 1, //当前页数
					limit: 5 //每次信息条数
				},
				{
					state: 3,
					text: '差评',
					loadingType: 'more',
					number: 0,
					orderList: [],
					page: 1, //当前页数
					limit: 5 //每次信息条数
				},
				{
					state: 2,
					text: '中评',
					loadingType: 'more',
					number: 0,
					orderList: [],
					page: 1, //当前页数
					limit: 5 //每次信息条数
				}
			]
		};
	},
	computed: {},
	onLoad(option) {
		this.id = option.id;
	},
	//下拉刷新
	onPullDownRefresh() {
		let obj = this;
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		setTimeout(function() {
			obj.loadDate();
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	onShow() {
		let obj = this;
		reply_config({}, this.id).then(function({ data }) {
			obj.reply = data;
			obj.navList[0].number = obj.reply.sum_count;
			obj.navList[1].number = obj.reply.good_count;
			obj.navList[2].number = obj.reply.poor_count;
			obj.navList[3].number = obj.reply.in_count;
			console.log(obj.navList, 55);
		});
		this.loadDate();
	},
	methods: {
		async loadDate(source) {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			if (source === 'tabChange' && navItem.loaded === true) {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			if (navItem.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			reply_list(
				{
					type: state,
					page: navItem.page,
					limit: navItem.limit
				},
				this.id
			)
				.then(({ data }) => {
					let arr = data;
					navItem.orderList = navItem.orderList.concat(arr);
					console.log(navItem.orderList, 55);
					navItem.page++;
					if (navItem.limit == data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'more';
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'noMore';
					}
					this.$set(navItem, 'loaded', true);
				})
				.catch(e => {
					console.log(e);
				});
		},
		// async GetList(){
		// 	let obj = this;
		// 	reply_list({}, obj.id).then(function({ data }) {
		// 		// console.log(data)
		// 		obj.list = data;
		// 	});
		// },
		//跳转接口
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadDate('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		}
	}
};
</script>

<style lang="scss">
page {
	background: #ffffff;
	height: 100%;
	.container {
		height: 100%;
		width: 0;
		min-width: 100%;
		padding: 25rpx 25rpx;
		.swiper-box {
			height: 100%;
			padding-top: 60rpx;
			.list-scroll-content {
				height: 100%;
			}
		}
	}
}
.reply_btn {
	padding: 15rpx 30rpx;
	overflow: hidden;
	align-items: center;
	position: fixed;
	top: 50px;
	left: 0px;
	// top: 50px;
	.btn {
		text-align: center;
		padding: 10rpx 25rpx;
		font-size: 24rpx;
		width: 25%;
		background: #f4f4f4;
	}
	.current {
		background-color: #e93323 !important;
		color: #ffffff !important;
	}
}
.eva-box {
	padding: 30rpx 0;
	.portrait {
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
		border-radius: 100px;
	}
	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-base;
		color: $font-color-base;
		padding-left: 26rpx;
	}
	.Rate {
		padding-top: 25rpx;
	}
}
.content-boxs {
	width: 100%;
	overflow: hidden;
	margin: 10rpx auto;
	padding: 20rpx;
	border-radius: 12rpx;
	font-size: 26rpx;
	color: #333;
	&.mid {
		background: #f4f4f4;
	}
	.con {
		font-size: $font-base;
		color: $font-color-dark;
	}
	.cons {
		font-size: $font-base;
		color: #909399;
		width: 100%;
		overflow: hidden;
		text-align: right;
	}
	.bot {
		display: flex;
		justify-content: space-between;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.content-boxs {
	padding: 20rpx 0;
	.con {
		font-size: $font-base;
		color: $font-color-dark;
	}
	.bot {
		display: flex;
		justify-content: space-between;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.con_image {
	width: 130rpx;
	height: 130rpx;
	display: inline-block;
	padding: 15rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>