小程序-商品详情规格

application/api/controller/Goods.php

@@ -96,5 +96,37 @@ class Goods extends Common
         $ret = GoodsService::GoodsFavor($params);
         return json($ret);
     }
+
+    /**
+     * 商品规格类型
+     * @author   Devil
+     * @blog    http://gong.gg/
+     * @version 1.0.0
+     * @date    2018-12-14
+     * @desc    description
+     */
+    public function SpecType()
+    {
+        // 开始处理
+        $params = $this->data_post;
+        $ret = GoodsService::GoodsSpecType($params);
+        return json($ret);
+    }
+
+    /**
+     * 商品规格信息
+     * @author   Devil
+     * @blog    http://gong.gg/
+     * @version 1.0.0
+     * @date    2018-12-14
+     * @desc    description
+     */
+    public function SpecDetail()
+    {
+        // 开始处理
+        $params = $this->data_post;
+        $ret = GoodsService::GoodsSpecDetail($params);
+        return json($ret);
+    }
 }
 ?>
\ No newline at end of file

application/service/GoodsService.php

@@ -1748,11 +1748,6 @@ class GoodsService
                 'key_name'          => 'spec',
                 'error_msg'         => '请选择规格',
             ],
-            [
-                'checked_type'      => 'is_array',
-                'key_name'          => 'spec',
-                'error_msg'         => '规格有误',
-            ],
         ];
         $ret = ParamsChecked($params, $p);
         if($ret !== true)
@@ -1766,6 +1761,12 @@ class GoodsService
             'goods_id'  => intval($params['id']),
         ];
         $value = [];
+
+        // 规格不为数组则为json字符串
+        if(!is_array($params['spec']))
+        {
+            $params['spec'] = json_decode($params['spec'], true);
+        }
         foreach($params['spec'] as $v)
         {
             $value[] = $v['value'];

public/appmini/old/alipay/pages/goods-detail/goods-detail.acss

@@ -31,10 +31,11 @@
     margin-top: 20rpx;
     margin-right: 25rpx;
     padding: 0 30rpx;
-    background: #eee;
+    background-color: #f5f5f5;
     color: #666;
     line-height: 27px;
     height: 27px;
+    border: 1px solid #d5d5d5;
 }
 .goods-attr-choose .item .attribute button image {
   width: 20px;
@@ -42,17 +43,38 @@
   vertical-align: middle;
   margin-right: 10rpx;
 }
