feat: ✨ 商品详情页 sku 模块 和 加入购物车

src/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.d.ts

@@ -82,13 +82,13 @@ export type SkuPopupProps = {
   selectArr?: string[]
 
   /** 打开弹出层 */
-  onOpen: () => void
+  open: () => void
   /** 关闭弹出层 */
-  onClose: () => void
+  close: () => void
   /** 点击加入购物车时（需选择完SKU才会触发）*/
-  onAddCart: (event: SkuPopupEvent) => void
+  cart: (event: SkuPopupEvent) => void
   /** 点击立即购买时（需选择完SKU才会触发）*/
-  onBuyNow: (event: SkuPopupEvent) => void
+  buy: (event: SkuPopupEvent) => void
 }
 
 /**  商品信息本地数据源 */

src/pages/goods/goods.vue

@@ -32,7 +32,7 @@
         <view class="action">
           <view class="item arrow">
             <text class="label">选择</text>
-            <text class="text ellipsis" @tap="isShowSkuPopup = true"> 请选择商品规格 </text>
+            <text class="text ellipsis" @tap="isShowSkuPopup = true"> {{ selectedSku }} </text>
           </view>
           <view class="item arrow" @tap="showPopup('address')">
             <text class="label">送至</text>
@@ -105,8 +105,8 @@
         </navigator>
       </view>
       <view class="buttons">
-        <view class="addcart"> 加入购物车 </view>
-        <view class="buynow"> 立即购买 </view>
+        <view class="addcart" @tap="showSkuPopup(SkuMode.AddCart)"> 加入购物车 </view>
+        <view class="buynow" @tap="showSkuPopup(SkuMode.BuyNow)"> 立即购买 </view>
       </view>
     </view>
 
@@ -118,10 +118,15 @@
 
     <!-- SKU 商品规格弹出层 -->
     <vk-data-goods-sku-popup
-      ref="skuPopup"
+      ref="skuPopupRef"
+      buyNowBackgroundColor="#27ba9b"
+      addCartBackgroundColor="#ffa868"
+      :mode="skuMode"
       :modelValue="isShowSkuPopup"
       :localdata="localdata"
-      @onClose="isShowSkuPopup = false"
+      @close="isShowSkuPopup = false"
+      @cart="handlerAddCart"
+      @buy="handlerBuyNow"
     />
   </template>
 </template>
@@ -130,11 +135,16 @@
 import { getGoodsAPI } from '@/services/goods'
 import type { GoodsResult } from '@/types/goods'
 import { onLoad } from '@dcloudio/uni-app'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import ServicePanel from './components/ServicePanel.vue'
 import AddressPanel from './components/AddressPanel.vue'
 import PageSkeleton from './components/PageSkeleton.vue'
-import type { SkuPopupLocaldata } from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
+import type {
+  SkuPopupEvent,
+  SkuPopupInstance,
+  SkuPopupLocaldata,
+} from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
+import { postMemberCart } from '@/services/cart'
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
@@ -221,7 +231,48 @@ onLoad(async () => {
 
 // SKU 商品规格弹出层
 const isShowSkuPopup = ref(false)
-const localdata = ref<SkuPopupLocaldata>({} as SkuPopupLocaldata)
+// SKU 商品规格弹出层实例
+const skuPopupRef = ref<SkuPopupInstance>()
+// SKU 商品规格弹出层数据
+const localdata = ref({} as SkuPopupLocaldata)
+// SKU 商品规格弹出层模式
+enum SkuMode {
+  Both = 1,
+  AddCart = 2,
+  BuyNow = 3,
+}
+const skuMode = ref(SkuMode.Both)
+
+// 选中的 SKU
+const selectedSku = computed(() => {
+  return skuPopupRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
+})
+
+// 点击商品页面的 购物车/立即购买 按钮弹出 SKU 商品规格弹出层
+const showSkuPopup = (mode: SkuMode) => {
+  skuMode.value = mode
+  isShowSkuPopup.value = true
+}
+
+// 加入购物车
+const handlerAddCart = async (e: SkuPopupEvent) => {
+  const res = await postMemberCart({
+    skuId: e._id,
+    count: e.buy_num,
+  })
+  if (res.code == '1') {
+    await uni.showToast({
+      icon: 'success',
+      title: '添加成功',
+    })
+    isShowSkuPopup.value = false
+  }
+}
+
+// 立即购买
+const handlerBuyNow = () => {
+  console.log('立即购买')
+}
 </script>
 
 <style lang="scss">

src/services/cart.ts

@@ -0,0 +1,9 @@
+import { http } from '@/utils/http'
+
+export const postMemberCart = (data: { skuId: string; count: number }) => {
+  return http({
+    url: '/member/cart',
+    method: 'POST',
+    data,
+  })
+}

src/types/cart.d.ts

@@ -0,0 +1,25 @@
+/** 购物车类型 */
+export type CartItem = {
+  /** 商品 ID */
+  id: string
+  /** SKU ID */
+  skuId: string
+  /** 商品名称 */
+  name: string
+  /** 图片 */
+  picture: string
+  /** 数量 */
+  count: number
+  /** 加入时价格 */
+  price: number
+  /** 当前的价格 */
+  nowPrice: number
+  /** 库存 */
+  stock: number
+  /** 是否选中 */
+  selected: boolean
+  /** 属性文字 */
+  attrsText: string
+  /** 是否为有效商品 */
+  isEffective: boolean
+}