220 lines
7.4 KiB
Vue
220 lines
7.4 KiB
Vue
|
<script setup>
|
|||
|
|
// 商品评价列表
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
reactive,
|
|||
|
|
nextTick,
|
|||
|
|
getCurrentInstance,
|
|||
|
|
} from 'vue'
|
|||
|
|
import {
|
|||
|
|
onLoad,
|
|||
|
|
onReady,
|
|||
|
|
onPageScroll,
|
|||
|
|
} from '@dcloudio/uni-app'
|
|||
|
|
import {
|
|||
|
|
useStore
|
|||
|
|
} from 'vuex'
|
|||
|
|
//
|
|||
|
|
import util from '@/common/js/util.js'
|
|||
|
|
const {
|
|||
|
|
proxy
|
|||
|
|
} = getCurrentInstance()
|
|||
|
|
const {
|
|||
|
|
userinfo
|
|||
|
|
} = useStore().state
|
|||
|
|
const typeList = ref([{
|
|||
|
|
text: '全部',
|
|||
|
|
icon: null,
|
|||
|
|
value: 1
|
|||
|
|
}, {
|
|||
|
|
text: '最新',
|
|||
|
|
icon: '/static/picture.png',
|
|||
|
|
value: 2
|
|||
|
|
}, {
|
|||
|
|
text: '图/视频',
|
|||
|
|
icon: '/static/time.png',
|
|||
|
|
value: 3
|
|||
|
|
}])
|
|||
|
|
// 当前选中
|
|||
|
|
const typeIndex = ref(0)
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
const list = reactive([{
|
|||
|
|
id: 0,
|
|||
|
|
userId: 1,
|
|||
|
|
ks: 123,
|
|||
|
|
isLike: 1,
|
|||
|
|
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'
|
|||
|
|
],
|
|||
|
|
child: [{
|
|||
|
|
nickname: '用户a',
|
|||
|
|
content: '这款产品怎么样？',
|
|||
|
|
}, {
|
|||
|
|
nickname: '用户b',
|
|||
|
|
content: '这款产品怎么样？',
|
|||
|
|
}, ],
|
|||
|
|
}, {
|
|||
|
|
id: 0,
|
|||
|
|
userId: 1,
|
|||
|
|
isLike: 0,
|
|||
|
|
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'
|
|||
|
|
],
|
|||
|
|
child: [],
|
|||
|
|
}])
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 当前评论状态
|
|||
|
|
* @param {Object} index
|
|||
|
|
*/
|
|||
|
|
function handleTypeIndex(index) {
|
|||
|
|
if (typeIndex.value === index) return
|
|||
|
|
typeIndex.value = index
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开弹窗
|
|||
|
|
function open() {
|
|||
|
|
proxy.$refs.popup.open();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 预览图片
|
|||
|
|
function preview(urls, current) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls,
|
|||
|
|
current,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="app">
|
|||
|
|
<view class="typeList df ptb20 pl20 bfff f30">
|
|||
|
|
<view class="item df fdr aic mr20 ptb5 plr20 br4" :class="{'active': index === typeIndex}"
|
|||
|
|
v-for="(item, index) in typeList" :key="index" @click="handleTypeIndex(index)">
|
|||
|
|
<!-- <image class="icon mr10 wh30" v-if="item.icon" :src="item.icon" /> -->
|
|||
|
|
<text class="">{{ item.text }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="listBox f28">
|
|||
|
|
<view class="nomore" v-if="!list[0]">暂无评论~</view>
|
|||
|
|
|
|||
|
|
<view class="list df fdc" v-for="(item, index) in list" :key="index">
|
|||
|
|
<!-- 评论的用户 -->
|
|||
|
|
<view class="userinfo rows mtb20 mlr20">
|
|||
|
|
<image class="wh80 cir" :src="item.portrait" mode="aspectFill" />
|
|||
|
|
<view class="name f1 mlr20 c333 f34">{{ item.userName }}</view>
|
|||
|
|
<uni-icons type="more-filled" color="#999" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="content ml40 plr20 bfff br20">
|
|||
|
|
<!-- 款式日期 -->
|
|||
|
|
<view class="rows mtb20 c999">
|
|||
|
|
<view class="">款式：{{ item.ks }}</view>
|
|||
|
|
<view class="">{{ item.time }}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 评论内容 -->
|
|||
|
|
<view class="content mtb20 f30">{{item.content}}</view>
|
|||
|
|
|
|||
|
|
<!-- 图片 -->
|
|||
|
|
<view class="images mtb20" v-if="item.imageList[0]">
|
|||
|
|
<view class="item pr" @click="preview(item.imageList,index)"
|
|||
|
|
v-for="(image, index) in item.imageList" :key="index">
|
|||
|
|
<image class="img pa br10" :src="image" mode="aspectFill" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 菜单 -->
|
|||
|
|
<view class="fn df jcr aic mtb20 c999">
|
|||
|
|
<!-- 点赞 -->
|
|||
|
|
<view class="ec-item df aic mr20">
|
|||
|
|
<uni-icons type="hand-up-filled" color="#FF0000" v-if="item.isLike == 1" />
|
|||
|
|
<uni-icons type="hand-up" color="#999" v-else />
|
|||
|
|
<view class="ml10">0</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 留言数 -->
|
|||
|
|
<view class="ec-item df aic mr20">
|
|||
|
|
<uni-icons type="chat" color="#999" />
|
|||
|
|
<view class="ml10">{{item.child.length}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 子评论 -->
|
|||
|
|
<view class="child oh mtb20 plr20 br10">
|
|||
|
|
<view class="msg mtb10" v-for="(secItem,secIndex) in item.child" :key="secIndex">
|
|||
|
|
<text class="c666">{{secItem.nickname}}：</text>
|
|||
|
|
<text class="c333 ml5">{{secItem.content}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="nomore mtb30">暂无更多评论~</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.typeList {
|
|||
|
|
.item {
|
|||
|
|
color: #666;
|
|||
|
|
background-color: #FFF6EB;
|
|||
|
|
transition: .3s;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: #FF9B27;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 图片
|
|||
|
|
.images {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
grid-gap: 10rpx;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
padding-bottom: 100%;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 子评论
|
|||
|
|
.child {
|
|||
|
|
background-color: #F4F4F4;
|
|||
|
|
}
|
|||
|
|
</style>
|