找回密码
 立即注册

QQ登录

只需一步,快速开始

小程序demo--商品属性值联动选择

[复制链接]
查看: 746|回复: 6
最佳答案
0 

19

主题

19

帖子

512

积分

略知一二

积分
512
所提及的购物数量的加减,现在说说商品属性值联动选择。

为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分
738868.png

现在就为大家介绍这个小组件,在小程序中,该如何去写
下图为本项目的图:

447383.png

wxml:
  1. <view class="title">商品属性值联动选择</view>
  2. <!--options-->
  3. <view class="commodity_attr_list">
  4.   <!--每组属性-->
  5.   <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex">
  6.     <!--属性名-->
  7.     <view class="attr_name">{{attrValueObj.attrKey}}</view>
  8.     <!--属性值-->
  9.     <view class="attr_value_box">
  10.       <!--每个属性值-->
  11.       <view class="attr_value {{attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'attr_value_active':''):'attr_value_disabled'}}" bindtap="selectAttrValue" data-status="{{attrValueObj.attrValueStatus[valueIndex]}}"
  12.       data-value="{{value}}" data-key="{{attrValueObj.attrKey}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex">{{value}}</view>
  13.     </view>
  14.   </view>
  15. </view>
  16. <!--button-->
  17. <view class="weui-btn-area">
  18.   <button class="weui-btn" type="primary" bindtap="submit">确定</button>
  19. </view>
复制葡京赌场网站

wxss:
  1. .title {
  2.   padding: 10rpx 20rpx;
  3.   margin: 10rpx 0;
  4.   border-left: 4rpx solid #ccc;
  5. }

  6. /*全部属性的主盒子*/
  7. .commodity_attr_list {
  8.   background: #fff;
  9.   padding: 0 20rpx;
  10.   font-size: 26rpx;
  11.   overflow: hidden;
  12.   width: 100%;
  13. }
  14. /*每组属性的主盒子*/
  15. .attr_box {
  16.   width: 100%;
  17.   overflow: hidden;
  18.   border-bottom: 1rpx solid #ececec;
  19. }
  20. /*属性名*/
  21. .attr_name {
  22.   width: 20%;
  23.   float: left;
  24.   padding: 15rpx 0;
  25. }
  26. /*属性值*/
  27. .attr_value_box {
  28.   width: 80%;
  29.   float: left;
  30.   padding: 15rpx 0;
  31.   overflow: hidden;
  32. }
  33. /*每个属性值*/
  34. .attr_value {
  35.   float: left;
  36.   padding: 0 10rpx;
  37.   margin: 0 10rpx;
  38.   border: 1rpx solid #ececec;
  39. }
  40. /*每个属性选中的当前样式*/
  41. .attr_value_active {
  42.   background: #FFCC00;
  43.   border-radius: 10rpx;
  44.   color: #fff;
  45.   padding: 0 10rpx;
  46. }
  47. /*禁用属性*/
  48. .attr_value_disabled {
  49.   color: #ccc;
  50. }

  51. /*button*/
  52. .btn-area {
  53.   margin: 1.17647059em 15px 0.3em;
  54. }

  55. .btn {
  56.   margin-top: 15px;
  57.   background-color:#FFCC00;
  58.   color: #fff;
  59. }
  60. .btn:first-child {
  61.   margin-top: 0;
  62. }
复制葡京赌场网站

js:
数据部分,一般情况都是访问接口获取数据的,这里并没有使用网络访问,为了简化demo,直接把一组数据放在data对象中。
  1. Page({
  2.   data: {
  3.     firstIndex: -1,
  4.     //准备数据
  5.     //数据结构:以一组一组来进行设定
  6.     commodityAttr: [
  7.       {
  8.         priceId: 1,
  9.         price: 35.0,
  10.         "stock": 8,
  11.         "attrValueList": [
  12.           {
  13.             "attrKey": "型号",
  14.             "attrValue": "2"
  15.           },
  16.           {
  17.             "attrKey": "颜色",
  18.             "attrValue": "白色"
  19.           },
  20.           {
  21.             "attrKey": "大小",
  22.             "attrValue": "小"
  23.           },
  24.           {
  25.             "attrKey": "尺寸",
  26.             "attrValue": "S"
  27.           }
  28.         ]
  29.       },
  30.       {
  31.         priceId: 2,
  32.         price: 35.1,
  33.         "stock": 9,
  34.         "attrValueList": [
  35.           {
  36.             "attrKey": "型号",
  37.             "attrValue": "1"
  38.           },
  39.           {
  40.             "attrKey": "颜色",
  41.             "attrValue": "黑色"
  42.           },
  43.           {
  44.             "attrKey": "大小",
  45.             "attrValue": "小"
  46.           },
  47.           {
  48.             "attrKey": "尺寸",
  49.             "attrValue": "M"
  50.           }
  51.         ]
  52.       },
  53.       {
  54.         priceId: 3,
  55.         price: 35.2,
  56.         "stock": 10,
  57.         "attrValueList": [
  58.           {
  59.             "attrKey": "型号",
  60.             "attrValue": "1"
  61.           },
  62.           {
  63.             "attrKey": "颜色",
  64.             "attrValue": "绿色"
  65.           },
  66.           {
  67.             "attrKey": "大小",
  68.             "attrValue": "大"
  69.           },
  70.           {
  71.             "attrKey": "尺寸",
  72.             "attrValue": "L"
  73.           }
  74.         ]
  75.       },
  76.       {
  77.         priceId: 4,
  78.         price: 35.2,
  79.         "stock": 10,
  80.         "attrValueList": [
  81.           {
  82.             "attrKey": "型号",
  83.             "attrValue": "1"
  84.           },
  85.           {
  86.             "attrKey": "颜色",
  87.             "attrValue": "绿色"
  88.           },
  89.           {
  90.             "attrKey": "大小",
  91.             "attrValue": "大"
  92.           },
  93.           {
  94.             "attrKey": "尺寸",
  95.             "attrValue": "L"
  96.           }
  97.         ]
  98.       }
  99.     ],
  100.     attrValueList: []
  101.   },
  102.   onShow: function () {
  103.     this.setData({
  104.       includeGroup: this.data.commodityAttr
  105.     });
  106.     this.distachAttrValue(this.data.commodityAttr);
  107.     // 只有一个属性组合的时候默认选中
  108.     // console.log(this.data.attrValueList);
  109.     if (this.data.commodityAttr.length == 1) {
  110.       for (var i = 0; i < this.data.commodityAttr[0].attrValueList.length; i++) {
  111.         this.data.attrValueList[i].selectedValue = this.data.commodityAttr[0].attrValueList[i].attrValue;
  112.       }
  113.       this.setData({
  114.         attrValueList: this.data.attrValueList
  115.       });
  116.     }
  117.   },
  118.   /* 获取数据 */
  119.   distachAttrValue: function (commodityAttr) {
  120.     /**
  121.       将后台返回的数据组合成类似
  122.       {
  123.         attrKey:'型号',
  124.         attrValueList:['1','2','3']
  125.       }
  126.     */
  127.     // 把数据对象的数据(视图使用),写到局部内
  128.     var attrValueList = this.data.attrValueList;
  129.     // 遍历获取的数据
  130.     for (var i = 0; i < commodityAttr.length; i++) {
  131.       for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
  132.         var attrIndex = this.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey, attrValueList);
  133.         // console.log('属性索引', attrIndex);
  134.         // 如果还没有属性索引为-1,此时新增属性并设置属性值数组的第一个值;索引大于等于0,表示已存在的属性名的位置
  135.         if (attrIndex >= 0) {
  136.           // 如果属性值数组中没有该值,push新值;否则不处理
  137.           if (!this.isValueExist(commodityAttr[i].attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) {
  138.             attrValueList[attrIndex].attrValues.push(commodityAttr[i].attrValueList[j].attrValue);
  139.           }
  140.         } else {
  141.           attrValueList.push({
  142.             attrKey: commodityAttr[i].attrValueList[j].attrKey,
  143.             attrValues: [commodityAttr[i].attrValueList[j].attrValue]
  144.           });
  145.         }
  146.       }
  147.     }
  148.     // console.log('result', attrValueList)
  149.     for (var i = 0; i < attrValueList.length; i++) {
  150.       for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
  151.         if (attrValueList[i].attrValueStatus) {
  152.           attrValueList[i].attrValueStatus[j] = true;
  153.         } else {
  154.           attrValueList[i].attrValueStatus = [];
  155.           attrValueList[i].attrValueStatus[j] = true;
  156.         }
  157.       }
  158.     }
  159.     this.setData({
  160.       attrValueList: attrValueList
  161.     });
  162.   },
  163.   getAttrIndex: function (attrName, attrValueList) {
  164.     // 判断数组中的attrKey是否有该属性值
  165.     for (var i = 0; i < attrValueList.length; i++) {
  166.       if (attrName == attrValueList[i].attrKey) {
  167.         break;
  168.       }
  169.     }
  170.     return i < attrValueList.length ? i : -1;
  171.   },
  172.   isValueExist: function (value, valueArr) {
  173.     // 判断是否已有属性值
  174.     for (var i = 0; i < valueArr.length; i++) {
  175.       if (valueArr[i] == value) {
  176.         break;
  177.       }
  178.     }
  179.     return i < valueArr.length;
  180.   },
  181.   /* 选择属性值事件 */
  182.   selectAttrValue: function (e) {
  183.     /*
  184.     点选属性值,联动判断其他属性值是否可选
  185.     {
  186.       attrKey:'型号',
  187.       attrValueList:['1','2','3'],
  188.       selectedValue:'1',
  189.       attrValueStatus:[true,true,true]
  190.     }
  191.     console.log(e.currentTarget.dataset);
  192.     */
  193.     var attrValueList = this.data.attrValueList;
  194.     var index = e.currentTarget.dataset.index;//属性索引
  195.     var key = e.currentTarget.dataset.key;
  196.     var value = e.currentTarget.dataset.value;
  197.     if (e.currentTarget.dataset.status || index == this.data.firstIndex) {
  198.       if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
  199.         // 取消选中
  200.         this.disSelectValue(attrValueList, index, key, value);
  201.       } else {
  202.         // 选中
  203.         this.selectValue(attrValueList, index, key, value);
  204.       }

  205.     }
  206.   },
  207.   /* 选中 */
  208.   selectValue: function (attrValueList, index, key, value, unselectStatus) {
  209.     // console.log('firstIndex', this.data.firstIndex);
  210.     var includeGroup = [];
  211.     if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值,则该属性所有值可选
  212.       var commodityAttr = this.data.commodityAttr;
  213.       // 其他选中的属性值全都置空
  214.       // console.log('其他选中的属性值全都置空', index, this.data.firstIndex, !unselectStatus);
  215.       for (var i = 0; i < attrValueList.length; i++) {
  216.         for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
  217.           attrValueList[i].selectedValue = '';
  218.         }
  219.       }
  220.     } else {
  221.       var commodityAttr = this.data.includeGroup;
  222.     }

  223.     // console.log('选中', commodityAttr, index, key, value);
  224.     for (var i = 0; i < commodityAttr.length; i++) {
  225.       for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
  226.         if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) {
  227.           includeGroup.push(commodityAttr[i]);
  228.         }
  229.       }
  230.     }
  231.     attrValueList[index].selectedValue = value;

  232.     // 判断属性是否可选
  233.     for (var i = 0; i < attrValueList.length; i++) {
  234.       for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
  235.         attrValueList[i].attrValueStatus[j] = false;
  236.       }
  237.     }
  238.     for (var k = 0; k < attrValueList.length; k++) {
  239.       for (var i = 0; i < includeGroup.length; i++) {
  240.         for (var j = 0; j < includeGroup[i].attrValueList.length; j++) {
  241.           if (attrValueList[k].attrKey == includeGroup[i].attrValueList[j].attrKey) {
  242.             for (var m = 0; m < attrValueList[k].attrValues.length; m++) {
  243.               if (attrValueList[k].attrValues[m] == includeGroup[i].attrValueList[j].attrValue) {
  244.                 attrValueList[k].attrValueStatus[m] = true;
  245.               }
  246.             }
  247.           }
  248.         }
  249.       }
  250.     }
  251.     // console.log('结果', attrValueList);
  252.     this.setData({
  253.       attrValueList: attrValueList,
  254.       includeGroup: includeGroup
  255.     });

  256.     var count = 0;
  257.     for (var i = 0; i < attrValueList.length; i++) {
  258.       for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
  259.         if (attrValueList[i].selectedValue) {
  260.           count++;
  261.           break;
  262.         }
  263.       }
  264.     }
  265.     if (count < 2) {// 第一次选中,同属性的值都可选
  266.       this.setData({
  267.         firstIndex: index
  268.       });
  269.     } else {
  270.       this.setData({
  271.         firstIndex: -1
  272.       });
  273.     }
  274.   },
  275.   /* 取消选中 */
  276.   disSelectValue: function (attrValueList, index, key, value) {
  277.     var commodityAttr = this.data.commodityAttr;
  278.     attrValueList[index].selectedValue = '';

  279.     // 判断属性是否可选
  280.     for (var i = 0; i < attrValueList.length; i++) {
  281.       for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
  282.         attrValueList[i].attrValueStatus[j] = true;
  283.       }
  284.     }
  285.     this.setData({
  286.       includeGroup: commodityAttr,
  287.       attrValueList: attrValueList
  288.     });

  289.     for (var i = 0; i < attrValueList.length; i++) {
  290.       if (attrValueList[i].selectedValue) {
  291.         this.selectValue(attrValueList, i, attrValueList[i].attrKey, attrValueList[i].selectedValue, true);
  292.       }
  293.     }
  294.   },
  295.   /* 点击确定 */
  296.   submit: function () {
  297.     var value = [];
  298.     for (var i = 0; i < this.data.attrValueList.length; i++) {
  299.       if (!this.data.attrValueList[i].selectedValue) {
  300.         break;
  301.       }
  302.       value.push(this.data.attrValueList[i].selectedValue);
  303.     }
  304.     if (i < this.data.attrValueList.length) {
  305.       wx.showToast({
  306.         title: '请完善属性',
  307.         icon: 'loading',
  308.         duration: 1000
  309.       })
  310.     } else {
  311.       wx.showToast({
  312.         title: '选择的属性:' + value.join('-'),
  313.         icon: 'sucess',
  314.         duration: 1000
  315.       })
  316.     }
  317.   }
  318. })
复制葡京赌场网站

运行效果:
35488.gif

源码:
游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

1

帖子

44

积分

新人求带

积分
44
发表于 2017-5-16 16:49:37 | 显示全部楼层
111111111111111111111111111111111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

10

帖子

290

积分

新人求带

积分
290
发表于 2017-10-10 01:17:27 | 显示全部楼层
好东西下载下来看看
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

11

帖子

706

积分

略知一二

积分
706
发表于 2017-11-6 21:07:29 | 显示全部楼层
谢谢 用一下
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

2

帖子

90

积分

新人求带

积分
90
发表于 2017-11-20 09:43:04 | 显示全部楼层
谢谢楼主 参考参考
回复 支持 反对

使用道具 举报

最佳答案
0 

9

主题

27

帖子

743

积分

略知一二

积分
743
发表于 2017-12-29 15:14:10 | 显示全部楼层
6666666666666666
回复 支持 反对

使用道具 举报

发表于 5 天前 | 显示全部楼层

好东西下载下来看看
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]