怎么在uniapp开发时使用sku插件

下载并使用 SKU 组件，实现商品详情页规格展示和交互。

插件市场：DCloud 插件市场，是 uni-app 官方插件生态集中地。

SKU---存货单位：库存管理的最小可用单位，通常称为单品。

SKU 常见于电商领域，对于前端工程师而言，更多关注 SKU 算法 和 用户交互体验。

Q：如何评估第三方插件的质量？

A：查看插件的评分、评价、下载量、更新频率以及文档完整性，以确保插件具有良好的社区口碑、兼容性、性能和维护状况。

如何使用SKU插件？

组件安装到自己项目

     1.复制 vk-data-goods-sku-popup 和 vk-data-input-number-box 到项目的根 components 目录下。

    2.复制例子代码并运行体验。

<!-- 静态数据演示版本 适合任何后端 -->
<template>
  <view class="app">
    <button @click="openSkuPopup()">打开SKU组件</button>

    <vk-data-goods-sku-popup
      ref="skuPopup"
      v-model="skuKey" 
      border-radius="20" 
      :localdata="goodsInfo"
      :mode="skuMode"
      @open="onOpenSkuPopup"
      @close="SkuPopup"
      @add-cart="addCart"
      @buy-now="buyNow"
    ></vk-data-goods-sku-popup>

  </view>
</template>

<script>
  var that;                                         // 当前页面对象
  export default {
    data() {
      return {
        // 是否打开SKU弹窗
        skuKey:false,
        // SKU弹窗模式
        skuMode:1,
        // 后端返回的商品信息
        goodsInfo:{}
      }
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options) {
      that = this;
      that.init(options);
    },
    methods: {
      // 初始化
      init(options = {}){

      },
      // 获取商品信息，并打开sku弹出
      openSkuPopup(){
        /**
         * 获取商品信息
         * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
         */
        // 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
        // goodsInfo是后端返回的数据
        that.goodsInfo = {
          "_id":"002",
          "name": "迪奥香水",
          "goods_thumb":"https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
          "sku_list": [
            {
              "_id": "004",
              "goods_id": "002",
              "goods_name": "迪奥香水",
              "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
              "price": 19800,
              "sku_name_arr": ["50ml/瓶"],
              "stock": 100
            },
            {
              "_id": "005",
              "goods_id": "002",
              "goods_name": "迪奥香水",
              "image": "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
              "price": 9800,
              "sku_name_arr": ["70ml/瓶"],
              "stock": 100
            }
          ],
          "spec_list": [
            {
              "list": [
                {
                  "name": "20ml/瓶"
                },
                {
                  "name": "50ml/瓶"
                },
                {
                  "name": "70ml/瓶"
                }
              ],
              "name": "规格"
            }
          ]
        }
        that.skuKey = true;
      },
      // sku组件 开始-----------------------------------------------------------
      onOpenSkuPopup(){
        console.log("监听 - 打开sku组件");
      },
      SkuPopup(){
        console.log("监听 - 关闭sku组件");
      },
      // 加入购物车前的判断
      addCartFn(obj){
        let { selectShop } = obj;
        // 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
        let res = {};
        let name = selectShop.goods_name;
        if(selectShop.sku_name != "默认"){
          name += "-"+selectShop.sku_name_arr;
        }
        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);
            setTimeout(function() {
              that.skuKey = false;
            }, 300);
          }
        });
      },
      // 立即购买
      buyNow(selectShop){
        console.log("监听 - 立即购买");
        that.addCartFn({
          selectShop : selectShop,
          success : function(res){
            // 实际业务时,请替换自己的立即购买逻辑
            that.toast("立即购买");
          }
        });
      },
      toast(msg){
        uni.showToast({
          title: msg,
          icon:"none"
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app {
    padding: 30rpx;
    font-size: 28rpx;
  }
</style>

常见问题

Q：为什么插件使用时无需导入？

A：pages.json 的 easycom 配置中，默认自动扫描 xxx/xxx.vue 格式的组件，实现自动导入。

Q：为什么组件代码 Git 提交时报错？

A：插件未采用 eslint 校验代码，请在插件源文件中添加 /* eslint-disable */，禁用 eslint。

怎么渲染商品规格

// 是否显示SKU组件
const isShowSku = ref(false)
// 商品信息
const localdata = ref({} as SkuPopupLocaldata)

 使用两个属性：

1. localdata---绑定商品sku数据来源
2. v-model双向绑定，显示/隐藏组件

<!-- SKU弹窗组件 -->
  <vk-data-goods-sku-popup v-model="isShowSku" :localdata="localdata" />
<!-- 弹窗测试 -->
  <button @tap="isShowSku = true">打开 SKU 弹窗</button>

注意：后端返回的数据格式和插件所需的格式不一致，我们需要按插件要求进行处理。

SkuPopupSpecItem中的spec_list的写法

spec_list: res.result.specs.map((v)=> {
    return {
     name: v.name
     list: v.values
    }
  })

SkuPopupSkuItem中sku_list的写法

    sku_list: res.result.skus.map((v)=> {
      return {
        _id: v.id,
        good_id: res.result.id,
        goods_name: res.result.name,
        iamge: v.picture,
        price: v.price * 100,
        stock: v.inventory,
        sku_name_arr: v.specs.map((vv)=> vv.valueName)
      }
    })