zhengyi/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 }})
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" :style="{ height: maxheight + 'px' }" 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="row-1 flex1">
							<image class="portrait" :src="item.avatar" mode="aspectFill"></image>
							<view class="right flex1">
								<view>
									<view class="name flex1">
										<view>{{ item.nickname }}</view>
										<!-- <image src="../../static/label/vip.png"></image> -->
									</view>
									<uniRate class="rate" disabled size="10" margin="1" :value="item.product_score" ></uniRate>
								</view>
								<view class="bot">
									<text class="attr"></text>
									<text class="time">{{ item.add_time }}</text>
								</view>
							</view>
						</view>
						<view class="con">{{ item.comment }}</view>
						<view class="con_box">
							<view class="con_image" v-for="ls in item.pics"><image :src="ls"></image></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/product.js';
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
	components: {
		uniRate
	},
	watch: {},
	data() {
		return {
			maxheight: '',
			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: {},
	onReady() {
		// 初始化获取页面宽度
		uni.createSelectorQuery()
			.select('.container')
			.fields(
				{
					size: true
				},
				data => {
					// 保存头部高度
					this.maxheight = data.height - Math.floor((data.width / 750) * 145);
				}
			)
			.exec();
	},
	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);
					console.log(navItem.orderList,111)
					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;
	.btn {
		padding: 10rpx 25rpx;
		font-size: 24rpx;
		background: #f4f4f4;
		margin-right: 25rpx;
	}
	.current {
		background-color: #e93323 !important;
		color: #ffffff !important;
	}
}
.eva-box {
	padding: 20rpx 0;
	// height: 100%;
	.row-1{
		.portrait {
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			border-radius: 100px;
		}
		.right {
			flex: 1;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26rpx;
			.name{
				margin-bottom: 20rpx;
				image{
					width: 35rpx;
					height: 25rpx;
				}
			}
			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}
	.con {
		font-size:24rpx;
		font-weight:500;
		color:rgba(84,84,86,1);
		padding: 20rpx 0 35rpx 0;
		letter-spacing: 3rpx;
	}
	.con_image {
		width: 150rpx;
		height: 150rpx;
		display: inline-block;
		margin-right: 20rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}


</style>