电商小程序 -- 商品多规格选择弹框

直接上效果图

商品规格选择功能

• 代码结构
  
• 通过npm导入lodash库结构，这个就不细说了
  

1， choose.js文件

// choose/choose.js
const lodash = require('../miniprogram_npm/lodash/index.js')//路径是相对的
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    //进来时,默认的显示价格
    price:25,
    origin_price: 45,

    allMoney: 0,
    allMoneyOrigin: 0,
    chooseAttrIndex: [0, 0, 0],
    chooseAttrName: ['', '', ''],
    chooseData: {
   },
    goodsID: {
   },
    chooseAttr: '',
    buyNumber:1,
    img:'http://groupon-1257844634.cos.ap-guangzhou.myqcloud.com/goods/2019/08/114042-5d4b99ba01589.jpeg',
    attrCount: 0,//属性个数
    attrsHidden: true,//规格弹框是否隐藏
    //所有属性
    dataAttr: {
    "code": 0, "msg": "操作成功", "data": {
    "list": [{
    "attr_id": "16", "name": "颜色", "vals": [{
    "val_id": "16", "name": "红色" }, {
    "val_id": "17", "name": "白色" }] }, {
    "attr_id": "17", "name": "内存", "vals": [{
    "val_id": "18", "name": "4G" }] }, {
    "attr_id": "18", "name": "存储空间", "vals": [{
    "val_id": "21", "name": "16G" }, {
    "val_id": "22", "name": "32G" }, {
    "val_id": "23", "name": "64G" }] }] } },

    //各个属性对应商品的sku
    dataSkus: {
    "code": 0, "msg": "操作成功", "data": {
    "total_page": 1, "current_page": "1", "list": [{
    "sku": "nb00101", "origin_price": "50.00", "price": "30.00", "stock": 12, "goods_attr": "16,17,18", "goods_attr_val": "16,18,21" }, {
    "sku": "nb00102", "origin_price": "55.00", "price": "35.00", "stock": 8, "goods_attr": "16,17,18", "goods_attr_val": "16,18,22" }, {
    "sku": "nb00103", "origin_price": "45.00", "price": "25.00", "stock": 8, "goods_attr": "16,17,18", "goods_attr_val": "16,18,23" }, {
    "sku": "nb00104", "origin_price": "50.00", "price": "30.00", "stock": 8, "goods_attr": "16,17,18", "goods_attr_val": "17,18,21" }, {
    "sku": "nb00105", "origin_price": "55.00", "price": "35.00", "stock": 8, "goods_attr": "16,17,18", "goods_attr_val": "17,18,22" }] } }
  },