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