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
| <template>
| <view class="goods-item" @tap="toDetail">
| <cl-image
| mode="aspectFill"
| background-color="#fff"
| :size="[350, '100%']"
| :radius="[16, 16, 0, 0]"
| :src="resizeImage(item.mainPic!, 360)"
| />
|
| <view class="goods-item__det">
| <cl-text
| :value="item.title"
| block
| :margin="[0, 0, 16, 0]"
| :ellipsis="2"
| :line-height="1.4"
| />
|
| <cl-row>
| <cl-text type="price" color="#333" :size="34" :value="item.price" bold />
| <cl-text
| color="info"
| :size="22"
| :margin="[0, 0, 0, 10]"
| :value="`${item.sold || 0}件已售`"
| />
| </cl-row>
| </view>
| </view>
| </template>
|
| <script lang="ts" setup>
| import type { PropType } from "vue";
| import { useCool, useUpload } from "/@/cool";
|
| const props = defineProps({
| item: {
| type: Object as PropType<Eps.GoodsInfoEntity>,
| default: () => ({}),
| },
| });
|
| const { router } = useCool();
| const { resizeImage } = useUpload();
|
| function toDetail() {
| router.push({
| path: "/pages/goods/detail",
| query: {
| id: props.item.id,
| },
| });
| }
| </script>
|
| <style lang="scss" scoped>
| .goods-item {
| position: relative;
| background-color: #ffffff;
| border-radius: 16rpx;
| margin-bottom: 20rpx;
|
| .goods-item__det {
| padding: 20rpx;
| }
| }
| </style>
|
|
