【VK】商品多规格SKU选择器组件豪华版(uniapp版,可适用于H5、APP、各大小程序)

VK
664 阅读4分钟

插件名称：vk-u-goods-sku-popup

作者：VK

更新时间：2020-09-27

此插件为vk-unicloud-router插件的一部分独立出来而形成的。
uniCloud云函数路由开发框架研究Q群:22466457 如有问题或建议可以在群内讨论。

【开箱即用】商品sku选择器组件豪华独立版（打造uni插件市场功能最全的SKU选择器组件）

插件下载地址：点击下载SKU组件

商品SKU选择器组件一般用于电商商品详情页的规格选择时使用。

体验地址

插件示例版运行步骤

1、上传部署云函数cloudfunctions目录下的findGoodsInfo
2、运行项目即可

组件安装到自己项目步骤

1、将components目录下的vk-u-goods-sku-popup 和 vk-u-number-box 复制到你项目根目录下的components目录下
若你的项目根目录下无components则先新增一个components目录
2、通过下面的基本使用示例的方式使用组件，API文档 在最下面

基本使用示例

<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();
      }
    });
  },
}

API

Props

参数说明类型默认值可选值
v-mode双向绑定，true为打开组件，false为关闭组件Booleanfalsetrue、false
noStockText该商品已抢完时的按钮文字String该商品已抢完-
stockText库存文字String库存-
mode模式 1:都显示 2:只显示购物车 3:只显示立即购买Number11、2、3
maskCloseAble点击遮罩是否关闭组件 true 关闭 false 不关闭 默认trueBooleantruetrue、false
borderRadius顶部圆角值[String,Number]0-
minBuyNum最小购买数量Number1-
maxBuyNum最大购买数量Number100000-
stepBuyNum每次点击后的数量Number1-
customAction自定义获取商品信息的函数Functionnull-
showClose是否显示右上角关闭按钮Booleantruetrue、false
closeImage关闭按钮的图片地址String--
priceColor价格的字体颜色String#fe560a-
buyNowText立即购买 - 按钮的文字String立即购买-
buyNowColor立即购买 - 按钮的字体颜色String#ffffff-
buyNowBackgroundColor立即购买 - 按钮的背景颜色String#fe560a-
addCartText加入购物车 - 按钮的文字String加入购物车-
addCartColor加入购物车 - 按钮的字体颜色String#ffffff-
addCartBackgroundColor加入购物车 - 按钮的背景颜色String#ff9402-
disableStyle样式 - 不可点击时,按钮的样式Objectnull-
activedStyle样式 - 按钮点击时的样式Objectnull-
btnStyle样式 - 按钮常态的样式Objectnull-
goodsIdName字段名 - 商品表id的字段名String_id-
skuIdName字段名 - sku表id的字段名String_id-
skuListName字段名 - 商品对应的sku列表的字段名Stringsku_list-
specListName字段名 - 商品规格名称的字段名Stringspec_list-
stockName字段名 - sku库存的字段名Stringstock-
skuName字段名 - sku名称的字段名Stringsku_name-
skuArrName字段名 - sku组合路径的字段名Stringsku_name_arr-
goodsThumbName字段名 - 商品缩略图字段名(未选择sku时)Stringgoods_thumb-

Event

事件名说明回调参数
open打开组件时
close关闭组件时
add-cart点击添加到购物车时（需选择完SKU才会触发）selectShop：当前选择的sku数据
buy-now点击立即购买时（需选择完SKU才会触发）selectShop：当前选择的sku数据

uniCloud云函数路由开发框架研究Q群:22466457 如有问题或建议可以在群内讨论。 你也可以在评论区发布留言交流心得。

avatar
文章
阅读
粉丝