chelvc-custom/src/pageMerchant/storeModule/evaluateManagement.vue

<template>
	<view class="container">
		<!-- <view class="top-box">
      <view class="top-l">
        <view class="l-l"> {{ value.toFixed(1) }} </view>
        <view class="l-r">
          <u-rate :count="count" v-model="value"></u-rate>
          <p>根据近90天评价计其所得</p>
        </view>
      </view>
      <view class="top-r">
        <span>更多</span>
        <u-icon name="arrow-right" color="#9B9B9B" size="18"></u-icon>
      </view>
    </view> -->

		<view class="content-box">
			<view class="top-box">
				<u-tabs :current="list1Current" :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary"
					:activeStyle="{
            color: '#000',
            fontSize: '28rpx',
            transform: 'scale(1.05)',
            marginBottom: '15rpx',
          }" :inactiveStyle="{
            color: '#333',
            fontSize: '30rpx',
            transform: 'scale(1)',
            marginBottom: '15rpx',
			
          }" @click="handlerSelectItem1"></u-tabs>
			</view>
			<view class="item-box">
				<view class="item" :class="current == index ? 'act-item' : ''" v-for="(item, index) of contentList"
					:key="index" @click="handlerSelectItem(item, index)">{{ item.name }}{{ item.numb }}</view>
			</view>
			<!-- <view class="item-radio-box">
        <u-radio-group v-model="radiovalue1" placement="row">
          <u-radio
            :customStyle="{ margin: '8px' }"
            v-for="(item, index) in radiolist1"
            :key="index"
            :label="item.name"
            :name="item.name"
          >
          </u-radio>
        </u-radio-group>
      </view> -->
		</view>

		<evaluateItem :dataList="dataList"></evaluateItem>
	</view>
</template>

<script>
	import evaluateItem from './components/evaluateItem.vue';
	import {
		getEvaluateListApi,
		getMerchantQueryApi
	} from '@/api/merchant/evaluate';
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				merchantId: "",
				list1Current: 0,
				current: 0,
				count: 5,
				value: 2,
				score:"0",
				list1: [{
						name: '未回复的评价',
					},
					{
						name: '全部评价',
					},
				],
				contentList: [{
						name: '全部',
						numb: 360,
					},
					{
						name: '五星',
						numb: 21,
						value: 5,
					},
					{
						name: '四星',
						numb: 50,
						value: 4,
					},
					{
						name: '三星',
						numb: 88,
						value: 3,
					},
					{
						name: '二星',
						numb: 72,
						value: 2,
					},
					{
						name: '一星',
						numb: 218,
						value: 1,
					},
				],
				radiolist1: [{
						name: '有内容的评价',
						disabled: false,
					},
					{
						name: '有图片的评价',
						disabled: false,
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '有内容的评价',
				dataList: [],
			};
		},
		components: {
			evaluateItem,

		},
		created() {
			// 获取商家id
			let merchantInfo = this.$store.state.data.merchantInfo;
			this.merchantId = merchantInfo.merchant.id;
			this.getEvaluateList(this.merchantId, this.list1Current, this.current);

		},
		methods: {
		
			handlerSelectItem1(item) {
				this.list1Current =  item.index
				this.getEvaluateList(this.merchantId, item.index,this.score);
			},
			handlerSelectItem(item, index) {
				console.log(item, index)
				this.current = index
				this.score = item.value
				this.contentList = [...this.contentList]
				this.getEvaluateList(this.merchantId, this.list1Current, item.value);
			},
			async getEvaluateList(merchantId, isRecover, score) {
				let res = await getMerchantQueryApi({
					merchantId,
					isRecover,
					score
				});
				if (res.code == "OK") {
					this.dataList = res.data
					console.log("dasd")
				}

			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f5f5f5 !important;
		min-height: calc(100vh - 20rpx);
		padding-bottom: 20rpx;

		.top-box {
			background-color: #fff;
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: space-between;

			.top-l {
				display: flex;
				align-items: center;

				.l-l {
					margin-right: 20rpx;
					font-size: 42rpx;
					color: #d32625;
					font-weight: bold;
				}

				.l-r {
					p {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #afafaf;
					}
				}
			}

			.top-r {
				display: flex;
				align-items: center;
				color: #afafaf;
				font-size: 26rpx;
			}
		}

		.content-box {
			padding: 0 20rpx 20rpx;
			background-color: #fff;
			margin: 10rpx 0;

			.item-box {
				display: grid;
				grid-template-columns: 32% 32% 32%;
				justify-content: space-between;

				.item,
				.act-item {
					border: 2rpx solid #e0e0e0;
					padding: 10rpx 30rpx;
					text-align: center;
					margin: 20rpx;
					font-size: 26rpx;
					color: #999999;
				}

				.act-item {
					border: 2rpx solid #87afcc !important;
					color: #87afcc !important;
				}
			}

			.item-radio-box {}
		}
	}
</style>