【商品评论列表】

1. 功能实现
pull/1/MERGE
YunaiV 2023-06-28 00:25:26 +08:00
parent afad547b14
commit 39873a9e3c
5 changed files with 71 additions and 67 deletions

View File

@ -18,3 +18,10 @@ export function getCommentList(spuId, count) {
noAuth: true // TODO 芋艿:后续要做调整 noAuth: true // TODO 芋艿:后续要做调整
}); });
} }
// 获得商品评价分页
export function getCommentPage(data) {
return request.get('app-api/product/comment/page', data, {
noAuth: true // TODO 芋艿:后续要做调整
});
}

View File

@ -700,7 +700,7 @@
* 获得商品评价列表 * 获得商品评价列表
*/ */
getProductReplyList: function() { getProductReplyList: function() {
ProductCommentApi.getCommentList(this.id, 3).then(res => { ProductCommentApi.getCommentList(this.activity.spuId, 3).then(res => {
this.reply = res.data; this.reply = res.data;
}) })
}, },
@ -708,9 +708,10 @@
* 获得商品评价统计 * 获得商品评价统计
*/ */
getProductReplyCount: function() { getProductReplyCount: function() {
ProductCommentApi.getCommentStatistics(this.id).then(res => { ProductCommentApi.getCommentStatistics(this.activity.spuId).then(res => {
this.$set(this, 'replyChance', res.data.goodPercent); const count = res.data.goodCount + res.data.mediocreCount + res.data.negativeCount;
this.$set(this, 'replyCount', res.data.allCount); this.$set(this, 'replyChance', 100.0 * res.data.goodCount / count);
this.$set(this, 'replyCount', count);
}); });
}, },

View File

@ -630,7 +630,7 @@
* 获得商品评价列表 * 获得商品评价列表
*/ */
getProductReplyList: function() { getProductReplyList: function() {
ProductCommentApi.getCommentList(this.id, 3).then(res => { ProductCommentApi.getCommentList(this.activity.spuId, 3).then(res => {
this.reply = res.data; this.reply = res.data;
}) })
}, },
@ -638,9 +638,10 @@
* 获得商品评价统计 * 获得商品评价统计
*/ */
getProductReplyCount: function() { getProductReplyCount: function() {
ProductCommentApi.getCommentStatistics(this.id).then(res => { ProductCommentApi.getCommentStatistics(this.activity.spuId).then(res => {
this.$set(this, 'replyChance', res.data.goodPercent); const count = res.data.goodCount + res.data.mediocreCount + res.data.negativeCount;
this.$set(this, 'replyCount', res.data.allCount); this.$set(this, 'replyChance', 100.0 * res.data.goodCount / count);
this.$set(this, 'replyCount', count);
}); });
}, },

View File

@ -779,8 +779,9 @@
*/ */
getProductReplyCount: function() { getProductReplyCount: function() {
ProductCommentApi.getCommentStatistics(this.id).then(res => { ProductCommentApi.getCommentStatistics(this.id).then(res => {
this.$set(this, 'replyChance', res.data.goodPercent); const count = res.data.goodCount + res.data.mediocreCount + res.data.negativeCount;
this.$set(this, 'replyCount', res.data.allCount); this.$set(this, 'replyChance', 100.0 * res.data.goodCount / count);
this.$set(this, 'replyCount', count);
}); });
}, },

View File

