695 lines
18 KiB
Vue
695 lines
18 KiB
Vue
<template>
|
|
<scroll-view scrol-y class="scrllView">
|
|
<div class="topEvaluation">
|
|
<div class="evaluationMark">
|
|
{{ storeMsg.MERCHANTS_SCORE || "" }}
|
|
</div>
|
|
<div class="evaluationRight">
|
|
<div class="markTitle">商家评分</div>
|
|
<!-- -->
|
|
<UniRate :value="storeMsg.MERCHANTS_SCORE" size="14" activeColor="#FFD401" :allowHalf="true" color="#D9D9D9"
|
|
void-color="#eee" void-icon="star" readonly />
|
|
</div>
|
|
|
|
<div class="evaluationRight" style="margin-left: 60rpx;">
|
|
<div class="markTitle">全部评价</div>
|
|
<div class="evaluationValue">{{ storeMsg.COMMENT_COUNT || '-' }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="evaluationList">
|
|
<div class="evaluationTitle">
|
|
<!-- 全部评价<span class="sumText">({{ storeMsg.COMMENT_COUNT || 0 }}条)</span> -->
|
|
</div>
|
|
|
|
<div class="evaluationItem" v-for="(item, index) in rateList" :key="index">
|
|
<div class="itemTop">
|
|
<div class="headImgBox">
|
|
<image class="headImg" mode="aspectFit" lazy-load="true" :src="item.HEADIMAGEURL || 'https://eshangtech.com/ShopICO/noName.png'
|
|
"></image>
|
|
</div>
|
|
<div class="userDetailBox">
|
|
<div class="userTitle">
|
|
{{ item.ISANONYMOUS == 0 ? item.MEMBERSHIP_NAME : "匿名用户" }}
|
|
<span v-if="item.ISANONYMOUS == 0 && item.MEMBERSHIP_LEVEL > 100" class="vip-level">{{
|
|
item.MEMBERSHIP_LEVEL_TEXT }}</span>
|
|
</div>
|
|
<div class="timeText">{{ item.CREATE_DATE || "" }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="itemRate">
|
|
<UniRate :value="item.COMMENT_SCORE" size="12" allowHalf color="#ececec" void-color="#eee" void-icon="star"
|
|
readonly />
|
|
<span class="rateText">{{ item.rateText }}</span>
|
|
</div>
|
|
|
|
<div class="evaluationContent">{{ item.COMMENT_CONTENT || "" }}</div>
|
|
|
|
<!-- 附件图片列表 -->
|
|
<div class="evaluationLists" v-if="item.IMAGELIST && item.IMAGELIST.length > 0">
|
|
<div class="evaluationItems" v-for="(subItem, subIndex) in item.IMAGELIST" :key="subIndex">
|
|
<image @click="handlePreviewImage(subIndex, item.IMAGELIST)" class="evaluationImg"
|
|
:src="subItem.IMAGE_URL" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="false">
|
|
<div class="rate-top">
|
|
<div class="rate-top-left">
|
|
<span class="rate-code">{{ storeMsg.MERCHANTS_SCORE }}</span>
|
|
<div>
|
|
<div class="rate-text">商家评分</div>
|
|
|
|
<UniRate v-model="storeMsg.MERCHANTS_SCORE" size="12" allowHalf color="#ececec" void-color="#eee"
|
|
void-icon="star" readonly />
|
|
</div>
|
|
</div>
|
|
<div class="rate-top-right">
|
|
<div class="reate-user-images">
|
|
<image v-for="(item, i) in rateMsg.usersImages" :src="item" :key="i"></image>
|
|
</div>
|
|
<div class="rate-text">{{ storeMsg.COMMENT_COUNT || 0 }}评价</div>
|
|
</div>
|
|
</div>
|
|
<hr class="gray-block" />
|
|
<div class="rate-body">
|
|
<div class="rate-screen">
|
|
<block v-for="(item, i) in rateScreen" :key="i">
|
|
<div class="screen-tag" v-show="item.COUNT > 0" :class="{ active: item.isCheck, gray: item.noGood }"
|
|
@click="checkTag(i)">
|
|
{{ item.TAGNAME + " " + item.COUNT }}
|
|
</div>
|
|
</block>
|
|
</div>
|
|
<div class="rate-list" v-show="rateList.length > 0">
|
|
<div class="rate-card" v-for="(item, o) in rateList" :key="o">
|
|
<div class="rate-card-top">
|
|
<image class="rate-user-photo" mode="aspectFit" lazy-load="true" :src="item.HEADIMAGEURL ||
|
|
'https://eshangtech.com/ShopICO/noName.png'
|
|
"></image>
|
|
|
|
<div class="top-card-center">
|
|
<div class="rate-text" v-if="item.ISANONYMOUS == 0">
|
|
{{ item.MEMBERSHIP_NAME }}
|
|
<span v-if="item.MEMBERSHIP_LEVEL > 100" class="vip-level">{{
|
|
item.MEMBERSHIP_LEVEL_TEXT
|
|
}}</span>
|
|
</div>
|
|
<div class="rate-text" v-else>匿名用户</div>
|
|
<div style="display: flex; align-items: center">
|
|
<van-rate :value="item.COMMENT_SCORE" size="12" allow-half="true" :color="item.starColor"
|
|
void-color="#eee" void-icon="star" readonly>
|
|
</van-rate>
|
|
<span style="font-size: 24rpx" :style="{ color: item.starColor }">{{ item.rateText }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="rate-date">{{ item.CREATE_DATE }}</div>
|
|
</div>
|
|
<div class="rate-content">
|
|
<div>
|
|
<span class="rate-tag" v-if="item.SALEBILL_ID != 0">消费后点评</span>
|
|
</div>
|
|
<div class="">{{ item.COMMENT_CONTENT }}</div>
|
|
<div class="rate-photo" v-if="item.IMAGELIST.length > 0">
|
|
<image mode="aspectFit" lazy-load="true" :src="img.IMAGE_URL" v-for="(img, i) in item.IMAGELIST"
|
|
:key="i" @click="seePhoto(img.IMAGE_URL, item.IMAGELIST)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<block v-if="rateList.length === 0">
|
|
<no-data :text="'评论空空如也'" :isShow="rateList.length" />
|
|
</block>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
|
|
import { mapGetters, mapMutations } from "vuex";
|
|
import noData from "../../../../components/noData.vue";
|
|
export default {
|
|
props: ["merchantsId", "storeMsg"],
|
|
data() {
|
|
return {
|
|
rateScreen: [],
|
|
rateList: [],
|
|
rateMsg: {
|
|
pageIndex: 1,
|
|
tagType: [],
|
|
keyWord: [],
|
|
TotalCount: 0,
|
|
usersImages: [],
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
},
|
|
components: {
|
|
uniRate,
|
|
noData,
|
|
},
|
|
methods: {
|
|
...mapMutations(["setIsLoading"]),
|
|
// 预览图片
|
|
handlePreviewImage(current, picList) {
|
|
let list = [];
|
|
picList.forEach((item) => {
|
|
list.push(item.IMAGE_URL);
|
|
});
|
|
console.log("current", current);
|
|
console.log("list", list);
|
|
|
|
uni.previewImage({
|
|
urls: list,
|
|
current: current,
|
|
// longPressActions: {
|
|
// itemList: picList,
|
|
// success: function (data) {},
|
|
// fail: function (err) {},
|
|
// },
|
|
});
|
|
},
|
|
starColor(num) {
|
|
num = Math.ceil(num);
|
|
let colors = ["#f5bd50", "#f1b84d", "#f7a750", "#f59b3a", "#f28c44"];
|
|
return colors[num - 1];
|
|
},
|
|
rateText(num) {
|
|
num = Math.ceil(num);
|
|
let text = ["非常差", "差", "一般", "满意", "超满意,无可挑剔"];
|
|
return text[num - 1];
|
|
},
|
|
checkTag(index) {
|
|
let _this = this;
|
|
let u = _this.rateScreen[index];
|
|
_this.rateScreen.map((n) => {
|
|
if (n.ID === u.ID) {
|
|
u.isCheck = true;
|
|
} else {
|
|
n.isCheck = false;
|
|
}
|
|
});
|
|
if (!u.ISKEYWORD) {
|
|
if (this.rateMsg.tagType !== u.ID) {
|
|
this.rateMsg.tagType = u.ID;
|
|
}
|
|
} else {
|
|
if (this.rateMsg.keyWord !== u.TAGNAME) {
|
|
this.rateMsg.keyWord = u.TAGNAME;
|
|
}
|
|
}
|
|
|
|
_this.setIsLoading(true);
|
|
this.rateMsg.pageIndex = 1;
|
|
// _this.rateList = []
|
|
this.getRate({ needClearList: true });
|
|
},
|
|
seePhoto(item, list) {
|
|
let u = [];
|
|
|
|
list.map((n) => {
|
|
u.push(n.IMAGE_URL);
|
|
});
|
|
mpvue.previewImage({
|
|
current: item, // 当前显示图片的http链接
|
|
urls: u, // 需要预览的图片http链接列表
|
|
});
|
|
},
|
|
getScreen() {
|
|
let _this = this;
|
|
this.$api
|
|
.getCoop({
|
|
action_type: "GetCommentTag",
|
|
merchantsId: this.storeMsg.MERCHANTS_ID || this.merchantsId,
|
|
})
|
|
.then((res) => {
|
|
_this.rateScreen = res.Data.List;
|
|
console.log("rateScreen", _this.rateScreen);
|
|
res.Data.List.map((n) => {
|
|
n.isCheck = false;
|
|
n.noGood = !!(
|
|
n.TAGNAME.indexOf("不") > -1 || n.TAGNAME.indexOf("差") > -1
|
|
);
|
|
});
|
|
_this.checkTag(0);
|
|
});
|
|
},
|
|
getRate(obj) {
|
|
let _this = this;
|
|
let images = []; // 评论列表加载的用户头像图片 少于5头像则拼接
|
|
this.$api
|
|
.getCoop({
|
|
action_type: "GetCommentList",
|
|
merchantsId: this.storeMsg.MERCHANTS_ID || this.merchantsId,
|
|
tagType: this.rateMsg.tagType.toString(),
|
|
keyWord: this.rateMsg.keyWord.toString(),
|
|
pageSize: 9999,
|
|
pageIndex: this.rateMsg.pageIndex,
|
|
})
|
|
.then((res) => {
|
|
if (obj && obj.needClearList) {
|
|
_this.rateList = res.Data.List;
|
|
} else {
|
|
_this.rateList = _this.rateList.concat(res.Data.List);
|
|
}
|
|
if (_this.rateMsg.usersImages.length < 5) {
|
|
// 评论列表加载的用户头像图片 少于10条则拼接
|
|
_this.rateList.map((n) => {
|
|
if (
|
|
n.HEADIMAGEURL !== "" &&
|
|
images.indexOf(n.HEADIMAGEURL) === -1 &&
|
|
images.length < 5
|
|
) {
|
|
images.push(
|
|
n.HEADIMAGEURL || "https://eshangtech.com/ShopICO/noName.png"
|
|
);
|
|
}
|
|
});
|
|
_this.rateMsg.usersImages = images;
|
|
}
|
|
_this.rateMsg.TotalCount = res.Data.TotalCount;
|
|
res.Data.List.map((n) => {
|
|
n.rateText = _this.rateText(n.COMMENT_SCORE);
|
|
n.starColor = _this.starColor(n.COMMENT_SCORE);
|
|
});
|
|
_this.setIsLoading(false);
|
|
console.log("_this.rateList", _this.rateList);
|
|
});
|
|
},
|
|
loading(op) {
|
|
this.setIsLoading(true);
|
|
this.rateScreen = [];
|
|
this.rateList = [];
|
|
this.rateMsg.usersImages = [];
|
|
|
|
this.getScreen();
|
|
},
|
|
loadMore() {
|
|
if (this.rateMsg.TotalCount > this.rateList.length) {
|
|
this.rateMsg.pageIndex += 1;
|
|
this.setIsLoading(true);
|
|
this.getRate();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.topEvaluation {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16rpx 32rpx 24rpx;
|
|
background-color: #fff;
|
|
|
|
.evaluationMark {
|
|
font-family: "Microsoft YaHei";
|
|
font-weight: 400;
|
|
font-size: 58rpx;
|
|
color: #FF6200;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin-right: 8rpx;
|
|
// font-family: "DINAlternate";
|
|
// font-weight: bold;
|
|
// font-size: 72rpx;
|
|
// color: #ba922f;
|
|
// line-height: 84rpx;
|
|
// text-align: justify;
|
|
// font-style: normal;
|
|
// margin-right: 8rpx;
|
|
}
|
|
|
|
.evaluationRight {
|
|
.markTitle {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.evaluationValue {
|
|
font-family: "Microsoft YaHei";
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scrllView::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
}
|
|
|
|
.evaluationList {
|
|
margin-top: 10rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 40rpx 32rpx;
|
|
background-color: #fff;
|
|
|
|
.evaluationTitle {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 24rpx;
|
|
|
|
.sumText {
|
|
margin-left: 8rpx;
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #716f69;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.evaluationItem {
|
|
width: 100%;
|
|
margin-bottom: 48rpx;
|
|
|
|
.itemTop {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 16rpx;
|
|
|
|
.headImgBox {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.headImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.userDetailBox {
|
|
margin-left: 16rpx;
|
|
|
|
.userTitle {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8rpx;
|
|
|
|
.vip-level {
|
|
font-size: 20rpx;
|
|
background: #333;
|
|
color: #eedcb6;
|
|
padding: 4rpx 6rpx;
|
|
margin-left: 16rpx;
|
|
border-radius: 4rpx;
|
|
display: flex;
|
|
align-items: ceneter;
|
|
position: relative;
|
|
|
|
// padding-left 24rpx
|
|
.vip-level:before {
|
|
content: "";
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background: url("https://eshangtech.com/ShopICO/vip-ico.png") no-repeat center; // eshangtech.com/ShopICO/vip-ico.png) no-repeat center
|
|
background-size: contain;
|
|
position: absolute;
|
|
left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.timeText {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itemRate {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.rateText {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
|
|
.evaluationContent {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 5;
|
|
/* 限制在5行内 */
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.evaluationLists {
|
|
margin-top: 16rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.evaluationItems {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 12rpx;
|
|
margin-right: 16rpx;
|
|
overflow: hidden;
|
|
|
|
.evaluationImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rate-top {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 24rpx 36rpx;
|
|
|
|
.rate-top-left,
|
|
.rate-top-right {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.rate-top-right:before {
|
|
content: " ";
|
|
height: 60rpx;
|
|
width: 1rpx;
|
|
background: #eeeeee;
|
|
display: block;
|
|
position: absolute;
|
|
left: 1rpx;
|
|
}
|
|
|
|
.rate-code {
|
|
color: #ed6143;
|
|
font-size: 60rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.rate-text {
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.reate-user-images {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 8rpx;
|
|
|
|
image {
|
|
height: 50rpx;
|
|
width: 50rpx;
|
|
border-radius: 25rpx;
|
|
margin-left: -20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gray-block {
|
|
background: #f5f5f5;
|
|
height: 24rpx;
|
|
}
|
|
|
|
.rate-body {
|
|
padding-bottom: 90rpx;
|
|
|
|
.rate-screen {
|
|
display: flex;
|
|
padding: 24rpx 24rpx;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
.screen-tag {
|
|
text-align: center;
|
|
width: 156rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
border-radius: 6rpx;
|
|
margin: 12rpx 9rpx;
|
|
font-size: 24rpx;
|
|
color: #ba9b6f;
|
|
background: #f8e8d8;
|
|
|
|
&.gray {
|
|
background-color: #f5f5f5;
|
|
color: #a5a5a5;
|
|
}
|
|
|
|
&.active {
|
|
background-color: #ba9b6f;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rate-list {
|
|
padding-left: 32rpx;
|
|
padding-bottom: 80rpx;
|
|
}
|
|
|
|
.rate-card {
|
|
border-top: 1rpx solid #eee;
|
|
padding: 24rpx 24rpx 24rpx 0;
|
|
font-size: 28rpx;
|
|
|
|
.rate-card-top {
|
|
display: flex;
|
|
align-items: top;
|
|
}
|
|
|
|
.rate-user-photo {
|
|
height: 80rpx;
|
|
width: 80rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.top-card-center {
|
|
flex: 6;
|
|
padding-left: 16rpx;
|
|
}
|
|
|
|
.rate-text {
|
|
color: #666666;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.vip-level {
|
|
font-size: 20rpx;
|
|
background: #333;
|
|
color: #eedcb6;
|
|
padding: 4rpx 6rpx;
|
|
margin-left: 16rpx;
|
|
border-radius: 4rpx;
|
|
display: flex;
|
|
align-items: ceneter;
|
|
position: relative;
|
|
|
|
// padding-left 24rpx
|
|
.vip-level:before {
|
|
content: "";
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background: url("https://eshangtech.com/ShopICO/vip-ico.png") no-repeat center; // eshangtech.com/ShopICO/vip-ico.png) no-repeat center
|
|
background-size: contain;
|
|
position: absolute;
|
|
left: 4rpx;
|
|
}
|
|
}
|
|
|
|
.rate-date {
|
|
flex: 4;
|
|
color: #989898;
|
|
font-size: 22rpx;
|
|
text-align: right;
|
|
}
|
|
|
|
.rate-content {
|
|
padding-left: 96rpx;
|
|
font-size: 26rpx;
|
|
// padding-top 16rpx
|
|
}
|
|
|
|
.rate-tag {
|
|
border-radius: 4rpx;
|
|
border: 1rpx solid #cf855e;
|
|
color: #cf855e;
|
|
padding: 4rpx 6rpx;
|
|
display: inline-block;
|
|
font-size: 20rpx;
|
|
margin: 0 16rpx 8rpx 0;
|
|
}
|
|
|
|
.rate-photo {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
image {
|
|
height: 120rpx;
|
|
width: 120rpx;
|
|
border-radius: 4rpx;
|
|
margin: 24rpx 12rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|