You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
350 lines
8.0 KiB
350 lines
8.0 KiB
12 months ago
|
<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>
|