jiazhipeng
3 weeks ago
11 changed files with 757 additions and 35 deletions
@ -0,0 +1,169 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="header" > |
||||
|
<view>买家评价</view> |
||||
|
<view style="font-weight: 500;font-size: 27rpx;color: #999999;" @click="goCommentList()"> |
||||
|
共{{total}}条 |
||||
|
<uni-icons type="right" size="12"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="review-box" v-if="reviews.length>0"> |
||||
|
<view class="review-item" v-for="(item,i) in reviews" :key="i"> |
||||
|
<image class="avator" :src="item.user.avatar" mode="aspectFill"></image> |
||||
|
<view class="comment-container"> |
||||
|
<view class="comment-info"> |
||||
|
<view class="nickname" style="padding-right:20rpx ;">{{item.user.nickname}}</view> |
||||
|
<!-- <view class="nickname" style="padding-right:20rpx ;">张三</view> --> |
||||
|
<view class="iconfont"> |
||||
|
<img src="https://static.ticket.sz-trip.com/dongtai/images/user/star-seld.png" |
||||
|
v-for="(item,index) in Number(item.rate)" :key="index" class="starImg"/> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="comment-content text-overflowRows">{{item.content}}</view> |
||||
|
</view> |
||||
|
<view class="img-box" v-if="item.img_list.length>0"> |
||||
|
<image class="imgs" mode="aspectFill" :src="item.img_list[0]" @click="viewImg(item)"></image> |
||||
|
<view v-if="item.img_list.length>1" class="more-img">+{{item.img_list.length}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name:"commentList", |
||||
|
props: ["prodId"], |
||||
|
data() { |
||||
|
return { |
||||
|
total: 0, |
||||
|
reviews: [], |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getComments() |
||||
|
}, |
||||
|
methods: { |
||||
|
getComments () { |
||||
|
this.Post({ |
||||
|
product_id: this.prodId, |
||||
|
offset: 0, |
||||
|
limit: 3, |
||||
|
},"/api/product/product_comment_list").then((res) => { |
||||
|
let resData = res.data.list || [] |
||||
|
resData.forEach(v=>{ |
||||
|
v.img_list = v.img_list.split(',') |
||||
|
}) |
||||
|
this.reviews = resData; |
||||
|
this.total = res.data.total; |
||||
|
}) |
||||
|
}, |
||||
|
goCommentList () { |
||||
|
uni.navigateTo({ |
||||
|
url:`/subPackages/user/commentList?id=${this.prodId}` |
||||
|
}) |
||||
|
}, |
||||
|
viewImg (item) { |
||||
|
let imgs = item.img_list |
||||
|
uni.previewImage({ |
||||
|
urls:imgs |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.bg{ |
||||
|
background: #FFFFFF; |
||||
|
width: 100%; |
||||
|
|
||||
|
.header{ |
||||
|
width: 100%; |
||||
|
height: 97rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
font-weight: bold; |
||||
|
font-size: 35rpx; |
||||
|
color: #000000; |
||||
|
font-weight: bold; |
||||
|
font-size: 35rpx; |
||||
|
color: #000000; |
||||
|
padding: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
.review-box{ |
||||
|
border-top: 1px solid #D9D9D9; |
||||
|
padding: 26rpx; |
||||
|
.review-item{ |
||||
|
border-bottom: 1px solid #D9D9D9; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
color: #999999; |
||||
|
align-items: flex-start; |
||||
|
font-size: 24rpx; |
||||
|
.avator{ |
||||
|
width: 57rpx; |
||||
|
height: 57rpx; |
||||
|
border-radius: 50%; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.starImg{ |
||||
|
width: 23.47rpx; |
||||
|
height: 23.47rpx; |
||||
|
margin-right: 6rpx; |
||||
|
} |
||||
|
.comment-container{ |
||||
|
flex: 1; |
||||
|
width: 10rpx; |
||||
|
padding: 0 45rpx 0 15rpx; |
||||
|
} |
||||
|
.comment-info { |
||||
|
width: 100%; |
||||
|
height: 57rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.comment-content { |
||||
|
width: 100%; |
||||
|
padding-top: 12rpx; |
||||
|
font-size: 27rpx; |
||||
|
color: #000; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.img-box{ |
||||
|
width: 133rpx; |
||||
|
height: 133rpx; |
||||
|
position: relative; |
||||
|
.imgs{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
.more-img{ |
||||
|
height: 37rpx; |
||||
|
line-height: 37rpx; |
||||
|
background: #000; |
||||
|
border-radius: 13rpx 0rpx 13rpx 0rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 5rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 23rpx; |
||||
|
color: #FFFFFF; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
} |
||||
|
.review-item:last-of-type{ |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,247 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<!-- 顶部商品图片、名称 --> |
||||
|
<view class="top"> |
||||
|
<image :src="showImg(info.product_img)" mode=""></image> |
||||
|
<view class="goods-title text-overflowRows"> |
||||
|
{{info.product_title}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="rate-box"> |
||||
|
综合评分 |
||||
|
<img :src="'https://static.ticket.sz-trip.com/dongtai/images/user/' + (starIndex > index ? 'star-seld.png' : 'star.png')" |
||||
|
v-for="(item,index) in 5" :key="index" @click="changeStar(item)" class="starImg"/> |
||||
|
</view> |
||||
|
<view class="comment-text"> |
||||
|
<textarea placeholder-style="color:#999;font-size:28rpx;font-weigth:500;" placeholder="请填写您的评价~" style="width: 657rpx;background: #F7F7F7;border-radius: 6px;padding: 28.67rpx 20rpx;" v-model="content"/> |
||||
|
</view> |
||||
|
<view class="comment-pic"> |
||||
|
<view class="" style="margin-top: 40.67rpx;margin-bottom: 36.67rpx;">上传图片({{list.length}}/6)</view> |
||||
|
<uni-file-picker limit="6" file-mediatype="image" return-type="list" ref="files" :auto-upload="false" @select="select" @progress="progress" @success="success" @fail="fail" @delete="del"> |
||||
|
<view class="" style="display: flex;flex-direction: column;justify-content: center;align-items: center;"> |
||||
|
<!-- <image style="width: 40rpx;height: 40rpx;position: absolute;right: 0;top: 0;" src="https://static.ticket.sz-trip.com/tongli/images/order/cha.png" mode=""></image> --> |
||||
|
<view class="" style="margin-top: 16rpx;font-size: 24rpx;font-weight: 500;color: #999;"> |
||||
|
上传图片 |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-file-picker> |
||||
|
</view> |
||||
|
<view class="submit-btn" @click="submit">提交</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {pathToBase64} from "@/static/js/mmmm-image-tools/index.js" |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
proList: [ |
||||
|
{name: '', img: [], imgList: [], content: ''} |
||||
|
], |
||||
|
content:'', |
||||
|
info: {}, |
||||
|
order_id: '', |
||||
|
imageStyles: { |
||||
|
width: 64, |
||||
|
height: 64, |
||||
|
border: { |
||||
|
radius: '50%' |
||||
|
} |
||||
|
}, |
||||
|
listStyles: { |
||||
|
// 是否显示边框 |
||||
|
border: false, |
||||
|
// 是否显示分隔线 |
||||
|
dividline: false, |
||||
|
}, |
||||
|
fileLists: [], |
||||
|
list:[], |
||||
|
starIndex: 5 |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
|
||||
|
}, |
||||
|
onShow(){ |
||||
|
this.getProductInfo() |
||||
|
}, |
||||
|
methods: { |
||||
|
getProductInfo () { |
||||
|
this.info = uni.getStorageSync("commentProd"); |
||||
|
if (!this.info||!this.info.order_id) { |
||||
|
setTimeout(()=>{ |
||||
|
uni.navigateBack() |
||||
|
},1000) |
||||
|
} |
||||
|
}, |
||||
|
// 更改评分 |
||||
|
changeStar(item) { |
||||
|
this.starIndex = item + 1 |
||||
|
}, |
||||
|
del(e) { |
||||
|
console.log('e',e.tempFile); |
||||
|
let index = this.list.findIndex(f => f === e.tempFile) |
||||
|
this.list.splice(index, 1) |
||||
|
let i = this.fileLists.findIndex(f => f.url === e.tempFile) |
||||
|
this.fileLists.splice(i, 1) |
||||
|
this.$forceUpdate() |
||||
|
console.log('删除后的list',this.list); |
||||
|
console.log('删除后的fileLists',this.fileLists); |
||||
|
}, |
||||
|
// 上传照片 |
||||
|
async onunload(url){ |
||||
|
console.log('url',url); |
||||
|
let base64 = await pathToBase64(url) |
||||
|
let res = await this.Post({ |
||||
|
method: 'POST', |
||||
|
img_base64: base64 |
||||
|
}, '/api/pbservice/Other/base64Upload') |
||||
|
return res.data.url |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 获取上传状态 |
||||
|
async select(e){ |
||||
|
console.log('选择文件：',e) |
||||
|
let lists = [].concat(e.tempFiles) |
||||
|
console.log('lists',lists); |
||||
|
let fileListLen = this.fileLists |
||||
|
lists.map((item) => { |
||||
|
fileListLen.push({ |
||||
|
...item, |
||||
|
status: 'uploading', |
||||
|
message: '上传中' |
||||
|
}) |
||||
|
}) |
||||
|
for (var i = 0; i < lists.length; i++) { |
||||
|
const result = await this.onunload(e.tempFiles[i].url) |
||||
|
console.log('result',result) |
||||
|
this.list.push(result) |
||||
|
} |
||||
|
console.log('fileLists',this.fileLists); |
||||
|
console.log('list',this.list); |
||||
|
}, |
||||
|
|
||||
|
submit() { |
||||
|
console.log('content',this.content); |
||||
|
if (this.content == '') { |
||||
|
uni.showToast({ |
||||
|
title: '请文字评论后再提交~', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
if (this.fileLists.length != this.list.length) { |
||||
|
uni.showToast({ |
||||
|
title: '图片上传中，请稍后再提交', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return |
||||
|
} |
||||
|
console.log('-----------',this.list); |
||||
|
this.Post({ |
||||
|
product_id: this.info.product_id, |
||||
|
order_id: this.info.order_id, |
||||
|
content: this.content, |
||||
|
rate: this.starIndex, |
||||
|
img_list: this.list.join(","), // 空数组会转为空字符串 |
||||
|
sku_id: this.info.sku_id, |
||||
|
},'/api/product/product_comment').then(res => { |
||||
|
if (res.code == 1 || res.code == 200) { |
||||
|
uni.navigateBack() |
||||
|
uni.removeStorageSync(commentProd) |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.bg { |
||||
|
padding: 0 26.67rpx; |
||||
|
background: #fff; |
||||
|
min-height: 100vh; |
||||
|
padding-top: 19.33rpx; |
||||
|
} |
||||
|
.top { |
||||
|
display: flex; |
||||
|
} |
||||
|
.top image { |
||||
|
width: 142rpx; |
||||
|
height: 142rpx; |
||||
|
flex-shrink: 0; |
||||
|
margin: .67rpx 20rpx .67rpx 12rpx; |
||||
|
border-radius: 7rpx; |
||||
|
} |
||||
|
.goods-title { |
||||
|
height: 80rpx; |
||||
|
font-size: 31rpx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
.line { |
||||
|
height: 1rpx; |
||||
|
background: #d8d8d8; |
||||
|
margin: 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.rate-box { |
||||
|
display: flex; |
||||
|
height: 106rpx; |
||||
|
align-items: center; |
||||
|
|
||||
|
.starImg { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.example-body { |
||||
|
padding: 10px; |
||||
|
padding-top: 0; |
||||
|
} |
||||
|
|
||||
|
.custom-image-box { |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
display: flex; |
||||
|
/* #endif */ |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.submit-btn { |
||||
|
width: 697rpx; |
||||
|
height: 80rpx; |
||||
|
background: #6A8A2D; |
||||
|
border-radius: 11rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
text-align: center; |
||||
|
line-height: 80rpx; |
||||
|
position: fixed; |
||||
|
bottom: 53.33rpx; |
||||
|
} |
||||
|
|
||||
|
::v-deep .uni-file-picker { |
||||
|
padding-bottom: 165rpx !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
::v-deep .file-picker__progress-item { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,147 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
|
||||
|
<view class="review-item" v-for="(item,i) in reviews" :key="i"> |
||||
|
<view class="flex"> |
||||
|
<image class="avator" :src="item.user.avatar" mode="aspectFill"></image> |
||||
|
<view class="comment-container"> |
||||
|
<view class="nickname" style="padding-right:20rpx ;">{{item.user.nickname}}</view> |
||||
|
<view class="iconfont"> |
||||
|
<img src="https://static.ticket.sz-trip.com/dongtai/images/user/star-seld.png" |
||||
|
v-for="(item,index) in Number(item.rate)" :key="index" class="starImg"/> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="font-weight: 500;font-size: 24rpx;color: #999999;display: flex;align-items: center;"> |
||||
|
{{item.create_time.slice(0,10)}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="text-overflow" style="font-weight: 500; |
||||
|
font-size: 31rpx;color: #999999;margin: 22rpx 0 30rpx;"> |
||||
|
{{item.sku_name}} |
||||
|
</view> |
||||
|
|
||||
|
<view class="comment-content">{{item.content}}</view> |
||||
|
|
||||
|
<view class="img-box" > |
||||
|
<image class="imgs" v-for="(img,i) in item.img_list" :key="i" |
||||
|
mode="aspectFill" :src="img" @click="viewImg(item)"></image> |
||||
|
<!-- <view v-if="item.img_list.length>1" class="more-img">+{{item.img_list.length}}</view> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name:"commentList", |
||||
|
props: ["prodId"], |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
total: 0, |
||||
|
reviews: [], |
||||
|
finished: false, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.id = option.id |
||||
|
this.getComments() |
||||
|
}, |
||||
|
methods: { |
||||
|
getComments () { |
||||
|
this.Post({ |
||||
|
product_id: this.id, |
||||
|
offset: this.reviews.length, |
||||
|
limit: 10, |
||||
|
},"/api/product/product_comment_list").then((res) => { |
||||
|
let resData = res.data.list || [] |
||||
|
resData.forEach(v=>{ |
||||
|
v.img_list = v.img_list.split(',') |
||||
|
// v.img_list = [v.img_list, v.img_list, v.img_list, v.img_list] |
||||
|
}) |
||||
|
this.reviews = [...this.reviews, ...resData]; |
||||
|
this.total = res.data.total; |
||||
|
if(resData.length<10) { |
||||
|
this.finished = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
goCommentList () { |
||||
|
uni.navigateTo({ |
||||
|
url:`/subPackages/user/commentList?id=${this.prodId}` |
||||
|
}) |
||||
|
}, |
||||
|
viewImg (item) { |
||||
|
let imgs = item.img_list |
||||
|
uni.previewImage({ |
||||
|
urls:imgs |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if(!this.finished) this.getComments() |
||||
|
},1000) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.bg{ |
||||
|
background: #FFFFFF; |
||||
|
min-height: 100vh; |
||||
|
width: 100%; |
||||
|
padding: 20rpx 26rpx; |
||||
|
} |
||||
|
|
||||
|
.review-item{ |
||||
|
.avator{ |
||||
|
width: 72rpx; |
||||
|
height: 72rpx; |
||||
|
background: #999999; |
||||
|
border-radius: 50%; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.starImg{ |
||||
|
width: 23.47rpx; |
||||
|
height: 23.47rpx; |
||||
|
margin-right: 6rpx; |
||||
|
} |
||||
|
.comment-container{ |
||||
|
flex: 1; |
||||
|
width: 10rpx; |
||||
|
padding: 0 45rpx 0 15rpx; |
||||
|
height: 72rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
.comment-content { |
||||
|
width: 100%; |
||||
|
font-weight: 500; |
||||
|
font-size: 29rpx; |
||||
|
color: #000000; |
||||
|
margin-bottom: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.img-box{ |
||||
|
width: 100%; |
||||
|
.imgs{ |
||||
|
width: 219rpx; |
||||
|
height: 219rpx; |
||||
|
background: #CCCCCC; |
||||
|
border-radius: 13rpx; |
||||
|
margin-right: 20rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.imgs:nth-of-type(3) { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.review-item:last-of-type{ |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue