jiazhipeng
12 months ago
19 changed files with 728 additions and 40 deletions
@ -0,0 +1,349 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="list" v-if="list.length>0"> |
|||
<view class="item" v-for="(item,index) in list" :key="index"> |
|||
<view class="top"> |
|||
<view class="" style="display: flex;justify-content: center;align-items: center;"> |
|||
<image class="toux" :src="showImg(item.user.avatar)" mode="aspectFill"></image> |
|||
<view class="name-item">{{item.user.username ? item.user.username : '匿名用户'}}</view> |
|||
</view> |
|||
<view class="date"> |
|||
{{item.create_time.substring(0,10)}} |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;margin: 22rpx 0 34rpx 0;align-items: center;"> |
|||
<uni-rate readonly=true :value='item.rate' margin="0" size="20" :is-fill="false" active-color="red"/> |
|||
<view style="margin: 0 20rpx;color: #999999">|</view> |
|||
<view class="goods-title text-overflow"> |
|||
{{item.goods_name}} |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<view style="width: 690rpx;" :class="item.close?'':'text'" :id="`content${index}`"> |
|||
{{item.content}} |
|||
</view> |
|||
<view class="" v-if="item.needShowExpande"> |
|||
<view class="close" v-if="item.close" @click="changeStatus(item,index)"> |
|||
收起<image style="width: 20rpx;height: 20rpx;margin-left: 12.67rpx;" src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230803/a18caeb522f500bd2bc90c184c45dfed.png" mode=""></image> |
|||
</view> |
|||
<view class="open" v-else @click="changeStatus(item,index)"> |
|||
展开<image style="width: 20rpx;height: 20rpx;margin-left: 12.67rpx;" src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230803/74cb60c6bf367e4bc6450daacf4f2c95.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="img-list" v-if="item.image_list.length>0"> |
|||
<image :src="showImg(img)" mode="aspectFill" v-for="(img,imgIndex) in item.image_list" |
|||
@click="reImg(item.image_list,imgIndex)" :key="imgIndex"></image> |
|||
<!-- <image :src="showImg(img)" mode="" v-for="(img,imgIndex) in item.images.split(',')" |
|||
@click="reImg(item,imgIndex)"></image> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="no-data" v-else> |
|||
<image :src="showImg('https://testtaihu.https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20221226/458a1739cb553882abf32672148ddc3c.png')" mode="aspectFill"></image> |
|||
<view class=""> |
|||
暂无评论~ |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Base from "@/components/Base"; |
|||
export default { |
|||
name: "commentList", |
|||
extends: Base, |
|||
data() { |
|||
return { |
|||
id: null, |
|||
list: [], |
|||
finished: false, |
|||
details: '', |
|||
close:false, |
|||
scenicId:0, |
|||
goodsId:0, |
|||
needShowExpande: false, |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
console.log('options',options); |
|||
if (options.scenicId) { |
|||
this.scenicId = options.scenicId |
|||
console.log(this.scenicId); |
|||
} |
|||
if (options.goodsId) { |
|||
this.goodsId = options.goodsId |
|||
console.log(this.goodsId); |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.getInfo() |
|||
}, |
|||
methods: { |
|||
changeStatus(item,index) { |
|||
item.close = !item.close |
|||
this.$forceUpdate() |
|||
}, |
|||
getInfo() { |
|||
this.Post({ |
|||
scenic_id: this.scenicId, |
|||
goods_id: this.goodsId, |
|||
offset: this.list.length, |
|||
limit: 10 |
|||
}, '/api/scenic/getGoodsCommentByScenicId').then(res => { |
|||
if (res) { |
|||
this.list = [...this.list, ...res.data] |
|||
this.list.forEach(item => { |
|||
item.close = false |
|||
item.needShowExpande = false |
|||
}) |
|||
console.log('添加close的list',this.list); |
|||
if (res.data.length < 10) { |
|||
this.finished = true |
|||
} |
|||
} |
|||
|
|||
this.$nextTick(() => { |
|||
let query=uni.createSelectorQuery(); |
|||
let lineHeight = 19 |
|||
|
|||
this.list.forEach((item,index) => { |
|||
query.select(`#content${index}`).boundingClientRect(res => { |
|||
console.log(res) |
|||
console.log(index); |
|||
if (res.height < lineHeight * 3) { |
|||
item.close = false |
|||
item.needShowExpande = false |
|||
console.log(item) |
|||
|
|||
} else { |
|||
item.close = false |
|||
item.needShowExpande = true |
|||
console.log(item) |
|||
} |
|||
this.$forceUpdate() |
|||
}).exec(() => { |
|||
|
|||
}) |
|||
|
|||
}) |
|||
}) |
|||
|
|||
|
|||
}) |
|||
}, |
|||
reImg(item, imgIndex) { |
|||
console.log(item); |
|||
let imgArr = item |
|||
console.log('imgArr',imgArr); |
|||
imgArr.forEach((item,index,arr)=>{ |
|||
if (!item.includes('https://yjdtadmin.sz-trip.com')) { |
|||
arr[index] = this.NEWAPIURL+arr[index] |
|||
} |
|||
}) |
|||
uni.previewImage({ |
|||
current: imgIndex, |
|||
urls: imgArr, |
|||
}); |
|||
} |
|||
// reImg(item, imgIndex) { |
|||
// console.log(123123); |
|||
// let imgArr = item.images.split(',') |
|||
// imgArr.forEach((item,index,arr)=>{ |
|||
// arr[index] = this.NEWAPIURL+arr[index] |
|||
// }) |
|||
// console.log(imgArr); |
|||
// uni.previewImage({ |
|||
// urls:imgArr, |
|||
// longPressActions: { |
|||
// itemList:['111'], |
|||
// success: function(data) { |
|||
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); |
|||
// }, |
|||
// fail: function(err) { |
|||
// console.log(err.errMsg); |
|||
// } |
|||
// } |
|||
// }); |
|||
// } |
|||
}, |
|||
onReachBottom() { |
|||
setTimeout(() => { |
|||
if (!this.finished) this.getInfo() |
|||
}, 1000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
view { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #FFFFFF; |
|||
padding: 19rpx 27rpx 33rpx 27rpx; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.list { |
|||
.item { |
|||
width: 100%; |
|||
border-bottom: solid 1rpx rgba(217, 217, 217, 1); |
|||
padding-bottom: 28.67rpx; |
|||
margin-bottom: 38rpx; |
|||
|
|||
.top { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
|
|||
.toux { |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
border-radius: 50%; |
|||
flex-shrink: 0; |
|||
margin-right: 14.67rpx; |
|||
} |
|||
|
|||
.name-item { |
|||
font-size: 31rpx; |
|||
font-weight: bold; |
|||
color: #666; |
|||
} |
|||
|
|||
.date { |
|||
font-size: 24rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #999999; |
|||
} |
|||
|
|||
// .left { |
|||
// width: 100%; |
|||
// margin-left: 15rpx; |
|||
|
|||
// .name { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// width: 100%; |
|||
// justify-content: space-between; |
|||
|
|||
// .name-item { |
|||
// font-size: 27rpx; |
|||
// font-family: PingFang SC; |
|||
// font-weight: 400; |
|||
// color: #333333; |
|||
// } |
|||
// } |
|||
|
|||
// .date { |
|||
|
|||
// font-size: 24rpx; |
|||
// font-family: PingFang SC; |
|||
// font-weight: 400; |
|||
// color: #999999; |
|||
// margin-top: 17rpx; |
|||
// } |
|||
// } |
|||
} |
|||
|
|||
.content { |
|||
// margin-top: 20rpx; |
|||
// margin-left: 73rpx; |
|||
width: 690rpx; |
|||
font-size: 29rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #000000; |
|||
// line-height: 50rpx; |
|||
|
|||
} |
|||
|
|||
.img-list { |
|||
margin-top: 8rpx; |
|||
flex-wrap: wrap; |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
align-items: center; |
|||
// margin-left: 73rpx; |
|||
width: 100%; |
|||
|
|||
image { |
|||
width: 219rpx; |
|||
height: 219rpx; |
|||
// margin-right: 26rpx; |
|||
margin-top: 20rpx; |
|||
border-radius: 13rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.no-data { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
min-height: 800rpx; |
|||
flex-direction: column; |
|||
|
|||
image { |
|||
width: 482rpx; |
|||
height: 273rpx; |
|||
} |
|||
|
|||
view { |
|||
font-size: 29rpx; |
|||
font-weight: 500; |
|||
color: #8599B5; |
|||
margin-top: 42rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
.text { |
|||
max-height: 145rpx; |
|||
word-break: break-all; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 3; |
|||
} |
|||
|
|||
// .close-text { |
|||
// max-height: 145rpx; |
|||
// word-break: break-all; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
// display: -webkit-box; |
|||
// -webkit-box-orient: vertical; |
|||
// -webkit-line-clamp: 3; |
|||
// } |
|||
|
|||
.goods-title { |
|||
font-size: 31rpx; |
|||
font-weight: 500; |
|||
color: #999999; |
|||
} |
|||
|
|||
.open, .close { |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
color: #08C59B; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.img-list image:nth-child(3n-1) { |
|||
margin-left: 20rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,289 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<!-- 顶部商品图片、名称 --> |
|||
<view class="top"> |
|||
<image :src="showImg(info.specifications_image)" mode=""></image> |
|||
<view class="goods-title text-overflowRows"> |
|||
{{info.specifications_name}} |
|||
</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 NEWAPIURL from '@/static/js/request.js'; |
|||
// import {pathToBase64,base64ToPath} from "../../js_sdk/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, |
|||
// 线条样式 |
|||
// borderStyle: { |
|||
// width: 1, |
|||
// color: 'blue', |
|||
// style: 'dashed', |
|||
// radius: 2 |
|||
// } |
|||
}, |
|||
fileLists: [], |
|||
list:[], |
|||
starIndex: 5 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
console.log(options); |
|||
if (options.order_id) { |
|||
this.order_id = options.order_id; |
|||
} |
|||
|
|||
this.getDetail() |
|||
}, |
|||
methods: { |
|||
// 更改评分 |
|||
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); |
|||
}, |
|||
// 上传照片 |
|||
onunload(url){ |
|||
console.log('url',url); |
|||
return new Promise((resolve, reject) => { |
|||
uni.uploadFile({ |
|||
url: NEWAPIURL+'/api/common/upload', |
|||
filePath: url, |
|||
name: 'file', |
|||
formData: { |
|||
'token': this.$store.state.user.userInfo.token || uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).token : '' |
|||
}, |
|||
success:res => { |
|||
resolve(JSON.parse(res.data).data.url) |
|||
}, |
|||
fail:(err)=>{ |
|||
uni.hideLoading() |
|||
uni.showToast({ |
|||
title: '上传失败，请重新上传', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
// 获取上传状态 |
|||
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: '上传中' |
|||
}) |
|||
// console.log('打印',fileListLen); |
|||
}) |
|||
// console.log('fileListLen',fileListLen); |
|||
for (var i = 0; i < lists.length; i++) { |
|||
const result = await this.onunload(e.tempFiles[i].url) |
|||
console.log('result',result) |
|||
// let item = fileListLen[fileListLen.length-1] |
|||
// console.log('item',item) |
|||
// this.fileLists.splice(fileListLen.length-1, 1, Object.assign(item, { |
|||
// status: 'success', |
|||
// message: '', |
|||
// url: result |
|||
// })) |
|||
// fileListLen++ |
|||
this.list.push(result) |
|||
} |
|||
console.log('fileLists',this.fileLists); |
|||
console.log('list',this.list); |
|||
}, |
|||
getDetail() { |
|||
this.Post({ |
|||
order_id: this.order_id |
|||
}, |
|||
'/api/order/orderDetail' |
|||
).then(res => { |
|||
if (res) { |
|||
let index = res.data.order_child.findIndex(item => item.status == 'WAIT_COMMENT') |
|||
this.info = res.data.order_child[index]; |
|||
} |
|||
}); |
|||
}, |
|||
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 |
|||
} else{ |
|||
this.list = this.list.map(item => 'https://yjdtadmin.sz-trip.com' + item); |
|||
} |
|||
console.log('-----------',this.list); |
|||
this.Post({ |
|||
goods_id: this.info.goods_id, |
|||
child_id: this.info.child_id, |
|||
content: this.content, |
|||
image_list: this.list+'', |
|||
rate: this.starIndex |
|||
}, |
|||
'/api/Goods/comment' |
|||
).then(res => { |
|||
if (res.code == 1) { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/order/trades' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</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: #C3282E; |
|||
border-radius: 40rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 80rpx; |
|||
position: fixed; |
|||
bottom: 53.33rpx; |
|||
} |
|||
|
|||
/deep/ .uni-file-picker { |
|||
padding-bottom: 165rpx !important; |
|||
} |
|||
|
|||
/deep/ .icon-del-box { |
|||
// background: #ed4545 !important; |
|||
} |
|||
|
|||
/deep/ .file-picker__progress-item { |
|||
display: none !important; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue