<!--
|
/**
|
* @description 商品详情-评论内容板块
|
* @author shm
|
*/
|
-->
|
<template>
|
<div class="comment ios-comment">
|
<div class="content-header pdb row-center coloum-center">
|
<div class="line left"></div>
|
<div class="center">
|
<div class="">USER COMMENT</div>
|
<div class="">用户评论</div>
|
</div>
|
<div class="line right"></div>
|
</div>
|
<load-refresh ref="loadRefresh" :isRefresh="false" emptyText="暂无用户评论" backgroundCover="#F3F5F5"
|
:pageNo="currPage" :dataList="evaluateList" :totalPageNo="totalPage"
|
@scrollTop="loadScroll" @loadMore="loadMore" @refresh="refresh">
|
<div class="eva-content mt20 " slot="content-list">
|
<div v-for="(item, index1) in evaluateList" :key="index1"
|
class="box-shadow evaluate-item mt20 pd20 border-radius">
|
<div class="row-between ">
|
<div class="eva-header-img">
|
<img
|
v-lazy="item.memberInfoVo&&item.memberInfoVo.memberPic || require('@/assets/images/goodsDetail/userM.png')" />
|
</div>
|
<div class="flex1">
|
<div class="row-between coloum-center first-row ">
|
<div class="eva-name ">{{ item.evalUserName }}</div>
|
<div class="eva-time ">{{ item.evalTime | additionalTime }}</div>
|
</div>
|
<uni-rate :disabled="true" :isFill="false" :margin="4" :size="18" color="#666666"
|
activeColor="#DF252A" v-model="item.score" />
|
<div class="eva-detial" v-html="item.evalContent"></div>
|
<div class="eva-img-box row-start coloum-center"
|
v-if="item.evalPicUrl && item.evalPicUrl.length">
|
<div class="eva-img-item mt20">
|
<img v-for="(obj, index) in item.evalPicUrl" :key="index"
|
@click="clickImage(item.evalPicUrl, index)" v-lazy="obj" />
|
</div>
|
</div>
|
<div class="mt20" v-if="item.additionalEvaList && item.additionalEvaList.length">
|
<div class="mt20 add-item" v-for="(addItem, index2) in item.additionalEvaList"
|
:key="index2">
|
<div class="common-txt-color ">{{ addItem.additionalTime | additionalTime }} 追加评论
|
</div>
|
<div class="add-eval mt20" v-html="addItem.additionalComments"></div>
|
<div class="eva-img-box row-start" v-if="addItem.additionalPicUrl.length">
|
<div class="eva-img-item mt20">
|
<img :imageSrc="obj1" v-for="(obj1, index3) in addItem.additionalPicUrl"
|
:key="index3" @click="clickImage(addItem.additionalPicUrl, index3)"
|
v-lazy="obj1" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="reply-content mt20"
|
v-if="item.customerServiceRedivList && item.customerServiceRedivList.length">
|
<div class="reply-title">回复内容:</div>
|
<div v-for="(item1, index) in item.customerServiceRedivList" :key="index">
|
<div class="common-txt-color ">{{ item1.redivUserName }}
|
{{ item1.redivTime | additionalTime }} 回复</div>
|
<div class="mt20" v-html="item1.redivContent"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</load-refresh>
|
</div>
|
</template>
|
|
<script>
|
import loadRefresh from '@/components/load-refresh/index.vue'
|
import uniRate from '@/components/uni-rate/index.vue'
|
import { findGoodsEvaluateDetial, findEvaluateUnlogin } from '@/api/goodsDetail/index.js'
|
export default {
|
name: 'Comment',
|
components: {
|
loadRefresh,
|
uniRate
|
},
|
props: {
|
shopSpuId: {
|
type: String,
|
default: ''
|
},
|
scrollTop: {
|
type: Number,
|
default: 0
|
}
|
},
|
data() {
|
return {
|
evaluateList: [],
|
currPage: 1,
|
isloadMore: false,
|
totalPage: 0
|
}
|
},
|
filters: {
|
additionalTime(val) {
|
return val ? val.substr(0, 10) : ''
|
}
|
},
|
created() {
|
this.getData()
|
},
|
methods: {
|
loadScroll() { },
|
loadMore() {
|
this.getData()
|
},
|
refresh() {
|
this.getData()
|
},
|
getData() {
|
const val = localStorage.getItem('access_token')
|
if (!val) {
|
this.getEvaluateUnLogin() // 获取商品评价详情===未登录
|
} else {
|
this.getEvaluate() // 获取商品评价详情===已登录
|
}
|
},
|
clickImage(list, index) {
|
this.$ImagePreview({
|
images: list,
|
startPosition: index
|
})
|
},
|
async getEvaluateUnLogin() {
|
const res = await findEvaluateUnlogin({ busItemId: this.shopSpuId })
|
var data = res.data.list
|
if (data && data.length) {
|
data.map(v => {
|
if (v.evalPic) {
|
v.evalPic = v.evalPic.split(',')
|
}
|
})
|
}
|
if (this.isloadMore) {
|
this.evaluateList = [...this.evaluateList, ...data]
|
} else {
|
this.evaluateList = data
|
}
|
this.isloadMore = false
|
this.totalPage = res.data.lastPage
|
},
|
// 获取商品评价详情
|
async getEvaluate() {
|
const res = await findGoodsEvaluateDetial({ busItemId: this.shopSpuId })
|
var data = res.data ? res.data.list : []
|
if (data && data.length) {
|
data.map(v => {
|
if (v.evalPic) {
|
v.evalPic = v.evalPic.split(',')
|
}
|
})
|
}
|
if (this.isloadMore) {
|
this.evaluateList = [...this.evaluateList, ...data]
|
} else {
|
this.evaluateList = data
|
}
|
this.isloadMore = false
|
this.totalPage = res.data.lastPage
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// .ios-comment {
|
// padding-bottom: 120px;
|
// }
|
.comment {
|
.evaluate-item {
|
background: #ffffff;
|
}
|
/deep/.loading-img {
|
border-radius: 50%;
|
}
|
.content-header {
|
margin-top: 80px;
|
text-align: center;
|
font-size: 32px;
|
font-weight: 600;
|
letter-spacing: 2px;
|
.left {
|
margin-right: 30px;
|
}
|
.right {
|
margin-left: 30px;
|
}
|
.line {
|
height: 4px;
|
width: 100px;
|
background: #e5e5e5;
|
}
|
}
|
/deep/.reply-content {
|
border: 1px solid #eeeeee;
|
padding: 0 20px 20px 20px;
|
border-radius: 20px;
|
.reply-title {
|
line-height: 70px;
|
}
|
}
|
.add-eval {
|
word-break: break-all;
|
}
|
/deep/.loading-img {
|
min-height: 60px !important;
|
}
|
/deep/.eva-content {
|
background: #f2f2f2;
|
.first-row {
|
margin-bottom: 40px;
|
.eva-name {
|
font-size: 40px;
|
font-weight: 400;
|
letter-spacing: 3px;
|
}
|
.eva-time {
|
font-size: 24px;
|
color: #666666;
|
letter-spacing: 2px;
|
}
|
}
|
.eva-header-img {
|
width: 60px;
|
height: 60px;
|
border-radius: 30px;
|
margin-right: 20px;
|
border: 1px solid #999;
|
z-index: 100;
|
img {
|
display: inline-block;
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
}
|
}
|
.eva-detial {
|
letter-spacing: 2px;
|
margin-top: 26px;
|
word-break: break-all;
|
}
|
.eva-img-box {
|
flex-wrap: wrap;
|
.eva-img-item {
|
width: 140px;
|
margin-right: 20px;
|
img {
|
width: 100%;
|
min-height: 140px !important;
|
}
|
}
|
}
|
/deep/.uni-rate__icon {
|
margin-right: 8px;
|
margin-left: 0 !important;
|
}
|
}
|
}
|
</style>
|
