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.
116 lines
3.4 KiB
116 lines
3.4 KiB
5 years ago
|
<template>
|
||
|
|
<div class="evaluate-list" ref="container">
|
||
|
|
<div class="header">
|
||
|
|
<div class="generalComment acea-row row-between-wrapper">
|
||
|
|
<div class="acea-row row-middle font-color-red">
|
||
|
|
<div class="evaluate">评分</div>
|
||
|
|
<div class="start" :class="'star' + replyData.replyStar"></div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="font-color-red">{{ replyData.replyChance || 0 }}%</span
|
||
|
|
>好评率
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="nav acea-row row-middle">
|
||
|
|
<div
|
||
|
|
class="acea-row row-center-wrapper"
|
||
|
|
v-for="(item, navListIndex) in navList"
|
||
|
|
:key="navListIndex"
|
||
|
|
@click="changeType(navListIndex)"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="item"
|
||
|
|
:class="currentActive === navListIndex ? 'bg-color-red' : ''"
|
||
|
|
v-if="item.num"
|
||
|
|
>
|
||
|
|
{{ item.evaluate }}({{ item.num }})
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<UserEvaluation :reply="reply"></UserEvaluation>
|
||
|
|
<Loading :loaded="loadend" :loading="loading"></Loading>
|
||
|
|
</div>
|
||
|
|
</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 {
|
||
|
|
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: function() {
|
||
|
|
let that = this;
|
||
|
|
getReplyConfig(that.product_id).then(res => {
|
||
|
|
that.$set(that, "replyData", res.data);
|
||
|
|
that.navList[0].num = res.data.sumCount;
|
||
|
|
that.navList[1].num = res.data.goodCount;
|
||
|
|
that.navList[2].num = res.data.inCount;
|
||
|
|
that.navList[3].num = res.data.poorCount;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getProductReplyList: function() {
|
||
|
|
let that = this;
|
||
|
|
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
||
|
|
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
||
|
|
that.loading = true;
|
||
|
|
let q = { page: that.page, limit: that.limit, type: that.currentActive };
|
||
|
|
getReplyList(that.product_id, q).then(res => {
|
||
|
|
that.loading = false;
|
||
|
|
//apply();js将一个数组插入另一个数组;
|
||
|
|
that.reply.push.apply(that.reply, res.data);
|
||
|
|
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
||
|
|
that.page = that.page + 1;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
changeType: function(index) {
|
||
|
|
let that = this;
|
||
|
|
that.currentActive = index;
|
||
|
|
that.page = 1;
|
||
|
|
that.loadend = false;
|
||
|
|
that.$set(that, "reply", []);
|
||
|
|
that.getProductReplyList();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.noCommodity {
|
||
|
|
height: 8rem;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|