deming/pageB/comment/index.vue

<template>
	<scroll-view scroll-y class="comment" @scrolltolower="loadMore">
		<view class="label-list">
			<view v-for="(label, index) in evaluateSpec" :key="index" :class="{'active': current == index}" @click="current=index">{{ index + '(' + label + '}' }}</view>
		</view>
		<view class="comment-container">
			<view v-for="(item, index) in evalueList" :key="index" class="itme">
				<comment :reply="true" :content="item"></comment>
			</view>
			<u-empty text="暂无评论" mode="list" v-if="!evalueList.length" margin-top="120" color="#333"></u-empty>
		</view>
		<!-- 加载更多 -->
		<u-loadmore :status="loadStatus" bgColor="#EEEBEE" margin-top="20" margin-bottom="20" v-if="evalueList.length >= 12"></u-loadmore>
	</scroll-view>
</template>
<script>
import comment from "@/components/comment/index";
export default {
	data() {
		return {
			id: Number,
			current: '全部',
			page: 0,
			evalueList: [],
			evaluateSpec: {},
			loadStatus: 'loadmore',
			timer: true,
		}
	},
	components: {
		comment
	},
	onLoad(option) {
		this.id = option.id;
		// this.getAllEvalue();
		this.getEvaluateSpec();
	},
	watch: {
		current(value) {
			this.page = 0;
			this.getAllEvalue({ type: value });
		}
	},
	methods: {
		loadMore() {
			if(this.evalueList.length < 12) return false;
			if(!this.timer) return false;
			this.loadStatus = "loading";
			this.page++;
			this.getAllEvalue({ type: this.current, load: 'more' }).then(length => {
				if(length == 0) {
					this.page--;
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loading';
				}
			}).catch(() => {
				this.loadStatus = "nomore";
				this.page--;
			})
		},
		getEvaluateSpec() {
			this.$u.api.getEvaluateSpec({
				id: this.id,
			}).then(res => {
				if(res.errCode == 0) {
					this.evaluateSpec = res.data;
					this.getAllEvalue();
				}
			})
		},
		async getAllEvalue({ type, load } = {}) {
			let params = {
				goods_id: this.id, 
				page: this.page,
			}
			if(type) Object.assign(params, { type: type });
			const res = await this.$u.api.getAllEvalue(params);
			if (res.errCode == 0) {
				if(load) this.evalueList.push(...res.data);
				else this.evalueList = res.data;
			} else {
				this.evalueList = [];
			}
			return res.data.length;
		}
	}
};
</script>
<style lang="scss" scoped>
.comment {
	height: calc(100vh - var(--window-top));
	background-color: #EEEBEE;
	padding-bottom: 30rpx;
	.label-list {
		padding: 30rpx;
		background-color: #ffffff;
		margin-bottom: 14rpx;
		display: flex;
		flex-wrap: wrap;
		> view {
			box-sizing: content-box;
			padding: 16rpx 20rpx;
			border-radius: 30rpx;
			margin: 0 20rpx 20rpx 0;
			background: rgba(236,236,236,1);
			font-size: 26rpx;
			color: rgba(153,153,153,1);
		}
		.active {
			background: rgba(255,120,15,1);
			color: #ffffff;
		}
	}
	.comment-container {
		.itme {
			padding: 30rpx;
			background-color: #ffffff;
			margin-bottom: 10rpx;
		}
	}
}
</style>