+.spec-active {
+  background: #d2364c !important;
+  color: #fff !important;
+  border: 1px solid #b91d33 !important;
+}
+.spec-dont-choose {
+    color: #b4b3b3 !important;
+    background-color: #ffffff !important;
+    border: 1px solid #ebeaea !important;
+}
+.spec-dont-choose image {
+    opacity: 0.5;
+}
+.spec-items-disabled {
+    color: #d2cfcf !important;
+    background-color: #ffffff !important;
+    border: 1px dashed #d5d5d5 !important;
+}
+.spec-items-disabled image {
+    opacity: 0.3;
+}
 .goods-attr-choose .item .attribute  button,
 .goods-popup-submit
 {
     border-radius: 50rpx;
-    border: 0;
 }
 .goods-popup-submit {
     height: 85rpx;
     line-height: 85rpx;
     font-size: 36rpx;
     margin-top: 20rpx;
+    border: 0;
 }
 .goods-popup .goods-buy-number {
     margin-bottom: 20rpx;

public/appmini/old/alipay/pages/goods-detail/goods-detail.axml

@@ -91,11 +91,7 @@
             <view class="title">{{item.name}}</view>
             <view a:if="{{item.value.length > 0}}" class="attribute">
               <block a:for="{{item.value}}" a:for-index="keys" a:for-item="items">
-                <button a:if="{{temp_attribute_active[key] == keys}}" catchTap="goods_attribute_event" data-key="{{key}}" data-keys="{{keys}}" class="bg-active-main" type="default" size="mini" hover-class="none">
-                  <image a:if="{{(items.images || null) != null}}" src="{{items.images}}" mode="scaleToFill" />
-                  {{items.name}}
-                </button>
-                <button a:else catchTap="goods_attribute_event" data-key="{{key}}" data-keys="{{keys}}" type="default" size="mini" hover-class="none">
+                <button catchTap="goods_specifications_event" data-key="{{key}}" data-keys="{{keys}}" type="default" size="mini" hover-class="none" class="{{items.is_active}} {{items.is_dont}} {{items.is_disabled}}">
                   <image a:if="{{(items.images || null) != null}}" src="{{items.images}}" mode="scaleToFill" />
                   {{items.name}}
                 </button>

public/appmini/old/alipay/pages/goods-detail/goods-detail.js

@@ -19,7 +19,6 @@ Page({
     popup_status: false,
     goods_favor_text: '收藏',
     goods_favor_icon: '/images/goods-detail-favor-icon-0.png',
-    temp_attribute_active: {},
     temp_buy_number: 1,
     buy_event_type: 'buy',
     nav_submit_text: '立即购买',
@@ -76,6 +75,7 @@ Page({
               indicator_dots: (data.goods.photo.length > 1),
               autoplay: (data.goods.photo.length > 1),
               goods_photo: data.goods.photo,
+              goods_specifications_choose: data.goods.specifications.choose || [],
               goods_content_app: data.goods.content_app,
               temp_buy_number: (data.goods.buy_min_number) || 1,
               goods_favor_text: (data.goods.is_favor == 1) ? '已收藏' : '收藏',
@@ -86,8 +86,8 @@ Page({
               nav_submit_is_disabled: (data.goods.is_shelves == 1 && data.goods.inventory > 0) ? false : true,
             });
 
-            // 规格处理
-            this.goods_specifications_choose_handle_dont(data.goods.specifications.choose, 0);
+            // 不能选择规格处理
+            this.goods_specifications_choose_handle_dont(0);
 
             if (data.goods.is_shelves != 1) {
               this.setData({
@@ -128,24 +128,28 @@ Page({
     }
   },
 
-  // 规格处理
-  goods_specifications_choose_handle_dont(data, key) {
-    if((data || null) == null)
+  // 不能选择规格处理
+  goods_specifications_choose_handle_dont(key) {
+    var temp_data = this.data.goods_specifications_choose || [];
+    if(temp_data.length <= 0)
     {
-      this.setData({goods_specifications_choose: []});
       return false;
     }
 
     // 是否不能选择
-    for(var i in data)
+    for(var i in temp_data)
     {
-      for(var k in data[i]['value'])
+      for(var k in temp_data[i]['value'])
       {
-        data[i]['value'][k]['is_dont'] = (key > 0) ? 'spec-dont' : '',
-        data[i]['value'][k]['is_disabled'] = '';
+        if(i > key)
+        {
+          temp_data[i]['value'][k]['is_dont'] = 'spec-dont-choose',
+          temp_data[i]['value'][k]['is_disabled'] = '';
+          temp_data[i]['value'][k]['is_active'] = '';
+        }
       }
     }
-    this.setData({goods_specifications_choose: data});
+    this.setData({goods_specifications_choose: temp_data});
   },
 
   // 下拉刷新
@@ -291,20 +295,136 @@ Page({
     }
   },
 
-  // 属性事件
-  goods_attribute_event(e) {
+  // 规格事件
+  goods_specifications_event(e) {
     var key = e.currentTarget.dataset.key || 0;
     var keys = e.currentTarget.dataset.keys || 0;
-    var temp_data = this.data.temp_attribute_active;
+    var temp_data = this.data.goods_specifications_choose;
 
-    // 相同则移除
-    if(temp_data[key] == keys)
+    // 不能选择和禁止选择跳过
+    if((temp_data[key]['value'][keys]['is_dont'] || null) == null && (temp_data[key]['value'][keys]['is_disabled'] || null) == null)
     {
-      delete temp_data[key];
-    } else {
-      temp_data[key] = keys;
+      // 规格选择
+      for(var i in temp_data)
+      {
+        for(var k in temp_data[i]['value'])
+        {
+          if((temp_data[i]['value'][k]['is_dont'] || null) == null && (temp_data[i]['value'][k]['is_disabled'] || null) == null)
+          {
+            if(key == i)
+            {
+              if(keys == k && (temp_data[i]['value'][k]['is_active'] || null) == null)
+              {
+                temp_data[i]['value'][k]['is_active'] = 'spec-active';
+              } else {
+                temp_data[i]['value'][k]['is_active'] = '';
+              }
+            }
+          }
+        }
+      }
+      this.setData({goods_specifications_choose: temp_data});
+
+      // 不能选择规格处理
+      this.goods_specifications_choose_handle_dont(key);
+
+      // 获取下一个规格类型
+      this.get_goods_specifications_type(key);
+
+      // 获取规格详情
+      this.get_goods_specifications_detail();
+    }
+  },
+
+  // 获取下一个规格类型
+  get_goods_specifications_type(key) {
+    var temp_data = this.data.goods_specifications_choose;
+    var active_index = key+1;
+    var sku_count = temp_data.length;
+
+    if(active_index <= 0 || active_index >= sku_count)
+    {
+      return false;
+    }
+
+    // 获取规格值
+    var spec = [];
+    for(var i in temp_data)
+    {
+      for(var k in temp_data[i]['value'])
+      {
+        if((temp_data[i]['value'][k]['is_active'] || null) != null)
+        {
+          spec.push({"type": temp_data[i]['name'], "value": temp_data[i]['value'][k]['name']});
+          break;
+        }
+      }
+    }
+    if(spec.length <= 0)
+    {
+      return false;
     }
-    this.setData({temp_attribute_active: temp_data});
+
+    // 获取数据
+    my.httpRequest({
+      url: app.get_request_url('spectype', 'goods'),
+      method: 'POST',
+      data: { "id": this.data.goods.id, "spec": JSON.stringify(spec) },
+      dataType: 'json',
+      success: (res) => {
+        if (res.data.code == 0) {
+          var spec_count = spec.length;
+          var index = (spec_count > 0) ? spec_count : 0;
+          if(index < sku_count)
+          {
+            for(var i in temp_data)
+            {
+              for(var k in temp_data[i]['value'])
+              {
+                if(index == i)
+                {
+                  temp_data[i]['value'][k]['is_dont'] = '';
+                  var temp_value = temp_data[i]['value'][k]['name'];
+                  var temp_status = false;
+                  for(var t in res.data.data)
+                  {
+                    if(res.data.data[t] == temp_value)
+                    {
+                      temp_status = true;
+                      break;
+                    }
+                  }
+                  console.log(temp_value, temp_status, res.data)
+                  if(temp_status == true)
+                  {
+                    temp_data[i]['value'][k]['is_disabled'] = '';
+                  } else {
+                    temp_data[i]['value'][k]['is_disabled'] = 'spec-items-disabled';
+                  }
+                }
+              }
+            }
+            this.setData({goods_specifications_choose: temp_data});
+          }
+        } else {
+          my.showToast({
+            type: 'fail',
+            content: res.data.msg
+          });
+        }
+      },
+      fail: () => {
+        my.showToast({
+          type: 'fail',
+          content: '服务器请求出错'
+        });
+      }
+    });
+  },
+
+  // 获取规格详情
+  get_goods_specifications_detail() {
+
   },
 
   // 数量输入事件