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&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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