197 lines
4.7 KiB
Vue
197 lines
4.7 KiB
Vue
<template>
|
||
<view>
|
||
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
|
||
<view class="all-comments">
|
||
<view class="header bg-white" v-if="!isEmpty">
|
||
<view class="title xs">
|
||
<text class="lighter m-r-10">商品好评率</text>
|
||
<text class="primary">{{percent}}</text>
|
||
</view>
|
||
<view class="tab flex flex-wrap">
|
||
<view v-for="(item, index) in categoryList"
|
||
:class="'tab-item xs m-r-10 br60 m-b-20 ' + (type == item.id ? 'bg-primary white' : 'bg-gray' )"
|
||
:key="index" @tap="onChangType(index)" v-show="item.count">
|
||
{{item.name}}({{item.count}})
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="main bg-white">
|
||
<view class="evaluation-list">
|
||
<view v-for="(item, index) in commentList" :key="index" class="evaluation-item">
|
||
<view class="user-info flex">
|
||
<image class="avatar m-r-20" :src="item.avatar"></image>
|
||
<view class="user-name md m-r-10">{{item.nickname}}</view>
|
||
<u-rate disabled size="26rpx" :color="colorConfig.primary" v-model="item.goods_comment">
|
||
</u-rate>
|
||
</view>
|
||
<view class="muted xs m-t-10">
|
||
<text class="m-r-20">{{item.create_time}}</text>
|
||
<text v-show="item.spec_value_str">{{item.spec_value_str}}</text>
|
||
</view>
|
||
<view v-if="item.comment" class="dec m-t-20">{{item.comment}}</view>
|
||
<view class="img m-t-20 flex flex-wrap" v-if="item.image.length">
|
||
<view v-for="(imgitem, imgindex) in item.image" :key="imgindex"
|
||
class="img-item m-r-20 m-b-20" :data-current="imgitem" :data-uri="item.image"
|
||
@tap="previewImage">
|
||
<u-image width="160rpx" fit="cover" height="160rpx" radius="6rpx" lazy-load
|
||
class="goods-img" :src="imgitem" />
|
||
</view>
|
||
</view>
|
||
<view class="seller-recall-container bg-gray m-t-10" v-if="item.reply">
|
||
<view class="lighter">
|
||
商家回复：
|
||
<text class="normal">{{item.reply}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getCommentList,
|
||
getCommentCategory
|
||
} from '@/api/store';
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
|
||
export default {
|
||
mixins: [MescrollMixin],
|
||
data() {
|
||
return {
|
||
active: 0,
|
||
type: '',
|
||
commentList: [],
|
||
categoryList: [],
|
||
percent: '',
|
||
isEmpty: true,
|
||
upOption:{
|
||
auto: false,
|
||
empty: {
|
||
icon: 'https://zjeloong.oss-cn-hangzhou.aliyuncs.com/uniapp/goods_null.png',
|
||
tip : "暂无评价",
|
||
}
|
||
},
|
||
};
|
||
},
|
||
|
||
onLoad(options) {
|
||
this.id = this.$Route.query.id;
|
||
},
|
||
onShow() {
|
||
this.id = this.$Route.query.id;
|
||
},
|
||
methods: {
|
||
async downCallback(page) {
|
||
|
||
await this.getCommentCategoryFun()
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
upCallback(page) {
|
||
let pageNum = page.num;
|
||
let pageSize = page.size;
|
||
getCommentList({
|
||
type: this.type,
|
||
goods_id: this.id,
|
||
page_no: pageNum,
|
||
page_size: pageSize
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
let curPageData = res.data.lists;
|
||
let curPageLen = curPageData.length;
|
||
let hasNext = !!res.data.more;
|
||
if (page.num == 1) this.commentList = [];
|
||
this.commentList = this.commentList.concat(curPageData);
|
||
this.mescroll.endSuccess(curPageLen, hasNext);
|
||
}
|
||
})
|
||
},
|
||
onChangType(index) {
|
||
this.active = index
|
||
this.type = this.categoryList[index].id
|
||
this.commentList = []
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
|
||
getCommentCategoryFun() {
|
||
return new Promise(resolve => {
|
||
getCommentCategory(this.id).then(res => {
|
||
let {
|
||
code,
|
||
data: {
|
||
comment,
|
||
percent
|
||
}
|
||
} = res;
|
||
if (code == 1) {
|
||
this.categoryList = comment;
|
||
this.percent = percent;
|
||
this.type = comment[this.active].id
|
||
this.isEmpty = !comment[0].count
|
||
this.$nextTick(() => resolve());
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
previewImage(e) {
|
||
const {
|
||
current,
|
||
uri
|
||
} = e.currentTarget.dataset;
|
||
let urls = uri;
|
||
uni.previewImage({
|
||
current,
|
||
urls
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.all-comments {
|
||
padding-top: 20rpx;
|
||
|
||
.header {
|
||
.title {
|
||
padding: 24rpx 26rpx;
|
||
border-bottom: var(--border);
|
||
}
|
||
|
||
.tab {
|
||
padding: 30rpx 0 10rpx 20rpx;
|
||
flex-wrap: wrap;
|
||
|
||
.tab-item {
|
||
padding: 9rpx 29rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
.evaluation-list {
|
||
.evaluation-item {
|
||
padding: 20rpx;
|
||
|
||
&:not(:last-of-type) {
|
||
border-bottom: $-solid-border;
|
||
}
|
||
|
||
.avatar {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.seller-recall-container {
|
||
padding: 24rpx 20rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|