273 lines
9.9 KiB
Vue
273 lines
9.9 KiB
Vue
<template>
|
|
<JyPopup ref="popup" type="bottom" title="评论">
|
|
<view class="sift-list df mtb20 pl20">
|
|
<!-- sift 是否选中 -->
|
|
<view :class="['sift-list-item df aic', sift == item.value && 'first']" v-for="(item, index) in siftList"
|
|
:key="index" :value="item">
|
|
<image class="sift-list-img" v-if="item.icon" :src="item.icon" />
|
|
<text class="ml10">{{ item.text }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="jy-line"></view>
|
|
<scroll-view class="comment-scroll" @scrolltolower="onScrollToLower" scroll-y scroll-with-animation
|
|
:show-scrollbar="false">
|
|
<view class="commnent-content" v-for="(detail, index) in list" :key="index">
|
|
<view class="comment-item">
|
|
<view class="f28 df fdc">
|
|
<view class="df aic jcsb">
|
|
<view class="portrait df aic fcc mb20">
|
|
<image class="mr20" :src="detail.portrait" mode="aspectFill" />
|
|
<view class="name c333">
|
|
{{ detail.userName }}
|
|
</view>
|
|
</view>
|
|
<image class="tp" :src="threePoints" />
|
|
</view>
|
|
<view class="ml40 bfff content">
|
|
<!-- 款式日期 -->
|
|
<view class="df aic jcsb mb10">
|
|
<view class="c999 "><span>款式：</span>{{ detail.ks }}</view>
|
|
<view class="c999">{{ detail.time }}</view>
|
|
</view>
|
|
<!-- chaoshu 内容 超出3行需要点击查看更多显示 -->
|
|
<view class="content-text" v-html="detail.content"></view>
|
|
<view class="image-list" v-if="detail.imageList && detail.imageList.length">
|
|
<view class="image-item" @click="preview(index)"
|
|
v-for="(image, index) in detail.imageList" :key="index">
|
|
<image :src="image" mode="aspectFill" />
|
|
</view>
|
|
</view>
|
|
<!-- 点赞 信息 -->
|
|
<view class="ec-list df aic mt20 fr">
|
|
<view class="ec-item df aic mr20" v-for="(item, index) in ecList" :key="index">
|
|
<image class="tp" :src="item.icon" />
|
|
<view class="ml10">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</JyPopup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineExpose, defineEmits } from 'vue'
|
|
import JyPopup from '@/components/public/jy-popup'
|
|
import endorse from '@/static/endorse.png'
|
|
import comment from '@/static/comment.png'
|
|
import picture from '@/static/picture.png'
|
|
import time from '@/static/time.png'
|
|
import threePoints from '@/static/three-points.png'
|
|
const popup = ref(null)
|
|
const onScrollToLower = () => {
|
|
console.log('滚动到底部');
|
|
// 在这里执行你需要的操作，例如加载更多数据
|
|
};
|
|
const ecList = ref([{
|
|
icon: endorse,
|
|
text: '点赞',
|
|
count: 0
|
|
}, {
|
|
icon: comment,
|
|
text: '回复',
|
|
count: 0
|
|
}])
|
|
const siftList = ref([{
|
|
text: '全部',
|
|
icon: null,
|
|
value: 1
|
|
}, {
|
|
text: '好评',
|
|
icon: picture,
|
|
value: 2
|
|
}, {
|
|
text: '中评',
|
|
icon: time,
|
|
value: 3
|
|
}])
|
|
const sift = ref(1)
|
|
|
|
const emit = defineEmits(['close'])
|
|
const open = () => {
|
|
popup.value.open();
|
|
}
|
|
// 暴露方法
|
|
defineExpose({
|
|
open
|
|
});
|
|
const preview = (index) => {
|
|
uni.previewImage({
|
|
urls: props.detail.imageList,
|
|
current: index
|
|
})
|
|
}
|
|
const showMore = () => {
|
|
// 显示更多
|
|
}
|
|
const list = ref([{
|
|
id: 0,
|
|
userId: 1,
|
|
ks: 123,
|
|
userName: '明月天涯',
|
|
portrait: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
time: '2023年10月30日 14:20',
|
|
content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
|
|
imageList: [
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg'
|
|
]
|
|
}, {
|
|
id: 0,
|
|
userId: 1,
|
|
ks: 123,
|
|
userName: '明月天涯',
|
|
portrait: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
time: '2023年10月30日 14:20',
|
|
content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
|
|
imageList: [
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
|
|
'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg'
|
|
]
|
|
}])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sift-list {
|
|
&-img {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
|
|
.first {
|
|
background: #FF9B27;
|
|
|
|
text {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
background: #FFF6EB;
|
|
padding: 6rpx 14rpx;
|
|
border-radius: 4rpx;
|
|
width: 112rpx;
|
|
height: 48rpx;
|
|
margin: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.jy-line {
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #E5E5E5;
|
|
}
|
|
|
|
.comment-header {
|
|
.title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
padding: 28rpx 0 14rpx 0;
|
|
font-size: $uni-font-size-lg;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 30rpx;
|
|
display: inline-block;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.commnent-content {
|
|
font-size: 28rpx;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
|
|
|
|
.comment-item {
|
|
padding: 18rpx 16rpx;
|
|
background-color: #F4F4F4;
|
|
|
|
.content {
|
|
padding: 20rpx 40rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.portrait {
|
|
image {
|
|
border-radius: 50%;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
margin-bottom: 6rpx;
|
|
font-weight: 600;
|
|
|
|
.time {
|
|
font-weight: normal;
|
|
font-size: 24rpx;
|
|
color: rgba(180, 180, 180, 1);
|
|
}
|
|
}
|
|
|
|
.image-list {
|
|
margin-top: 12rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.image-item {
|
|
width: 186rpx;
|
|
height: 186rpx;
|
|
margin: 0 12rpx 12rpx 0;
|
|
|
|
image {
|
|
border-radius: 4rpx;
|
|
width: 186rpx;
|
|
height: 186rpx;
|
|
}
|
|
}
|
|
|
|
.image-item:nth-of-type(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tp {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
</style> |