技術交流請加QQ：2272172668  。也可以通過QQ號搜尋微信。

在電商平臺中肯定少不了新增商品規格的功能。上傳動態圖失敗了，哎，只能看靜態圖了。如圖：

就是一個商品裡邊有很多給個好多個屬性。

之前用JQ的時候還是比較容易寫出來的。因為在JQ中可以直接操作dom，直接對dom進行屬性新增等處理，可以把每個元素的屬性用自定義屬性的方式記錄在本元素上。

現在用微信小程式寫這個東西就開始頭疼了。因為沒有辦法直接操作dom，也沒辦法獲取一個元素的上下級dom，哎，每個元素都是孤立存在的，這就略顯尷尬了。不過還是有辦法實現的。

這是實現的效果，裡邊的演算法跟以前JQ演算法是一樣的。

我還是先說一下用微信小程式實現這個功能的思路吧，最後邊我把程式碼複製下來，裡邊有一下引用的公共元件的，不過這些元件不太影響，只是ajax的封裝，還有一些變數的封裝。重要的是解決這個問題的思路，而不是具體的方法，因為他們後臺返回來的資料格式跟我們後臺返回來的格式不一樣！後臺返回的資料我放在文章的最下邊了。

思路：1：通過js控制屬性的狀態。（前提是你已經把這個頁面的靜態頁寫出來了，如果這個靜態頁沒有寫出來就看看我下面的程式碼，其實就是迴圈遍歷一下就展示出來了。）現在不能直接操作dom元素了，只能間接地通過資料來控制。我們把這些商品的屬性弄成一個二維陣列！關鍵就在這個二維陣列上，這個二維陣列的第一行就是第行屬性的所有資訊，同理第二個元素就是屬性的第二行所以的資訊。這個二維陣列的每個元素就是一個屬性值的資訊！其實這個是可以是一個物件，這個物件包含了這個值的所有資訊，也可以是一個值，這樣就僅僅包含一個資訊。我在寫的時候就是僅僅是一個值！這個值有三個取值：0,1,2.為什麼設定這三個值呢？看圖中的屬性，屬性有三個狀態：正常狀態，選中狀態，置灰狀態。這三個狀態分別用0,1,2來表示。我們根據這三個狀態來判斷該元素是否有具有某個class。class

通過js來控制所有屬性的狀態了，可以實現屬性的自由改變了。

2：通過選中的屬性來匹配sku。其實這個匹配也沒有多好的辦法，就是在陣列中一個元素一個元素的查詢。但是這裡有個很重要的演算法，

這個演算法就是通過匹配後怎麼判斷某些元素置灰還是正常顯示。這個演算法比較麻煩複雜，其實有很多部落格上都有寫，但是我過幾個部落格寫的

比較含糊，沒有寫具體的思路，看完後也是一頭霧水。

下面我來寫一下點選某個元素後通過什麼演算法設定其他元素的狀態的（點選不一定是從上到下順序的）。用上圖舉例子：第一次點選了

尺寸裡邊的“小”，演算法中的思路是：當前所有選中屬性是“小”，“小”置成選中狀態，迴圈每一行來設定屬性的狀態，以除去當前行選中元素來進行匹配

sku，根據所有匹配到的所有sku的尺寸屬性來設定尺寸屬性的狀態，sku中包含的屬性就設定為正常狀態，不包含的屬性就置灰。

然後進行第一行品牌的狀態設定，因為當前所有選中狀態是“小”，除去本行選中以外的元素就是空了，就是沒有選中了，所以能匹配到所有的

sku，即第一行的所有屬性都是正常狀態（點選的元素為選中狀態）。然後進行第二行狀態的設定，除去第二行以外所有選中狀態就是“小”，

根據“小”來匹配所有的sku，能找到幾個符合的sku，吧這幾個sku中所有的品牌屬性都挑選出來，這些挑選出出來的屬性都保持正常狀態，

不包含的屬性全部置灰，然後進行第三行，，，一直到最後一行。這個僅僅是點選了第一次的操作，點選第二次的操作跟點選第一次的操作

一樣。

3：點選的元素如果是已經置灰了，就把所有置灰元素設定成正常狀態，僅僅保留當前點選的為選中狀態，在以這個一個選中元素為基礎進行sku的匹配。

