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
| <script lang="ts" setup>
| import { useRouter } from 'vue-router';
|
| import { fenToYuan } from '../../../../../../packages/utils/src';
|
| import { Button, Image } from 'ant-design-vue';
|
| defineProps({
| spuId: {
| type: Number,
| default: 0,
| },
| picUrl: {
| type: String,
| default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
| },
| title: {
| type: String,
| default: '',
| },
| price: {
| type: [String, Number],
| default: '',
| },
| salesCount: {
| type: [String, Number],
| default: '',
| },
| stock: {
| type: [String, Number],
| default: '',
| },
| });
|
| const { push } = useRouter();
|
| /** 查看商品详情 */
| function openDetail(spuId: number) {
| push({ name: 'ProductSpuDetail', params: { id: spuId } });
| }
| </script>
|
| <template>
| <div
| class="mb-2.5 flex w-full cursor-pointer items-center rounded-lg bg-gray-500/30 p-2.5"
| @click.stop="openDetail(spuId)"
| >
| <!-- 左侧商品图片-->
| <div class="mr-2 w-16">
| <Image
| :initial-index="0"
| :preview-src-list="[picUrl]"
| :src="picUrl"
| class="h-full w-full rounded-lg"
| fit="contain"
| preview-teleported
| @click.stop
| />
| </div>
| <!-- 右侧商品信息 -->
| <div class="flex-1">
| <div class="line-clamp-1 w-full text-base font-bold">{{ title }}</div>
| <div class="my-1">
| <span class="mr-5">库存: {{ stock || 0 }}</span>
| <span>销量: {{ salesCount || 0 }}</span>
| </div>
| <div class="flex items-center justify-between">
| <span class="text-red-500">￥{{ fenToYuan(price) }}</span>
| <Button size="small" text type="primary">详情</Button>
| </div>
| </div>
| </div>
| </template>
|
|
