deming/pageB/comment/index.vue

<template>
	<view class="comment">
		<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>
	</view>
</template>
<script>
import comment from "@/components/comment/index";
export default {
	data() {
		return {
			id: Number,
			current: '全部',
			page: 0,
			evalueList: [],
			evaluateSpec: {},
		}
	},
	components: {
		comment
	},
	onLoad(option) {
		this.id = option.id;
		// this.getAllEvalue();
		this.getEvaluateSpec();
	},
	watch: {
		current(value) {
			this.getAllEvalue(value);
		}
	},
	methods: {
		getEvaluateSpec() {
			this.$u.api.getEvaluateSpec({
				id: this.id
			}).then(res => {
				if(res.errCode == 0) {
					this.evaluateSpec = res.data;
					this.getAllEvalue();
				}
			})
		},
		getAllEvalue(type) {
			let params = {
				goods_id: this.id, 
				page: this.page,
			}
			if(type) Object.assign(params, { type: type });
			this.$u.api.getAllEvalue(params).then(res => {
				if(res.errCode == 0) {
					this.evalueList = res.data;
				} else {
					this.evalueList = [];
				}
			})
		}
	}
};
</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>