91 lines
1.7 KiB
Vue
91 lines
1.7 KiB
Vue
<template>
|
||
<view class="goods-comment">
|
||
<cl-row type="flex" justify="space-between" :height="90">
|
||
<cl-text :size="28" bold :value="`商品评论（${total}）`"></cl-text>
|
||
|
||
<cl-text :size="24" color="info" @tap="toAll">
|
||
全部
|
||
<text class="cl-icon-arrow-right"></text>
|
||
</cl-text>
|
||
</cl-row>
|
||
|
||
<view class="list">
|
||
<view class="item" v-for="item in list" :key="item.id" @tap="toAll">
|
||
<comment-item :item="item" demo />
|
||
</view>
|
||
|
||
<cl-empty
|
||
text="暂无评论"
|
||
icon="message"
|
||
:icon-size="200"
|
||
:fixed="false"
|
||
:padding="[30, 0, 130, 0]"
|
||
v-if="isEmpty(list)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, ref, type PropType } from "vue";
|
||
import { useCool } from "/@/cool";
|
||
import { isEmpty } from "lodash-es";
|
||
import CommentItem from "./comment-item.vue";
|
||
|
||
const props = defineProps({
|
||
info: Object as PropType<Eps.GoodsInfoEntity>,
|
||
});
|
||
|
||
const { service, router } = useCool();
|
||
|
||
const list = ref<Eps.GoodsCommentEntity[]>([]);
|
||
const total = ref(0);
|
||
|
||
function refresh() {
|
||
service.goods.comment
|
||
.page({
|
||
goodsId: router.query.id,
|
||
page: 1,
|
||
size: 2,
|
||
order: "createTime",
|
||
sort: "desc",
|
||
})
|
||
.then((res) => {
|
||
list.value = res.list;
|
||
total.value = res.pagination.total || 0;
|
||
});
|
||
}
|
||
|
||
function toAll() {
|
||
router.push({
|
||
path: "/pages/goods/comment",
|
||
query: {
|
||
goodsId: router.query.id,
|
||
},
|
||
});
|
||
}
|
||
|
||
onMounted(() => {
|
||
refresh();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.goods-comment {
|
||
position: relative;
|
||
background-color: #fff;
|
||
padding: 0 30rpx 24rpx 30rpx;
|
||
margin-bottom: 24rpx;
|
||
|
||
.list {
|
||
.item {
|
||
margin-bottom: 24rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|