319 lines
7.4 KiB
Vue
319 lines
7.4 KiB
Vue
<template>
|
|
<view class="whole">
|
|
<template v-if="!isEmpty">
|
|
<view class="item" v-for="item in commentList" :key="item.id">
|
|
<view class="info">
|
|
<image :src="avatar" mode="aspectFill"></image>
|
|
<view class="right">
|
|
<text class="name">{{nickname}}</text>
|
|
<text>{{item.created_at}}</text>
|
|
</view>
|
|
</view>
|
|
<text class="comment" @longpress="copyComment(item.comment)">{{item.comment}}</text>
|
|
|
|
<div class="box_zong" v-if="item.material.length">
|
|
<view class="box_imgs" v-for="(item, index) in item.material" :key="index">
|
|
<image v-if="item.type === 1" mode="aspectFill" :src="item.url" @click="hanleImgs(item)"></image>
|
|
<image v-else :src="item.img_video"></image>
|
|
<view class="play" v-if="item.type === 2" @click="hanleImgs(item)">
|
|
<up-icon name="play-circle-fill" :size="30" color="#fff" />
|
|
</view>
|
|
</view>
|
|
</div>
|
|
|
|
<view class="goods" v-if="item.item" @click="toGroups(item)">
|
|
<image :src="item.item.pic_url" mode="aspectFill"></image>
|
|
<view class="right">
|
|
<text>{{item.item.goods_name}}
|
|
<template v-if="item.item.sku_name">{{item.item.sku_name}}</template>
|
|
</text>
|
|
<up-icon name="arrow-right" size="14" />
|
|
</view>
|
|
</view>
|
|
|
|
<template v-if="item.add_comments && item.add_comments.length">
|
|
<view class="addBox" v-for="itm in item.add_comments" :key="itm.id">
|
|
<view class="tit">
|
|
<text>{{getDayDiff(itm.created_at.substr(0, 10), item.created_at.substr(0, 10))}}追评</text>
|
|
<text class="time">{{itm.created_at.substr(0, 16)}}</text>
|
|
</view>
|
|
<text class="comment" @longpress="copyComment(itm.comment)">{{itm.comment}}</text>
|
|
<div class="box_zong" v-if="itm.material.length">
|
|
<view class="box_imgs" v-for="(it, i) in itm.material" :key="i">
|
|
<img v-if="it.type === 1" :src="it.url" @click="hanleImgs(it)">
|
|
<img v-else :src="it.img_video" />
|
|
<view class="play" v-if="it.type === 2" @click="hanleImgs(it)">
|
|
<up-icon name="play-circle-fill" :size="30" color="#fff" />
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="box" v-else>
|
|
<view class="btn" @click="addComment(item.id)">写追评</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="empty" v-else>
|
|
<up-empty mode="comment" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/comment.png" text="暂无评价喔"></up-empty>
|
|
</view>
|
|
</view>
|
|
|
|
<video-dialog :url="videoUrl" :show="showVideo" @close="showVideo = false"></video-dialog>
|
|
|
|
<!-- 隐私协议弹窗 -->
|
|
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs } from 'vue'
|
|
import { get } from '@/api/request.js'
|
|
import privacyPopup from '@/components/privacyPopup/index.vue'
|
|
import { judgePrivacy, getDayDiff } from '@/components/common.js'
|
|
import { Style } from '@/utils/list.js'
|
|
import videoDialog from '@/components/videoDialog/index.vue'
|
|
|
|
export default {
|
|
components: {
|
|
privacyPopup, videoDialog
|
|
},
|
|
setup() {
|
|
const data = reactive({
|
|
commentList: [],
|
|
lastPage: 0,
|
|
page: 1,
|
|
avatar: uni.getStorageSync('avatar'),
|
|
nickname: uni.getStorageSync('nickname'),
|
|
showVideo: false,
|
|
videoUrl: '',
|
|
isEmpty: false,
|
|
showPrivacy: false,
|
|
Color: uni.getStorageSync('theme_color'),
|
|
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
|
|
})
|
|
|
|
const hanleImgs = (e) => {
|
|
if (e.type === 1) {
|
|
uni.previewImage({
|
|
current: 0,
|
|
urls: [e.url]
|
|
})
|
|
} else {
|
|
data.showVideo = true
|
|
data.videoUrl = e.url
|
|
}
|
|
}
|
|
|
|
const getCommentList = (type = 1) => {
|
|
get('/api/v1/orderComment', { page: data.page }).then((res) => {
|
|
data.commentList = type == 1 ? data.commentList.concat(res.data) : res.data
|
|
data.lastPage = res.meta.last_page
|
|
data.isEmpty = data.commentList.length === 0
|
|
})
|
|
}
|
|
|
|
const toGroups = (id) => {
|
|
if (id.shop_group_goods_id) {
|
|
uni.navigateTo({
|
|
url: '/pages/groups/index?id=' + id.shop_group_goods_id
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/productDetails/index?id=' + id.shop_goods_id
|
|
})
|
|
}
|
|
}
|
|
|
|
// 复制评论
|
|
const copyComment = async (text) => {
|
|
if(await judgePrivacy()) {
|
|
data.showPrivacy = true
|
|
return false
|
|
}
|
|
uni.setClipboardData({
|
|
data: String(text),
|
|
success: function () {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '评论已复制'
|
|
})
|
|
},
|
|
fail: function () {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '复制失败'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const addComment = (id) => {
|
|
uni.navigateTo({
|
|
url: '/pages/order/comment/append?id=' + id
|
|
})
|
|
}
|
|
|
|
return {
|
|
getDayDiff,
|
|
...toRefs(data),
|
|
getCommentList,
|
|
hanleImgs,
|
|
toGroups,
|
|
copyComment,
|
|
addComment
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if (this.page < this.lastPage) {
|
|
this.page++
|
|
this.getCommentList()
|
|
}
|
|
},
|
|
onShow() {
|
|
this.page = 1
|
|
this.getCommentList(0)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.whole{
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
.item{
|
|
padding: 24rpx;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 24rpx;
|
|
.info{
|
|
display: flex;
|
|
height: 80rpx;
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background: #666;
|
|
margin-right: 20rpx;
|
|
}
|
|
.right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
font-size: 24rpx;
|
|
color: #98989f;
|
|
.name{
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.comment{
|
|
display: inline-block;
|
|
font-size: 28rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
.box_zong{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.box_imgs{
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-right: calc(33% - 200rpx);
|
|
margin-bottom: 10rpx;
|
|
position: relative;
|
|
&:nth-child(3n+3){
|
|
margin-right: 0;
|
|
}
|
|
image{
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
.play{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(0,0,0,0.35);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
.goods{
|
|
display: flex;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: rgba(245, 245, 245, 0.39);
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 10rpx;
|
|
image{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: rgba(187, 187, 187, 0.39);
|
|
border-radius: 8rpx;
|
|
display: block;
|
|
margin-right: 20rpx;
|
|
}
|
|
.right{
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text{
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
line-height: 40rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.box{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 20rpx;
|
|
.btn{
|
|
padding: 0 30rpx;
|
|
height: 52rpx;
|
|
border-radius: 52rpx;
|
|
background-color: v-bind('bgColor');
|
|
color: v-bind('Color');
|
|
line-height: 52rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.addBox{
|
|
background-color: #F7F7F7;
|
|
border-radius: 10rpx;
|
|
padding: 16rpx;
|
|
font-size: 28rpx;
|
|
margin-top: 24rpx;
|
|
.tit{
|
|
color: #f00;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.time{
|
|
color: #98989f;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.empty{
|
|
width: 100%;
|
|
padding: 120rpx 0;
|
|
}
|
|
}
|
|
</style>
|