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.
shengxian/pages/goods/comment/comment-list.vue

127 lines
3.1 KiB

2 years ago
<!-- 评论列表 -->
<template>
<view class="page_box">
<view class="head_box u-flex">
<button :class="{ 'btn-active': typeCurrent === t.code }" class="u-reset-button type-btn" @tap="selType(t.code)" v-for="t in commentTypeList" :key="t.code">
{{ t.name }}({{ t.num }})
</button>
</view>
<view class="content_box">
<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
<view class="comment-list">
<block v-for="comment in commentList" :key="comment.id"><sh-comment :comment="comment"></sh-comment></block>
</view>
<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/comment_empty.png'" tipText="暂无此类评价~"></shopro-empty>
<!-- 加载更多 -->
<u-loadmore v-if="commentList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
</scroll-view>
</view>
</view>
</template>
<script>
import shComment from '../components/sh-comment.vue';
export default {
components: {
shComment
},
data() {
return {
isEmpty: false,
typeCurrent: 'all',
commentList: [],
commentTypeList: [],
loadStatus: 'loadmore', //loadmore-加载前的状态,loading-加载中的状态,nomore-没有更多的状态
currentPage: 1,
lastPage: 1
};
},
computed: {},
onLoad() {
this.getCommentType();
},
methods: {
selType(id) {
if (this.typeCurrent !== id) {
this.typeCurrent = id;
this.commentList = [];
this.currentPage = 1;
this.getCommentList();
}
},
// 评价类型
getCommentType() {
let that = this;
that.$http('goods.commentType', {
goods_id: that.$Route.query.goodsId
}).then(res => {
if (res.code === 1) {
that.commentTypeList = res.data;
that.getCommentList();
}
});
},
// 商品评论
getCommentList() {
let that = this;
that.loadStatus = 'loading';
that.$http('goods.commentList', {
goods_id: that.$Route.query.goodsId,
pre_page: 10,
page: that.currentPage,
type: that.typeCurrent
}, '加载中...').then(res => {
if (res.code === 1) {
that.commentList = [...that.commentList, ...res.data.data];
that.isEmpty = !that.commentList.length;
that.lastPage = res.data.last_page;
that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
}
});
},
// 加载更多
loadMore() {
if (this.currentPage < this.lastPage) {
this.currentPage += 1;
this.getCommentList();
}
}
}
};
</script>
<style lang="scss">
.empty-box {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.head_box {
height: 114rpx;
background-color: #fff;
padding: 0 20rpx;
.type-btn {
width: 130rpx;
line-height: 62rpx;
background: rgba(238, 238, 238, 1);
border-radius: 31rpx;
border: none;
font-size: 28rpx;
font-weight: 400;
color: rgba(153, 153, 153, 1);
padding: 0;
margin-right: 10rpx;
}
.btn-active {
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
color: #a8700d;
}
}
.comment-list {
margin-top: 20rpx;
}
</style>