uni-wechat-shop/pages/goods/components/SkuPopup.vue

<template>
  <goods-sku-popup :modelValue="modelValue" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode"
    :maskCloseAble="true" :priceColor="appTheme.mainBg" :buyNowBackgroundColor="appTheme.mainBg" :addCartColor="appTheme.viceText"
    :addCartBackgroundColor="appTheme.viceBg"
    :activedStyle="{ color: appTheme.mainBg, borderColor: appTheme.mainBg, backgroundColor: activedBtnBackgroundColor }"
    @open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow" buyNowText="立即购买" :maxBuyNum="maxBuyNum" />
</template>

<script>
  import { hex2rgba } from '@/utils/color'
  import * as GoodsApi from '@/api/goods'
  import GoodsSkuPopup from '@/components/goods-sku-popup'
  import storage from '@/utils/storage'

  export default {
    components: {
      GoodsSkuPopup
    },
    emits: ['update:modelValue', 'addCart'],
    props: {
      // 控制组件显示隐藏
      modelValue: {
        Type: Boolean,
        default: false
      },
      // 模式 1:都显示 2:只显示购物车 3:只显示立即购买 4:显示缺货按钮 5:禁用 默认 1
      skuMode: {
        type: Number,
        default: 1
      },
      // 商品详情信息
      goods: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        // 商品信息
        goodsInfo: {},
        // 限购数量
        maxBuyNum: null
      }
    },
    computed: {
      // 规格按钮选中时的背景色
      activedBtnBackgroundColor() {
        return hex2rgba(this.appTheme.mainBg, 0.1)
      }
    },
    created() {
      const app = this
      const { goods } = app
      app.goodsInfo = {
        _id: goods.id,
        name: goods.title,
        goods_thumb: goods.mainImageUrl,
        sku_list: app.getSkuList(),
        spec_list: app.getSpecList()
      }
      app.maxBuyNum = app.getMaxBuyNum()
    },

    methods: {

      // 监听组件显示隐藏
      onChangeValue(val) {
        this.$emit('update:modelValue', val)
      },

      // 整理商品SKU列表
      getSkuList() {
        const app = this
        const { goods: { id, title, mainImageUrl, skuList } } = app
        const skuData = [];
        (skuList || []).forEach(item => {
          skuData.push({
            _id: item.id,
            goods_sku_id: item.id,
            goods_id: id,
            goods_name: title,
            image: item.imageUrl ? item.imageUrl : mainImageUrl,
            price: item.promotionPrice * 100,
            stock: item.stock,
            spec_value_ids: item.vvSkuPropertyValueList.map(item => item.id).join('_'),
            sku_name_arr: item.vvSkuPropertyValueList.map(item => item.productPropertyValue)
          })
        })
        return skuData
      },

      // 整理规格数据
      getSpecList() {
        const { goods: { productPropertyList } } = this
        const defaultData = [{ name: '默认', list: [{ name: '默认' }] }]
        const specData = [];
        (productPropertyList || []).forEach(group => {
          const children = []
          group.vvProductPropertyValueList.forEach(specValue => {
            children.push({ name: specValue.productPropertyValue })
          })
          specData.push({
            name: group.productPropertyName,
            list: children
          })
        })
        return specData.length ? specData : defaultData
      },

      // 限购数量
      getMaxBuyNum() {
        const { goods } = this
        return goods.is_restrict ? goods.restrict_single : null
      },

      // sku组件 开始-----------------------------------------------------------
      openSkuPopup() {
        // console.log("监听 - 打开sku组件")
      },

      closeSkuPopup() {
        // console.log("监听 - 关闭sku组件")
      },

      // 加入购物车按钮
      addCart(selectShop) {
        const app = this
        const { goods_id, goods_sku_id, buy_num } = selectShop
        // CartApi.add(goods_id, goods_sku_id, buy_num)
        GoodsApi.apiAddCart({ num: buy_num, skuId: goods_sku_id })
          .then(result => {
            // 显示成功
            app.$toast('添加成功')
            // 隐藏当前弹窗
            app.onChangeValue(false)
            /* // 购物车商品总数量
            const cartTotal = result.data.cartTotal
            // 缓存购物车数量
            setCartTotalNum(cartTotal)
            // 传递给父级
            app.$emit('addCart', cartTotal) */
          })
      },

      // 立即购买
      buyNow(selectShop) {
        // 跳转到订单结算页
        storage.set('goods', [{
          goodsId: selectShop.goods_id,
          goodsSkuId: selectShop.goods_sku_id,
          goodsNum: selectShop.buy_num,
          title: selectShop.goods_name,
          image: selectShop.image,
          price: selectShop.price,
          buy_num: selectShop.buy_num
         }])
        this.$navTo('pages/checkout/index', { mode: 'buyNow' })
        // 隐藏当前弹窗
        this.onChangeValue(false)
      }

    }
  }
</script>

<style lang="scss" scoped>

</style>