1. 模仿淘宝多规格选择demo ,说明:依赖文件: vant.css, vue.js, vant.js

内容代码 详细情况:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟淘宝多规格选择</title>
		<link rel="stylesheet" href="css/vant.css" />
		<script src="js/vue.js"></script>
		<script src="js/vant.js"></script>
	</head>
	<body >
		<div id="app">
			<button class="van-button van-button--danger van-button--block" @click="skushow=true">打开</button>
			<!-- 选择规格 弹框 -->
	        <demo-block>
	            <div class="sku-container">
	                <van-sku
	                        v-model="skushow"
	                        stepper-title="选择数量"
	                        :sku="skuData.sku"
	                        :goods="skuData.goods_info"
	                        :goods-id="skuData.goods_id"
	                        :quota="skuData.quota"
	                        :initial-sku="skuData.selectedSkuComb"
	                        show-add-cart-btn
	                        reset-stepper-on-hide
	                        @buy-clicked="onBuyClicked"
	                        @add-cart="onAddCartClicked"
	                >
	                    <!--<template
	                            slot="sku-header-price"
	                            slot-scope="props"
	                    >
	                        <div class="van-sku__goods-price">
	                            <span class="van-sku__price-symbol">¥</span><span class="van-sku__price-num">{{ props.price }}</span>
	                        </div>
	                    </template>-->
	                </van-sku>
	            </div>
	        </demo-block>
        </div>
        <script>
        	var app = new Vue({
			    el: "#app",
			    data: {
			    	 skushow: false,//规格选择弹层;
			    	 cartPartm:{
			            item_id:'',
			            sku_id:"",
			            total: 0,
			            is_fast:0,
			        },
			    	//虚拟 商品规格;
			        skuData: {
			            // 商品 id
			           // goodsId: '946755',
			            initialSku:'946755',
			            goods_id: '2257',
			            goods_info: {
			                id: '2257', //   id
			                price: 200,
			                title: 'xxxefdfdf名称名称....', //  名称
			                imgUrl: 'https://img.yzcdn.cn/2.jpg' // 规格类目图片,只有第一个规格类目可以定义图片
			            },
			            quota:300,
			            // 选择的商品数量
			            selectedNum: 1,
			            // 默认选择的 sku 组合
			            selectedSkuComb: {
			                id: '2257',
			                price: 100,
			                s1: '30349',
			                s2: '1193',
			                s3: '0',
			                stock_num: 111
			            },
			            sku: {
			                // 所有sku规格类目与其值的从属关系,比如商品有颜色和尺码两大类规格,颜色下面又有红色和蓝色两个规格值。
			                // 可以理解为一个商品可以有多个规格类目,一个规格类目下可以有多个规格值。
			                tree: [
			                    {
			                        k: '颜色', // skuKeyName:规格类目名称
			                        v: [
			                            {
			                                id: '30349', // skuValueId:规格值 id
			                                name: '红色', // skuValueName:规格值名称
			                                imgUrl: 'https://img.yzcdn.cn/2.jpg' // 规格类目图片,只有第一个规格类目可以定义图片
			                            },
			                            {
			                                id: '121500',
			                                name: '蓝色',
			                                imgUrl: 'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg'
			                            },
			                            {
			                                id: '1215', // skuValueId:规格值 id
			                                name: '白色', // skuValueName:规格值名称
			                                imgUrl: 'http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg' // 规格类目图片,只有第一个规格类目可以定义图片
			                            },
			                        ],
			                        k_s:'s1' // skuKeyStr:sku 组合列表(下方 list)中当前类目对应的 key 值,value 值会是从属于当前类目的一个规格值 id
			                    },
			                    {
			                        k: '尺寸', // skuKeyName:规格类目名称
			                        v: [
			                            {
			                                id: '1193', // skuValueId:规格值 id
			                                name: '100*100', // skuValueName:规格值名称
			                                imgUrl: 'http://pic.58pic.com/58pic/14/03/02/58V58PICTFk_1024.jpg' // 规格类目图片,只有第一个规格类目可以定义图片
			                            },
			                            {
			                                id: '119301', // skuValueId:规格值 id
			                                name: '100*200', // skuValueName:规格值名称
			                                imgUrl: 'https://img.yzcdn.cn/2.jpg' // 规格类目图片,只有第一个规格类目可以定义图片
			                            },
			                            {
			                                id: '119302',
			                                name: '200*200',
			                                imgUrl: 'https://img.yzcdn.cn/2.jpg'
			                            },
			                            {
			                                id: '119303', // skuValueId:规格值 id
			                                name: '300*300', // skuValueName:规格值名称
			                                imgUrl: 'https://img.yzcdn.cn/1.jpg' // 规格类目图片,只有第一个规格类目可以定义图片
			                            },
			                        ],
			                        k_s: 's2',
			                    }
			                ],
			                // 所有 sku 的组合列表,比如红色、M 码为一个 sku 组合,红色、S 码为另一个组合
			                list: [
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price: 100, // 价格(单位分)
			                        s1: '121500', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 110 // 当前 sku 组合对应的库存
			                    },
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price: 567, // 价格(单位分)
			                        s1: '121500', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '119301', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 110 // 当前 sku 组合对应的库存
			                    },
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price: 345, // 价格(单位分)
			                        s1: '121500', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '119302', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 110 // 当前 sku 组合对应的库存
			                    },
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price: 345, // 价格(单位分)
			                        s1: '121500', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '119303', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 110 // 当前 sku 组合对应的库存
			                    },
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price: 238, // 价格(单位分)
			                        s1: '30349', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 110 // 当前 sku 组合对应的库存
			                    },
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price: 250, // 价格(单位分)
			                        s1: '30349', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '119303', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 150 // 当前 sku 组合对应的库存
			                    },
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price: '300', // 价格(单位分)
			                        s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 110 // 当前 sku 组合对应的库存
			                    },
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price: '200', // 价格(单位分)
			                        s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '119303', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 110 // 当前 sku 组合对应的库存
			                    },
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price: 200, // 价格(单位分)
			                        s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '119302', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 110 // 当前 sku 组合对应的库存
			                    },
			                    {
			                        id: "2257", // skuId,下单时后端需要
			                        price:300, // 价格(单位分)
			                        s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
			                        s2: '119301', // 规格类目 k_s 为 s2 的对应规格值 id
			                        s3: '0', // 最多包含3个规格值,为0表示不存在该规格
			                        stock_num: 130 // 当前 sku 组合对应的库存
			                    },
			                ],
			                price: '100', // 默认价格(单位元)
			                stock_num: 227, // 商品总库存
			                collection_id: 2261, // 无规格商品 skuId 取 collection_id,否则取所选 sku 组合对应的 id
			                none_sku: false, // 是否无规格商品
			                hide_stock: true // 是否隐藏剩余库存
			            }
			        }
			    },
			    methods:{ 
			    	 //立即购买;
			        onBuyClicked: function (items_id,sku_id,total,isfast) {
			            var that = this;
			            that.aboutAddClicked(items_id,sku_id,total,isfast);
			        },
			        //加入购物车;
			        onAddCartClicked: function (items_id,sku_id,total,isfast) {
			            var that = this;
			            that.aboutAddClicked(items_id,sku_id,total,isfast);
			        },
			        //购物请求封装
			        aboutAddClicked: function (items_id,sku_id,total,isfast) {
			            var that =this;
			            that.cartPartm.item_id = items_id;
			            that.cartPartm.sku_id = sku_id;
			            that.cartPartm.total = total;
			            that.cartPartm.is_fast = isfast;
			            console.log(that.cartPartm);
			        },
			    } 
			})
        </script>
	</body>
</html>

效果展示:

效果图片

2. 以上内容仅是本页面虚拟的产品和规格, 实际项目中可改为对应的接口请求过来的数据内容; 

3. 更多详情参看vant,vue 的在线说明文档;

Logo

前往低代码交流专区

更多推荐