karlcarlo
a5c5d753b6
- 新增大量图片资源，包括图标、背景图、海报等，用于页面展示 - 添加字体文件及样式配置，支持自定义字体 - 引入 uni-ui 组件库，包括图标、弹窗、日期选择器等常用组件 - 添加网络状态监听、加密工具等基础工具函数 - 配置 Vuex 状态管理，包括购物车数量、热门搜索词等 - 增加页面组件，如用户协议、分销信息、提现状态等 - 配置项目构建和忽略文件，优化开发体验
329 lines
8.8 KiB
Vue
329 lines
8.8 KiB
Vue
<template>
|
|
<view :style="colorStyle">
|
|
<!-- 导航区 -->
|
|
<view class="w-full fixed-lt bg--w111-fff z-10 rd-b-24rpx">
|
|
<view class="pl-32 pr-32 pt-24 pb-32">
|
|
<view class="flex-between-center">
|
|
<view>
|
|
<text class="text--w111-333 fs-30 fw-500">评价</text>
|
|
<text class="fs-24 text--w111-666 pl-8">({{tabList[0].count}})</text>
|
|
</view>
|
|
<view class="flex-y-center">
|
|
<text class="fs-28 text-primary-con Regular">{{replyData.reply_chance}}%</text>
|
|
<text class="fs-24 text--w111-999 pl-4 pr-12">好评率</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-y-center mt-34">
|
|
<view
|
|
class="tab_item inline-block h-56 rd-28rpx lh-56rpx text-center px-24 fs-24 bg--w111-f5f5f5 text--w111-333"
|
|
v-for="(item, index) in tabList" :key="index"
|
|
:class="item.type == type ? 'active' : ''"
|
|
@click='changeType(item.type)'>{{ item.title }}({{ item.count }})</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="h-190"></view>
|
|
<!-- 评论卡片 -->
|
|
<view v-if="reply.length">
|
|
<view class="mt-20 rd-24rpx bg--w111-fff p-32"
|
|
v-for="item in reply" :key="item.id" @click="goPage(item.id)">
|
|
<view class="flex-between-center">
|
|
<view class="flex-y-center">
|
|
<view class="w-56 h-56 rd-28rpx relative" :class="{'svip-border': item.vip_status}">
|
|
<image :src="item.avatar" class="w-full h-full rd-28rpx"></image>
|
|
<image class="vip-badge" src="@/static/img/svip_badge.png" v-show="item.vip_status"></image>
|
|
</view>
|
|
<text class="fs-28 text--w111-333 pl-12">{{item.nickname}}</text>
|
|
<view class="vip flex-center" v-if="item.level_name">
|
|
<text class="iconfont icon-huiyuandengji"></text>
|
|
V{{item.level_name}}
|
|
</view>
|
|
</view>
|
|
<view class="fs-26 text--w111-999 Regular">{{item.add_time}}</view>
|
|
</view>
|
|
<view class="flex-between-center mt-32">
|
|
<view class="flex-y-center">
|
|
<view class="flex pr-20">
|
|
<text class="iconfont icon-ic_star1 fs-18 text-primary-con" v-for="star in Number(item.star)"
|
|
:key="star"></text>
|
|
</view>
|
|
<text class="w-400 line1" v-show="item.suk">
|
|
<text class="text--w111-ccc fs-18">|</text>
|
|
<text class="pl-20 fs-22 text--w111-999">{{item.suk}}</text>
|
|
</text>
|
|
</view>
|
|
<image src="../static/hp_icon.png" class="w-78 h-30" mode="aspectFit" v-show="item.reply_score == 3"></image>
|
|
<image src="../static/zp_icon.png" class="w-78 h-30" mode="aspectFit" v-show="item.reply_score == 2"></image>
|
|
<image src="../static/cp_icon.png" class="w-78 h-30" mode="aspectFit" v-show="item.reply_score == 1"></image>
|
|
</view>
|
|
<view class="mt-20 fs-28 text--w111-333 lh-44rpx">{{item.comment}}</view>
|
|
<!-- 1张照片 -->
|
|
<image :src="item.pics[0]" class="w-400 h-400 rd-16rpx mt-20" mode="aspectFill"
|
|
v-if="item.pics.length == 1"></image>
|
|
<!-- 2张照片 -->
|
|
<view class="mt-20 grid-column-2 grid-gap-x-10rpx grid-gap-y-20rpx" v-if="item.pics.length == 2">
|
|
<image class="w-full h-338 rd-16rpx" :src="itemp" mode="aspectFill" v-for="(itemp,ip) in item.pics"
|
|
:key="ip"></image>
|
|
</view>
|
|
<!-- 多于2张照片 -->
|
|
<view class="mt-20 grid-column-3 grid-gap-10rpx" v-if="item.pics.length > 2">
|
|
<image class="w-full h-222 rd-16rpx" :src="itemp" mode="aspectFill" v-for="(itemp,ip) in item.pics"
|
|
:key="ip"></image>
|
|
</view>
|
|
<!-- 浏览次数 点赞 -->
|
|
<view class="flex-between-center mt-24">
|
|
<text class="fs-22 text--w111-999">浏览{{item.views_num}}次</text>
|
|
<view class="flex text--w111-333">
|
|
<view class="flex-y-center" :class="item.is_praise ? 'text-primary-con':''">
|
|
<text class="iconfont icon-ic_Like fs-32"
|
|
@tap.stop="tapPraise(item)"></text>
|
|
<text class="fs-22 pl-8">{{item.praise}}</text>
|
|
</view>
|
|
<view class="ml-32 flex-y-center">
|
|
<text class="iconfont icon-ic_message fs-32"></text>
|
|
<text class="fs-22 pl-8">{{item.replyComment ? item.replyComment.sum : 0}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="px-20 mt-20" v-else>
|
|
<emptyPage title="暂无评论，去看点别的吧～" src="/statics/images/noMessage.gif"></emptyPage>
|
|
</view>
|
|
<home></home>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getReplyList,
|
|
getReplyConfig,
|
|
getReplyPraise,
|
|
getUnReplyPraise
|
|
} from '@/api/store.js';
|
|
import colors from '@/mixins/color.js';
|
|
import {toLogin} from '@/libs/login.js';
|
|
import {mapGetters} from "vuex";
|
|
import {HTTP_REQUEST_URL} from '@/config/app';
|
|
import emptyPage from '@/components/emptyPage.vue';
|
|
export default {
|
|
mixins: [colors],
|
|
computed: mapGetters(['isLogin']),
|
|
data() {
|
|
return {
|
|
tabList: [{
|
|
title: '全部',
|
|
type: 0,
|
|
count: ''
|
|
},
|
|
{
|
|
title: '好评',
|
|
type: 3,
|
|
count: ''
|
|
},
|
|
{
|
|
title: '中评',
|
|
type: 2,
|
|
count: ''
|
|
},
|
|
{
|
|
title: '差评',
|
|
type: 1,
|
|
count: ''
|
|
},
|
|
],
|
|
replyData: {},
|
|
product_id: 0,
|
|
reply: [],
|
|
type: 0,
|
|
loading: false,
|
|
loadend: false,
|
|
loadTitle: '加载更多',
|
|
page: 1,
|
|
limit: 20,
|
|
imgHost: HTTP_REQUEST_URL,
|
|
isShowAuth: false,
|
|
};
|
|
},
|
|
components:{ emptyPage },
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad: function(options) {
|
|
let that = this;
|
|
if (!options.product_id) return that.$util.Tips({
|
|
title: '缺少参数'
|
|
}, {
|
|
tab: 3,
|
|
url: 1
|
|
});
|
|
that.product_id = options.product_id;
|
|
},
|
|
onShow() {
|
|
uni.removeStorageSync('form_type_cart');
|
|
this.getProductReplyCount();
|
|
this.loadend = false;
|
|
this.page = 1;
|
|
this.reply = [];
|
|
this.getProductReplyList();
|
|
},
|
|
methods: {
|
|
replyFun(e) {
|
|
this.reply = e;
|
|
},
|
|
changeLogin() {
|
|
toLogin()
|
|
},
|
|
onLoadFun() {
|
|
this.isShowAuth = false
|
|
},
|
|
// 授权关闭
|
|
authColse: function(e) {
|
|
this.isShowAuth = e
|
|
},
|
|
/**
|
|
* 获取评论统计数据
|
|
*
|
|
*/
|
|
getProductReplyCount: function() {
|
|
let that = this;
|
|
getReplyConfig(that.product_id).then(res => {
|
|
that.$set(that, 'replyData', res.data);
|
|
this.tabList[0].count = res.data.sum_count;
|
|
this.tabList[1].count = res.data.good_count;
|
|
this.tabList[2].count = res.data.in_count;
|
|
this.tabList[3].count = res.data.poor_count;
|
|
});
|
|
},
|
|
/**
|
|
* 分页获取评论
|
|
*/
|
|
getProductReplyList: function() {
|
|
let that = this;
|
|
if (that.loadend) return;
|
|
if (that.loading) return;
|
|
that.loading = true;
|
|
that.loadTitle = '';
|
|
getReplyList(that.product_id, {
|
|
page: that.page,
|
|
limit: that.limit,
|
|
type: that.type,
|
|
}).then(res => {
|
|
let list = res.data,
|
|
loadend = list.length < that.limit;
|
|
that.reply = that.$util.SplitArray(list, that.reply);
|
|
that.$set(that, 'reply', that.reply);
|
|
that.loading = false;
|
|
that.loadend = loadend;
|
|
that.loadTitle = loadend ? "没有更多内容啦~" : "加载更多";
|
|
that.page = that.page + 1;
|
|
}).catch(err => {
|
|
that.loading = false,
|
|
that.loadTitle = '加载更多'
|
|
});
|
|
},
|
|
/*
|
|
* 点击事件切换
|
|
* */
|
|
changeType: function(e) {
|
|
let type = parseInt(e);
|
|
if (type == this.type) return;
|
|
this.type = type;
|
|
this.page = 1;
|
|
this.loadend = false;
|
|
this.$set(this, 'reply', []);
|
|
this.getProductReplyList();
|
|
},
|
|
goPage(id) {
|
|
uni.navigateTo({
|
|
url: '/pages/goods/goods_comment_con/comment_con?id=' + id
|
|
})
|
|
},
|
|
tapPraise(item) {
|
|
if (item.is_praise) {
|
|
getUnReplyPraise(item.id).then(res => {
|
|
item.is_praise = !item.is_praise;
|
|
item.praise = item.praise - 1;
|
|
return this.$util.Tips({
|
|
title: res.msg
|
|
});
|
|
});
|
|
} else {
|
|
getReplyPraise(item.id).then(res => {
|
|
item.is_praise = !item.is_praise;
|
|
item.praise = item.praise + 1;
|
|
return this.$util.Tips({
|
|
title: res.msg
|
|
});
|
|
});
|
|
}
|
|
},
|
|
},
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom: function() {
|
|
this.getProductReplyList();
|
|
},
|
|
onPageScroll(object) {
|
|
uni.$emit('scroll');
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.emptyBox {
|
|
text-align: center;
|
|
margin-top: 40rpx;
|
|
|
|
.tips {
|
|
color: #aaa;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
image {
|
|
width: 414rpx;
|
|
height: 336rpx;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background: var(--view-minorColorT);
|
|
border: 1rpx solid var(--view-theme);
|
|
color: var(--view-theme);
|
|
}
|
|
|
|
.text-primary-con {
|
|
color: var(--view-theme);
|
|
}
|
|
|
|
.tab_item~.tab_item {
|
|
margin-left: 16rpx;
|
|
}
|
|
.vip{
|
|
width: 64rpx;
|
|
height: 26rpx;
|
|
background: #FEF0D9;
|
|
border: 1px solid #FACC7D;
|
|
border-radius: 50rpx;
|
|
font-size: 18rpx;
|
|
font-weight: 500;
|
|
color: #DFA541;
|
|
margin-left: 10rpx;
|
|
.iconfont {
|
|
font-size: 16rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
.svip-border{
|
|
border: 2rpx solid #F1BB0D;
|
|
}
|
|
.vip-badge{
|
|
position: absolute;
|
|
top: -16rpx;
|
|
right: -8rpx;
|
|
width: 32rpx;
|
|
height: 30rpx;
|
|
}
|
|
</style>
|