refactor: 拆分小程序 vue 结构

src/components/spec-popup/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <view v-if="props.visible" class="overlay" @click="emit('close')" />
+  <view v-if="props.visible" class="spec-popup">
+    <view class="spec-popup__handle" />
+
+    <scroll-view scroll-y class="spec-popup__scroll">
+      <view class="spec-popup__header">
+        <image
+          class="spec-popup__img"
+          :src="props.product.coverImageUrl"
+          mode="aspectFill"
+        />
+        <view class="spec-popup__info">
+          <text class="spec-popup__name">{{ props.product.name }}</text>
+          <text class="spec-popup__desc">
+            {{ props.product.subtitle || props.product.description }}
+          </text>
+          <view class="spec-popup__tags">
+            <text
+              v-for="tag in props.product.tagTexts"
+              :key="tag"
+              class="spec-popup__tag"
+              :class="tagClass(tag)"
+            >
+              {{ tag }}
+            </text>
+          </view>
+          <view class="spec-popup__price-row">
+            <text class="spec-popup__price-unit">¥</text>
+            <text class="spec-popup__price-current">{{ props.displayUnitPrice }}</text>
+            <text
+              v-if="props.product.originalPriceText"
+              class="spec-popup__price-origin"
+            >
+              ¥{{ props.product.originalPriceText }}
+            </text>
+          </view>
+        </view>
+        <view class="spec-popup__close" @click="emit('close')">
+          <text>✕</text>
+        </view>
+      </view>
+
+      <view
+        v-for="group in props.product.optionGroups"
+        :key="group.id"
+        class="spec-popup__group"
+      >
+        <view class="spec-popup__group-header">
+          <text class="spec-popup__group-title">{{ group.name }}</text>
+          <text
+            v-if="group.required"
+            class="spec-popup__group-tag spec-popup__group-tag--required"
+          >
+            必选
+          </text>
+          <text
+            v-else-if="group.selectionType === 'multiple'"
+            class="spec-popup__group-tag spec-popup__group-tag--multi"
+          >
+            可多选
+          </text>
+        </view>
+        <view class="spec-popup__pills">
+          <view
+            v-for="option in group.options"
+            :key="option.id"
+            class="spec-popup__pill"
+            :class="{
+              'spec-popup__pill--selected': props.isSelected(group.id, option.id),
+              'spec-popup__pill--disabled': option.soldOut
+            }"
+            @click="emit('toggleOption', group, option)"
+          >
+            <text>{{ option.name }}</text>
+            <text v-if="option.extraPrice" class="spec-popup__pill-extra">
+              +¥{{ option.extraPriceText }}
+            </text>
+          </view>
+        </view>
+      </view>
+
+      <view class="spec-popup__stepper-row">
+        <text class="spec-popup__stepper-label">数量</text>
+        <view class="spec-popup__stepper">
+          <view
+            class="spec-popup__stepper-btn"
+            :class="{ 'spec-popup__stepper-btn--disabled': props.quantity <= 1 }"
+            @click="emit('changeQty', -1)"
+          >
+            <text>-</text>
+          </view>
+          <text class="spec-popup__stepper-value">{{ props.quantity }}</text>
+          <view class="spec-popup__stepper-btn" @click="emit('changeQty', 1)">
+            <text>+</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <view class="spec-popup__footer">
+      <view class="spec-popup__footer-price">
+        <text class="spec-popup__footer-label">合计</text>
+        <view class="spec-popup__footer-total">
+          <text class="spec-popup__footer-unit">¥</text>
+          <text class="spec-popup__footer-value">{{ props.totalPriceText }}</text>
+        </view>
+        <text class="spec-popup__footer-summary">{{ props.summaryText }}</text>
+      </view>
+      <view
+        class="spec-popup__footer-btn"
+        :class="{ 'spec-popup__footer-btn--disabled': !props.canAdd }"
+        @click="props.canAdd && emit('addToCart')"
+      >
+        <text>{{ props.canAdd ? '加入购物车' : props.disabledText }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type {
+  MiniProductDetail,
+  MiniProductOption,
+  MiniProductOptionGroup
+} from '@/shared'
+import { useSpecPopup } from './useSpecPopup'
+
+const props = defineProps<{
+  visible: boolean
+  product: MiniProductDetail
+  quantity: number
+  displayUnitPrice: number
+  totalPriceText: string
+  summaryText: string
+  canAdd: boolean
+  disabledText: string
+  isSelected: (groupId: string, optionId: string) => boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  addToCart: []
+  toggleOption: [group: MiniProductOptionGroup, option: MiniProductOption]
+  changeQty: [delta: number]
+}>()
+
+const { tagClass } = useSpecPopup()
+</script>
+
+<style lang="scss">
+@import './styles/index.scss';
+</style>