說了這麼多也不一定能說清楚，吧程式碼寫上更直觀。如果有看不太清楚的地方歡迎私聊。qq：2272172668，不用問在嗎，直接把問題發過來就行。

<view class="container">
    <!-- 使用者資訊 -->
    <view class="user-info">
        <span class="icon address" style="background-image:url({{icon.address}})"></span>
        <view class="info">
            <span>{{memberDTO.real_name}}</span>
            <span>{{memberDTO.mobile}}</span>
            <span>{{memberDTO.address}}</span>
        </view>
    </view>
    <!-- My payment for goods -->
    <view class="goods-price">
        <span>
            我的貨款：
            <i>¥ {{avaliable_amount}}</i>
        </span>
        <span bindtap="go_recharge" class="btn">
            <button size="mini" type="primary">充值</button>
        </span>
    </view>
    <view class='block'></view>
    <!-- 商品詳情 -->
    <view class="goods-info">
        <!-- tab發貨切換 -->
        <view class="swiper-tab">
            <view class="swiper-tab-list {{currentTab==2 ? 'active' : ''}}" data-current="2" data-type="2" bindtap="swichNav">廠家發貨</view>
            <view class="swiper-tab-list {{currentTab==1 ? 'active' : ''}}" data-current="1" data-type="1" bindtap="swichNav">上級發貨</view>
        </view>
        <view class="goods-details">
            <!-- <image src="{{img_url}}"></image> -->
            <image wx:if="{{is_sku == '1'}}" src="{{confirm_show_info.image_uri}}"></image>
            <image wx:if="{{is_sku == '2'}}" src="{{img_url}}"></image>
            
            <view class="about">
                <p>{{spu_name}}</p>
            </view>
        </view>
    </view>
    <view class="attr_box">
        <view wx:for="{{total_attr_num}}"  wx:if="{{property_arr[index]}}">
            <view data-name="{{property_arr[index].original_name}}" data-id="{{property_arr[index].id}}" class='attr_row'>
                <view class="property_name">{{property_arr[index].property_name}}：</view>
                <view class='row_box'>
                    <span bindtap="fun_per_attr" wx:for="{{property_arr[index].property}}" data-name="{{property_arr[index].original_name}}" wx:for-index="idx" data-row="{{index}}" data-property="{{item}}" data-colom="{{idx}}" data-status="{{arr[index][idx]}}" class="per_attr {{arr[index][idx] == 1 ? 'active':''}} {{arr[index][idx] == 2 ? 'disabled':''}}">{{item}}</span>
                </view>
            </view>
        </view>
    </view>
    <view class='goods_num'>
        <span class="left">拿貨價：{{ confirm_show_info.sku_price || ""}}</span>
        <view class='right'>
        <span bindtap="fun_minus">-</span>
        <span>{{goods_num}}</span>
        <span bindtap="fun_add">+</span>
        </view>
    </view>
    <view wx:if="{{currentTab==2}}" class='goods_title'>型別說明：廠家發貨訂單，將由您的上級和總部進行審單，最終由廠家直接發貨到您手中。</view>
    <view wx:if="{{currentTab==1}}" class='goods_title'>型別說明：上級發貨訂單，將由您的上級進行審單，最終由您的上級直接發貨到您手中。</view>
    <view class='block_bootom'></view>
    <view class='order'>
       <span class="left">訂單金額：¥ {{is_sku==2 ? total_price : ''}}</span>
       <button class="right {{total_price > 0 ? '' : 'dis_btn'}}" size="mini" bindtap='fun_submit'  type="primary">提交訂單</button>
    </view>
</view>

/**
 * 獲取base編碼的圖示
 */
var address = require("../../../contentConfig/_var.js").url_base64.address;
var myConsoleLog = require("../../../contentConfig/console_log.js").myConsoleLog;

var _this = null;
var $ajaxGet = require("../../../contentConfig/ajax.js").ajaxGet;
var upload_path_h5 = require("../../../envConfig/path_config.js").upload_path_h5;

