vue 商品选择规格

    
    
    
    
    
    



    

        

            
                
            
        
        
        

            

                
                    
                        

                            
                        
                    
                    
                        
{{skuArr.goods_name}}
                    
                
                
                    
                        单价:
                        ￥{{sku_price}}
                    
                    
                        库存:
                        {{sku_stock}}
                    
                
                

                    

                        
{{item.name}}
                        

                            

                                {{l.name}}
                            
                        
                    
                
                
                    数量
                    
                        
                    
                
                
                    加入购物车
                
            
        
    

        .merchant {
            background: #fff;
            box-sizing: border-box;
            padding: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        
        .recommendShop>.shipImg {
            width: 100px;
            height: 100px;
        }
        
        .recommendShop>.shipImg>img {
            width: 100%;
            height: 100%;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }
        
        .recommendShop>.shop_price {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .addCart {
            font-size: 24px;
            color: #fd633a;
        }
        
        .specification_mask2 {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        
        .specification_com2 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
        }
        
        .product_info2 {
            box-sizing: border-box;
            padding: .25rem 0 .55rem;
        }
        
        .product_info2>.van-col>.margin_bottom {
            margin-bottom: .15rem;
        }
        
        .specification_img2 {
            width: 80px;
            height: 80px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            position: absolute;
            top: -1.3rem;
            background: #fff;
            padding: .15rem;
            box-shadow: 0 0 1px 1px #f1f1f1;
        }
        
        .specification_img2>img {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .goods_name2 {
            font-size: 15px;
        }
        
        .product_color2 {
            color: #fd633a;
        }
        
        .Stock2 {
            color: #888;
            font-size: 15px;
        }
        
        .sku_specification2 {
            box-sizing: border-box;
            padding: 10px;
        }
        
        .choose_sku2 {
            max-height: 300px;
            overflow: scroll;
        }
        
        .sku_title2 {
            font-size: 15px;
            height: .5rem;
            line-height: .5rem;
        }
        
        .sku_ul2 {
            display: flex;
            flex-wrap: wrap;
        }
        
        .sku_li2 {
            box-sizing: border-box;
            padding: 5px 10px;
            background: #f1f1f1;
            margin: 0 .15rem .15rem 0;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 14px;
        }
        
        .sku_price-stock {
            box-sizing: border-box;
            padding: 10px;
            border-bottom: 1px solid #f1f1f1;
        }
        
        .sku_price,
        .sku_stock {
            color: #fd633a;
            font-size: 15px;
        }
        
        .sku_addCart {
            background: #ffd100;
            border: none;
        }
        
        .noneActive {
            background-color: #ccc;
            opacity: 0.4;
            pointer-events: none;
        }
        
        .productActive {
            background: #ffd100;
        }

data下json数据

getGoodsSku.json

{"goods_img":"https:\/\/oem.mobzhifu.com\/Uploads\/Picture\/Goods\/2018-10-26\/5bd2c69e6f2bf.png","goods_name":"\u6d4b\u8bd5\u6d4b\u8bd5","data":{"skuDetailList":[{"id":"346","goods_id":"514","sku":"\u7ea2\u8272,\u5fae\u8fa3","sku_res":"515,721","online_price":"21.00","num":"113","shop_mem_price":0},{"id":"347","goods_id":"514","sku":"\u7ea2\u8272,\u4e2d\u8fa3","sku_res":"515,722","online_price":"22.00","num":"13","shop_mem_price":0},{"id":"348","goods_id":"514","sku":"\u7ea2\u8272,\u7279\u8fa3","sku_res":"515,723","online_price":"23.00","num":"134","shop_mem_price":0},{"id":"349","goods_id":"514","sku":"\u7ea2\u8272,\u4e0d\u8fa3","sku_res":"515,724","online_price":"24.00","num":"135","shop_mem_price":0},{"id":"350","goods_id":"514","sku":"\u7ea2\u8272,\u751c","sku_res":"515,725","online_price":"25.00","num":"136","shop_mem_price":0},{"id":"351","goods_id":"514","sku":"\u7eff\u8272,\u5fae\u8fa3","sku_res":"516,721","online_price":"26.00","num":"137","shop_mem_price":0},{"id":"352","goods_id":"514","sku":"\u7eff\u8272,\u4e2d\u8fa3","sku_res":"516,722","online_price":"27.00","num":"129","shop_mem_price":0},{"id":"353","goods_id":"514","sku":"\u7eff\u8272,\u7279\u8fa3","sku_res":"516,723","online_price":"28.00","num":"11","shop_mem_price":0},{"id":"354","goods_id":"514","sku":"\u7eff\u8272,\u4e0d\u8fa3","sku_res":"516,724","online_price":"29.00","num":"15","shop_mem_price":0},{"id":"355","goods_id":"514","sku":"\u7eff\u8272,\u751c","sku_res":"516,725","online_price":"30.00","num":"17","shop_mem_price":0},{"id":"356","goods_id":"514","sku":"\u84dd\u8272,\u5fae\u8fa3","sku_res":"517,721","online_price":"21.00","num":"18","shop_mem_price":0},{"id":"357","goods_id":"514","sku":"\u84dd\u8272,\u4e2d\u8fa3","sku_res":"517,722","online_price":"22.00","num":"25","shop_mem_price":0},{"id":"358","goods_id":"514","sku":"\u84dd\u8272,\u7279\u8fa3","sku_res":"517,723","online_price":"23.00","num":"99","shop_mem_price":0},{"id":"359","goods_id":"514","sku":"\u84dd\u8272,\u4e0d\u8fa3","sku_res":"517,724","online_price":"24.00","num":"999","shop_mem_price":0},{"id":"360","goods_id":"514","sku":"\u84dd\u8272,\u751c","sku_res":"517,725","online_price":"25.00","num":"78","shop_mem_price":0}],"skuList":[{"name":"\u989c\u8272","list":[{"path":"515","name":"\u7ea2\u8272"},{"path":"516","name":"\u7eff\u8272"},{"path":"517","name":"\u84dd\u8272"}]},{"name":"\u53e3\u5473","list":[{"path":"721","name":"\u5fae\u8fa3"},{"path":"722","name":"\u4e2d\u8fa3"},{"path":"723","name":"\u7279\u8fa3"},{"path":"724","name":"\u4e0d\u8fa3"},{"path":"725","name":"\u751c"}]}]},"status":1,"msg":"\u67e5\u8be2\u6210\u529f"}

indexGoodsShow.json 

{ "status": 1, "info": [{ "id": "215", "storeid": "12", "merchantid": "45", "goods_id": "113", "addtime": "1539940538", "status": "1", "type": "1", "old_money": null, "starttime": null, "endtime": null, "good_image": "https://oem.mobzhifu.com/Uploads/Picture/Goods/2018-10-13/5bc1ac6ae3858.jpg", "goods_num": "471.00", "goods_name": "秋冬卫衣", "online_price": "78.00", "vip_online_state": "1", "vip_online_integral": null, "vip_online_price": null, "attributeid": "9,", "attribute": "2" }, { "id": "740", "storeid": "12", "merchantid": "45", "goods_id": "514", "addtime": "1542009890", "status": "1", "type": "1", "old_money": null, "starttime": null, "endtime": null, "good_image": "https://oem.mobzhifu.com/Uploads/Picture/Goods/2018-10-26/5bd2c69e6f2bf.png", "goods_num": "2175.00", "goods_name": "测试测试", "online_price": "20.00", "vip_online_state": "1", "vip_online_integral": null, "vip_online_price": null, "attributeid": "5,7,", "attribute": "2" }, { "id": "1456", "storeid": "12", "merchantid": "45", "goods_id": "516", "addtime": "1543717117", "status": "1", "type": "1", "old_money": null, "starttime": null, "endtime": null, "good_image": "https://oem.mobzhifu.com/Uploads/Goods/2018-10-25/5bd1408fbeab2.jpg", "goods_num": "16.00", "goods_name": "品名ABC", "online_price": "14.00", "vip_online_state": "0", "vip_online_integral": "0", "vip_online_price": "0.00", "attributeid": null, "attribute": "1" }, { "id": "1374", "storeid": "12", "merchantid": "45", "goods_id": "482", "addtime": "1543326320", "status": "1", "type": "1", "old_money": null, "starttime": null, "endtime": null, "good_image": "https://oem.mobzhifu.com/Uploads/Picture/Goods/2018-10-23/5bcef41da4674.jpg", "goods_num": "23.00", "goods_name": "测试产品", "online_price": "140.00", "vip_online_state": "1", "vip_online_integral": null, "vip_online_price": null, "attributeid": "5,7,", "attribute": "2" }] }