liveShop/pages/product/reply.vue

<template>
	<view class="container">
		<view class="reply_btn flex_item">
			<view class="btn" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				{{ item.text }}({{ item.number || '0' }})
			</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">
						<image class="portrait" :src="item.avatar || '/static/error/missing-face.png'" mode="aspectFill"></image>
						<view class="right">
							<text class="name">{{ item.nickname }}</text>
							<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 class="bot">
								<text class="attr"></text>
								<text class="time">{{ item.add_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: '',
					orderList: [],
					page: 1, //当前页数
					limit: 5 //每次信息条数
				},
				{
					state: 1,
					text: '好评',
					loadingType: 'more',
					number: '',
					orderList: [],
					page: 1, //当前页数
					limit: 5 //每次信息条数
				},
				{
					state: 3,
					text: '差评',
					loadingType: 'more',
					number: '',
					orderList: [],
					page: 1, //当前页数
					limit:5 //每次信息条数
				},
				{
					state: 2,
					text: '中评',
					loadingType: 'more',
					number: '',
					orderList: [],
					page: 1, //当前页数
					limit: 5 //每次信息条数
				}
			]
		};
	},
	computed: {},
	onLoad(option) {
		this.id = option.id;
	},
	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;
		});
		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);
					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%;
		padding: 25rpx 25rpx;
		padding-top: 120rpx;
		.swiper-box {
			height: 100%;
			.list-scroll-content {
				height: 100%;
			}
		}
	}
}
.reply_btn {
	padding: 15rpx 0rpx;
	position: fixed;
	/* #ifdef H5 */
	top: 50px;
	/* #endif */
	/* #ifdef MP */
	top: 0;
	/* #endif */
	.btn {
		padding: 10rpx 25rpx;
		font-size: 24rpx;
		background: #f4f4f4;
		margin-right: 25rpx;
	}
	.current {
		background-color: #e93323 !important;
		color: #ffffff !important;
	}
}
.eva-box {
	display: flex;
	padding: 20rpx 0;
	// height: 100%;
	.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;
		.con {
			font-size: $font-base;
			color: $font-color-dark;
			padding: 20rpx 0;
		}
		.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>