wangzhibo
4 天以前 10595d8632f959d0954d1939243196f4eed02372
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<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>