ProductCard.vue
2.25 KB
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<template>
<view class="bg-gray-50 rounded-[24rpx] p-[28rpx] product-card">
<!-- 产品名称 -->
<text class="block text-gray-800 text-[32rpx] font-medium mb-[20rpx]">{{ productName }}</text>
<!-- 产品标签 -->
<view v-if="tags && tags.length" class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
<view
v-for="tag in tags"
:key="tag.id"
class="text-[20rpx] px-[12rpx] py-[4rpx] rounded-full"
:style="{
backgroundColor: tag.bg_color,
color: tag.text_color
}"
>
<text class="text-[22rpx]">{{ tag.name }}</text>
</view>
</view>
<!-- 操作按钮 -->
<view class="flex justify-between gap-[24rpx]">
<nut-button
plain
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600"
@tap="handleDetail"
>
产品详情
</nut-button>
<nut-button
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
@tap="handlePlan"
>
计划书
</nut-button>
</view>
</view>
</template>
<script setup>
/**
* 产品卡片组件
*
* @description 热卖产品列表项卡片，展示产品名称、标签和操作按钮
* @component ProductCard
*/
import { defineProps, defineEmits } from 'vue';
/**
* 组件属性
*/
const props = defineProps({
/** 产品 ID */
productId: {
type: Number,
required: true
},
/** 产品名称 */
productName: {
type: String,
required: true
},
/** 产品标签数组 */
tags: {
type: Array,
default: () => []
}
});
/**
* 组件事件
*/
const emit = defineEmits({
/** 点击产品详情按钮 */
detail: (productId) => typeof productId === 'number',
/** 点击计划书按钮 */
plan: (productId) => typeof productId === 'number'
});
/**
* 处理产品详情点击
*
* @description 触发 detail 事件，传递产品 ID
*/
const handleDetail = () => {
emit('detail', props.productId);
};
/**
* 处理计划书点击
*
* @description 触发 plan 事件，传递产品 ID
*/
const handlePlan = () => {
emit('plan', props.productId);
};
</script>
<style lang="less" scoped>
.product-card {
// 可以添加卡片特定的样式
}
</style>