init

fuintUniapp/pages/goods/components/SkuPopup.vue

@@ -0,0 +1,203 @@
+<template>
+  <goods-sku-popup :value="value" @input="onChangeValue" border-radius="20" :custom-action="findGoodsInfo"
+    :mode="skuMode" :defaultPrice="goods.price" :defaultStock="goods.stock" :maskCloseAble="true"
+    @open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow" />
+</template>
+
+<script>
+  import { setCartTotalNum } from '@/utils/app'
+  import * as CartApi from '@/api/cart'
+  import * as GoodsApi from '@/api/goods'
+  import GoodsSkuPopup from '@/components/goods-sku-popup'
+
+  let goodsInfo;
+
+  export default {
+    components: {
+      GoodsSkuPopup
+    },
+    model: {
+      prop: 'value',
+      event: 'input'
+    },
+    props: {
+      // true 组件显示 false 组件隐藏
+      value: {
+        Type: Boolean,
+        default: false
+      },
+      // 模式 1:都显示 2:只显示购物车 3:只显示立即购买
+      skuMode: {
+        type: Number,
+        default: 1
+      },
+      // 商品详情信息
+      goods: {
+        type: Object,
+        default: {}
+      }
+    },
+
+    data() {
+      return {}
+    },
+
+    created() {
+      const app = this
+      const { goods } = app
+      goodsInfo = {
+        _id: goods.goodsId,
+        name: goods.name,
+        goods_thumb: goods.logo,
+        sku_list: app.getSkuList(),
+        spec_list: app.getSpecList()
+      }
+    },
+
+    methods: {
+
+      // 监听组件显示隐藏
+      onChangeValue(val) {
+        this.$emit('input', val)
+      },
+
+      /**
+       * 获取商品信息
+       * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
+       */
+      findGoodsInfo() {
+        return new Promise((resolve, reject) => {
+          resolve(goodsInfo)
+        })        
+      },
+
+      // 整理商品SKU列表
+      getSkuList() {
+        const app = this
+        const { goods: { name, logo, skuList } } = app
+        const skuData = []
+        if (skuList) {
+            skuList.forEach(item => {
+              skuData.push({
+                _id: item.id,
+                sku_id: item.skuId,
+                goods_id: item.goodsId,
+                name: name,
+                image: item.logo ? item.logo : logo,
+                price: item.price,
+                stock: item.stock,
+                spec_value_ids: item.specIds,
+                sku_name_arr: app.getSkuNameArr(item.specIds)
+              })
+            })
+        }
+        return skuData
+      },
+
+      // 获取sku记录的规格值列表
+      getSkuNameArr(specValueIds) {
+        const app = this
+        const defaultData = ['默认']
+        const skuNameArr = []
+        
+        if (specValueIds != "" && specValueIds.length > 0) {
+            specValueIds.forEach((valueId, specId) => {
+               const specValueName = app.getSpecValueName(valueId, specId)
+               skuNameArr.push(specValueName)
+            })
+        }
+                
+        const result = skuNameArr.length ? skuNameArr : defaultData
+                
+        return result
+      },
+
+      // 获取指定的规格值名称
+      getSpecValueName(valueId, specId) {
+        const app = this
+        const { goods: { specList } } = app
+        
+        if (specList.length > 0) {
+            const res = specList[specId].valueList.find(specValue => {
+              return specValue.specValueId == valueId
+            })
+            
+            if (res) {
+                return res.specValue
+            } else {
+                return ""
+            }
+        } else {
+            return ""
+        }
+      },
+
+      // 整理规格数据
+      getSpecList() {
+        const { goods: { specList } } = this;
+        const defaultData = [{ name: '默认', list: [{ name: '默认' }] }];
+        const specData = [];
+        if (specList.length > 0) {
+            specList.forEach(group => {
+              const children = [];
+              group.valueList.forEach(specValue => {
+                children.push({ name: specValue.specValue });
+              })
+              specData.push({
+                name: group.name,
+                list: children
+              })
+            })
+        }
+        return specData.length > 0 ? specData : defaultData
+      },
+
+      // sku组件 开始-----------------------------------------------------------
+      openSkuPopup() {
+        // console.log("监听 - 打开sku组件")
+      },
+
+      closeSkuPopup() {
+        // console.log("监听 - 关闭sku组件")
+      },
+
+      // 加入购物车按钮
+      addCart(selectShop) {
+        const app = this
+        
+        console.log(selectShop)
+        
+        const { goods_id, sku_id, buy_num } = selectShop
+        CartApi.save(goods_id, '+', sku_id, buy_num)
+          .then(result => {
+            // 隐藏当前弹窗
+            app.onChangeValue(false);
+            // 购物车商品总数量
+            const cartTotal = result.data ? result.data.cartTotal : 0;
+            // 缓存购物车数量
+            setCartTotalNum(cartTotal);
+            // 传递给父级
+            app.$emit('addCart', cartTotal);
+          })
+      },
+
+      // 立即购买
+      buyNow(selectShop) {
+        // 跳转到订单结算页
+        this.$navTo('pages/settlement/goods', {
+          mode: 'buyNow',
+          goodsId: selectShop.goods_id,
+          skuId: selectShop.sku_id,
+          buyNum: selectShop.buy_num
+        })
+        // 隐藏当前弹窗
+        this.onChangeValue(false)
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>