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> |