From 18a86089ff51ad91fa0873aa3a6457b1084ec63c Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Fri, 22 Aug 2025 15:04:28 +0800
Subject: [PATCH] =?UTF-8?q?SKU=E6=A8=A1=E5=9D=97=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vk-data-goods-sku-popup.d.ts                   | 145 +++++++++++++++++++++
 src/pages/goods/goods.vue                          |  57 +++++++-
 2 files changed, 199 insertions(+), 3 deletions(-)
 create mode 100644 src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.d.ts

diff --git a/src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.d.ts b/src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.d.ts
new file mode 100644
index 0000000..1ca47a6
--- /dev/null
+++ b/src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.d.ts
@@ -0,0 +1,145 @@
+import { Component } from '@uni-helper/uni-app-types'
+
+/** SKU 弹出层 */
+export type SkuPopup = Component<SkuPopupProps>
+
+/** SKU 弹出层实例 */
+export type SkuPopupInstance = InstanceType<SkuPopup>
+
+/** SKU 弹出层属性 */
+export type SkuPopupProps = {
+  /** 双向绑定，true 为打开组件，false 为关闭组件 */
+  modelValue: boolean
+  /** 商品信息本地数据源 */
+  localdata: SkuPopupLocaldata
+  /** 按钮模式 1:都显示 2:只显示购物车 3:只显示立即购买 */
+  mode?: 1 | 2 | 3
+  /** 该商品已抢完时的按钮文字 */
+  noStockText?: string
+  /** 库存文字 */
+  stockText?: string
+  /** 点击遮罩是否关闭组件 */
+  maskCloseAble?: boolean
+  /** 顶部圆角值 */
+  borderRadius?: string | number
+  /** 最小购买数量 */
+  minBuyNum?: number
+  /** 最大购买数量 */
+  maxBuyNum?: number
+  /** 每次点击后的数量 */
+  stepBuyNum?: number
+  /** 是否只能输入 step 的倍数 */
+  stepStrictly?: boolean
+  /** 是否隐藏库存的显示 */
+  hideStock?: false
+  /** 主题风格 */
+  theme?: 'default' | 'red-black' | 'black-white' | 'coffee' | 'green'
+  /** 默认金额会除以100（即100=1元），若设置为0，则不会除以100（即1=1元） */
+  amountType?: 1 | 0
+  /** 自定义获取商品信息的函数（已知支付宝不支持，支付宝请改用localdata属性） */
+  customAction?: () => void
+  /** 是否显示右上角关闭按钮 */
+  showClose?: boolean
+  /** 关闭按钮的图片地址 */
+  closeImage?: string
+  /** 价格的字体颜色 */
+  priceColor?: string
+  /** 立即购买 - 按钮的文字 */
+  buyNowText?: string
+  /** 立即购买 - 按钮的字体颜色 */
+  buyNowColor?: string
+  /** 立即购买 - 按钮的背景颜色 */
+  buyNowBackgroundColor?: string
+  /** 加入购物车 - 按钮的文字 */
+  addCartText?: string
+  /** 加入购物车 - 按钮的字体颜色 */
+  addCartColor?: string
+  /** 加入购物车 - 按钮的背景颜色 */
+  addCartBackgroundColor?: string
+  /** 商品缩略图背景颜色 */
+  goodsThumbBackgroundColor?: string
+  /** 样式 - 不可点击时,按钮的样式 */
+  disableStyle?: object
+  /** 样式 - 按钮点击时的样式 */
+  activedStyle?: object
+  /** 样式 - 按钮常态的样式 */
+  btnStyle?: object
+  /** 字段名 - 商品表id的字段名 */
+  goodsIdName?: string
+  /** 字段名 - sku表id的字段名 */
+  skuIdName?: string
+  /** 字段名 - 商品对应的sku列表的字段名 */
+  skuListName?: string
+  /** 字段名 - 商品规格名称的字段名 */
+  specListName?: string
+  /** 字段名 - sku库存的字段名 */
+  stockName?: string
+  /** 字段名 - sku组合路径的字段名 */
+  skuArrName?: string
+  /** 字段名 - 商品缩略图字段名(未选择sku时) */
+  goodsThumbName?: string
+  /** 被选中的值 */
+  selectArr?: string[]
+
+  /** 打开弹出层 */
+  onOpen: () => void
+  /** 关闭弹出层 */
+  onClose: () => void
+  /** 点击加入购物车时（需选择完SKU才会触发）*/
+  onAddCart: (event: SkuPopupEvent) => void
+  /** 点击立即购买时（需选择完SKU才会触发）*/
+  onBuyNow: (event: SkuPopupEvent) => void
+}
+
+/**  商品信息本地数据源 */
+export type SkuPopupLocaldata = {
+  /** 商品 ID */
+  _id: string
+  /** 商品名称 */
+  name: string
+  /** 商品图片 */
+  goods_thumb: string
+  /** 商品规格列表 */
+  spec_list: SkuPopupSpecItem[]
+  /** 商品SKU列表 */
+  sku_list: SkuPopupSkuItem[]
+}
+
+/** 商品规格名称的集合 */
+export type SkuPopupSpecItem = {
+  /** 规格名称 */
+  name: string
+  /** 规格集合 */
+  list: { name: string }[]
+}
+
+/** 商品SKU列表 */
+export type SkuPopupSkuItem = {
+  /** SKU ID */
+  _id: string
+  /**  商品 ID */
+  goods_id: string
+  /** 商品名称 */
+  goods_name: string
+  /** 商品图片 */
+  image: string
+  /** SKU 价格 * 100, 注意：需要乘以 100 */
+  price: number
+  /** SKU 规格组成, 注意：需要与 spec_list 数组顺序对应 */
+  sku_name_arr: string[]
+  /** SKU 库存 */
+  stock: number
+}
+
+/** 当前选择的sku数据 */
+export type SkuPopupEvent = SkuPopupSkuItem & {
+  /** 商品购买数量 */
+  buy_num: number
+}
+
+/** 全局组件类型声明 */
+declare module 'vue' {
+  export interface GlobalComponents {
+    'vk-data-goods-sku-popup': SkuPopup
+  }
+}
diff --git a/src/pages/goods/goods.vue b/src/pages/goods/goods.vue
index b4ba4b4..089e069 100644
--- a/src/pages/goods/goods.vue
+++ b/src/pages/goods/goods.vue
@@ -28,7 +28,7 @@
 
       <!-- 操作面板 -->
       <view class="action">
