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.
298 lines
8.5 KiB
298 lines
8.5 KiB
3 months ago
|
<template>
|
||
|
|
<view class="evaluateWtapper" :style="colorStyle">
|
||
|
|
<!-- 商品详情 -->
|
||
|
|
<view class="pt-24 pb-24 pl-32 pr-32 flex-between-center" v-if="replyCon.product"
|
||
|
|
@click="details(replyCon.product)">
|
||
|
|
<image class="w-104 h-104 rd-16rpx" :src="replyCon.product.image"></image>
|
||
|
|
<view class="ml-24 w-462 line2 text--w111-333 fs-28 lh-40rpx">{{replyCon.product.store_name}}</view>
|
||
|
|
<view class="flex-center w-56 h-56 rd-28rpx cart_border ml-40">
|
||
|
|
<text class="iconfont icon-ic_ShoppingCart1 text-primary-con"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 评价内容卡片 -->
|
||
|
|
<view class="bg--w111-fff rd-24rpx pt-32 pb-32 pl-56 pr-56 mt-24" v-if="replyCon.reply">
|
||
|
|
<view class="flex-between-center">
|
||
|
|
<view class="flex-y-center">
|
||
|
|
<image :src="replyCon.reply.avatar" class="w-56 h-56 rd-28rpx"></image>
|
||
|
|
<text class="fs-28 text--w111-333 pl-12">{{replyCon.reply.nickname}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="fs-26 text--w111-999">{{replyCon.reply.add_time}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="mt-32">
|
||
|
|
<view class="flex-y-center">
|
||
|
|
<view class="flex pr-40">
|
||
|
|
<text class="iconfont icon-ic_star1 fs-18 text-primary-con"
|
||
|
|
v-for="item in Number(replyCon.star)" :key="item"></text>
|
||
|
|
</view>
|
||
|
|
<text class="fs-22 text--w111-999 pro_name relative" v-if="replyCon.reply.suk">{{replyCon.reply.suk }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="mt-24 fs-28 text--w111-333 lh-44rpx">{{replyCon.reply.comment}}</view>
|
||
|
|
<image :src="pic" v-for="(pic,i) in replyCon.reply.pics" :key="i" class="w-full mt-20 rd-16rpx"
|
||
|
|
mode="widthFix"></image>
|
||
|
|
<view class="mt-24">
|
||
|
|
<text class="fs-22 text--w111-999">浏览{{replyCon.reply.views_num}}次</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bg--w111-fff rd-24rpx pt-32 pb-32 pl-56 pr-56 mt-24">
|
||
|
|
<view class="text--w111-333 fs-28 fw-500">{{replyNum}}条回复</view>
|
||
|
|
<view class="reply_box pb-24" v-for="(item,index) in replyList" :key="index">
|
||
|
|
<view class="flex justify-between items-baseline">
|
||
|
|
<view class="flex-y-center mt-32">
|
||
|
|
<image class="w-64 h-64 rd-50%" :src="item.user.avatar" v-if="item.uid && item.user"></image>
|
||
|
|
<image class="w-64 h-64 rd-50%" src="../static/store.png" v-if="!item.uid"></image>
|
||
|
|
<image class="w-64 h-64 rd-50%" src="@/static/images/f.png" v-if="!item.user"></image>
|
||
|
|
<view class="flex-col pl-16">
|
||
|
|
<view class="flex-y-center">
|
||
|
|
<text class="text--w111-333 fs-24"
|
||
|
|
:class="!item.uid ? 'text_score':''">{{item.user?item.user.nickname:'用户'}}</text>
|
||
|
|
<view class="store_badge flex-center fs-18" v-if="!item.uid">商家</view>
|
||
|
|
</view>
|
||
|
|
<view class="fs-26 text--w111-999">{{item.create_time}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex-y-center" :class="item.is_praise ? 'font-num':''">
|
||
|
|
<text class="iconfont icon-ic_Like fs-32" @click="praise(item)"></text>
|
||
|
|
<text class="fs-22 pl-8">{{item.praise}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="mt-24 fs-26 text--w111-333 lh-44rpx pb-24">{{item.content}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="h-120 pb-safe"></view>
|
||
|
|
<view class="page_footer fixed-lb w-full bg--w111-fff pr-20 pb-safe">
|
||
|
|
<view class="pl-32 pr-24 h-96 flex-between-center">
|
||
|
|
<view class="w-498 h-64 rd-32rpx bg--w111-f5f5f5 pl-24 flex-y-center text--w111-999 px-20"
|
||
|
|
@tap="showInput = true">
|
||
|
|
<text class="iconfont icon-ic_edit"></text>
|
||
|
|
<text class="fs-26 pl-16">说说你的看法吧～</text>
|
||
|
|
</view>
|
||
|
|
<view class="flex-y-center pl-28">
|
||
|
|
<view :class="replyCon.is_praise ? 'text-primary-con':''">
|
||
|
|
<text class="iconfont icon-ic_Like"
|
||
|
|
@click="tapPraise"></text>
|
||
|
|
<text class="fs-22 pl-8">{{replyCon.reply?replyCon.reply.praise:0}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="pl-32">
|
||
|
|
<text class="iconfont icon-ic_message"></text>
|
||
|
|
<text class="fs-22 pl-8">{{replyCon.reply ? replyCon.reply.comment_sum : 0}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<tui-drawer mode="bottom" :visible="showInput" background-color="transparent" mask maskClosable @close="closeDrawer">
|
||
|
|
<view class="w-full bg--w111-fff drawer-text pt-32 pl-32 pr-32">
|
||
|
|
<view class="bg--w111-f5f5f5 rd-32rpx pt-16 pr-14 pb-16 pl-24 relative">
|
||
|
|
<textarea class="w-528 fs-28 h-auto"
|
||
|
|
:auto-height="true"
|
||
|
|
wrap-style="wrap"
|
||
|
|
max-height="100px"
|
||
|
|
placeholder-class='placeholder'
|
||
|
|
placeholder="说说你的看法吧"
|
||
|
|
:always-embed="true"
|
||
|
|
:adjust-position="true"
|
||
|
|
cursor-spacing="85rpx"
|
||
|
|
v-model="con"
|
||
|
|
:maxlength="150"
|
||
|
|
name="mark">
|
||
|
|
</textarea>
|
||
|
|
<view class="reply-confirm-btn w-96 h-48 rd-24rpx flex-center bg-color text--w111-fff fs-24 ml-24"
|
||
|
|
@tap="sendText">发送</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</tui-drawer>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getReplyInfo,
|
||
|
|
getReplyComment,
|
||
|
|
postReplyPraise,
|
||
|
|
replyComment,
|
||
|
|
postUnReplyPraise,
|
||
|
|
getReplyPraise,
|
||
|
|
getUnReplyPraise
|
||
|
|
} from '@/api/store.js';
|
||
|
|
import tuiDrawer from "@/components/tui-drawer/tui-drawer.vue"
|
||
|
|
import colors from '@/mixins/color.js';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
tuiDrawer
|
||
|
|
},
|
||
|
|
mixins: [colors],
|
||
|
|
data: function() {
|
||
|
|
return {
|
||
|
|
id: 0,
|
||
|
|
page: 1,
|
||
|
|
limit: 200,
|
||
|
|
replyCon: {},
|
||
|
|
replyList: [],
|
||
|
|
con: '',
|
||
|
|
scrollTop: 0,
|
||
|
|
replyNum: 0,
|
||
|
|
showInput:false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.id = options.id
|
||
|
|
this.getInfo();
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
uni.removeStorageSync('form_type_cart');
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
tapPraise() {
|
||
|
|
if (this.replyCon.is_praise) {
|
||
|
|
getUnReplyPraise(this.id).then(res => {
|
||
|
|
this.replyCon.is_praise = !this.replyCon.is_praise
|
||
|
|
this.replyCon.reply.praise = this.replyCon.reply.praise - 1
|
||
|
|
return this.$util.Tips({
|
||
|
|
title: res.msg
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
getReplyPraise(this.id).then(res => {
|
||
|
|
this.replyCon.is_praise = !this.replyCon.is_praise
|
||
|
|
this.replyCon.reply.praise = this.replyCon.reply.praise + 1
|
||
|
|
return this.$util.Tips({
|
||
|
|
title: res.msg
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 设置页面滚动位置
|
||
|
|
setPageScrollTo() {
|
||
|
|
let view = uni
|
||
|
|
.createSelectorQuery()
|
||
|
|
.in(this)
|
||
|
|
.select('#tops');
|
||
|
|
view.boundingClientRect(res => {
|
||
|
|
this.scrollTop = parseFloat(res.height);
|
||
|
|
}).exec();
|
||
|
|
},
|
||
|
|
sendText() {
|
||
|
|
if (!this.con.trim()) {
|
||
|
|
return this.$util.Tips({
|
||
|
|
title: '说点什么呗'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
replyComment(this.id, {
|
||
|
|
content: this.con
|
||
|
|
}).then(res => {
|
||
|
|
let that = this;
|
||
|
|
this.con = '';
|
||
|
|
that.showInput = false;
|
||
|
|
this.replyNum = this.replyNum + 1;
|
||
|
|
this.getList();
|
||
|
|
this.$util.Tips({
|
||
|
|
title: res.msg
|
||
|
|
});
|
||
|
|
})
|
||
|
|
},
|
||
|
|
details(info) {
|
||
|
|
if(info.is_presale_product){
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/activity/goods_details/index?id=${info.id}&type=6`
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/goods_details/index?id=${info.id}`
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getInfo() {
|
||
|
|
getReplyInfo(this.id).then(res => {
|
||
|
|
this.replyCon = res.data;
|
||
|
|
this.replyNum = this.replyCon.reply.comment_sum;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getList() {
|
||
|
|
getReplyComment(this.id, {
|
||
|
|
page: this.page,
|
||
|
|
limit: this.limit
|
||
|
|
}).then(res => {
|
||
|
|
this.replyList = res.data
|
||
|
|
}).catch(err => {
|
||
|
|
return this.$util.Tips({
|
||
|
|
title: err.msg
|
||
|
|
});
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getpreviewImage: function(index) {
|
||
|
|
uni.previewImage({
|
||
|
|
urls: this.replyCon.reply.pics,
|
||
|
|
current: this.replyCon.reply.pics[index]
|
||
|
|
});
|
||
|
|
},
|
||
|
|
praise(item) {
|
||
|
|
if (item.is_praise) {
|
||
|
|
postUnReplyPraise(item.id).then(res => {
|
||
|
|
item.is_praise = !item.is_praise
|
||
|
|
item.praise = item.praise - 1
|
||
|
|
return this.$util.Tips({
|
||
|
|
title: res.msg
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
postReplyPraise(item.id).then(res => {
|
||
|
|
item.is_praise = !item.is_praise
|
||
|
|
item.praise = item.praise + 1
|
||
|
|
return this.$util.Tips({
|
||
|
|
title: res.msg
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
closeDrawer(){
|
||
|
|
this.showInput = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.cart_border {
|
||
|
|
border: 1px solid var(--view-theme);
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-primary-con {
|
||
|
|
color: var(--view-theme);
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_score {
|
||
|
|
color: #FAAD14;
|
||
|
|
}
|
||
|
|
|
||
|
|
.store_badge {
|
||
|
|
width: 48rpx;
|
||
|
|
height: 26rpx;
|
||
|
|
background: #FAAD14;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
color: #fff;
|
||
|
|
margin-left: 8rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
.drawer-text{
|
||
|
|
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||
|
|
}
|
||
|
|
|
||
|
|
.pro_name::before {
|
||
|
|
content: '';
|
||
|
|
width: 1px;
|
||
|
|
height: 18rpx;
|
||
|
|
background-color: #ccc;
|
||
|
|
position: absolute;
|
||
|
|
left: -20rpx;
|
||
|
|
top: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.reply_box~.reply_box {
|
||
|
|
border-top: 1px solid #ddd;
|
||
|
|
}
|
||
|
|
.reply-confirm-btn{
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10rpx;
|
||
|
|
right: 14rpx;
|
||
|
|
}
|
||
|
|
</style>
|