/**
 * js邏輯中使用的全域性變數，不可刪除！
 * attr_arr  arr是兩個二維陣列，裡邊的值和頁面上的屬性展示一一對應。並且這兩個陣列都是一一對應的。格式完全一樣，左邊完全一樣。
 * selected_arr 是實時統計的當前選中的屬性值。並且index和sku的左邊相對應
 * sku_arr 是一個sku屬性的陣列
 * effective_sku_arr 是實時的，有效的sku（不能被匹配的sku就被刪除了。）
 * sku_info 是所有sku資訊的陣列
 * confirm_show_info 就是頁面上展示的商品資訊
 * is_sku == 1 代表沒有確定最終sku
 * total_price 商品總價
 * spu_id spu 的id
 * spu_name  
 */
// 書序用來存放商品屬性資訊

Page({
    data: {
        spu_id: "",
        total_price: "",
        goods_num: 1,
        is_sku: "2",
        attr_arr: [],
        selected_arr: [],
        sku_arr: [],
        effective_sku_arr: [],
        sku_info: [],
        confirm_show_info: [],
        is_show_sku: false,
        icon: {
            address: address,
        },
        currentTab: 2,
        // tab切換  
        deliver_type: "2",
    },
    onLoad: function (options) {
        _this = this;
        _this.setData({
            spu_id: options.id + "",
            img_url: options.img_url,
            total_attr_num: new Array(20)
        })
        myConsoleLog(_this.data.img_url)
        _this.fun_get_user_info();
        _this.fun_get_goods_info();
        /** 
         * 獲取系統資訊 
         */

    },
    onReady: function () {
       
    },
    /** 
         * 獲取使用者資訊 
         */
    fun_get_user_info: function () {
        $ajaxGet(null, "004000002", {}, function (data) {
            if (data.success) {
                if (data.success) {
                    _this.setData({
                        memberDTO: data.data.memberDTO
                    })
                }

            }
        });
    },
    /** 
         * 獲取所有商品資訊 
         */
    fun_get_goods_info: function () {
        $ajaxGet(null, "002000001", { deliver_type: _this.data.deliver_type, spu_id: _this.data.spu_id + ""}, function (data) {
            if (data.success) {
                if (data.success) {
                    //    處理商品屬性資訊 
                    _this.fun_property_handle(data.data);
                    // 整理所有sku資訊
                    _this.fun_sku_info(data.data.item_sku_d_t_o_list);
                    _this.setData({
                        sku_info: data.data.item_sku_d_t_o_list,
                        avaliable_amount: data.data.avaliable_amount,
                        spu_id : data.data.id,
                        spu_name: data.data.spu_name
                    })
                }

            }
        });
    },
    /** 
     * 點選tab切換 
     */
    swichNav: function (e) {
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            _this.setData({
                currentTab: e.target.dataset.current,
                deliver_type: e.target.dataset.type,
                attr_arr: [],
                selected_arr: [],
                sku_arr: [],
                effective_sku_arr: [],
                sku_info: [],
                confirm_show_info: [],
                total_price: "",
                goods_num: 1,
                is_sku: "2",
            });
            _this.fun_get_goods_info();
        }
    },

    /** 
     * 點選某一個屬性 總處理函式 （點選事件的控制中心）
     * 
     */
    fun_per_attr: function (e) {
        var row = e.currentTarget.dataset.row; // 陣列所在行
        var colom = e.currentTarget.dataset.colom; // 陣列所在的列
        var status = e.currentTarget.dataset.status; // 當前屬性的狀態
        var property = e.currentTarget.dataset.property; // 當前屬性 值
        var name = e.currentTarget.dataset.name; // 當前屬性 名稱

        _this.fun_handle_click(row, colom, status); //處理點選後的選中屬性
        _this.fun_collo_selected_attr(); // 收集所有選中屬性的值 index就是代表的行號
        _this.fun_attr_match_sku();

    },
     /** 
     * 匹配sku，不匹配的就從effective_sku_arr陣列中刪除。
     * 
     */
    fun_attr_match_sku: function(){
        //  sku_arr  selected_arr  effective_sku_arr
        myConsoleLog("sku_arr")
        myConsoleLog(_this.data.sku_arr);
        myConsoleLog(_this.data.selected_arr);
        for(var j=0; j<_this.data.arr.length; j++){
            var tmp_selected = new Array(_this.data.selected_arr.length);
            _this.fun_copy_arr(_this.data.selected_arr, tmp_selected )
            tmp_selected[j] = ""; // 第i行被選擇的屬性清空 就是為了尋找設定i行的屬性
            var tmp_effiective = new Array(_this.data.effective_sku_arr.length);
            _this.fun_copy_arr(_this.data.effective_sku_arr, tmp_effiective)
            for (var i = 0; i < tmp_effiective.length; i++) {
                if (_this.fun_compare_arr(tmp_selected, tmp_effiective[i])) {

                } else { // 有不匹配的，需要刪除這個陣列
                    //    tmp_effiective.splice(i, 1);
                    tmp_effiective[i] = ""
                }
            }
            // 此時的tmp_effiective已經是第j行的所有匹配到的屬性了。下一步設定第j行的屬性置灰，（沒有匹配到的就置灰）
            myConsoleLog("tmp_effiective")
            myConsoleLog(tmp_effiective)
            _this.fun_disabled_attr(j, tmp_effiective);
        }
    },
    // 設定未被選中的屬性，置灰。存在的屬性保留。其他的屬性全部置灰
    fun_disabled_attr: function (row, arr){
        var tmp_arr = [];
        for(var i=0; i<arr.length; i++){
            tmp_arr.push(arr[i][row]);
                // var str = "arr[" + i + "][" + row + "]";
                // _this.setData({
                //     [str]: "2"
                // })
        }
        myConsoleLog("tmp_arr") // 這是每行 需要正常展示的屬性
        myConsoleLog(tmp_arr)
        for(var j=0;j<_this.data.arr[row].length;j++){
            if (tmp_arr.indexOf(_this.data.attr_arr[row][j]) > -1){
                // 不能置灰的屬性
                if (_this.data.arr[row][j] == "2"){
                    var str = "arr[" + row + "][" + j + "]";
                    _this.setData({
                        [str]: "0"
                    })
                }
            }else{
                var str = "arr[" + row + "][" + j + "]";
                _this.setData({
                    [str]: "2"
                })
            }
        }
    },
    // 淺複製兩個陣列
    fun_copy_arr: function(arr1, arr2){ // 複製arr1 到 arr2 ，新生成的是arr2
        for(var i=0; i< arr1.length; i++){
            arr2[i] = arr1[i];
        }
    },
    // 比較兩個陣列是否一樣
    fun_compare_arr: function (tmp_selected,arr){
        for (var i = 0; i < tmp_selected.length; i++) {
            if (tmp_selected[i] != "") {
                break;
            }
            if (i == tmp_selected.length - 1) {
                return true; // 全部是空屬性，返回 true就不用刪除
            }
        }
        for (var i = 0; i < tmp_selected.length;i++){
            if (tmp_selected[i] == ""){
               continue;
            }
            if (_this.data.selected_arr[i] == arr[i]){
               
            }else{
                return false;  // 不同，刪除陣列
            }
        }
       return true;

    },
       /** 
     * 每次點選後統一收集所有已經選中的屬性 實時統計的，座標和sku的座標對應的。
     * 
     */
    fun_collo_selected_attr: function () {
        if (!_this.data.selectde_arr) { // 建立selectde_arr陣列，用來存放點選後 選中的屬性
            var len = _this.data.arr.length;
            _this.setData({
                selectde_arr: new Array(len)
            });
            _this.data.selectde_arr.fill("");
        } else {
            _this.data.selectde_arr.fill("");
        }
        var lengths = _this.data.arr.length;
        var selected_arr = new Array(lengths);
        selected_arr.fill("");
        for(var i=0;i<_this.data.arr.length; i++){
            for(var j=0;j<_this.data.arr[i].length; j++){
                if(_this.data.arr[i][j] == "1"){
                    selected_arr[i] = _this.data.attr_arr[i][j]
                }
            }
        }
        _this.setData({
            selected_arr: selected_arr
        });
        if (_this.data.selected_arr.length == _this.data.arr.length){
            _this.setData({
                is_show_sku: true
            });
            // 判斷選中了那個sku商品。
            _this.fun_confirm_sku();
        }else{
            _this.setData({
                is_show_sku: false
            });
        }
    },
    fun_confirm_sku: function(){
        // sku_arr  selected_arr
        // 比較選中大的陣列跟哪個sku一樣。
        for (var i = 0; i < _this.data.sku_arr.length;i++){
            if (_this.data.sku_arr[i].toString() == _this.data.selected_arr.toString()){ // 匹配成功 i就是sku的順序
                _this.data.sku_info[i].image_uri = upload_path_h5 + _this.data.sku_info[i].image_uri
                _this.setData({
                    confirm_show_info: _this.data.sku_info[i],
                    is_sku: "2"
                });
                if (_this.data.confirm_show_info.sku_price){
                    _this.setData({
                        total_price: _this.data.goods_num * _this.data.confirm_show_info.sku_price
                    })
                }
                if (!_this.data.sku_info[i].sku_price){
                    wx.showToast({
                        title: '本商品未設定價格!',
                        icon: 'none',
                        duration: 2000
                    })
                }
                return;
            }else{
                _this.setData({
                    confirm_show_info: "",
                    is_sku: "1"
                })
            }
        }
    },
    /** 
     * 點選某一個屬性 處理函式
     * 屬性為0 ： 當前行所有為1的都得清零
     *       1    不處理
     *       2    吧全部屬性為清零 然後把當前屬性設為1
     */
    fun_handle_click: function (row, colom, status) {
        // 分三種狀態，0 的時候不需要操作，1：不需要額外操作 2： 點選了灰色的屬性，需要先把所有屬性的狀態設定為 0
        switch (status) {
            case "0": {
                for (var i = 0; i < _this.data.arr[row].length; i++) {
                    if (_this.data.arr[row][i] == "1") {
                        var str = "arr[" + row + "][" + i + "]";
                        _this.setData({
                            [str]: "0"
                        })
                    }
                }
                // 當前點選置為1
                var str = "arr[" + row + "][" + colom + "]";
                _this.setData({
                    [str]: "1"
                })
                break;
            }
            case "1": {
                break;
            }
            case "2": {
                for (var i = 0; i < _this.data.arr.length; i++) {
                    for (var j = 0; j < _this.data.arr[i].length; j++) {
                        var str = "arr[" + i + "][" + j + "]";
                        _this.setData({
                            [str]: "0"
                        })
                    }
                }
                // 當前點選置為1
                var str = "arr[" + row + "][" + colom + "]";
                _this.setData({
                    [str]: "1"
                })
                break;
            }
        }
    },

    /** 
     * 把所有的sku屬性彙總起來，形成一個數組
     * 
     */
    fun_sku_info: function(data){
        //  property_arr
        var len = data.length;
        var arr = new Array(len);
       
        for(var i=0;i<data.length;i++){
            var tmp_arr = [];
            for(var j=1;j<=9;j++){
                var name = "reserve" + j;
                if (data[i][name]) {
                    tmp_arr.push(data[i][name]);
                }
            }
            arr[i] = tmp_arr;
        }
        _this.setData({
            sku_arr: arr,
            effective_sku_arr: arr
        })
      myConsoleLog(arr)
    },
    /** 
    * 處理商品屬性資訊
    * 並且建立儲存屬性狀態的陣列 0 1 2 。 (一個二維陣列)
    * 其中 0 ：正常裝填
    *      1： 選中狀態
    *      2： 置灰狀態
    */
    fun_property_handle: function (data) {
        // 以reserve1_list名稱迴圈
        var goods_property = [];
        for (var i = 1; i <= 9; i++) {
            var tmp_name = "reserve" + i + "_list";
            if (data[tmp_name] != "") {
                var tmp_json = {};
                tmp_json.original_name = tmp_name;
                tmp_json.property = data[tmp_name];
                tmp_json.property_name = "";
                
                goods_property.push(tmp_json);
            }
        }
        var length = goods_property.length;
        var attr_arr = new Array(length);
        
        var arr = new Array();
        for (var i = 0; i < goods_property.length; i++) {
            if (goods_property.length != 1 && i != goods_property.length - 1){
               goods_property[i].property_name = data.property_d_t_o_list[i].property_name;
               goods_property[i].id = data.property_d_t_o_list[i].property_id;
           }
            if (i != goods_property.length - 1) {
                
            } else {
                goods_property[i].property_name = "單位";
                goods_property[i].id = "2";
            }
            var len = goods_property[i].property.length;
            attr_arr[i] = goods_property[i].property;
            arr[i] = new Array(len);
            arr[i].fill("0");
        }
        _this.setData({
            property_arr: goods_property,
            arr: arr,
            attr_arr: attr_arr
        })
        myConsoleLog(goods_property);

        myConsoleLog("property_arr")
        myConsoleLog(_this.data.property_arr)
    },
    fun_minus: function(){
        if (_this.data.goods_num == 1){

        }else{
            _this.setData({
                goods_num: _this.data.goods_num - 1
            })
            if (_this.data.confirm_show_info.sku_price){
                _this.setData({
                    total_price: _this.data.goods_num * _this.data.confirm_show_info.sku_price
                })
            }
        }
       
    },
    fun_add: function(){
        _this.setData({
            goods_num: _this.data.goods_num + 1
        })
        if (_this.data.confirm_show_info.sku_price) {
            _this.setData({
                total_price: _this.data.goods_num * _this.data.confirm_show_info.sku_price
            })
        }
    },
    fun_submit: function(){
        myConsoleLog(_this.data.confirm_show_info)
        if (!_this.data.total_price > 0){ // 沒有可用的sku
            wx.showToast({
                title: '請選擇商品!',
                icon: 'none',
                duration: 1000
            });
            return;
        };
        wx.showLoading({
            mask: true,
            title: '努力載入中...',
        });
        $ajaxGet(null, "006000007", { counts: _this.data.goods_num + "", deliver_type: _this.data.deliver_type, sku_id: _this.data.confirm_show_info.id + "", spu_id: _this.data.spu_id + ""}, function (data) {
            if (data.success) {
                wx.hideLoading();
                wx.showToast({
                    title: '提交成功!',
                    icon: 'none',
                    duration: 1000
                });
                setTimeout(function(){
                    wx.redirectTo({
                        url: '../order-list/index?type=1&order_status=00'
                    })
                },1000)
            }else{
                if(data.msg){
                    wx.showToast({
                        title: data.msg,
                        icon: 'none',
                        duration: 1000
                    });
                }
            }
        }); 
    },
    go_recharge: function(){
        wx.navigateTo({
            url: '../../payment/payment-recharge/index',
        })
    }
})

