<template>
|
<view>
|
<view class="eva-section">
|
<view class="e-header">
|
<text class="tit">
|
评价
|
</text>
|
<text>({{ page.count }})</text>
|
</view>
|
|
<view v-for="(item,index) in page.items" :key="index" class="eva-box">
|
<image class="portrait" :src="item.userAvatarUrl ? item.userAvatarUrl : '/static/missing-face.png'" mode="aspectFill" />
|
<view class="right">
|
<text class="name">
|
{{ item.userNickName?item.userNickName:('用户' + item.userId) }}
|
</text>
|
<text class="con">
|
{{ item.content }}
|
</text>
|
<view v-if="item.imgList && item.imgList.length > 0" class="imgs">
|
<image v-for="(imgItem, imgIndex) in item.imgList" :key="imgIndex" class="ig" :src="imgItem + style(200)" @click="previewImg(item.imgList, imgIndex)" />
|
</view>
|
<view class="bot">
|
<text class="attr">
|
购买类型：{{ item.skuTitle }}
|
</text>
|
<text class="time">
|
{{ item.gmtCreate }}
|
</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- #ifndef MP-ALIPAY -->
|
<uni-load-more :status="loadingType" />
|
<!-- #endif -->
|
</view>
|
</template>
|
|
<script>
|
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
|
export default {
|
components: {
|
uniLoadMore
|
},
|
data() {
|
return {
|
style: this.$api.style,
|
page: {},
|
spuId: undefined,
|
loadingType: 'more'
|
}
|
},
|
onLoad(option) {
|
this.page = JSON.parse(option.firstpage)
|
this.spuId = option.spuid
|
this.loadingType = this.page.pageNo < this.page.totalPageNo ? 'more' : 'nomore'
|
},
|
onReachBottom(e) {
|
const that = this
|
if (that.loadingType === 'more') {
|
that.loadingType = 'loading'
|
that.$api.request('appraise', 'getSpuAppraisePage', {
|
spuId: that.spuId,
|
pageNo: that.page.pageNo + 1,
|
pageSize: 10
|
}).then(res => {
|
that.page.items = that.page.items.concat(res.data.items)
|
that.page.pageNo = res.data.pageNo
|
that.loadingType = res.data.pageNo < res.data.totalPageNo ? 'more' : 'nomore'
|
})
|
}
|
},
|
methods: {
|
previewImg(imgs, index) {
|
uni.previewImage({
|
current: index,
|
urls: imgs
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
/* 评价 */
|
.eva-section {
|
display: flex;
|
flex-direction: column;
|
padding: 20upx 30upx;
|
background: #fff;
|
margin-top: 16upx;
|
|
.e-header {
|
display: flex;
|
align-items: center;
|
height: 70upx;
|
font-size: $font-sm + 2upx;
|
color: $font-color-light;
|
|
.tit {
|
font-size: $font-base + 2upx;
|
color: $font-color-dark;
|
margin-right: 4upx;
|
}
|
|
.tip {
|
flex: 1;
|
text-align: right;
|
}
|
|
.icon-you {
|
margin-left: 10upx;
|
}
|
}
|
}
|
|
.eva-box {
|
display: flex;
|
padding: 20upx 0;
|
|
.portrait {
|
flex-shrink: 0;
|
width: 80upx;
|
height: 80upx;
|
border-radius: 100px;
|
}
|
|
.right {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
font-size: $font-base;
|
color: $font-color-base;
|
padding-left: 26upx;
|
|
.con {
|
font-size: $font-base;
|
color: $font-color-dark;
|
padding: 20upx 0;
|
}
|
|
.imgs {
|
padding: 20upx 0;
|
|
.ig {
|
width: 190upx;
|
height: 190upx;
|
padding:4upx;
|
}
|
}
|
|
.bot {
|
display: flex;
|
justify-content: space-between;
|
font-size: $font-sm;
|
color: $font-color-light;
|
}
|
}
|
}
|
</style>
|
