Classification of Merchandise Attributes of Wechat Small Procedures: Wechat Small Procedures Practical Mall Series (4)

In the last article: Increase or Decrease in the Number of Shopping for Wechat Small Procedures --- Wechat Small Procedures Practical Mall Series (3)

The increase or decrease in the number of purchases mentioned in this paper is now about the linkage selection of commodity attribute values.


In order to let students have an intuitive understanding, to the e-commerce network intercepted a picture, which is shown in the red circle part.



Now let's introduce how to write this small program.

The following figure shows the project:



wxml:

<view class="title">Linkage Selection of Commodity Attribute Value</view>
<!--options-->
<view class="commodity_attr_list">
  <!--Each set of attributes-->
  <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex">
    <!--Property name-->
    <view class="attr_name">{{attrValueObj.attrKey}}</view>
    <!--Attribute value-->
    <view class="attr_value_box">
      <!--Each attribute value-->
      <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]}}"
      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>
    </view>
  </view>
</view>
<!--button-->
<view class="weui-btn-area">
  <button class="weui-btn" type="primary" bindtap="submit">Determine</button>
</view>

wxss:

.title {
  padding: 10rpx 20rpx;
  margin: 10rpx 0;
  border-left: 4rpx solid #ccc;
}

/*Main box for all attributes*/
.commodity_attr_list {
  background: #fff;
  padding: 0 20rpx;
  font-size: 26rpx;
  overflow: hidden;
  width: 100%;
}
/*Main box for each set of attributes*/
.attr_box {
  width: 100%;
  overflow: hidden;
  border-bottom: 1rpx solid #ececec;
}
/*Property name*/
.attr_name {
  width: 20%;
  float: left;
  padding: 15rpx 0;
}
/*Attribute value*/
.attr_value_box {
  width: 80%;
  float: left;
  padding: 15rpx 0;
  overflow: hidden;
}
/*Each attribute value*/
.attr_value {
  float: left;
  padding: 0 10rpx;
  margin: 0 10rpx;
  border: 1rpx solid #ececec;
}
/*Current style selected for each attribute*/
.attr_value_active {
  background: #FFCC00;
  border-radius: 10rpx;
  color: #fff;
  padding: 0 10rpx;
}
/*Disable attributes*/
.attr_value_disabled {
  color: #ccc;
}

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

.btn {
  margin-top: 15px;
  background-color:#FFCC00;
  color: #fff;
}
.btn:first-child {
  margin-top: 0;
}

js:

In the data part, generally, access interface is used to obtain data, but network access is not used here. In order to simplify demo, a group of data is placed directly in the data object.