.container {
}

.container .user-info {
    position: relative;
    padding: 20rpx;
    font-size: 30rpx;
    background: #f5ffeb;
    overflow: hidden;
}

.container .user-info .icon {
    position: absolute;
    top: 68rpx;
    left: 5%;
    line-height: 40rpx;
    margin-right: 20rpx;
    width: 32rpx;
    height: 41rpx;
    background-size: contain;
    vertical-align: middle;
    float: left;
}

.container .user-info .info {
    position: relative;
    left: 10%;
    width: 90%;
}

.container .user-info .info span {
    display: block;
}

.container .goods-price {
    margin: 20rpx 0;
    margin-bottom: 0;
    padding: 20rpx;
    font-size: 30rpx;
    background: #fff;
    overflow-y: hidden;
}

.container .goods-price span {
    display: inline-block;
    line-height: 60rpx;
}

.container .goods-price span i {
    color: #f33;
    font-size: normal;
    font-weight: 700;
}

.container .goods-price .btn {
    float: right;
}

.container .goods-price .btn button {
    width: 142rpx;
    height: 62rpx;
    font-size: 30rpx;
    line-height: 62rpx;
    background: #66c300;
    border-radius: 10rpx;
    color: #fff;
}

.container .goods-info {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    font-size: 30rpx;
}

