vk-u-goods-sku-popup商品 sku 选择器组件

vk-u-goods-sku-popup 是一个商品多规格 sku 选择器组件。此插件为 vk-unicloud-router 插件的一部分独立出来而形成的。

基本使用示例

<vk-u-goods-sku-popup
  v-model="sku_key" 
  :custom-action="findGoodsInfo"
  :mode="1"	
  border-radius="20"
  @add-cart="addCart"
  @buy-now="buyNow"
></vk-u-goods-sku-popup>

methods: {
  // 加入购物车前的判断
  addCartFn(obj) {
    let {
      selectShop
    } = obj;
    // 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
    let res = {};
    let name = selectShop.goods_name;
    if (selectShop.sku_name != "默认") {
      name += "-" + selectShop.sku_name;
    }
    res.msg = `$ {name}已添加到购物车`;
    if (typeof obj.success == "function") obj.success(res);
  },
  // 加入购物车按钮
  addCart(selectShop) {
    console.log("监听 - 加入购物车");
    that.addCartFn({
      selectShop: selectShop,
      success: function(res) {
        // 实际业务时,请替换自己的加入购物车逻辑
        that.toast(res.msg);
      }
    });
  },
  // 立即购买
  buyNow(selectShop) {
    console.log("监听 - 立即购买");
    that.addCartFn({
      selectShop: selectShop,
      success: function(res) {
        // 实际业务时,请替换自己的立即购买逻辑
        that.toast("立即购买");
      }
    });
  },
  /**
   * 获取商品信息
   * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
   */
  findGoodsInfo() {
    return new Promise(function(resolve, reject) {
      // 这里是获取商品信息的后端请求,可以用你自己的方式请求获取,本例子中用的是unicloud的云函数获取商品信息
      that.callFunction({
        success(data) {
          resolve(data.goodsInfo);
        }
      });
    });
  },
  toast(msg) {
    uni.showToast({
      title: msg,
      icon: "none"
    });
  },
  callFunction(obj) {
    uni.showLoading({
      title: '请求中'
    });
    uniCloud.callFunction({
      name: 'findGoodsInfo',
      data: {
        goods_id: that.goods_id
      },
      success(res) {
        console.log(res);
        if (typeof obj.success == "function") obj.success(res.result);
      },
      fail(err) {
        console.error(err);
      },
      complete() {
        uni.hideLoading();
      }
    });
  },
}