Page({
  data: {
    firstIndex: -1,
    //Preparing data
    //Data structure: set in groups
    commodityAttr: [
      {
        priceId: 1,
        price: 35.0,
        "stock": 8,
        "attrValueList": [
          {
            "attrKey": "Model",
            "attrValue": "2"
          },
          {
            "attrKey": "colour",
            "attrValue": "white"
          },
          {
            "attrKey": "Size",
            "attrValue": "Small"
          },
          {
            "attrKey": "size",
            "attrValue": "S"
          }
        ]
      },
      {
        priceId: 2,
        price: 35.1,
        "stock": 9,
        "attrValueList": [
          {
            "attrKey": "Model",
            "attrValue": "1"
          },
          {
            "attrKey": "colour",
            "attrValue": "black"
          },
          {
            "attrKey": "Size",
            "attrValue": "Small"
          },
          {
            "attrKey": "size",
            "attrValue": "M"
          }
        ]
      },
      {
        priceId: 3,
        price: 35.2,
        "stock": 10,
        "attrValueList": [
          {
            "attrKey": "Model",
            "attrValue": "1"
          },
          {
            "attrKey": "colour",
            "attrValue": "green"
          },
          {
            "attrKey": "Size",
            "attrValue": "large"
          },
          {
            "attrKey": "size",
            "attrValue": "L"
          }
        ]
      },
      {
        priceId: 4,
        price: 35.2,
        "stock": 10,
        "attrValueList": [
          {
            "attrKey": "Model",
            "attrValue": "1"
          },
          {
            "attrKey": "colour",
            "attrValue": "green"
          },
          {
            "attrKey": "Size",
            "attrValue": "large"
          },
          {
            "attrKey": "size",
            "attrValue": "L"
          }
        ]
      }
    ],
    attrValueList: []
  },
  onShow: function () {
    this.setData({
      includeGroup: this.data.commodityAttr
    });
    this.distachAttrValue(this.data.commodityAttr);
    // Select by default when there is only one combination of attributes
    // console.log(this.data.attrValueList);
    if (this.data.commodityAttr.length == 1) {
      for (var i = 0; i < this.data.commodityAttr[0].attrValueList.length; i++) {
        this.data.attrValueList[i].selectedValue = this.data.commodityAttr[0].attrValueList[i].attrValue;
      }
      this.setData({
        attrValueList: this.data.attrValueList
      });
    }
  },
  /* get data */
  distachAttrValue: function (commodityAttr) {
    /**
      Combine the data returned from the background into something similar
      {
        attrKey:'Model',
        attrValueList:['1','2','3']
      }
    */
    // Write the data of the data object (view usage) into the local area
    var attrValueList = this.data.attrValueList;
    // Traversing the acquired data
    for (var i = 0; i < commodityAttr.length; i++) {
      for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
        var attrIndex = this.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey, attrValueList);
        // console.log('attribute index', attrIndex); 
        // If there is no attribute index of - 1, then add the attribute and set the first value of the attribute value array; the index is greater than or equal to 0, indicating the location of the existing attribute name.
        if (attrIndex >= 0) {
          // If there is no value in the array of attribute values, push is new; otherwise, it will not be processed.
          if (!this.isValueExist(commodityAttr[i].attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) {
            attrValueList[attrIndex].attrValues.push(commodityAttr[i].attrValueList[j].attrValue);
          }
        } else {
          attrValueList.push({
            attrKey: commodityAttr[i].attrValueList[j].attrKey,
            attrValues: [commodityAttr[i].attrValueList[j].attrValue]
          });
        }
      }
    }
    // console.log('result', attrValueList)
    for (var i = 0; i < attrValueList.length; i++) {
      for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
        if (attrValueList[i].attrValueStatus) {
          attrValueList[i].attrValueStatus[j] = true;
        } else {
          attrValueList[i].attrValueStatus = [];
          attrValueList[i].attrValueStatus[j] = true;
        }
      }
    }
    this.setData({
      attrValueList: attrValueList
    });
  },
  getAttrIndex: function (attrName, attrValueList) {
    // Determine whether attrKey in an array has this attribute value
    for (var i = 0; i < attrValueList.length; i++) {
      if (attrName == attrValueList[i].attrKey) {
        break;
      }
    }
    return i < attrValueList.length ? i : -1;
  },
  isValueExist: function (value, valueArr) {
    // Determine whether an attribute value already exists
    for (var i = 0; i < valueArr.length; i++) {
      if (valueArr[i] == value) {
        break;
      }
    }
    return i < valueArr.length;
  },
  /* Select attribute value events */
  selectAttrValue: function (e) {
    /*
    Select attribute values and determine whether other attribute values are optional by linkage
    {
      attrKey:'Model',
      attrValueList:['1','2','3'],
      selectedValue:'1',
      attrValueStatus:[true,true,true]
    }
    console.log(e.currentTarget.dataset);
    */
    var attrValueList = this.data.attrValueList;
    var index = e.currentTarget.dataset.index;//Attribute index
    var key = e.currentTarget.dataset.key;
    var value = e.currentTarget.dataset.value;
    if (e.currentTarget.dataset.status || index == this.data.firstIndex) {
      if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
        // uncheck
        this.disSelectValue(attrValueList, index, key, value);
      } else {
        // Selection
        this.selectValue(attrValueList, index, key, value);
      }

    }
  },
  /* Selection */
  selectValue: function (attrValueList, index, key, value, unselectStatus) {
    // console.log('firstIndex', this.data.firstIndex);
    var includeGroup = [];
    if (index == this.data.firstIndex && !unselectStatus) { // If it is the first selected attribute value, all values of that attribute are optional
      var commodityAttr = this.data.commodityAttr;
      // All other selected attribute values are empty
      // console.log('All other selected attribute values are empty', index, this. data. first index,! UnselectStatus);
      for (var i = 0; i < attrValueList.length; i++) {
        for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
          attrValueList[i].selectedValue = '';
        }
      }
    } else {
      var commodityAttr = this.data.includeGroup;
    }

    // console.log('checked', commodityAttr, index, key, value);
    for (var i = 0; i < commodityAttr.length; i++) {
      for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
        if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) {
          includeGroup.push(commodityAttr[i]);
        }
      }
    }
    attrValueList[index].selectedValue = value;

    // Determine whether an attribute is optional
    for (var i = 0; i < attrValueList.length; i++) {
      for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
        attrValueList[i].attrValueStatus[j] = false;
      }
    }
    for (var k = 0; k < attrValueList.length; k++) {
      for (var i = 0; i < includeGroup.length; i++) {
        for (var j = 0; j < includeGroup[i].attrValueList.length; j++) {
          if (attrValueList[k].attrKey == includeGroup[i].attrValueList[j].attrKey) {
            for (var m = 0; m < attrValueList[k].attrValues.length; m++) {
              if (attrValueList[k].attrValues[m] == includeGroup[i].attrValueList[j].attrValue) {
                attrValueList[k].attrValueStatus[m] = true;
              }
            }
          }
        }
      }
    }
    // console.log('result', attrValueList);
    this.setData({
      attrValueList: attrValueList,
      includeGroup: includeGroup
    });

    var count = 0;
    for (var i = 0; i < attrValueList.length; i++) {
      for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
        if (attrValueList[i].selectedValue) {
          count++;
          break;
        }
      }
    }
    if (count < 2) {// For the first time, the values of the same attribute are optional
      this.setData({
        firstIndex: index
      });
    } else {
      this.setData({
        firstIndex: -1
      });
    }
  },
  /* uncheck */
  disSelectValue: function (attrValueList, index, key, value) {
    var commodityAttr = this.data.commodityAttr;
    attrValueList[index].selectedValue = '';

    // Determine whether an attribute is optional
    for (var i = 0; i < attrValueList.length; i++) {
      for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
        attrValueList[i].attrValueStatus[j] = true;
      }
    }
    this.setData({
      includeGroup: commodityAttr,
      attrValueList: attrValueList
    });

    for (var i = 0; i < attrValueList.length; i++) {
      if (attrValueList[i].selectedValue) {
        this.selectValue(attrValueList, i, attrValueList[i].attrKey, attrValueList[i].selectedValue, true);
      }
    }
  },
  /* Click OK */
  submit: function () {
    var value = [];
    for (var i = 0; i < this.data.attrValueList.length; i++) {
      if (!this.data.attrValueList[i].selectedValue) {
        break;
      }
      value.push(this.data.attrValueList[i].selectedValue);
    }
    if (i < this.data.attrValueList.length) {
      wx.showToast({
        title: 'Please perfect the attributes',
        icon: 'loading',
        duration: 1000
      })
    } else {
      wx.showToast({
        title: 'Selected attributes:' + value.join('-'),
        icon: 'sucess',
        duration: 1000
      })
    }
  }
})

