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