|
@@ -1,209 +1,233 @@
|
|
|
-<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
|
|
|
- :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',
|
|
|
- }"
|
|
|
- ></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></evaluateItem>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import evaluateItem from './components/evaluateItem.vue';
|
|
|
-import { getEvaluateListApi } from '@/api/merchant/evaluate';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- current: 0,
|
|
|
- count: 5,
|
|
|
- value: 2,
|
|
|
- list1: [
|
|
|
- {
|
|
|
- name: '未回复的评价',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '全部评价',
|
|
|
- },
|
|
|
- ],
|
|
|
- contentList: [
|
|
|
- {
|
|
|
- name: '全部',
|
|
|
- numb: 360,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '五星',
|
|
|
- numb: 21,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '四星',
|
|
|
- numb: 50,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '三星',
|
|
|
- numb: 88,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '二星',
|
|
|
- numb: 72,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '一星',
|
|
|
- numb: 218,
|
|
|
- },
|
|
|
- ],
|
|
|
- radiolist1: [
|
|
|
- {
|
|
|
- name: '有内容的评价',
|
|
|
- disabled: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '有图片的评价',
|
|
|
- disabled: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
|
|
|
- radiovalue1: '有内容的评价',
|
|
|
- };
|
|
|
- },
|
|
|
- components: { evaluateItem },
|
|
|
- methods: {
|
|
|
- // 选择星级
|
|
|
- handlerSelectItem(item, index) {
|
|
|
- this.current = index;
|
|
|
- },
|
|
|
- click() {},
|
|
|
- async getEvaluateList() {
|
|
|
- let res = await getEvaluateListApi();
|
|
|
-
|
|
|
- console.log(res, '@@@res');
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getEvaluateList();
|
|
|
- },
|
|
|
-};
|
|
|
-</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>
|
|
|
+<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>
|