Operation effect:



demo address: http://download.csdn.net/detail/michael_ouyang/9816438

More tutorials for small programs


Shortcut keys for Wechat Developer Tools

The File Structure of Wechat Widget Program: Wechat Widget Widget Program Tutorial Series (1)

Demonstration of Life Cycle of Wechat Widget Programs: Wechat Widget Programs Tutorial Series (2)

Dynamic Modification of View Layer Data for Wechat Widget Programs: Wechat Widget Programs Tutorial Series (3)

New page of Wechat applet-Wechat applet tutorial series (4)

How to Use Global Attributes for Wechat Widgets --- Wechat Widgets Tutorial Series (5)

Page Jump of Wechat Widget Program: Wechat Widget Program Tutorial Series (6)

The Setting of Title Bar and Navigation Bar of Wechat Widget Program --- Wechat Widget Widget Program Tutorial Series (7)

Scope and Modularization of Wechat Widget Programs: Wechat Widget Programs Tutorial Series (8)

Data Binding in View Layer of Wechat Widget Programs: Wechat Widget Programs Tutorial Series (9)

Conditional Rendering of View Layer of Wechat Widget Programs: Wechat Widget Programs Tutorial Series (10)

List Rendering of View Layer of Wechat Widget Programs: Wechat Widget Programs Tutorial Series (11)

The Template of View Layer of Wechat Widget Programs: Wechat Widget Programs Tutorial Series (12)

The Unit of Dimension rpx of wxss: The Tutorial Series of wxss (13)

Network Request for Wechat Widget Programs: Wechat Widget Widget Programs Tutorial Series (14)

Baidu Map Acquiring Geographical Location of Wechat Widget Program --- Wechat Widget Widget Program Tutorial Series (15)

Wechat applet uses Baidu api to get weather information - Wechat applet tutorial series (16)

Wechat applet acquisition system date and time: Wechat applet tutorial series (17)

An Example of the Navigation Bar at the Top of the Wechat Widget Program --- The Wechat Widget Widget Widget Widget Practical Series (1)

An Example of Pull-Up Loading (Paging Loading) on Wechat Widgets --- Wechat Widgets Practical Series (2)

An Example of the Roadcasting Map of Wechat Small Program: Wechat Small Program Practical Series (3)

An example of the slidable bottom navigation bar of an android fragment-like wechat widget —— Wechat Small Program Practical Series (4)

An Example of the Login Page of the Wechat Widget Program: Wechat Widget Widget Widget Practical Series (5)

Customized toast instance of Wechat widget --- Wechat widget combat series (6)

Custom Drawer Menu of Wechat Widget Program (pull-down) Example --- Wechat Widget Widget Widget Program Practical Series (7)

Custom Modal Bullet Window (with Animation) Example of Wechat Widget Program: Wechat Widget Widget Program Practical Series (8)

Side Column Classification of Wechat Small Procedures: Wechat Small Procedures Practical Business Mall Series (1)

The Classification Entry of Weixin Small Procedures Imitating Taobao --- Weixin Small Procedures Practical Business Mall Series (2)

Increase or Decrease in the Number of Shopping for Wechat Small Procedures --- Wechat Small Procedures Practical Mall Series (3)


For more tutorials on small programs, see: http://blog.csdn.net/michael_ouyang/article/details/54700871

Thank you for watching, shortcomings, please guide



Tags: Attribute network Android Fragment

Posted on Mon, 08 Jul 2019 15:06:20 -0400 by soto134