yanzong_qianduan/pages/groupon/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" @buy-now="buyNow" buyNowText="立即购买" :maxBuyNum="maxBuyNum" :buyMode="buyMode"
    :isJoin="!!taskId" :stepPeople="stepPeople" />
</template>

<script>
  import { hex2rgba } from '@/utils/color'
  import * as TaskApi from '@/api/bargain/task'
  import GoodsSkuPopup from './goods-sku-popup'

  export default {
    components: {
      GoodsSkuPopup
    },
    emits: ['update:modelValue'],
    props: {
      // 控制组件显示隐藏
      modelValue: {
        Type: Boolean,
        default: false
      },
      // 模式 1:都显示 2:只显示购物车 3:只显示立即购买
      skuMode: {
        type: Number,
        default: 1
      },
      // 商品详情信息
      goods: {
        type: Object,
        default: {}
      },
      // 购买模式 1:拼团购买 2:单独购买
      buyMode: {
        type: Number,
        default: 1
      },
      // 拼单ID (仅参与拼单时传入)
      taskId: {
        type: Number,
        default: undefined
      },
      // 阶梯团人数 (仅参与拼单时传入)
      stepPeople: {
        type: Number,
        default: undefined
      },
    },
    computed: {
      // 规格按钮选中时的背景色
      activedBtnBackgroundColor() {
        return hex2rgba(this.appTheme.mainBg, 0.1)
      }
    },
    watch: {
      buyMode(val) {
        this.init()
      }
    },
    data() {
      return {
        // 商品信息
        goodsInfo: {},
        // 限购数量
        maxBuyNum: null
      }
    },
    created() {
      this.init()
    },
    methods: {

      // 初始化SKU数据
      init() {
        const app = this
        const { goods } = app
        app.goodsInfo = {
          _id: goods.goods_id,
          name: goods.goods_name,
          goods_thumb: goods.goods_image,
          sku_list: app.getSkuList(),
          spec_list: app.getSpecList(),
          active_type: goods.active_type,
          steps_config: goods.steps_config,
        }
        app.maxBuyNum = app.getMaxBuyNum()
      },

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

      // 整理商品SKU列表
      getSkuList() {
        const app = this
        const { goods: { goods_name, goods_image, skuList } } = app
        const skuData = []
        skuList.forEach(item => {
          skuData.push({
            _id: item.id,
            goods_sku_id: item.goods_sku_id,
            goods_id: item.goods_id,
            goods_name: goods_name,
            image: item.image_url ? item.image_url : goods_image,
            price: item.groupon_price,
            stock: item.stock_num,
            spec_value_ids: item.spec_value_ids,
            sku_name_arr: app.getSkuNameArr(item.spec_value_ids),
            groupon_price: item.groupon_price,
            original_price: item.original_price,
            steps_price_config: item.steps_price_config,
          })
        })
        return skuData
      },

      // 获取sku记录的规格值列表
      getSkuNameArr(specValueIds) {
        const app = this
        const defaultData = ['默认']
        const skuNameArr = []
        if (specValueIds) {
          specValueIds.forEach((valueId, groupIndex) => {
            const specValueName = app.getSpecValueName(valueId, groupIndex)
            skuNameArr.push(specValueName)
          })
        }
        return skuNameArr.length ? skuNameArr : defaultData
      },

      // 获取指定的规格值名称
      getSpecValueName(valueId, groupIndex) {
        const app = this
        const { goods: { specList } } = app
        const res = specList[groupIndex].valueList.find(specValue => {
          return specValue.spec_value_id == valueId
        })
        return res.spec_value
      },

      // 整理规格数据
      getSpecList() {
        const { goods: { specList, steps_config } } = this
        const defaultData = [{ name: '默认', list: [{ name: '默认' }] }]
        const specData = []
        specList.forEach(group => {
          const children = []
          group.valueList.forEach(specValue => {
            children.push({ name: specValue.spec_value })
          })
          specData.push({
            name: group.spec_name,
            list: children
          })
        })
        return specData.length ? specData : defaultData
      },

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

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

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

      // 立即购买
      buyNow(selectShop) {
        const app = this
        // 跳转到订单结算页
        app.$navTo('pages/checkout/index', app.getOrderParam(selectShop))
        // 隐藏当前弹窗
        app.onChangeValue(false)
      },

      // 生成下单参数
      getOrderParam(selectShop) {
        const { goods, buyMode, taskId } = this
        const param = {
          goodsSkuId: selectShop.goods_sku_id,
          goodsNum: selectShop.buy_num
        }
        if (buyMode == 1) {
          param.mode = 'groupon'
          param.grouponGoodsId = goods.groupon_goods_id
          param.taskId = taskId
          param.stepPeople = selectShop.stepPeople
        } else {
          param.mode = 'buyNow'
          param.goodsId = goods.goods_id
        }
        return param
      }

    }
  }
</script>

<style lang="scss" scoped>

</style>