.container .goods-info .swiper-tab {
    width: 100%;
    text-align: center;
    line-height: 80rpx;
}

.container .goods-info .swiper-tab .swiper-tab-list {
    font-size: 30rpx;
    display: inline-block;
    width: 50%;
    color: #777;
}

.container .goods-info .swiper-tab .active {
    background: #fff;
    color: #66c300;
    border: 0px;
    border-bottom: 2rpx solid #66c300;
}

.container .goods-info .goods-details {
    position: relative;
    padding: 30rpx;
    margin-top: 10rpx;
    border-top: 1px solid #e8e8e8;
    padding-top: 20rpx;
    background: #fff;
    overflow: hidden;
}

.container .goods-info .goods-details image {
    float: left;
    width: 140rpx;
    height: 140rpx;
    margin-right: 20rpx;
}

.block {
    width: 100%;
    height: 20rpx;
    background-color: #f2f2f2;
}

.attr_box {
    padding: 10rpx 20rpx;
    font-size: 30rpx;
}

.property_name {
    display: inline-block;
    padding: 10rpx 20rpx;
    position: absolute;
    top: 19rpx;
    left: 0;
}

.per_attr {
    display: inline-block;
    padding: 10rpx 20rpx;
    border: 1px solid #e8e8e8;
    margin: 10rpx 10rpx;
    border-radius: 10rpx;
}

