131 lines
2.9 KiB
Vue
131 lines
2.9 KiB
Vue
<template>
|
|
<view>
|
|
<view class="exaluate-member-view">
|
|
<view class="member-view">
|
|
<view class="member-img">
|
|
<u-image width="82rpx" style="border: 1px solid #ededed" height="82rpx" shape="circle" :src="comment.memberProfile || '/static/missing-face.png'"></u-image>
|
|
</view>
|
|
<view class="member-info">
|
|
<view class="memName">{{ comment.memberName }}</view>
|
|
<view class="creName">{{ comment.createTime }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-view">
|
|
<view class="goods-title">商品评价: {{ gradeList[comment.grade] }}</view>
|
|
<view class="goods-subtitle">
|
|
{{ comment.content }}
|
|
</view>
|
|
<!-- 如果有图片则会循环显示评价的图片 -->
|
|
<view class="goods-imgs-view" v-if="comment.images != null && comment.images.length != 0">
|
|
<view class="img-view" v-for="(img, imgIndex) in comment.images.split(',')" :key="imgIndex">
|
|
<u-image @click.native="preview(comment.images.split(','),imgIndex)" width="160rpx" height="160rpx" :src="img"></u-image>
|
|
</view>
|
|
</view>
|
|
<view class="goods-name">
|
|
{{ comment.goodsName }}
|
|
</view>
|
|
<view class="goods-subtitle"></view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
comment: {}, //评论信息
|
|
gradeList: {
|
|
//评价grade
|
|
GOOD: "好评",
|
|
MODERATE: "中评",
|
|
WORSE: "差评",
|
|
haveImage: "有图",
|
|
},
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.comment = JSON.parse(decodeURIComponent(options.comment));
|
|
},
|
|
methods: {
|
|
/**
|
|
* 点击图片放大或保存
|
|
*/
|
|
preview(urls, index) {
|
|
uni.previewImage({
|
|
current: index,
|
|
urls: urls,
|
|
longPressActions: {
|
|
itemList: ["保存图片"],
|
|
success: function (data) {},
|
|
fail: function (err) {},
|
|
},
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.memName {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
border-bottom: 1px solid #ededed;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
.creName,
|
|
.goods-name {
|
|
font-size: 24rpx;
|
|
color: $u-tips-color;
|
|
}
|
|
page,
|
|
.content {
|
|
background: $page-color-base;
|
|
height: 100%;
|
|
}
|
|
|
|
.exaluate-member-view {
|
|
background-color: #fff;
|
|
margin-top: 12rpx;
|
|
padding: 20rpx;
|
|
.member-view {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.member-img {
|
|
width: 100rpx;
|
|
margin: 20rpx;
|
|
}
|
|
.member-info {
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
.goods-view {
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
.border-bottom {
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1px solid #ededed;
|
|
}
|
|
.goods-title {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.goods-subtitle {
|
|
margin-bottom: 20rpx;
|
|
color: #909399;
|
|
}
|
|
.goods-imgs-view {
|
|
margin: 20rpx 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.img-view {
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
</style>
|