微信小程序 SKU设计与实现 前端 数据结构分析

预览

功能说明

• SKU。存货单位（英语：stock keeping unit，SKU)，也翻译为库存单元，是一个会计学名词，定义为库存管理中的最小可用单元。例如纺织品中一个SKU通常表示规格、颜色、款式，而在连锁零售门店中有时称单品为一个SKU。

• 以IPhone为例，SKU指的是具体规格单品（银色 64GB），SKU属性就是会影响到库存和价格的属性，又叫销售属性，与商品是多对一的关系，比如

  • 颜色：银色、深空灰
  • 容量：64GB、128GB、 512GB
  • 因此所有属性规格的排列组合则会生成 2 * 3 = 6 个SKU

需求与细节分析

• 仅有一种（一维，如颜色：白、黑）属性时，默认选中该属性第一个值（如白）
• 载入数据后即需判断所有组合情况是否有库存，设置规格属性是否可点击
• 每选中或取消选中后，需判断所有组合情况，设置规格属性是否可点击
• 应提供是否选中所有维度方法，判断是否选了所有规格，用于进行购买或加入购物车时判断
• 仅第一种维度中每个值可提供不同商品图片
• 选中所有维度后更新该规格属性对应价格等商品信息，否则显示默认商品信息

数据结构设计

• 每种属性规格组合应有唯一id
• 每种维度需提供ks值用于标明该维度，如颜色为s1、容量为s2依次类推
• 所有排列组合情况和对应库存应全部由后端提供
• 需记录当前选中的规格属性，且一开始初始化所有维度，默认值为空
  商品

product: {
   
      id: 0,
      picUrl: "https://img11.360buyimg.com/n1/s450x450_jfs/t1/62813/33/2131/584186/5d079803E03084b0d/2b4970456b7bf49f.png", // 默认商品图片
      promotion: 1, // 促销活动 0无 1限时购 2领劵
      gallery: [{
   
        picUrl: "https://img11.360buyimg.com/n1/s450x450_jfs/t1/62813/33/2131/584186/5d079803E03084b0d/2b4970456b7bf49f.png",
        sortOrder: 1
      },
      {
   
        picUrl: "https://img10.360buyimg.com/n1/s450x450_jfs/t1/4176/23/3653/281477/5b9a15d4E97e09d00/887e76e6c525324c.jpg",
        sortOrder: 2
      }
      ], // 轮播图
      title: "Apple iPhone XS Max (A2104)",
      description: "A12仿生芯片流畅体验，支持双卡！",
      defaultPrice: 1.00, // 默认显示价格
      price: 1.00,
      originPrice: 9588.00,
      detail: '<div><img src="https://img14.360buyimg.com/cms/jfs/t1/25195/1/9487/388554/5c7f80a5E8b8f8f0c/46818404849d6ec6.jpg"><img src="https://img12.360buyimg.com/cms/jfs/t1/15853/18/9628/325164/5c7f80a5E7172b236/ba9f3f63a83a9b65.jpg"></div>', // 商品详情
      tags: [{
   
        id: 1,
        title: "官方自营品牌"
      },
      {
   
        id: 2,
        title: "新品"
      }
      ],
      serviceList: [{
   
        id: 1,
        title: "48小时快速退款",
        desc: "收到退货包裹并确认无误后，将在48小时内办理退款，退款将原路返回，不同银行处理时间不同，预计1-5个工作日到账。"
      },
      {
   
        id: 2,
        title: "满88元免邮费",
        desc: "单笔订单金额（不含运费），大陆地区满88元免邮，不满88元收取10元邮费；港澳台地区满500元免邮，不满500元收取30元运费；海外地区以下单页提示运费为准。"
      }
      ],
      comment: {
   
        goodCommentRate: 100, // 好评率
        count: 3986, // 评论计数
        goodComment: {
   
          nickname: "Exrick",
          avatar: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJTqQ5hNKicCNEwW3cATfOTaXk6xMlNEfh1gm0kicPDtJrXwTf5YEqQXYea3m5vsuPyJUXc3U0OicXtA/132",
          content: