微信小程序实现电商平台中的添加商品规格

技术交流请加QQ:2272172668  。也可以通过QQ号搜索微信。

在电商平台中肯定少不了添加商品规格的功能。上传动态图失败了,哎,只能看静态图了。如图:



就是一个商品里边有很多给个好多个属性。

之前用JQ的时候还是比较容易写出来的。因为在JQ中可以直接操作dom,直接对dom进行属性添加等处理,可以把每个元素的属性用自定义属性的方式记录在本元素上。

现在用微信小程序写这个东西就开始头疼了。因为没有办法直接操作dom,也没办法获取一个元素的上下级dom,哎,每个元素都是孤立存在的,这就略显尴尬了。不过还是有办法实现的。


这是实现的效果,里边的算法跟以前JQ算法是一样的。

我还是先说一下用微信小程序实现这个功能的思路吧,最后边我把代码复制下来,里边有一下引用的公共组件的,不过这些组件不太影响,只是ajax的封装,还有一些变量的封装。重要的是解决这个问题的思路,而不是具体的方法,因为他们后台返回来的数据格式跟我们后台返回来的格式不一样!后台返回的数据我放在文章的最下边了。

思路:1:通过js控制属性的状态。(前提是你已经把这个页面的静态页写出来了,如果这个静态页没有写出来就看看我下面的代码,其实就是循环遍历一下就展示出来了。)现在不能直接操作dom元素了,只能间接地通过数据来控制。我们把这些商品的属性弄成一个二维数组!关键就在这个二维数组上,这个二维数组的第一行就是第行属性的所有信息,同理第二个元素就是属性的第二行所以的信息。这个二维数组的每个元素就是一个属性值的信息!其实这个是可以是一个对象,这个对象包含了这个值的所有信息,也可以是一个值,这样就仅仅包含一个信息。我在写的时候就是仅仅是一个值!这个值有三个取值:0,1,2.为什么设置这三个值呢?看图中的属性,属性有三个状态:正常状态,选中状态,置灰状态。这三个状态分别用0,1,2来表示。我们根据这三个状态来判断该元素是否有具有某个class。class="per_attr {{arr[index][idx] == 1 ? 'active':''}} {{arr[index][idx] == 2 ? 'disabled':''}}"。这样就可以动态的

通过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}}

猜你喜欢

转载自blog.csdn.net/sdfujichao/article/details/80581622