You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
8.4 KiB
305 lines
8.4 KiB
<template> |
|
<view class="evaluate-list" ref="container"> |
|
<view class="header"> |
|
<cu-custom :isBack="true" :isCenter="true"> |
|
<block slot="backText"> |
|
<view class="backImg"> |
|
<image src="@/static/images/back-btn.png" mode=""></image> |
|
</view> |
|
</block> |
|
<block slot="content"> |
|
<view class="tab-title">评论列表</view> |
|
</block> |
|
</cu-custom> |
|
<view class="nav acea-row row-between-wrapper"> |
|
<view class="" v-for="(item, navListIndex) in navList" :key="navListIndex" @click="changeType(navListIndex)" > |
|
<view class="item" :class="currentActive === navListIndex ? 'bg-color-red' : ''"> |
|
<text>{{ item.evaluate }}{{ item.num || '' }}</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view style="height: 80rpx;"></view> |
|
|
|
<view class="list" :style="'margin-top:'+ CustomBar +'px;'"> |
|
<view class="item" v-for="(item,index) in reply" :key="index"> |
|
<view class="pic-text acea-row row-between"> |
|
<view class="acea-row"> |
|
<image v-if="item.avatar" class="image" :src="item.avatar"/> |
|
<view class="noAvatar acea-row row-middle row-center" v-else> |
|
<image src="@/static/images/yanjie-logo.png" mode="widthFix"></image> |
|
</view> |
|
<view class=""> |
|
<view class="acea-row row-middle"> |
|
<view class="name one-t">{{ item.nickname || '微信用户' }}</view> |
|
<!-- <view class="vip"></view> --> |
|
</view> |
|
<view class="starBox acea-row"> |
|
<image src="@/static/images/min-star-light.png" v-for="starItem in item.star" :key="starItem"></image> |
|
<image src="@/static/images/star-border-light.png" v-for="starItem in 5-item.star" :key="starItem"></image> |
|
<!-- <image src="@/static/images/min-star.png" v-for="starItem in 5-item.star" :key="starItem"></image> --> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="time">{{item.createTime}}</view> |
|
</view> |
|
<view class="evaluate-infor">{{ item.comment }}</view> |
|
<view class="imgList acea-row" v-if="item.picturesArr.length >= 3 && item.picturesArr.length != 4"> |
|
<view class="acea-row"> |
|
<block v-for="(itemn, eq) in item.picturesArr" :key="eq"> |
|
<image class="image" :src="itemn" mode="aspectFill" v-if="eq < 3"/> |
|
</block> |
|
</view> |
|
<view class="more" v-if="item.picturesArr.length > 3" @click="previewImage(item, eq)">查看全部 {{item.picturesArr.length}}张</view> |
|
<!-- <view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq"> |
|
<image :src="itemn" class="image" /> |
|
</view> --> |
|
</view> |
|
<view class="imgList acea-row" v-else> |
|
<block v-for="(itemn, eq) in item.picturesArr" :key="eq"> |
|
<image class="pictrue" :src="itemn" mode="aspectFill" :style="eq == item.picturesArr.length-1 || eq == item.picturesArr.length-2?'':'margin-bottom: 11rpx;'" @click="previewImage(item, eq)"/> |
|
</block> |
|
</view> |
|
</view> |
|
<Loading :loaded="loadend" :loading="loading"></Loading> |
|
</view> |
|
|
|
<!-- <view class="generalComment acea-row row-between-wrapper"> |
|
<view class="acea-row row-middle font-color-red"> |
|
<text class="evaluate">评分</text> |
|
<view class="start" :class="'star' + replyData.replyStar"></view> |
|
</view> |
|
<view> |
|
<text class="font-color-red">{{ replyData.replyChance || 0 }}%</text> |
|
<text>好评率</text> |
|
</view> |
|
</view> --> |
|
|
|
<!-- <UserEvaluation :reply="reply"></UserEvaluation> --> |
|
|
|
</view> |
|
</template> |
|
<script> |
|
import UserEvaluation from "@/components/UserEvaluation"; |
|
import { getReplyConfig, getReplyList } from "@/api/store"; |
|
import Loading from "@/components/Loading"; |
|
|
|
export default { |
|
name: "EvaluateList", |
|
components: { |
|
UserEvaluation, |
|
Loading |
|
}, |
|
props: {}, |
|
data: function() { |
|
return { |
|
CustomBar: this.CustomBar, |
|
product_id: 0, |
|
replyData: {}, |
|
navList: [ |
|
{ evaluate: "全部", num: 0 }, |
|
{ evaluate: "好评", num: 0 }, |
|
{ evaluate: "中评", num: 0 }, |
|
{ evaluate: "差评", num: 0 } |
|
], |
|
currentActive: 0, |
|
page: 1, |
|
limit: 8, |
|
reply: [], |
|
loadTitle: "", |
|
loading: false, |
|
loadend: false |
|
}; |
|
}, |
|
mounted: function() { |
|
this.product_id = this.$yroute.query.id; |
|
this.getProductReplyCount(); |
|
this.getProductReplyList(); |
|
}, |
|
onReachBottom() { |
|
!this.loading && this.getProductReplyList(); |
|
}, |
|
methods: { |
|
getProductReplyCount () { |
|
getReplyConfig(this.product_id).then(res => { |
|
this.$set(this, "replyData", res.data); |
|
this.navList[0].num = res.data.sumCount; |
|
this.navList[1].num = res.data.goodCount; |
|
this.navList[2].num = res.data.inCount; |
|
this.navList[3].num = res.data.poorCount; |
|
}); |
|
}, |
|
getProductReplyList () { |
|
if (this.loading) return; //阻止下次请求（false可以进行请求）； |
|
if (this.loadend) return; //阻止结束当前请求（false可以进行请求）； |
|
this.loading = true; |
|
let q = { page: this.page, limit: this.limit, type: this.currentActive }; |
|
getReplyList(this.product_id, q).then(res => { |
|
this.loading = false; |
|
//apply();js将一个数组插入另一个数组; |
|
this.reply.push.apply(this.reply, res.data); |
|
this.reply.forEach( val => { |
|
val.star = val.star*1; |
|
}) |
|
this.loadend = res.data.length < this.limit; //判断所有数据是否加载完成； |
|
this.page = this.page + 1; |
|
}); |
|
}, |
|
changeType (index) { |
|
this.currentActive = index; |
|
this.page = 1; |
|
this.loadend = false; |
|
this.$set(this, "reply", []); |
|
this.getProductReplyList(); |
|
}, |
|
previewImage(item, current) { |
|
uni.previewImage({ |
|
current, |
|
urls: item.picturesArr, |
|
}); |
|
}, |
|
} |
|
}; |
|
</script> |
|
<style scoped lang="less"> |
|
.header { |
|
width: 100vw; |
|
position: fixed; |
|
z-index: 100; |
|
.tab-title { |
|
font-size: 32rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #2DB5AE; |
|
line-height: 42rpx; |
|
} |
|
.backImg { |
|
width: 88rpx; |
|
height: 62rpx; |
|
padding-left: 26rpx; |
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
|
|
.list { |
|
margin: 0rpx 32rpx 32rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
border-radius: 16rpx; |
|
padding: 24rpx; |
|
.item { |
|
margin-bottom: 46rpx; |
|
.pic-text { |
|
padding-bottom: 16rpx; |
|
.image { |
|
width: 66rpx; |
|
height: 66rpx; |
|
border-radius: 50%; |
|
margin-right: 20rpx; |
|
} |
|
.noAvatar { |
|
width: 66rpx; |
|
height: 66rpx; |
|
border-radius: 50%; |
|
margin-right: 20rpx; |
|
background-color: #FFFFFF; |
|
padding-left: 3rpx; |
|
padding-right: 2rpx; |
|
image { |
|
width: 100%; |
|
} |
|
} |
|
.name { |
|
max-width: 260rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 34rpx; |
|
padding-right: 6rpx; |
|
} |
|
.vip { |
|
width: 80rpx; |
|
height: 26rpx; |
|
background-color: #2DB5AE; |
|
} |
|
.starBox { |
|
padding-top: 4rpx; |
|
image { |
|
width: 26rpx; |
|
height: 26rpx; |
|
} |
|
} |
|
.time { |
|
font-size: 20rpx; |
|
font-family: PingFang SC; |
|
font-weight: 400; |
|
color: #3A3A3C; |
|
line-height: 26rpx; |
|
} |
|
} |
|
} |
|
.item:last-child { |
|
margin-bottom: 12rpx; |
|
} |
|
} |
|
|
|
.evaluate-infor { |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 32rpx; |
|
} |
|
|
|
.imgList { |
|
padding-top: 12rpx; |
|
position: relative; |
|
image { |
|
background: #D8D8D8; |
|
} |
|
.image { |
|
width: 204rpx; |
|
height: 204rpx; |
|
border-radius: 8rpx; |
|
margin-right: 13rpx; |
|
} |
|
.image:last-child { |
|
margin-right: 0rpx; |
|
} |
|
.more { |
|
width: 204rpx; |
|
height: 204rpx; |
|
border-radius: 8rpx; |
|
background: rgba(45, 181, 174, 0.4); |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #FFFFFF; |
|
line-height: 204rpx; |
|
text-align: center; |
|
position: absolute; |
|
top: 12rpx; |
|
right: 0; |
|
z-index: 4; |
|
} |
|
.pictrue { |
|
width: 314rpx; |
|
height: 308rpx; |
|
border-radius: 8rpx; |
|
margin-right: 11rpx; |
|
} |
|
.pictrue:nth-child(2n) { |
|
margin-right: 0; |
|
} |
|
} |
|
|
|
.noCommodity { |
|
height: 8*100rpx; |
|
background-color: #fff; |
|
} |
|
</style>
|
|
|