vue实现一个电商sku商品多规格库存价格选择代码
代码语言：html
所属分类：电商
代码描述：vue实现一个电商sku商品多规格库存价格选择代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>vue-sku</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="" type="image/x-icon" />
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.app {
max-width: 800px;
margin: 0 auto;
}
[v-cloak] {
opacity: 0 !important;
}
pre {
max-height: 400px;
overflow: auto;
}
.row{
display: flex;
}
.col{
flex:1;
padding:10px;
}
</style>
</head>
<body>
<div id="app" class="app" v-cloak>
<Sku></Sku>
<br />
<hr />
<br />
<div class="row">
<div class="col">
<h5>属性</h5>
<pre><code>{{ attribute }}</code></pre>
</div>
<div class="col">
<h5>Sku</h5>
<pre><code>{{ sku }}</code></pre>
</div>
</div>
</div>
<script>
Vue.component('Sku', {
template: `<div class="sku">
<h3>iphone 13</h3>
<div style="margin-bottom:10px;" v-for="(attr, index) in process_attribute" :key="index">
<h4>{{ attr.name }}</h4>
<div class="sku-group">
<button
v-for="(item, index2) in attr.item"
:key="index2"
style="margin: 0 5px 5px 0;"
:style="{
color:item.actived ? 'red' : '#666',
opacity:item.disabled?0.7:1
}"
:disabled="item.disabled"
@click="skuClick(index, index2)">{{ item.name }}</button>
</div>
</div>
<div style="margin-top: 20px;">
库存：
<span>{{ stock }}</span>
</div>
<div style="margin-bottom:20px;">
价格：
<span v-if="minprice == maxprice">{{ minprice }}</span>
<span v-else>{{ minprice }} - {{ maxprice }}</span>
</div>
<button type="button" @click="submit">购买</button>
</div>`,
props: {},
data() {
return {
separator: ';',
attribute: [{
"name": "颜色",
"item": [
"星光色",
"午夜色",
"粉色",
"蓝色",
"红色"
]
},
{
"name": "版本",
"item": [
"128GB",
"256GB",
"512GB"
]
},
{
"name": "运营商",
"item": [
"全网通",
"移动版",
"联通版",
"电信版"
]
}
],
sku: [{
"sku": "星光色;128GB;全网通",
"price": 5699,
"stock": 0
},
{
"sku": "星光色;128GB;移动版",
"price": 5699,
"stock": 0
},
{
"sku": "星光色;128GB;联通版",
"price": 5699,
"stock": 0
},
{
"sku": "星光色;128GB;电信版",
"price": 5699,
"stock": 0
},
{
"sku": "星光色;256GB;全网通",
"price": 7288,
"stock": 0
},
{
"sku": "星光色;256GB;移动版",
"price": 7288,
"stock": 0
},
{
"sku": "星光色;256GB;联通版",
"price": 7288,
"stock": 0
},
{
"sku": "星光色;256GB;电信版",
"price": 7288,
"stock": 0
},
{
"sku": "星光色;512GB;全网通",
"price": 9688,
"stock": 0
},
{
"sku": "星光色;512GB;移动版",
"price": 9688,
"stock": 0
},
{
"sku": "星光色;512GB;联通版",
"price": 9688,
"stock": 0
},
{
"sku": "星光色;512GB;电信版",
"price": 9688,
"stock": 0
},
{
"sku": "午夜色;128GB;全网通",
"price": 5699,
"stock": 10
},
{
"sku": "午夜色;128GB;移动版",
"price": 5699,
"stock": 10
},
{
"sku": "午夜色;128GB;联通版",
"price": 5699,
"stock": 10
},
{
"sku": "午夜色;128GB;电信版",
"price": 5699,
"stock": 0
},
{
"sku": "午夜色;256GB;全网通",
"price": 7288,
"stock": 10
},
{
"sku": "午夜色;256GB;移动版",
"price": 7288,
"stock": 10
},
{
"sku": "午夜色;256GB;联通版",
"price": 7288,
"stock": 10
},
{
"sku": "午夜色;256GB;电信版",
"price": 7288,
"stock": 0
},
{
"sku": "午夜色;512GB;全网通",
"price": 9688,
"stock": 10
},
{
"sku": "午夜色;512GB;移动版",
"price": 9688,
"stock": 10
},
{
"sku": "午夜色;512GB;联通版",
"price": 9688,
"stock": 10
},
{
"sku": "午夜色;512GB;电信版",
"price": 9688,
"stock": 0
},
{
"sku": "粉色;128GB;全网通",
"price": 5699,
"stock": 10
},
{
"sku": "粉色;128GB;移动版",
"price": 5699,
"stock": 10
},
{
"sku": "粉色;128GB;联通版",
"price": 5699,
"stock": 10
},
{
"sku": "粉色;128GB;电信版",
"price": 5699,
"stock": 0
},
{
"sku": "粉色;256GB;全网通",
"price": 7288,
"stock": 10
},
{
"sku": "粉色;256GB;移动版",
"price": 7288,
"stock": 10
},
{
"sku": "粉色;256GB;联通版",
"price": 7288,
"stock": 10
},
{
"sku": "粉色;256GB;电信版",
"price": 7288,
"stock": 0
},
{
"sku": "粉色;512GB;全网通",
"price": 9688,
"stock": 10
},
{
"sku": "粉色;512GB;移动版",
"price": 9688,
"stock": 10
},
{
"sku": "粉色;512GB;联通版",
"price": 9688,
"stock": 10
},
{
"sku": "粉色;512GB;电信版",
"price": 9688,
"stock": 0
},
{
"sku": "蓝色;128GB;全网通",
"price": 5699,
"stock": 10
},
{
"sku": "蓝色;128GB;移动版",
"price": 5699,
"stock": 10
},
{
"sku": "蓝色;128GB;联通版",
"price": 5699,
"stock": 10
},
{
"sku": "蓝色;128GB;电信版",
"price": 5699,
"stock": 0
},
{
"sku": "蓝色;256GB;全网通",
"price": 7288,
"stock": 10
},
{
"sku": "蓝色;256GB;移动版",
"price": 7288,
"stock": 10
},
{
"sku": "蓝色;256GB;联通版",
"price": 7288,
"stock": 10
},
{
"sku": "蓝色;256GB;电信版",
"price": 7288,
"stock": 0
},
{
"sku": "蓝色;512GB;全网通",
"price": 9688,
"stock": 10
},
{
"sku": "蓝色;512GB;移动版",
"price": 9688,
"stock": 10
},
{
"sku": "蓝色;512GB;联通版",
"price": 9688,
"stock": 10
},
{
"sku": "蓝色;512GB;电信版",
"price": 9688,
"stock": 0
},
{
"sku": "红色;128GB;全网通",
"price": 5699,
"stock": 10
},
{
"sku": "红色;128GB;移动版",
"price": 5699,
"stock": 10
},
{
"sku": "红色;128GB;联通版",
"price": 5699,
"stock": 10
},
{
"sku": "红色;128GB;电信版",
"price": 5699,
"stock": 0
},
{
"sku": "红色;256GB;全网通",
"price": 7288,
"stock": 10
},
{
"sku": "红色;256GB;移动版",
"price": 7288,
"stock": 10
},
{
"sku": "红色;256GB;联通版",
"price": 7288,
"stock": 10
},
{
"sku": "红色;256GB;电信版",
"price": 7288,
"stock": 0
},
{
"sku": "红色;512GB;全网通",
"price": 9688,
"stock": 10
},
{
"sku": "红色;512GB;移动版",
"price": 9688,
"stock": 10
},
{
"sku": "红色;512GB;联通版",
"price": 9688,
"stock": 10
},
{
"sku": "红色;512GB;电信版",
"price": 9688,
"stock": 0
}
],
process_attribute: [],
process_sku: [],
// 当前选中 sku 的库存及价格区间
stock: '',
minprice: '',
maxprice: ''
}
},
mounted() {
this.init()
},
methods: {
initSku(attribute = [], sku = []) {
sku.forEach(element => {
element.price = isNaN(Number(element.price)) ? 0 : Number(element.price);
element.stock = isNaN(Number(element.stock)) ? 0 : Number(element.stock);
});
this.attribute = attribute;
this.sku = sku;
this.process_attribute = [];
this.process_sku = [];
this.stock = '';
this.minprice = '';
this.maxprice = '';
this.init();
},
init() {
// 对 attribute 数据进行加工，并存入 process_attribute 中
this.attribute.map(attr => {
let temp = {
name: attr.name
}
temp.item = attr.item.map(item => {
return {
name: item,
actived: false,
disabled: this.itemquantity(item) <= 0
}
})
this.process_attribute.push(temp)
})
// 对 sku 数据进行加工，并存入 process_sku 中
this.sku.map(v => {
var combArr = this.arrayCombine(v.sku.split(this.separator))
for (var j = 0; j < combArr.length; j++) {
var key = combArr[j].join(this.separator)
if (this.process_sku[key]) {
// 库存累加，价格添加进数组
this.process_sku[key].stock += v.stock
this.process_sku[key].prices.push(v.price)
} else {
this.process_sku[key] = {
stock: v.stock,
prices: [v.price]
}
}
}
})
// 更新数据视图
this.process_sku = Object.assign({}, this.process_sku)
this.skuCheck()
console.log('process_attribute', this.process_attribute);
console.log('process_sku', this.process_sku);
},
//查询属性数量
itemquantity(item) {
let quantity = 0;
this.sku.forEach(element => {
var skuArr = element.sku.split(this.separator);
if (skuArr.indexOf(item) != -1) {
quantity += element.stock;
}
});
return quantity
},
arrayCombine(targetArr) {
var resultArr = []
for (var n = 0; n <= targetArr.length; n++) {
var flagArr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0