.attr_row {
    position: relative;
    padding: 10rpx 0;
}

.row_box {
    padding-left: 100rpx;
    overflow: hidden;
}

.active {
    color: #66c300;
    border: 1px solid #66c300;
}

.disabled {
    background-color: #ccc;
}

.goods_title {
    background-color: #ddebce;
    margin: 20rpx;
    padding: 30rpx 20rpx;
    border-radius: 8rpx;
    font-size: 30rpx;
}

.goods_num {
    border: 1px solid #e8e8e8;
    font-size: 30rpx;
    padding: 30rpx 20rpx;
    overflow: hidden;
}

.goods_num .left {
    float: left;
    transform: translateY(10rpx);
}

.goods_num .right {
    padding: 10rpx;
    overflow: hidden;
    border: 1rpx solid #e8e8e8;
    border-radius: 10rpx;
    display: inline-block;
    float: right;
}

.goods_num .right span {
    padding: 20rpx;
}

.block_bootom {
    width: 100%;
    height: 150rpx;
    background-color: #f2f2f2;
}

.order {
    border-top: 1px solid #e8e8e8;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 20rpx;
    background-color: white;
    font-size: 30rpx;
}
.order .left{
    display: inline-block;
    padding-top: 15rpx;
}
.order .right {
    display: inline-block;
    float: right;
    background-color: #66c300;
    color: white;
    border-radius: 10rpx;
}
.dis_btn{
    background-color: gray!important;
}

