支付宝小程序-商品详情规格

application/service/GoodsService.php

@@ -1647,12 +1647,6 @@ class GoodsService
                 'is_checked'        => 1,
                 'error_msg'         => '请选择规格',
             ],
-            [
-                'checked_type'      => 'is_array',
-                'key_name'          => 'spec',
-                'is_checked'        => 1,
-                'error_msg'         => '规格有误',
-            ],
         ];
         $ret = ParamsChecked($params, $p);
         if($ret !== true)
@@ -1670,6 +1664,11 @@ class GoodsService
         if(!empty($params['spec']))
         {
             $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/app.json

 {
-  "pages": [
+  "pages": ["pages/goods-detail/goods-detail",
     "pages/index/index",
     "pages/goods-category/goods-category",
     "pages/cart/cart",
@@ -8,7 +8,7 @@
     "pages/login/login",
     "pages/paytips/paytips",
     "pages/goods-search/goods-search",
-    "pages/goods-detail/goods-detail",
+    
     "pages/goods-attribute/goods-attribute",
     "pages/buy/buy",
     "pages/user-address/user-address",

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

@@ -10,15 +10,38 @@
 }
 .goods-popup {
   padding: 20rpx 10rpx;
+  position: relative;
 }
 .goods-popup .close {
-    margin-right: 10rpx;
+  position: absolute;
+  top: 20rpx;
+  right: 20rpx;
+  z-index: 2;
+}
+.goods-popup-base {
+  height: 220rpx;
+  position: relative;
+}
+.goods-popup-base image {
+  width: 200rpx;
+  height: 200rpx;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.goods-popup-base-content {
+  position: absolute;
+  left: 220rpx;
+  bottom: 20rpx;
+}
+.goods-popup-base-content .goods-price {
+  margin-bottom: 10rpx;
 }
 .goods-popup-content {
     max-height: 50vh;
     overflow-y: scroll;
     overflow-x: hidden;
-    margin-top: 30rpx;
+    margin-top: 20rpx;
 }
 .goods-attr-choose .item {
     margin-bottom: 30rpx;
@@ -33,7 +56,7 @@
     padding: 0 30rpx;
     background-color: #f5f5f5;
     color: #666;
-    line-height: 27px;
+    line-height: 25px;
     height: 27px;
     border: 1px solid #d5d5d5;
 }
@@ -44,9 +67,9 @@
   margin-right: 10rpx;
 }
 .spec-active {
-  background: #d2364c !important;
-  color: #fff !important;
-  border: 1px solid #b91d33 !important;
+  background: #fff !important;
+  color: #d2364c !important;
+  border: 1px solid #d2364c !important;
 }
 .spec-dont-choose {
     color: #b4b3b3 !important;

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

@@ -28,7 +28,7 @@
     </view>
     <view class="goods-price">
       <text class="sales-price">￥{{goods.price}}</text>
-      <text a:if="{{goods.original_price > 0}}" class="original-price">￥{{goods.original_price}}</text>
+      <text a:if="{{(goods.original_price || null) != null}}" class="original-price">￥{{goods.original_price}}</text>
       <view class="fr cr-ccc">
         <text>销量 {{goods.sales_count}}</text>
       </view>
@@ -79,11 +79,27 @@
   <!-- 弹层 -->
   <popup show="{{popup_status}}" position="bottom" onClose="popup_close_event">
     <view class="goods-popup bg-white">
-      <view class="close tr dis-block oh">
+      <view class="close fr oh">
         <view class="fr" catchTap="popup_close_event">
           <icon type="clear" size="20" />
         </view>
       </view>
+      <!-- 规格基础信息 -->
+      <view class="goods-popup-base oh br-b">
+        <image src="{{goods_spec_base_images}}" mode="scaleToFill" class="br" />
+        <view class="goods-popup-base-content">
+          <view class="goods-price">
+            <view class="sales-price">￥{{goods_spec_base_price}}</view>
+            <view a:if="{{(goods_spec_base_original_price || null) != null}}" class="original-price">￥{{goods_spec_base_original_price}}</view>
+          </view>
+          <view class="inventory">
+            <text class="cr-888">库存</text>
+            <text class="cr-666">{{goods_spec_base_inventory}}</text>
+            <text class="cr-888">{{goods.inventory_unit}}</text>
+          </view>
+        </view>
+      </view>
+
       <view class="goods-popup-content">
         <!-- 商品属性 -->
         <view a:if="{{goods_specifications_choose.length > 0}}" class="goods-attr-choose">

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

@@ -23,10 +23,15 @@ Page({
     buy_event_type: 'buy',
     nav_submit_text: '立即购买',
     nav_submit_is_disabled: true,
+
+    goods_spec_base_price: 0,
+    goods_spec_base_original_price: 0,
+    goods_spec_base_inventory: 0,
+    goods_spec_base_images: '',
   },
 
   onLoad(params) {
-    //params['goods_id']=16;
+    params['goods_id']=12;
     this.setData({params: params});
     this.init();
   },
@@ -84,6 +89,11 @@ Page({
               data_bottom_line_status: true,
               data_list_loding_status: 3,
               nav_submit_is_disabled: (data.goods.is_shelves == 1 && data.goods.inventory > 0) ? false : true,
+
+              goods_spec_base_price: data.goods.price,
+              goods_spec_base_original_price: data.goods.original_price,
+              goods_spec_base_inventory: data.goods.inventory,
+              goods_spec_base_images: data.goods.images
             });
 
             // 不能选择规格处理
@@ -300,6 +310,7 @@ Page({
     var key = e.currentTarget.dataset.key || 0;
     var keys = e.currentTarget.dataset.keys || 0;
     var temp_data = this.data.goods_specifications_choose;
+    var temp_images = this.data.goods_spec_base_images;
 
     // 不能选择和禁止选择跳过
     if((temp_data[key]['value'][keys]['is_dont'] || null) == null && (temp_data[key]['value'][keys]['is_disabled'] || null) == null)
@@ -316,6 +327,10 @@ Page({
               if(keys == k && (temp_data[i]['value'][k]['is_active'] || null) == null)
               {
                 temp_data[i]['value'][k]['is_active'] = 'spec-active';
+                if((temp_data[i]['value'][k]['images'] || null) != null)
+                {
+                  temp_images = temp_data[i]['value'][k]['images'];
+                }
               } else {
                 temp_data[i]['value'][k]['is_active'] = '';
               }
@@ -323,7 +338,7 @@ Page({
           }
         }
       }
-      this.setData({goods_specifications_choose: temp_data});
+      this.setData({goods_specifications_choose: temp_data, goods_spec_base_images: temp_images});
 
       // 不能选择规格处理
       this.goods_specifications_choose_handle_dont(key);
@@ -424,7 +439,53 @@ Page({
 
   // 获取规格详情
   get_goods_specifications_detail() {
+    // 是否全部选中
+    var temp_data = this.data.goods_specifications_choose;
+    var sku_count = temp_data.length;
+    var active_count = 0;
+
+    // 获取规格值
+    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)
+        {
+          active_count++;
+          spec.push({"type": temp_data[i]['name'], "value": temp_data[i]['value'][k]['name']});
+          break;
+        }
+      }
+    }
+    if(spec.length <= 0 || active_count < sku_count)
+    {
+      return false;
+    }
 
+    // 获取数据
+    my.httpRequest({
+      url: app.get_request_url('specdetail', 'goods'),
+      method: 'POST',
+      data: { "id": this.data.goods.id, "spec": JSON.stringify(spec) },
+      dataType: 'json',
+      success: (res) => {
+        if (res.data.code == 0) {
+          
+        } else {
+          my.showToast({
+            type: 'fail',
+            content: res.data.msg
+          });
+        }
+      },
+      fail: () => {
+        my.showToast({
+          type: 'fail',
+          content: '服务器请求出错'
+        });
+      }
+    });
   },
 
   // 数量输入事件