-        <view class="item arrow">
+        <view class="item arrow" @tap="isShowSku = true">
           <text class="label">选择</text>
           <text class="text ellipsis"> 请选择商品规格 </text>
         </view>
@@ -103,8 +103,8 @@
       </navigator>
     </view>
     <view class="buttons">
-      <view class="addcart"> 加入购物车 </view>
-      <view class="buynow"> 立即购买 </view>
+      <view class="addcart" @tap="openSkuPopup(SkuMode.Cart)"> 加入购物车 </view>
+      <view class="buynow" @tap="openSkuPopup(SkuMode.Buy)"> 立即购买 </view>
     </view>
   </view>
 
@@ -113,6 +113,15 @@
     <AddressPanel v-if="popupName === 'address'" @close="popup?.close()" />
     <ServicePanel v-if="popupName === 'service'" @close="popup?.close()" />
   </uni-popup>
+
+  <!-- SKU弹窗组件 -->
+  <vk-data-goods-sku-popup
+    v-model="isShowSku"
+    :localdata="localdata"
+    :mode="mode"
+    add-cart-background-color="#FFA868"
+    buy-now-background-color="#27BA9B"
+  />
 </template>
 
 <script setup lang="ts">
@@ -122,6 +131,7 @@ import type { GoodsResult } from '@/types/goods'
 import { getGoodsByIdAPI } from '@/services/goods'
 import AddressPanel from './components/AddressPanel.vue'
 import ServicePanel from './components/ServicePanel.vue'
+import type { SkuPopupLocaldata } from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
@@ -136,6 +146,25 @@ const goods = ref<GoodsResult>()
 const getGoodsByIdData = async () => {
   const res = await getGoodsByIdAPI(query.id)
   goods.value = res.result
+  // SKU组件所需格式
+  localdata.value = {
+    _id: res.result.id,
+    name: res.result.name,
+    goods_thumb: res.result.mainPictures[0],
+    spec_list: res.result.specs.map((v) => ({
+      name: v.name,
+      list: v.values,
+    })),
+    sku_list: res.result.skus.map((v) => ({
+      _id: v.id,
+      goods_id: res.result.id,
+      goods_name: res.result.name,
+      image: v.picture,
+      price: v.price * 100, // 注意：需要乘以 100
+      stock: v.inventory,
+      sku_name_arr: v.specs.map((vv) => vv.valueName),
+    })),
+  }
 }
 
 // 轮播图变化时
@@ -172,6 +201,28 @@ const openPopup = (name: typeof popupName.value) => {
 onLoad(() => {
   getGoodsByIdData()
 })
+
+// 是否显示SKU组件
+const isShowSku = ref(false)
+
+// 商品信息
+const localdata = ref({} as SkuPopupLocaldata)
+
+// 按钮模式
+enum SkuMode {
+  Both = 1,
+  Cart = 2,
+  Buy = 3,
+}
+const mode = ref<SkuMode>(SkuMode.Both)
+
+// 打开SKU弹窗修改按钮模式
+const openSkuPopup = (val: SkuMode) => {
+  // 显示SKU弹窗
+  isShowSku.value = true
+  // 修改按钮模式
+  mode.value = val
+}
 </script>
 
 <style lang="scss">