370 lines
8.6 KiB
Vue
370 lines
8.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="flex margin-lr padding-tb-sm u-border-bottom" v-if="shopDet.shopScore">
|
|
<view class="flex padding-right">
|
|
<view class="text-sl" style="color: #FD6416;">{{shopDet.shopScore}}</view>
|
|
<view class="flex flex-direction justify-around margin-left-sm">
|
|
<view>商家评分</view>
|
|
<view class="flex">
|
|
<u-icon v-for="ite in shopDet.shopScore1" :key='ite' color="#FCD202" name="star-fill"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-sub flex justify-around u-border-left padding-left">
|
|
<view class="flex flex-direction justify-around text-center">
|
|
<view>好评</view>
|
|
<view>{{EvaluateData.goodReputation}}</view>
|
|
</view>
|
|
<view class="flex flex-direction justify-around text-center">
|
|
<view>中评</view>
|
|
<view>{{EvaluateData.mediumReview}}</view>
|
|
</view>
|
|
<view class="flex flex-direction justify-around text-center">
|
|
<view>差评</view>
|
|
<view>{{EvaluateData.negativeComment}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="padding-tb-sm margin-lr">
|
|
<u-button hover-class='none' @click="sel(0)" type="primary" shape="circle" size="mini" :plain="false"
|
|
:custom-style="count==0?customStyle:customStyle1">全部评论</u-button>
|
|
<u-button hover-class='none' @click="sel(1)" type="primary" shape="circle" size="mini" :plain="false"
|
|
:custom-style="count==1?customStyle:customStyle1">
|
|
好评({{EvaluateData.goodReputation}})</u-button>
|
|
<u-button hover-class='none' @click="sel(2)" type="primary" shape="circle" size="mini" :plain="false"
|
|
:custom-style="count==2?customStyle:customStyle1">
|
|
中评({{EvaluateData.mediumReview}})</u-button>
|
|
<u-button hover-class='none' @click="sel(3)" type="primary" shape="circle" size="mini" :plain="false"
|
|
:custom-style="count==3?customStyle:customStyle1">
|
|
差评({{EvaluateData.negativeComment}})</u-button>
|
|
</view>
|
|
<view class="padding-tb-sm margin-lr u-border-bottom" v-for="(item, index) in EvaluateList" :key='index'>
|
|
<view class="flex justify-between align-center">
|
|
<view class="flex align-center">
|
|
<u-avatar :src="item.avatar" size="65"></u-avatar>
|
|
<view class=" margin-left-sm" style="line-height: 46upx;">{{item.userName?item.userName:'匿名'}}
|
|
</view>
|
|
<view class="flex margin-left-sm">
|
|
<u-icon v-for="ite in item.score" :key='ite' color="#FCD202" name="star-fill">
|
|
</u-icon>
|
|
</view>
|
|
</view>
|
|
<view>{{item.createTime}}</view>
|
|
</view>
|
|
<view style="display: flex;">
|
|
<view class="margin-top-sm" :style="!item.shopReplyMessage ? 'width: 90%;' : ''">{{item.evaluateMessage}}</view>
|
|
<view class="flex padding-top-sm margin-right" @tap="goShow(index)" v-if="!item.shopReplyMessage">
|
|
<image src="../../static/images/order/pinglun.png" style="width: 20px;height: 20px;"></image>
|
|
</view>
|
|
</view>
|
|
<view class="margin-top-sm" v-if="item.shopReplyMessage">
|
|
<view class="flex align-center">
|
|
<view class=" flex align-center text-df" style="color: #999999;">
|
|
<view class="text-df">商家回复:</view>{{item.shopReplyMessage}}
|
|
</view>
|
|
</view>
|
|
<!-- <view class="text-lg padding-left margin-left-xl">{{dataDet.shopReplyMessage}}</view> -->
|
|
</view>
|
|
<view class="flex" style="width: 100%;margin-top: 20rpx;flex-wrap: wrap;" v-if="item.pictures">
|
|
<image @click="lookImgs(ind,item.pictures)" :src="ite" v-for="(ite,ind) in item.pictures" :key="ind" style="width: 200rpx;height: 200rpx;margin-right: 10rpx;margin-bottom: 10rpx;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<empty v-if="EvaluateList.length<=0"></empty>
|
|
<!-- 评论弹框 -->
|
|
<u-popup v-model="show" mode="bottom" border-radius="14" :closeable="closeable">
|
|
<view>
|
|
<view class="margin padding-tb">
|
|
<u-input v-model="pinglun" type="textarea" height="200" placeholder="请填写回复的内容" maxlengt="200"
|
|
:clearable="false" style="background:#F5F5F5;" />
|
|
</view>
|
|
<view class="btn" @click="bindEvaluate()">提交</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import empty from '../../components/empty.vue'
|
|
export default {
|
|
components:{
|
|
empty
|
|
},
|
|
data() {
|
|
return {
|
|
pinglun: '',
|
|
count: 0,
|
|
show: false,
|
|
customStyle: {
|
|
color: '#333333',
|
|
background: '#FCD202',
|
|
marginRight: '20rpx',
|
|
border: 0
|
|
},
|
|
customStyle1: {
|
|
color: '#333333',
|
|
background: '#F2F2F2',
|
|
marginRight: '20rpx',
|
|
border: 0
|
|
},
|
|
cashDeposit: [],
|
|
EvaluateData: {},
|
|
EvaluateList: [],
|
|
grade: '',
|
|
page: 1,
|
|
size: 10,
|
|
isShow: false,
|
|
oneData: [],
|
|
titleData: [],
|
|
shopDet: {}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getshanghuinfo();
|
|
this.getList()
|
|
},
|
|
onReachBottom: function() {
|
|
this.page = this.page + 1;
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
//预览图片
|
|
lookImgs(index,imgs){
|
|
uni.previewImage({
|
|
current:index,
|
|
urls:imgs
|
|
})
|
|
},
|
|
goShow(index){
|
|
this.orderNumber = this.EvaluateList[index].orderNumber;
|
|
this.show = true;
|
|
},
|
|
getshanghuinfo() {
|
|
let data = {
|
|
shopId: uni.getStorageSync('shopId')
|
|
}
|
|
this.$Request.get("/app/shop/selectShopMessage", data).then(res => {
|
|
if (res.code == 0) {
|
|
this.shopDet = res.data;
|
|
this.shopDet.shopScore = parseFloat(this.shopDet.shopScore).toFixed(1)
|
|
this.shopDet.shopScore1 = Math.floor(this.shopDet.shopScore)
|
|
}
|
|
});
|
|
},
|
|
//评论
|
|
bindEvaluate() {
|
|
let data = {
|
|
shopReplyMessage: this.pinglun,
|
|
orderNumber: this.orderNumber
|
|
}
|
|
this.$Request.postT("/admin/order/shopReplyEvaluate", data).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code == 0) {
|
|
this.show = false
|
|
this.page = 1
|
|
this.getList()
|
|
}
|
|
});
|
|
},
|
|
sel(e) {
|
|
this.grade = e
|
|
this.count = e
|
|
this.page = 1
|
|
this.getList()
|
|
},
|
|
open(data) {
|
|
console.log(data);
|
|
this.oneData = data;
|
|
this.titleData = data.goods
|
|
this.isShow = true;
|
|
},
|
|
close() {
|
|
this.isShow = false;
|
|
},
|
|
// 获取评价列表
|
|
getList() {
|
|
let data = {
|
|
shopId: uni.getStorageSync('shopId'),
|
|
page: this.page,
|
|
limit: this.size,
|
|
grade: this.grade
|
|
}
|
|
this.$Request.get("/app/goods/selectEvaluateByShopId", data).then(res => {
|
|
if (res.code == 0 && res.data) {
|
|
this.EvaluateData = res.data
|
|
res.data.pageUtils.list.map(item=>{
|
|
if(item.pictures){
|
|
item.pictures = item.pictures.split(',')
|
|
}else{
|
|
item.pictures = []
|
|
}
|
|
})
|
|
if (this.page == 1) {
|
|
this.EvaluateList = res.data.pageUtils.list
|
|
} else {
|
|
this.EvaluateList = [...this.EvaluateList, ...res.data.pageUtils.list]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.box1 {
|
|
position: absolute;
|
|
background: #000000;
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.moudes {
|
|
width: 650rpx;
|
|
position: absolute;
|
|
background: #FFFFFF;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
height: 700rpx;
|
|
border-radius: 10rpx;
|
|
|
|
.bt {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pjImg {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.navBox {
|
|
.avtiter {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
margin-right: 15rpx
|
|
}
|
|
|
|
padding-left: 30rpx;
|
|
padding-top: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.userName {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.nrTxt {
|
|
display: inline-block;
|
|
width: 500rpx;
|
|
}
|
|
|
|
.navList {
|
|
text-align: center;
|
|
margin-top: 30rpx;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.xq {
|
|
font-size: 30rpx;
|
|
font-weight: bolder;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.contentTxt {
|
|
|
|
view {
|
|
margin-bottom: 30rpx;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.imgRsc {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.list_1 {
|
|
position: absolute;
|
|
}
|
|
|
|
.btn {
|
|
width: 690upx;
|
|
height: 88upx;
|
|
margin: 30upx auto;
|
|
background: #FCD202;
|
|
box-shadow: 0px 10upx 20upx 0upx #FFD9B3;
|
|
border-radius: 16upx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #000000;
|
|
|
|
}
|
|
|
|
.one {
|
|
background: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
|
|
.imgSrc {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
vertical-align: middle;
|
|
margin-right: 20rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.name {
|
|
margin-top: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.timer {
|
|
font-size: 20rpx;
|
|
color: #b3b3c4;
|
|
}
|
|
|
|
.contentTxt {
|
|
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
}
|
|
</style>
|