@ -4,50 +4,44 @@
<view class='generalComment acea-row row-between-wrapper'> <view class='generalComment acea-row row-between-wrapper'>
<view class='acea-row row-middle font-color'> <view class='acea-row row-middle font-color'>
<view class='evaluate'>评分</view> <view class='evaluate'>评分</view>
<view class='start' <view class='start' :class="'star'+ Math.round(replyData.scores)" />
:class="'star'+ (replyData.sumCount===0?'3':Math.round(replyData.replyStar/replyData.sumCount))">
</view>
</view> </view>
<view><text class='font-color'>{{(replyData.replyChance)*100}}%</text>好评率</view> <view><text class='font-color'>{{ 100.0 * replyData.goodCount / replyData.count }}%</text>好评率</view>
</view> </view>
<view class='nav acea-row row-middle'> <view class='nav acea-row row-middle'>
<view class='item' :class='type==0 ? "bg-color":""' @click='changeType(0)'>全部({{replyData.sumCount}}) <view class='item' :class='type === 0 ? "bg-color":""' @click='changeType(0)'>全部({{replyData.count}})
</view> </view>
<view class='item' :class='type==1 ? "bg-color":""' @click='changeType(1)'>好评({{replyData.goodCount}}) <view class='item' :class='type === 1 ? "bg-color":""' @click='changeType(1)'>好评({{replyData.goodCount}})
</view> </view>
<view class='item' :class='type==2 ? "bg-color":""' @click='changeType(2)'>中评({{replyData.inCount}}) <view class='item' :class='type === 2 ? "bg-color":""' @click='changeType(2)'>中评({{replyData.mediocreCount}})
</view> </view>
<view class='item' :class='type==3 ? "bg-color":""' @click='changeType(3)'>差评({{replyData.poorCount}}) <view class='item' :class='type === 3 ? "bg-color":""' @click='changeType(3)'>差评({{replyData.negativeCount}})
</view> </view>
</view> </view>
<userEvaluation :reply="reply"></userEvaluation> <userEvaluation :reply="reply"></userEvaluation>
</view> </view>
<view class='loadingicon acea-row row-center-wrapper'> <view class='loadingicon acea-row row-center-wrapper'>
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}} <text class='loading iconfont icon-jiazai' :hidden='!loading'></text>{{loadTitle}}
</view> </view>
<view class='noCommodity' v-if="!replyData.sumCount && page > 1"> <view class='noCommodity' v-if="replyData.count === 0 && page > 1">
<view class='pictrue'> <view class='pictrue'>
<image src='../static/noEvaluate.png'></image> <image src='../static/noEvaluate.png' />
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import {
getReplyList,
getReplyConfig
} from '@/api/store.js';
import userEvaluation from '@/components/userEvaluation'; import userEvaluation from '@/components/userEvaluation';
export default { import * as ProductCommentApi from '@/api/product/comment.js';
export default {
components: { components: {
userEvaluation userEvaluation
}, },
data() { data() {
return { return {
replyData: {}, replyData: {}, //
product_id: 0, product_id: 0, //
reply: [], reply: [], //
type: 0, type: 0,
loading: false, loading: false,
loadend: false, loadend: false,
@ -60,14 +54,15 @@
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad: function(options) { onLoad: function(options) {
let that = this; if (!options.productId) {
if (!options.productId) return that.$util.Tips({ return this.$util.Tips({
title: '缺少参数' title: '缺少参数'
}, { }, {
tab: 3, tab: 3,
url: 1 url: 1
}); });
that.productId = options.productId; }
this.productId = options.productId;
}, },
onShow: function() { onShow: function() {
this.getProductReplyCount(); this.getProductReplyCount();
@ -76,49 +71,49 @@
methods: { methods: {
/** /**
* 获取评论统计数据 * 获取评论统计数据
*
*/ */
getProductReplyCount: function() { getProductReplyCount: function() {
let that = this; ProductCommentApi.getCommentStatistics(this.productId).then(res => {
getReplyConfig(that.productId).then(res => { res.data.count = res.data.goodCount + res.data.mediocreCount + res.data.negativeCount;
that.$set(that, 'replyData', res.data); this.$set(this, 'replyData', res.data);
}); });
}, },
/** /**
* 分页获取评论 * 分页获取评论
*/ */
getProductReplyList: function() { getProductReplyList: function() {
let that = this; if (this.loadend || this.loading) {
if (that.loadend) return; return;
if (that.loading) return; }
that.loading = true; this.loading = true;
that.loadTitle = ''; this.loadTitle = '';
getReplyList(that.productId, { ProductCommentApi.getCommentPage({
page: that.page, spuId: this.productId,
limit: that.limit, type: this.type,
type: that.type, pageNo: this.page,
pageSize: this.limit,
}).then(res => { }).then(res => {
let list = res.data.list, const list = res.data.list;
loadend = list.length < that.limit; const loadend = list.length < this.limit;
that.reply = that.$util.SplitArray(list, that.reply); this.reply = this.$util.SplitArray(list, this.reply);
that.$set(that, 'reply', that.reply); this.$set(this, 'reply', this.reply);
that.loading = false; this.loading = false;
that.loadend = loadend; this.loadend = loadend;
if (that.reply.length) { this.loadTitle = loadend ? "😕人家是有底线的~~" : "加载更多";
that.loadTitle = loadend ? "😕人家是有底线的~~" : "加载更多"; this.page = this.page + 1;
}
that.page = that.page + 1;
}).catch(err => { }).catch(err => {
that.loading = false, this.loading = false;
that.loadTitle = '加载更多' this.loadTitle = '加载更多'
}); });
}, },
/* /**
* 点击事件切换 * 点击事件切换
* */ */
changeType: function(e) { changeType: function(e) {
let type = parseInt(e); let type = parseInt(e);
if (type == this.type) return; if (type === this.type) {
return;
}
this.type = type; this.type = type;
this.page = 1; this.page = 1;
this.loadend = false; this.loadend = false;
@ -134,7 +129,6 @@
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
background-color: #fff; background-color: #fff;