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>

src/components/spec-popup/styles/base.scss

@@ -0,0 +1,31 @@
+@import '../../../styles/variables';
+
+.spec-popup {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: 82%;
+  background: $card;
+  border-radius: 28px 28px 0 0;
+  z-index: 210;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
+  overflow: hidden;
+}
+
+.spec-popup__handle {
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background: $text-5;
+  margin: 10px auto 0;
+  flex-shrink: 0;
+}
+
+.spec-popup__scroll {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 60vh;
+}

src/components/spec-popup/styles/footer.scss

@@ -0,0 +1,74 @@
+@import '../../../styles/variables';
+
+.spec-popup__footer {
+  padding: 14px 20px;
+  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
+  background: $card;
+  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-shrink: 0;
+}
+
+.spec-popup__footer-price {
+  flex: 1;
+  min-width: 0;
+}
+
+.spec-popup__footer-label {
+  font-size: 11px;
+  color: $text-4;
+  margin-bottom: 2px;
+}
+
+.spec-popup__footer-total {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.spec-popup__footer-unit {
+  font-size: 14px;
+  font-weight: 700;
+  color: $primary-dark;
+}
+
+.spec-popup__footer-value {
+  font-size: 26px;
+  font-weight: 800;
+  color: $primary-dark;
+  line-height: 1;
+}
+
+.spec-popup__footer-summary {
+  font-size: 11px;
+  color: $text-4;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.spec-popup__footer-btn {
+  height: 48px;
+  min-width: 140px;
+  padding: 0 28px;
+  border-radius: 24px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
+  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  letter-spacing: 0.3px;
+
+  &--disabled {
+    background: $text-5;
+    box-shadow: none;
+    pointer-events: none;
+  }
+}

src/components/spec-popup/styles/header.scss

@@ -0,0 +1,104 @@
+@import '../../../styles/variables';
+
+.spec-popup__header {
+  display: flex;
+  gap: 14px;
+  padding: 6px 20px 16px;
+  position: relative;
+}
+
+.spec-popup__img {
+  width: 100px;
+  height: 100px;
+  border-radius: $r-md;
+  flex-shrink: 0;
+  box-shadow: $shadow-sm;
+  background: linear-gradient(135deg, #FED7AA, #FDBA74);
+}
+
+.spec-popup__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.spec-popup__name {
+  font-size: 17px;
+  font-weight: 700;
+  color: $text-1;
+  line-height: 1.4;
+}
+
+.spec-popup__desc {
+  font-size: 12px;
+  color: $text-3;
+  margin-top: 4px;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.spec-popup__tags {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.spec-popup__tag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 5px;
+  line-height: 1.5;
+
+  &--hot { background: $red-light; color: #DC2626; }
+  &--new { background: $primary-light; color: $primary; }
+  &--sales { background: $border; color: $text-3; }
+}
+
+.spec-popup__price-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.spec-popup__price-unit {
+  font-size: 13px;
+  font-weight: 700;
+  color: $primary-dark;
+}
+
+.spec-popup__price-current {
+  font-size: 22px;
+  font-weight: 800;
+  color: $primary-dark;
+  line-height: 1;
+}
+
+.spec-popup__price-origin {
+  font-size: 12px;
+  color: $text-4;
+  text-decoration: line-through;
+}
+
+.spec-popup__close {
+  position: absolute;
+  top: 6px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: $border;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-4;
+  font-size: 14px;
+}

src/components/spec-popup/styles/index.scss

@@ -0,0 +1,5 @@
+@import './base.scss';
+@import './header.scss';
+@import './options.scss';
+@import './stepper.scss';
+@import './footer.scss';

src/components/spec-popup/styles/options.scss

@@ -0,0 +1,73 @@
+@import '../../../styles/variables';
+
+.spec-popup__group {
+  padding: 16px 20px;
+  border-top: 0.5px solid $border;
+}
+
+.spec-popup__group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.spec-popup__group-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: $text-1;
+}
+
+.spec-popup__group-tag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  line-height: 1.6;
+
+  &--required { background: $red-light; color: $red; }
+  &--multi { background: $primary-light; color: $primary; }
+}
+
+.spec-popup__pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.spec-popup__pill {
+  height: 38px;
+  padding: 0 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: $text-2;
+  background: $bg;
+  border: 1.5px solid transparent;
+  border-radius: 14px;
+  white-space: nowrap;
+
+  &--selected {
+    background: $primary-lighter;
+    border-color: $primary;
+    color: $primary-darker;
+    font-weight: 600;
+  }
+
+  &--disabled {
+    opacity: 0.35;
+    pointer-events: none;
+  }
+}
+
+.spec-popup__pill-extra {
+  font-size: 12px;
+  color: $text-4;
+  font-weight: 400;
+
+  .spec-popup__pill--selected & {
+    color: $primary;
+  }
+}

src/components/spec-popup/styles/stepper.scss

@@ -0,0 +1,46 @@
+@import '../../../styles/variables';
+
+.spec-popup__stepper-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-top: 0.5px solid $border;
+}
+
+.spec-popup__stepper-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: $text-1;
+}
+
+.spec-popup__stepper {
+  display: flex;
+  align-items: center;
+}
+
+.spec-popup__stepper-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 1.5px solid $text-5;
+  background: $card;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-2;
+  font-size: 16px;
+
+  &--disabled {
+    opacity: 0.35;
+    pointer-events: none;
+  }
+}
+
+.spec-popup__stepper-value {
+  width: 48px;
+  text-align: center;
+  font-size: 17px;
+  font-weight: 700;
+  color: $text-1;
+}

src/components/spec-popup/useSpecPopup.ts

@@ -0,0 +1,11 @@
+export function useSpecPopup () {
+  function tagClass (tag: string) {
+    if (['招牌', '热卖', '热销'].includes(tag)) return 'spec-popup__tag--hot'
+    if (['新品'].includes(tag)) return 'spec-popup__tag--new'
+    return 'spec-popup__tag--sales'
+  }
+
+  return {
+    tagClass
+  }
+}