vue实现一个电商sku商品多规格库存价格选择代码-html代码-BFW代码库

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
                        },
                        {
                  .........完整代码请登录后点击上方下载按钮下载查看