refactor: 拆分小程序 vue 结构

src/components/product-card/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="product-card" @click="emit('select', props.product)">
+    <view class="product-card__img-wrap">
+      <image
+        class="product-card__img"
+        :src="props.product.coverImageUrl"
+        mode="aspectFill"
+      />
+      <text
+        v-if="props.product.tagTexts?.length"
+        class="product-card__img-tag"
+        :class="tagClass"
+      >
+        {{ props.product.tagTexts[0] }}
+      </text>
+    </view>
+    <view class="product-card__body">
+      <view>
+        <text class="product-card__name">{{ props.product.name }}</text>
+        <text class="product-card__desc">{{ props.product.description }}</text>
+        <view class="product-card__meta">
+          <text class="product-card__sales">{{ props.product.salesText }}</text>
+        </view>
+      </view>
+      <view class="product-card__bottom">
+        <view class="product-card__price">
+          <text class="product-card__price-unit">¥</text>
+          <text class="product-card__price-value">{{ props.product.price }}</text>
+          <text
+            v-if="props.product.originalPriceText"
+            class="product-card__price-origin"
+          >
+            ¥{{ props.product.originalPriceText }}
+          </text>
+        </view>
+        <view
+          class="product-card__btn"
+          :class="{ 'product-card__btn--disabled': props.product.soldOut }"
+          @click.stop="emit('action', props.product)"
+        >
+          <text>{{ props.product.hasOptions ? '选规格' : '加入购物车' }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { MiniProductCard } from '@/shared'
+import { useProductCard } from './useProductCard'
+
+const props = defineProps<{
+  product: MiniProductCard
+}>()
+
+const emit = defineEmits<{
+  select: [product: MiniProductCard]
+  action: [product: MiniProductCard]
+}>()
+
+const { tagClass } = useProductCard(props)
+</script>
+
+<style lang="scss">
+@import './styles.scss';
+</style>