這是後臺返回來的json資料。

{"msg":"成功","code":"10000","success":true,"data":{"spu_name":"fjc","avaliable_amount":"0.00","item_sku_d_t_o_list":[{"spu_id":318,"spu_name":"fjc","sku_sn":"fjc4","image_uri":"1001121521969210346.jpg","deliver_type":2,"market_price":5700,"wechat_price":324500,"sku_price":"56.0","unit":"*16盒","specs":"總部發貨,*16盒,大,肌洋,12瓶,上海","reserve2":"大","reserve3":"肌洋","reserve6":"12瓶","reserve7":"上海","reserve9":"*16盒","sku_status":1,"id":802,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"spu_name":"fjc","sku_sn":"fjc5","image_uri":"1001121514604700975.jpg","deliver_type":2,"market_price":76800,"wechat_price":35400,"sku_price":"56.0","unit":"*48盒","specs":"總部發貨,*48盒,中,紅色小象,*48盒,南京","reserve2":"中","reserve3":"紅色小象","reserve6":"*48盒","reserve7":"南京","reserve9":"*48盒","sku_status":1,"id":803,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"spu_name":"fjc","sku_sn":"fjc6","image_uri":"1001121514777532774.jpg","deliver_type":2,"market_price":657800,"wechat_price":5465500,"sku_price":"56.0","unit":"24瓶","specs":"總部發貨,24瓶,小,潔雲,*6支,南京","reserve2":"小","reserve3":"潔雲","reserve6":"*6支","reserve7":"南京","reserve9":"24瓶","sku_status":1,"id":804,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"spu_name":"fjc","sku_sn":"fjc8","image_uri":"1001051520577167894.jpg","deliver_type":2,"market_price":98700,"wechat_price":57600,"sku_price":"56.0","unit":"*16盒","specs":"總部發貨,*16盒,小,肌洋,支,上海","reserve2":"小","reserve3":"肌洋","reserve6":"支","reserve7":"上海","reserve9":"*16盒","sku_status":1,"id":806,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0}],"property_d_t_o_list":[{"spu_id":318,"property_id":"4","property_name":"尺寸","id":343,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"property_id":"5","property_name":"品牌","id":344,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"property_id":"8","property_name":"容量","id":345,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"property_id":"9","property_name":"產地","id":346,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0}],"reserve1_list":[null],"reserve2_list":["小","大","中"],"reserve3_list":["紅色小象","肌洋","潔雲"],"reserve4_list":[null],"reserve5_list":[null],"reserve6_list":["*48盒","支","*6支","12瓶"],"reserve7_list":["上海","南京"],"reserve8_list":[null],"reserve9_list":["*48盒","24瓶","*16盒"],"id":318}}