Files
2025-04-30 14:08:39 +08:00

796 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page" :style="themeColor">
<view class="flex benben-position-layout flex flex-wrap align-center evaluationManagement_flex_0"
:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
<view class='flex flex-wrap align-center justify-between flex-sub evaluationManagement_fd0_0'>
<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
<text class='fu-iconfont2 evaluationManagement_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
data-type="back" data-url="1">&#xE794;</text>
</view>
<view class='flex flex-wrap align-stretch justify-center flex-sub'>
<text class='evaluationManagement_fd0_0_c1_c0'>评价管理</text>
</view>
<view class='flex flex-wrap align-center evaluationManagement_fd0_0_c2'>
</view>
</view>
</view>
<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
<!---flex布局flex布局开始-->
<view class="flex benben-flex-layout flex-wrap align-center evaluationManagement_flex_1">
<view class='flex flex-wrap align-center flex-sub'>
<view class='flex flex-direction flex-wrap align-start'>
<text class='evaluationManagement_fd1_0_c0_c0'>{{shopInfo.score}}</text>
<text class='evaluationManagement_fd1_0_c0_c1'>商家评分 </text>
</view>
<view class='flex flex-direction flex-wrap align-start evaluationManagement_fd1_0_c1'>
<text class='evaluationManagement_fd1_0_c1_c0'>{{shopInfo.service_score}}</text>
<text class='evaluationManagement_fd1_0_c1_c1'>服务态度</text>
</view>
<view class='flex flex-direction flex-wrap align-start evaluationManagement_fd1_0_c2'>
<text class='evaluationManagement_fd1_0_c2_c0'>{{shopInfo.goods_score}}</text>
<text class='evaluationManagement_fd1_0_c2_c1'>菜品口味</text>
</view>
</view>
</view>
<!---flex布局flex布局结束-->
<!---flex布局flex布局开始-->
<view class="flex benben-flex-layout flex-wrap align-center evaluationManagement_flex_2">
<view class='flex flex-wrap align-center flex-sub evaluationManagement_fd2_0'>
<benben-select-diy ref="showSelectPopup1684218856132" class-name='flex flex-wrap flex'
:items.sync="evaluate_type" v-model="evaluate_id" default-type="value" default-label="name"
:allow-cancel='false' type="radio" :disabled='false' @change="getGoodsComment">
<template v-for='(item,key0) in evaluate_type'>
<view v-if="item.isSelected" class='flex justify-center flex evaluationManagement_fd2_0_c0_c0'
:key="key0" @tap="$refs.showSelectPopup1684218856132.tapHandle(key0)">
<text>{{item.name}}</text>
<text class="margin-left-sm">{{item.num}}</text>
</view>
<view v-else class='flex justify-center flex evaluationManagement_fd2_0_c0_c1' :key="key0"
@tap="$refs.showSelectPopup1684218856132.tapHandle(key0)">
<text>{{item.name}}</text>
<text class="margin-left-sm">{{item.num}}</text>
</view>
</template>
</benben-select-diy>
</view>
</view>
<!---flex布局flex布局结束-->
<!---flex布局flex布局开始-->
<view class="flex benben-flex-layout flex-wrap align-center">
<view class='flex flex-wrap align-center flex-sub evaluationManagement_fd3_0'>
</view>
</view>
<!---flex布局flex布局结束-->
<benben-position-popup ref="benbenPositionPopup1684407635889" :width="156" :height="162" :mask-hide='false'
popup-origin="left top">
<view
class='flex flex-direction align-center justify-center benben-flex-position-popup flex evaluationManagement_popup_4'>
<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
:data-url="`/pages/dpgl/appealPage/appealPage`">
<image class='evaluationManagement_positionPopup4_c0_c0' mode="aspectFit"
:src='STATIC_URL+"54.png"'></image>
<text class='evaluationManagement_positionPopup4_c0_c1'>申诉</text>
</view>
<view class='flex flex-wrap align-center evaluationManagement_positionPopup4_c1'>
</view>
<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
:data-url="`/pages/dpgl/appealPage/appealPage`">
<image class='evaluationManagement_positionPopup4_c2_c0' mode="aspectFit"
:src='STATIC_URL+"55.png"'></image>
<text class='evaluationManagement_positionPopup4_c2_c1'>回复</text>
</view>
</view>
</benben-position-popup>
<!---flex布局flex布局开始-->
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout evaluationManagement_flex_5">
<view v-for="(item,index) in listData" :key="index" class='flex flex-direction flex-wrap align-stretch flex-sub evaluationManagement_fd5_1'>
<view class='flex flex-wrap align-center justify-between'>
<view class='flex flex-wrap align-center'>
<view class='flex flex-wrap align-center'>
<image class='evaluationManagement_fd5_1_c0_c0_c0_c0' mode="aspectFill"
:src='item.avatar'></image>
</view>
<view class='flex flex-direction flex-wrap align-start'>
<text class='evaluationManagement_fd5_1_c0_c0_c1_c0'>{{item.user_nickname}}</text>
<text class='evaluationManagement_fd5_1_c0_c0_c1_c1'>{{item.create_time}}</text>
</view>
</view>
<view class='flex flex-wrap align-center evaluationManagement_fd5_1_c0_c1'
@tap.stop="shopChoose(item,index)">
<image class='evaluationManagement_fd5_1_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"51.png"'>
</image>
</view>
</view>
<view class='flex flex-wrap align-center'>
<text class='evaluationManagement_fd5_1_c1_c0'>{{item.content}}</text>
</view>
<view class='flex flex-wrap align-center'>
<image @tap="handlePreviewImages(item.images,idsindex)" v-for="(ids,idsindex) in item.images " :key="idsindex" class='evaluationManagement_fd5_1_c2_c0' mode="aspectFill" :src='ids'></image>
</view>
<view class='flex flex-direction-row-reverse flex-wrap align-center evaluationManagement_fd5_0_c3' v-if="item.is_reply==0">
<image class='evaluationManagement_fd5_0_c3_c0' mode="aspectFit" :src='STATIC_URL+"53.png"'></image>
</view >
<view v-else class='flex flex-wrap align-center evaluationManagement_fd5_1_c3'>
<text class='evaluationManagement_fd5_1_c3_c0'>已回复</text>
<view class='evaluationManagement_fd5_1_c3_c1'>{{item.reply_content}}</view>
</view>
<!-- -->
<view class="shop-reply" v-if="item.checked">
<view class="shop-warp">
<view @tap="appealTap(item,index)">
<image class='evaluationManagement_positionPopup4_c0_c0' mode="aspectFit"
:src='STATIC_URL+"54.png"'></image>
<text>申诉</text>
</view>
<text class="lines" v-if="item.is_reply==0"></text>
<view v-if="item.is_reply==0" @tap="replyTap(item,index)">
<image class='evaluationManagement_positionPopup4_c2_c0' mode="aspectFit"
:src='STATIC_URL+"55.png"'></image>
<text>回复</text>
</view>
</view>
</view>
</view>
</view>
<!---flex布局flex布局结束-->
<fu-popup borderRadius="0" v-model="isLanguageShow" mode="bottom">
<view class="zhe-footer">
<input placeholder="回复用户:请输入内容" v-model="content" focus="true"/>
<view class="sure-btn" @tap="sureBtnTap">确定</view>
</view>
</fu-popup>
<!-- 订单列表结束 -->
<fu-empty-ui v-if="listData.length==0"></fu-empty-ui>
<!-- <view class="loading-wapper" v-if="loadedAll && !noListData && listData.length != 0">
<text class="loading-txt">已加载全部明细</text>
</view> -->
<view class="loading-wapper" v-if="loadedAll && !noListData && listData.length != 0">
<text class="loading-txt">已加载全部数据</text>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
isLanguageShow:false,
"evaluate_type": [{
"name": "全部",
"value": "1",
"image": "",
num:""
}, {
"name": "好评",
"value": "2",
"image": "",
num:""
}, {
"name": "有图",
"value": "3",
"image": "",
num:""
}, {
"name": "差评",
"value": "4",
"image": "",
num:""
}, {
"name": "中评",
"value": "5",
"image": "",
num:""
}],
"evaluate_id": "1",
shopInfo: '',
page: 1, // 分页
allowLoadMore: true, // 允许加载更多
loadedAll: false, // 已加载全部数据
noListData: false, // 没有列表数据
listData: [],
content:"",
comment_id:'',
comment_index:''
};
},
computed: {
themeColor() {
return this.$store.getters.themeColor
},
},
watch: {},
onLoad(options) {
this.postGetShopInfo();
},
onPullDownRefresh() {
},
onReachBottom(e) {
this.getCommentList();
},
methods: {
//获取店铺信息
postGetShopInfo() {
this.$api.post(global.apiUrls.postGetShopInfo).then(res => {
if (res.data.code == 1) {
this.shopInfo = res.data.data
this.getCommentList();
this.getCommentNum();
}
})
},
//获取评论数量
getCommentNum() {
this.$api.post(global.apiUrls.getCommentNum,{
store_id:this.shopInfo.aid
}).then(res => {
console.log(res)
if (res.data.code == 1) {
this.evaluate_type[0].num = res.data.data.all
this.evaluate_type[1].num = res.data.data.good
this.evaluate_type[2].num = res.data.data.img
this.evaluate_type[3].num = res.data.data.bad
this.evaluate_type[4].num = res.data.data.center
}
})
},
//获取评价列表
getCommentList() {
if (!this.allowLoadMore || this.loadedAll || this.noListData) return;
this.allowLoadMore = false;
this.$api.post(global.apiUrls.getCommentList, {
type: this.evaluate_id,
store_id:this.shopInfo.aid
}).then(res => {
if (res.data.code == 1) {
let tempLists = res.data.data.data,
totalPage = res.data.data.last_page,
listData = this.listData;
this.listData.push(...tempLists);
this.listData.forEach(item => {
item.checkedre = 0
})
console.log(this.listData)
this.allowLoadMore = true;
if (this.page >= totalPage) this.loadedAll = true;
if (this.page == 1 && this.listData.length == 0) this.noListData = true;
this.page += 1;
} else {
this.allowLoadMore = true;
}
}).catch(err => {
this.allowLoadMore = true;
})
},
getGoodsComment(e) {
console.log(e)
this.evaluate_id = e.label
this.page = 1;
this.allowLoadMore = true;
this.loadedAll = false;
this.noListData = false;
this.listData = [];
this.getCommentList();
},
shopChoose(item,index){
let list = this.listData;
this.listData[index].checked=!this.listData[index].checked;
list = list.map((item,i) => {
if(i==index){
item.checked = item.checked;
}else{
item.checked = false;
}
item.checked = item.checked;
return item;
})
this.listData = list
},
//申诉
appealTap(item,index){
uni.navigateTo({
url:'/pages/dpgl/appealPage/appealPage?comment_id=' + item.order_sn + '&index=' + index
})
},
//回复
replyTap(item,index){
this.comment_id=item.order_sn;
this.comment_index=index;
this.isLanguageShow=true
},
sureBtnTap(){
if(!this.content) return this.$message.info('请输入内容')
this.$api.post(global.apiUrls.appealAddReply,{
order_sn:this.comment_id,
reply_content:this.content
}).then(res=>{
this.isLanguageShow=false
this.$message.info(res.data.msg)
if(res.data.code==1){
let list = this.listData;
this.listData[this.comment_index].is_reply=1;
list = list.map((item,i) => {
if(i==this.comment_index){
item.is_reply = 1;
item.reply_content=this.content
}else{
item.checkedre = 0;
}
item.checkedre = item.checkedre;
return item;
})
this.listData = list
}
})
},
handlePreviewImages(img, index) {
console.log(img)
// return
// img = img.indexOf("http://") != -1 || img.indexOf("https://") != -1 ? img : global.imgBaseUrl + img;
uni.previewImage({
current: index,
urls: img
})
},
}
};
</script>
<style lang="scss" scoped>
.page {
width: 100vw;
overflow-x: hidden;
min-height: calc(100vh - var(--window-bottom));
background: #F8F8F8;
background-size: 100% auto !important;
}
.loading-wapper {
width: auto;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20upx;
text {
font-size: 24upx;
color: #999999;
}
}
.zhe-footer{
padding: 17rpx 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
input{
width: 528rpx;
height: 66rpx;
padding-left: 29rpx;
background: #F8F8F8;
border-radius: 35rpx;
font-size: 28rpx;
}
.sure-btn{
width: 140rpx;
height: 66rpx;
text-align: center;
line-height: 66rpx;
color: #fff;
background: #FF9300;
opacity: 1;
border-radius: 33rpx;
}
}
.shop-reply{
position: absolute;
right: 0;
top: 62rpx;
z-index: 8888;
.shop-warp{
width: 136rpx;
// height: 170rpx;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
right: 0;
top: 15rpx;
z-index: 8888;
background: #fff;
box-shadow: 0px 3px 24px 1px rgba(153,153,153,0.16);
view{
height: 85rpx;
display: flex;
align-items: center;
justify-content: center;
}
.lines{
width: 104rpx;
border-bottom: 1rpx solid #FFFFFF;
opacity: 0.12;
}
}
}
.evaluationManagement_flex_0 {
background: rgba(255, 147, 0, 1);
width: 750rpx;
height: 88rpx;
overflow: hidden;
z-index: 10;
top: 0rpx;
background-size: 100% auto !important;
}
.evaluationManagement_fd0_0_c2 {
width: 32rpx;
height: 32rpx;
}
.evaluationManagement_fd0_0_c1_c0 {
font-size: 36rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 88rpx;
}
.evaluationManagement_fd0_0_c0_c0 {
font-size: 32rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 88rpx;
}
.evaluationManagement_fd0_0 {
margin: 0rpx 32rpx 0rpx 32rpx;
}
.evaluationManagement_flex_1 {
background: rgba(255, 255, 255, 1);
padding: 32rpx 32rpx 0rpx 32rpx;
background-size: 100% auto !important;
}
.evaluationManagement_fd1_0_c2_c1 {
color: #333333;
font-size: 24rpx;
font-weight: 400;
line-height: 30rpx;
margin: 3rpx 0rpx 0rpx 0rpx;
}
.evaluationManagement_fd1_0_c2_c0 {
color: #FF6842;
font-size: 32rpx;
font-weight: 500;
line-height: 40rpx;
}
.evaluationManagement_fd1_0_c2 {
margin: 0rpx 0rpx 0rpx 118rpx;
}
.evaluationManagement_fd1_0_c1_c1 {
color: #333333;
font-size: 24rpx;
font-weight: 400;
line-height: 30rpx;
margin: 3rpx 0rpx 0rpx 0rpx;
}
.evaluationManagement_fd1_0_c1_c0 {
color: #FF6842;
font-size: 32rpx;
font-weight: 500;
line-height: 40rpx;
}
.evaluationManagement_fd1_0_c1 {
margin: 0rpx 0rpx 0rpx 124rpx;
}
.evaluationManagement_fd1_0_c0_c1 {
color: #333333;
font-size: 24rpx;
font-weight: 400;
line-height: 30rpx;
margin: 3rpx 0rpx 0rpx 0rpx;
}
.evaluationManagement_fd1_0_c0_c0 {
color: #FF6842;
font-size: 32rpx;
font-weight: 500;
line-height: 40rpx;
}
.evaluationManagement_flex_2 {
background: rgba(255, 255, 255, 1);
background-size: 100% auto !important;
}
.evaluationManagement_fd2_0_c0_c1 {
background: rgba(246, 247, 249, 1);
width: 160rpx;
height: 56rpx;
margin: 8rpx 10rpx 8rpx 10rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
background-size: 100% auto !important;
font-size: 24rpx;
line-height: 56rpx;
color: rgba(51, 51, 51, 1);
}
.evaluationManagement_fd2_0_c0_c0 {
background: rgba(255, 147, 0, 1);
width: 160rpx;
height: 56rpx;
margin: 8rpx 10rpx 8rpx 10rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
background-size: 100% auto !important;
color: rgba(255, 255, 255, 1);
font-size: 24rpx;
line-height: 56rpx;
}
.evaluationManagement_fd2_0 {
margin: 0rpx 11rpx 0rpx 18rpx;
padding: 24rpx 0rpx 32rpx 0rpx;
}
.evaluationManagement_fd3_0 {
background: rgba(248, 248, 248, 1);
height: 20rpx;
background-size: 100% auto !important;
}
.evaluationManagement_popup_4 {
background: rgba(255, 255, 255, 1);
box-shadow: 0rpx 4rpx 24rpx rgba(50, 50, 51, .12);
border-radius: 11rpx 11rpx 11rpx 11rpx;
width: 156rpx;
height: 162rpx;
background-size: 100% auto !important;
}
.evaluationManagement_positionPopup4_c2_c1 {
color: #333333;
font-size: 24rpx;
font-weight: 500;
line-height: 24rpx;
}
.evaluationManagement_positionPopup4_c2_c0 {
width: 32rpx;
height: 32rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 11rpx 0rpx 0rpx;
}
.evaluationManagement_positionPopup4_c1 {
background: rgba(238, 238, 238, 1);
width: 116rpx;
height: 1rpx;
background-size: 100% auto !important;
margin: 24rpx 0rpx 24rpx 0rpx;
}
.evaluationManagement_positionPopup4_c0_c1 {
color: #333333;
font-size: 24rpx;
font-weight: 500;
line-height: 24rpx;
}
.evaluationManagement_positionPopup4_c0_c0 {
width: 32rpx;
height: 32rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 11rpx 0rpx 0rpx;
}
.evaluationManagement_flex_5 {
background: rgba(255, 255, 255, 1);
padding: 0rpx 32rpx 0rpx 32rpx;
background-size: 100% auto !important;
}
.evaluationManagement_fd5_1_c3_c1 {
width: 480rpx;
color: #999999;
font-size: 24rpx;
font-weight: 500;
text-align: left;
word-break:break-all;
overflow-wrap: break-word;
word-wrap: break-word;
}
.evaluationManagement_fd5_1_c3_c0 {
color: #999999;
font-size: 24rpx;
font-weight: 500;
line-height: 80rpx;
}
.evaluationManagement_fd5_1_c3 {
background: rgba(246, 247, 249, 1);
border-radius: 8rpx 8rpx 8rpx 8rpx;
background-size: 100% auto !important;
// height: 80rpx;
margin: 24rpx 0rpx 0rpx 0rpx;
padding: 0rpx 0rpx 0rpx 24rpx;
}
.evaluationManagement_fd5_1_c2_c2 {
width: 220rpx;
height: 220rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 4rpx 0rpx 4rpx;
}
.evaluationManagement_fd5_1_c2_c1 {
width: 220rpx;
height: 220rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 4rpx 0rpx 4rpx;
}
.evaluationManagement_fd5_1_c2_c0 {
width: 220rpx;
height: 220rpx;
border-radius: 8rpx;
margin: 0rpx 4rpx 12rpx 4rpx;
}
.evaluationManagement_fd5_1_c1_c0 {
color: #333333;
font-size: 28rpx;
font-weight: 400;
line-height: 40rpx;
margin: 24rpx 0rpx 24rpx 0rpx;
}
.evaluationManagement_fd5_1_c0_c1_c0 {
width: 34rpx;
height: 6rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.evaluationManagement_fd5_1_c0_c1 {
width: 40rpx;
height: 10rpx;
}
.evaluationManagement_fd5_1_c0_c0_c1_c1 {
color: #999999;
font-size: 22rpx;
font-weight: 400;
line-height: 25rpx;
}
.evaluationManagement_fd5_1_c0_c0_c1_c0 {
color: #333333;
font-size: 28rpx;
font-weight: 500;
line-height: 30rpx;
}
.evaluationManagement_fd5_1_c0_c0_c0_c0 {
width: 56rpx;
height: 56rpx;
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin: 0rpx 16rpx 0rpx 0rpx;
}
.evaluationManagement_fd5_1 {
border-bottom: 1px solid #eee;
padding: 40rpx 0rpx 24rpx 0rpx;
position: relative;
}
.evaluationManagement_fd5_0_c3_c0 {
width: 40rpx;
height: 40rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 24rpx 0rpx 0rpx;
}
.evaluationManagement_fd5_0_c3 {
background: rgba(246, 247, 249, 1);
border-radius: 8rpx 8rpx 8rpx 8rpx;
background-size: 100% auto !important;
height: 80rpx;
margin: 24rpx 0rpx 0rpx 0rpx;
}
.evaluationManagement_fd5_0_c2_c2 {
width: 220rpx;
height: 220rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 4rpx 0rpx 4rpx;
}
.evaluationManagement_fd5_0_c2_c1 {
width: 220rpx;
height: 220rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 4rpx 0rpx 4rpx;
}
.evaluationManagement_fd5_0_c2_c0 {
width: 220rpx;
height: 220rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 4rpx 0rpx 4rpx;
}
.evaluationManagement_fd5_0_c1_c0 {
color: #333333;
font-size: 28rpx;
font-weight: 400;
line-height: 40rpx;
margin: 24rpx 0rpx 24rpx 0rpx;
}
.evaluationManagement_fd5_0_c0_c1_c0 {
width: 34rpx;
height: 6rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.evaluationManagement_fd5_0_c0_c1 {
width: 40rpx;
height: 10rpx;
}
.evaluationManagement_fd5_0_c0_c0_c1_c1 {
color: #999999;
font-size: 22rpx;
font-weight: 400;
line-height: 25rpx;
}
.evaluationManagement_fd5_0_c0_c0_c1_c0 {
color: #333333;
font-size: 28rpx;
font-weight: 500;
line-height: 30rpx;
}
.evaluationManagement_fd5_0_c0_c0_c0_c0 {
width: 56rpx;
height: 56rpx;
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin: 0rpx 16rpx 0rpx 0rpx;
}
.evaluationManagement_fd5_0 {
border-bottom: 1px solid #eee;
padding: 40rpx 0rpx 24rpx 0rpx;
position: relative;
}
</style>