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 的在线说明文档;
1168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
