优化SKU规格选择的代码

pages/index/index.json

@@ -1,6 +1,5 @@
 {
   "backgroundTextStyle": "dark",
-  "navigationBarBackgroundColor": "white",
   "navigationBarTextStyle": "black",
   "enablePullDownRefresh": true,
   "navigationBarTitleText": "亚米科技mall4j"

pages/prod/prod.js

@@ -36,6 +36,7 @@ Page({
     couponList: [],
     skuList: [],
     skuGroup: {},
+    findSku: true,
     defaultSku: undefined,
     selectedProp: [],
     selectedPropObj: {},
@@ -234,37 +235,47 @@ Page({
       }
     })
   },
-  //根据sku的属性 分组
+
+  /**
+   * 根据skuList进行数据组装
+   */
   groupSkuProp: function() {
     var skuList = this.data.skuList;
+
+    //当后台返回只有一个SKU时，且SKU属性值为空时，即该商品没有规格选项，该SKU直接作为默认选中SKU
     if (skuList.length == 1 && skuList[0].properties == "") {
       this.setData({
         defaultSku: skuList[0]
       });
       return;
     }
-    var skuGroup = {};
-    var allProperties = [];
-    var propKeys = [];
+
+    var skuGroup = {};//所有的规格名(包含规格名下的规格值集合）对象，如 {"颜色"：["金色","银色"],"内存"：["64G","256G"]}
+    var allProperties = [];//所有SKU的属性值集合，如 ["颜色:金色;内存:64GB","颜色:银色;内存:64GB"]
+    var propKeys = [];//所有的规格名集合，如 ["颜色","内存"]
+
     for (var i = 0; i < skuList.length; i++) {
+
+      //找到和商品价格一样的那个SKU，作为默认选中的SKU
       var defaultSku = this.data.defaultSku;
       var isDefault = false;
-      if (!defaultSku && skuList[i].price == this.data.price) { //找到和商品价格一样的那个SKU，作为默认选中的SKU
+      if (!defaultSku && skuList[i].price == this.data.price) { 
         defaultSku = skuList[i];
         isDefault = true;
         this.setData({
           defaultSku: defaultSku
         });
       }
-      var properties = skuList[i].properties; //版本:公开版;颜色:金色;内存:64GB
+
+      var properties = skuList[i].properties; //如：版本:公开版;颜色:金色;内存:64GB
       allProperties.push(properties);
-      var propList = properties.split(";"); // ["版本:公开版","颜色:金色","内存:64GB"]
+      var propList = properties.split(";"); // 如：["版本:公开版","颜色:金色","内存:64GB"]
 
       var selectedPropObj = this.data.selectedPropObj;
       for (var j = 0; j < propList.length; j++) {
 
-        var propval = propList[j].split(":"); //["版本","公开版"]
-        var props = skuGroup[propval[0]]; //先取出 版本对应的值数组
+        var propval = propList[j].split(":"); //如 ["版本","公开版"]
+        var props = skuGroup[propval[0]]; //先取出 规格名 对应的规格值数组
 
         //如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
         if (isDefault) {
@@ -304,27 +315,27 @@ Page({
       selectedProperties += key + ":" + selectedPropObj[key] + ";";
     }
     selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1);
-    // console.log(selectedProperties);
     this.setData({
       selectedProp: selectedProp
     });
 
+    var findSku = false;
     for (var i = 0; i < this.data.skuList.length; i++) {
       if (this.data.skuList[i].properties == selectedProperties) {
+        findSku = true;
         this.setData({
-          defaultSku: this.data.skuList[i]
+          defaultSku: this.data.skuList[i],
         });
         break;
       }
     }
+    this.setData({
+      findSku: findSku
+    });
   },
 
   //点击选择规格
   toChooseItem: function(e) {
-    var ok = e.currentTarget.dataset.ok;
-    if (!ok) {
-      return;
-    }
     var val = e.currentTarget.dataset.val;
     var key = e.currentTarget.dataset.key;
     var selectedPropObj = this.data.selectedPropObj;
@@ -417,6 +428,9 @@ Page({
    * 加入购物车
    */
   addToCart: function(event) {
+    if (!this.data.findSku) {
+      return;
+    }
     var ths = this;
     wx.showLoading({
       mask: true
@@ -450,6 +464,9 @@ Page({
    * 立即购买
    */
   buyNow: function() {
+    if (!this.data.findSku) {
+      return;
+    }
     wx.setStorageSync("orderItem", JSON.stringify({
       prodId: this.data.prodId,
       skuId: this.data.defaultSku.skuId,

pages/prod/prod.wxml

@@ -97,7 +97,7 @@
   </view>
   <!-- end 商品详情 -->
   <!-- 底部按钮 -->
-  <view class="cart-footer">
+  <view class="cart-footer {{findSku?'':'gray'}}">
     <view class="btn icon" bindtap='toHomePage'>
       <image src="../../images/tabbar/homepage.png"></image>
       首页
@@ -136,10 +136,11 @@
     <view class="pup-sku-main">
       <view class='pup-sku-header'>
         <image class="pup-sku-img" src="{{defaultSku.pic?defaultSku.pic:pic}}"></image>
-        <view class="pup-sku-price">
+        <view class="pup-sku-price" wx-if="{{findSku}}">
           ￥
           <text class="pup-sku-price-int">{{wxs.parsePrice(defaultSku.price)[0]}}</text> .{{wxs.parsePrice(defaultSku.price)[1]}}
         </view>
+        <view class="pup-sku-price" wx-if="{{!findSku}}">无货</view>
         <view class='pup-sku-prop'>
           <text>已选</text> {{selectedProp.length>0?selectedProp+'，':selectedProp}}{{prodNum}}件
         </view>
@@ -151,7 +152,7 @@
             <view class='sku-kind'>{{key}}</view>
             <view class='sku-choose'>
               <block wx:for="{{value}}" wx:key='*this'>
-                <text class="sku-choose-item {{wxs.array_contain(selectedProp,item)?'active':''}} {{wxs.props_contain(allProperties,selectedPropObj,key,item,propKeys)?'':'gray'}}" data-ok="{{wxs.props_contain(allProperties,selectedPropObj,key,item,propKeys)}}" bindtap='toChooseItem'
+                <text class="sku-choose-item {{wxs.array_contain(selectedProp,item)?'active':''}} {{['dashed',''][wxs.props_contain(allProperties,selectedPropObj,key,item,propKeys)]}}" bindtap='toChooseItem'
                   data-key="{{key}}" data-val="{{item}}">{{item}}</text>
               </block>
             </view>
@@ -173,7 +174,7 @@
           <view class="count-name">数量</view>
         </view>
       </view>
-      <view class='pup-sku-footer'>
+      <view class='pup-sku-footer {{findSku?"":"gray"}}'>
         <view class="btn cart" bindtap='addToCart'>加入购物车</view>
         <view class="btn buy" bindtap='buyNow'>立即购买</view>
       </view>

pages/prod/prod.wxss

@@ -558,6 +558,10 @@ img {
   color: #fff;
 }
 
+.cart-footer.gray .btn.cart, .cart-footer.gray .btn.buy{
+  background: #ddd;
+}
+
 .cart-footer .btn .badge {
   position: absolute;
   top: 20rpx;
@@ -748,16 +752,18 @@ img {
   color: #333;
   background-color: #f7f7f7;
   font-size: 14px;
+  border:1px solid #aaa;
 }
 
 .sku-choose-item.active {
   background-color: #eb2444;
+  border:1px solid #eb2444 !important;
   color: #fff;
 }
 
-.sku-choose-item.gray {
-  background-color: #f9f9f9;
-  color: #ddd;
+
+.sku-choose-item.dashed {
+  border:1px dashed #aaa;
 }
 
 .pup-sku-count {
@@ -876,3 +882,8 @@ img {
   background: #eb2444;
   color: #fff;
 }
+
+.pup-sku-footer.gray .btn.cart, .pup-sku-footer.gray .btn.buy{
+  background: #ddd;
+}
+

wxs/number.wxs

@@ -13,6 +13,9 @@ function parsePrice(val){
   return val.toFixed(2).split(".");
 }
 
+/**
+ * 判断字符串数组是否包含某字符串
+ */
 function array_contain(array, obj) {
   for (var i = 0; i < array.length; i++) {
     if (array[i] == obj)//如果要求数据类型也一致，这里可使用恒等号===
@@ -21,22 +24,31 @@ function array_contain(array, obj) {
   return false;
 }
 
-//判断当前的规格值 是否可以选，即其他
-function props_contain(allProperties, selectedPropObj, key, item, propKeys){
+/**
+ * 当前规格值是否可以选择  
+ * 
+ * 参数说明：
+ * @param allProperties  ['颜色:金色;内存:64GB','颜色:金色;内存:256GB']
+ * @param selectedPropObj {'颜色':'金色','内存':'64GB'}
+ * @param propKeys ['颜色','内存']
+ * @param key 颜色
+ * @param item 金色
+ * 
+ * @return 0 可选但跟其他值不匹配  1 可选 
+ */
+function props_contain(allProperties, selectedPropObj, key, item, propKeys) {
   var properties = "";
   selectedPropObj[key] = item;
-  for (var j = 0; j < propKeys.length; j++){
+  for (var j = 0; j < propKeys.length; j++) {
     properties += propKeys[j] + ":" + selectedPropObj[propKeys[j]] + ";";
   }
   properties = properties.substring(0, properties.length - 1);
-  var find = false;
-  for (var i = 0; i < allProperties.length; i++){
-    if (properties == allProperties[i]){
-      find = true;
-      break;
+  for (var i = 0; i < allProperties.length; i++) {
+    if (properties == allProperties[i]) {
+      return 1;
     }
   }
-  return find;
+  return 0;
 }
 
 function parseDiscount(discountRule){