249 lines
6.1 KiB
Vue
249 lines
6.1 KiB
Vue
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||
import { getProductCommentList } from '@/api/mall'
|
||
import { navigateTo } from '../../utils/router'
|
||
|
||
const topNav = ref([
|
||
{ name: '全部', id: '1' },
|
||
{ name: '好评(54)', id: '2' },
|
||
{ name: '差评(43)', id: '3' },
|
||
{ name: '有图(23)', id: '4' }
|
||
])
|
||
|
||
const formData = reactive({
|
||
type: '1'
|
||
})
|
||
const productId = ref('')
|
||
const listData = ref([])
|
||
const paging = ref(null)
|
||
|
||
const onTop = id => {
|
||
formData.type = id
|
||
}
|
||
|
||
const getList = async (pageNum, pageSize) => {
|
||
try {
|
||
const res = await getProductCommentList({
|
||
productId: productId.value,
|
||
pageNum,
|
||
pageSize
|
||
})
|
||
paging.value.complete(res.rows)
|
||
} catch (err) {
|
||
paging.value.complete(false)
|
||
}
|
||
}
|
||
|
||
onLoad(e => {
|
||
productId.value = e.productId
|
||
})
|
||
|
||
onShow(() => {
|
||
getList()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<z-paging
|
||
ref="paging"
|
||
v-model="listData"
|
||
:default-page-size="15"
|
||
safe-area-inset-bottom
|
||
use-safe-area-placeholder
|
||
:auto="false"
|
||
@query="getList"
|
||
>
|
||
<view class="comment-box">
|
||
<!-- <view class="top-options">
|
||
<view
|
||
v-for="(item, index) in topNav"
|
||
:key="index"
|
||
:class="{ active: item.id === formData.type }"
|
||
class="text"
|
||
@click="onTop(item.id)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 卡片位置 -->
|
||
<view v-for="item in listData" :key="item.id" class="card-box">
|
||
<image
|
||
:src="item.avatar || '/static/images/public/random1.png'"
|
||
mode="scaleToFill"
|
||
class="avatar"
|
||
></image>
|
||
<!-- 右边 -->
|
||
<view class="right-box">
|
||
<view class="name_box">
|
||
<text class="name">{{ item.userName }}</text>
|
||
<uni-rate readonly :size="24" :value="item.rating" />
|
||
</view>
|
||
<view class="rate-box">
|
||
<view class="date">
|
||
<text>{{ item.createTime }}</text>
|
||
<!-- <text>重庆市</text> -->
|
||
</view>
|
||
<!-- <view class="star">
|
||
<view class="like">
|
||
<uni-icons
|
||
type="hand-up"
|
||
size="16"
|
||
color="#74747480"
|
||
></uni-icons>
|
||
<text v-if="item.likeCount">{{ item.likeCount }}</text>
|
||
</view>
|
||
<uni-icons
|
||
type="chat"
|
||
size="16"
|
||
color="#74747480"
|
||
></uni-icons>
|
||
</view> -->
|
||
</view>
|
||
<text class="content">
|
||
{{ item.content }}
|
||
</text>
|
||
<!-- <view class="img-box">
|
||
<image
|
||
v-for="item in 5"
|
||
src="/static/images/public/random1.png"
|
||
mode="scaleToFill"
|
||
class="bottom-img"
|
||
></image>
|
||
</view>
|
||
<view class="bottom-content">
|
||
<view class="name-box">
|
||
<text>名字：</text>
|
||
<text>内容</text>
|
||
</view>
|
||
<text class="expand">共三条回复></text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部按钮 -->
|
||
<template #bottom>
|
||
<bottom-view position="absolute">
|
||
<cb-button
|
||
@click="navigateTo('/pages/mall/add-comment', { productId })"
|
||
>
|
||
确认添加
|
||
</cb-button>
|
||
</bottom-view>
|
||
</template>
|
||
</z-paging>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
// @import './styles/public.scss';
|
||
@import '@/styles/top-selector.scss';
|
||
.comment-box {
|
||
padding: 32rpx 24rpx;
|
||
.card-box {
|
||
margin-top: 36rpx;
|
||
display: flex;
|
||
.avatar {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 64rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 16rpx;
|
||
}
|
||
.right-box {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
.name_box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.name {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.rate-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 10rpx 0 20rpx;
|
||
.date {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #74747480;
|
||
text {
|
||
&:first-child {
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.star {
|
||
display: flex;
|
||
align-items: center;
|
||
.like {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #74747480;
|
||
margin-right: 86rpx;
|
||
}
|
||
}
|
||
}
|
||
.content {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.img-box {
|
||
margin-top: 16rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
grid-gap: 16rpx;
|
||
.bottom-img {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
}
|
||
}
|
||
.bottom-content {
|
||
margin-top: 32rpx;
|
||
background: #f9f9f9;
|
||
border-radius: 8rpx;
|
||
padding: 0 16rpx 16rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
.name-box {
|
||
margin-top: 16rpx;
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
&:last-child {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
.expand {
|
||
display: block;
|
||
margin-top: 14rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #00d993;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|