首页 > 编程语言 >SKU规格-uniapp小程序

SKU规格-uniapp小程序

时间:2023-10-28 15:55:49浏览次数:31  
标签:SKU uniapp width color item 规格 forEach font display

<template>
    <view class="body">
        <view class="tablist" v-if="isShow">
            <view class="tab" v-for="(Aitem,Aindex) in tablist" :key="Aindex">
                <view class="tab-title">
                    <view class="ch">
                        <checkbox :checked="Aitem.aistrue" style="transform: scale(0.7)" @click="changea(Aindex)">
                        </checkbox>
                    </view>
                    <text>{{Aitem.name}}</text>
                </view>
                <view class="tab-body" v-for="(item,index) in Aitem.data" :key="index">
                    <view class="body-left">
                        <view class="ch">
                            <checkbox :checked="item.bistrue" style="transform: scale(0.7)"
                                @click="changeb(Aindex,index)"></checkbox>
                        </view>
                        <image :src="item.img" />
                    </view>
                    <view class="body-right">
                        <view class="right-title">
                            <text>{{item.title}}</text>
                            <text @click="remove(Aindex,index)">删除</text>
                        </view>
                        <view class="right-tab" @click="xuanze=1">
                            <text v-for="(ia,ib) in item.tab" :key="ib">{{ia}}</text>
                        </view>
                        <view class="right-price">
                            <text class="price">¥{{item.price}}元</text>
                            <view class="right-num">
                                <text @click="sub(Aindex,index)">-</text>
                                <text>{{item.num}}</text>
                                <text @click="add(Aindex,index)">+</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="tabsum">
                <view>
                    <text>合计</text>
                    <text class="jg">¥{{sum}}</text>
                </view>
                <text class="js" @click="goto">结算</text>
            </view>
        </view>

        <view class="none" v-if="!isShow">
            <view class="none-img">
                <image src="../../static/img.png" />
                <text>暂无商品加入购物车</text>
                <text>快去选购吧</text>
            </view>
            <view class="none-button">去逛逛</view>
        </view>
        <view class="xuanze-bg" v-if="xuanze">
            <view class="xuanze">
                <view class="xuanze-img">
                    <view class="img-left">
                        <image src="../../static/img.png" />
                        <text>¥20</text>
                    </view>
                    <text class="cls" @click="xuanze=0">×</text>
                </view>
                <view class="xuanze-body">
                    <view class="xuanze-tab" v-for="(item,index) in datalist" :key="index">
                        <text class="tx">{{item.k}}</text>
                        <view class="tab-list">
                            <text v-for="(ia,ib) in item.v" :key="ib" :class="[ia.disabled?'tb':ia.selected?'tc':'ta']"
                                @click="changetab(index,ib)">{{ia.name}}</text>
                        </view>
                    </view>
                </view>
                <view class="shuliang">
                    <text class="sl">数量</text>
                    <view class="right-num">
                        <text>-</text>
                        <text>2</text>
                        <text>+</text>
                    </view>
                </view>
                <view class="sl-btn">
                    <text class="btn" @click="xuanze=0">确定</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                aistrue: 0,
                bistrue: 0,
                sum: 0,
                isShow: 1,
                xuanze: 1,
                ia: 0,
                is: 0,
                flag: 0,
                a: 0,
                b: 0,
                c: '',
                arrB: [],
                chooselist: [],
                treelist: [],
                datalist: [],
                tablist: [{
                        name: 'A公司',
                        data: [{
                            title: 'A商品',
                            tab: ['默认:默认', '默认:默认'],
                            price: 219,
                            img: require('@/static/img.png')
                        }]
                    },
                    {
                        name: 'A公司',
                        data: [{
                                title: '测试商品1',
                                tab: ['尺寸:大', '性质:新装'],
                                price: 0.01,
                                img: require('@/static/img.png')
                            },
                            {
                                title: '测试商品2',
                                tab: ['颜色:蓝色'],
                                price: 1,
                                img: require('@/static/img.png')
                            }
                        ]
                    },
                    {
                        name: 'sku五行行规格测试',
                        data: [{
                            title: 'C商品',
                            tab: ['默认:默认'],
                            price: 20,
                            img: require('@/static/img.png')
                        }]
                    },
                ],
            }
        },
        onl oad() {
            this.tablist.forEach((item) => {
                item.aistrue = 0
                item.data.forEach((i) => {
                    i.bistrue = 0
                    i.num = 1
                })
                this.$forceUpdate()
            })
            this.pricesum()

            uni.request({
                url: '', //请求的地址,类型为String
                method: 'post', //get、post、delete
                success: res => {
                    //console.log(res,'----')
                    this.treelist = res.data.data.list
                    this.datalist = res.data.data.tree
                    let arrC = []
                    this.treelist.forEach((i) => {
                        if (i.stock_num != 0) {
                            arrC.push(i)
                        }
                    })
                    this.datalist.forEach((item) => {
                        item.v.forEach((i) => {
                            this.ia = 0
                            arrC.forEach((a) => {
                                //console.log(a.skuValue)
                                a.skuValue.forEach((b) => {
                                    if (b == i.id) {
                                        this.ia = 1
                                    }
                                })
                            })
                            if (!this.ia) {
                                i.disabled = true
                            }
                        })
                    })

                    this.$forceUpdate()
                }
            })
        },
        methods: {
            // 总
            goto() {
                uni.navigateTo({
                    url: '/pages/sku/sku'
                })
            },
            changetab(index, i) {
                if (this.datalist[index].v[i].disabled) {
                    return
                }
                this.datalist[index].v.forEach((i) => {
                    i.selected = false
                })
                this.datalist[index].v[i].selected = true
                this.chooselist = []
                this.datalist.forEach((item) => {
                    item.v.forEach((i) => {
                        if (i.selected) {
                            this.chooselist.push({
                                keyname: item.k_s,
                                key: i.id
                            })
                        }
                    })
                })
                this.arrB = []

                this.treelist.forEach((item) => {
                    this.flag = 0
                    this.chooselist.forEach((i) => {
                        let keyname = i.keyname
                        let key = i.key
                        if (item[keyname] != key) {
                            this.flag = 1
                        }
                    })
                    if (!this.flag && item.stock_num) {
                        this.arrB.push(item)
                    }
                })

                this.is = 0
                let arrC = []
                this.treelist.forEach((i) => {
                    if (i.stock_num != 0) {
                        arrC.push(i)
                    }
                })
                this.datalist.forEach((item) => {
                    item.v.forEach((i) => {
                        this.ia = 0
                        arrC.forEach((a) => {
                            a.skuValue.forEach((b) => {
                                if (b == i.id) {
                                    this.ia = 1
                                }
                            })
                        })
                        if (!this.ia) {
                            i.disabled = true
                        } else {
                            i.disabled = false
                        }
                    })
                })
                
                if (this.chooselist.length < 5) {

                    this.datalist.forEach((item) => {

                        let a = this.chooselist.findIndex(c => c.keyname == item.k_s)
                        if (a == -1) {
                            item.v.forEach((i) => {
                                this.ia = 0
                                this.arrB.forEach((a) => {
                                    a.skuValue.forEach((b) => {
                                        if (b == i.id) {
                                            this.ia = 1
                                        }
                                    })
                                })
                                if (!this.ia) {
                                    i.disabled = true
                                }
                            })
                        }

                    })
                } else {
                    this.treelist.forEach((item) => {
                    this.a = 0
                    this.b = 0
                        if (item.stock_num == 0) {
                            item.skuValue.forEach((ia) => {
                                this.arrB[0].skuValue.forEach((ib) => {
                                    if (ia == ib) {
                                        this.a = this.a + 1
                                    }
                                })
                            })
                            if (this.a == 4) {
                                this.c=item.skuValue.filter(x=> !this.arrB[0].skuValue.some(y=>y==x))
                                this.datalist.forEach((n)=>{
                                    n.v.forEach((m)=>{
                                        if(m.id==this.c){
                                            m.disabled=true
                                        }
                                    })
                                })
                            }
                        }
                    })
                }

                this.$forceUpdate()
            },
            pricesum() {
                this.sum = 0
                this.tablist.forEach((item) => {
                    item.data.forEach((i) => {
                        if (i.bistrue) {
                            this.sum = i.price * i.num + this.sum
                            console.log(this.sum, '---')
                        }
                    })
                })
                this.$forceUpdate()
            },
            changea(i) {
                this.tablist[i].aistrue = !this.tablist[i].aistrue
                this.tablist[i].data.forEach((item) => {
                    item.bistrue = this.tablist[i].aistrue
                })
                this.$forceUpdate()
                this.pricesum()
            },
            // tab
            changeb(index, i) {
                let flag = 1
                this.tablist[index].data[i].bistrue = !this.tablist[index].data[i].bistrue
                this.tablist[index].data.forEach((item) => {
                    if (!item.bistrue) {
                        flag = 0
                    }
                })
                if (flag) {
                    this.tablist[index].aistrue = 1
                } else {
                    this.tablist[index].aistrue = 0
                }
                this.$forceUpdate()
                this.pricesum()
            },
            sub(index, i) {
                if (this.tablist[index].data[i].num > 1) {
                    this.tablist[index].data[i].num--
                    this.pricesum()
                } else {
                    return
                }
            },
            add(index, i) {
                this.tablist[index].data[i].num++
                this.pricesum()
            },
            remove(index, i) {
                this.tablist[index].data.splice(i, 1)
                if (!this.tablist[index].data.length) {
                    this.tablist.splice(index, 1)
                }
                if (!this.tablist.length) {
                    this.isShow = 0
                }
                this.pricesum()
            }
        }
    }
</script>

<style lang="scss">
    .body {
        min-width: 100%;
        min-height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        background-color: #eee;
        font-size: 13px;

        checkbox .wx-checkbox-input {
            border-radius: 50% !important;
            color: #ffffff !important;
        }

        .wx-checkbox-input.wx-checkbox-input-checked {
            border: none !important;
        }

        .tablist {
            background-color: #fff;

            .tab {
                width: 100%;
                border-bottom: 1px #eee solid;
                padding: 10px 10px;
                box-sizing: border-box;

                .tab-title {
                    display: flex;
                    align-items: center;

                    .ch {
                        width: 40px;
                        height: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        checkbox .wx-checkbox-input.wx-checkbox-input-checked {
                            color: #fff;
                            background: red;
                        }
                    }
                }

                .tab-body {
                    margin-top: 10px;
                    display: flex;

                    .body-left {
                        display: flex;
                        align-items: center;

                        .ch {
                            width: 40px;
                            height: 20px;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            checkbox .wx-checkbox-input.wx-checkbox-input-checked {
                                color: #fff;
                                background: coral;
                            }
                        }

                        image {
                            width: 90px;
                            height: 90px;
                            border: 1px #eee solid;
                        }
                    }

                    .body-right {
                        margin-left: 10px;

                        .right-title {
                            width: 400rpx;
                            display: flex;
                            justify-content: space-between;

                            text:nth-child(1) {
                                display: block;
                                width: 300rpx;
                                font-weight: 600;
                            }

                            text:nth-child(2) {
                                background-color: #eee;
                                color: #999;
                                font-size: 10px;
                                width: 40px;
                                height: 20px;
                                line-height: 20px;
                                display: block;
                                text-align: center;
                            }
                        }

                        .right-tab {
                            width: 400rpx;

                            text {
                                color: #999;
                                font-size: 10px;
                                margin-right: 10px;
                            }
                        }

                        .right-price {
                            width: 400rpx;
                            display: flex;
                            justify-content: space-between;

                            .price {
                                color: coral;
                                font-weight: 600;
                                font-size: 14px;
                            }

                            .right-num {

                                text {
                                    background-color: #eee;
                                    color: #000;
                                    font-size: 10px;
                                    height: 20px;
                                    display: inline-block;
                                    line-height: 20px;
                                    margin: 1px;
                                    text-align: center;
                                    width: 20px;
                                }

                                text:nth-child(2) {
                                    width: 40px;
                                }
                            }
                        }
                    }
                }
            }

            .tabsum {
                box-sizing: border-box;
                position: fixed;
                z-index: 1;
                box-shadow: 5px 5px 10px #999;
                bottom: 0;
                width: 100%;
                height: 100rpx;
                background-color: #fff;
                display: flex;
                align-items: center;
                padding: 10px;
                justify-content: space-between;

                .jg {
                    color: coral;
                    font-weight: 600;
                    font-size: 16px;
                }

                .js {
                    color: #fff;
                    background-color: #000;
                    display: block;
                    width: 80px;
                    line-height: 30px;
                    border-radius: 20px;
                    text-align: center;

                }
            }
        }

        .none {
            display: flex;
            justify-content: center;

            .none-img {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                image {
                    width: 300rpx;
                    height: 300rpx;
                    margin-top: 300rpx;
                }

                text {
                    font-size: 14px;
                    line-height: 25px;
                }
            }

            .none-button {
                position: absolute;
                bottom: 20px;
                color: #fff;
                background-color: #000;
                display: block;
                width: 600rpx;
                line-height: 80rpx;
                border-radius: 20px;
                font-size: 16px;
                font-weight: 500;
                text-align: center;
            }
        }

        .xuanze-bg {
            background-color: rgba(0, 0, 0, 0.4);
            position: fixed;
            z-index: 2;
            bottom: 0;
            top: 0;
            left: 0;
            right: 0;

            .xuanze {
                border-radius: 10px 10px 0 0;
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 800rpx;
                background-color: #fff;
                padding: 40rpx;
                box-sizing: border-box;

                .xuanze-img {
                    display: flex;
                    justify-content: space-between;

                    .img-left {
                        image {
                            width: 140rpx;
                            height: 140rpx;
                            border: 1px #eee solid;
                            margin-right: 10px;
                        }

                        text {
                            font-size: 16px;
                            font-weight: 600;
                        }
                    }

                    .cls {
                        background-color: #eee;
                        display: block;
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        border-radius: 50%;
                        font-size: 15px;
                        font-weight: 600;
                        color: #888;
                    }
                }

                .xuanze-body {
                    margin-top: 10px;
                    height: 400rpx;
                    overflow: scroll;

                    .xuanze-tab {
                        border-top: 1px #eee solid;
                        border-bottom: 1px #eee solid;
                        box-sizing: border-box;

                        .tx {
                            color: #888;
                            display: block;
                            margin-top: 10px;
                        }

                        .tab-list {

                            padding: 20px 0;

                            .ta {
                                font-size: 10px;
                                border-radius: 4px;
                                border: 1px #000 solid;
                                padding: 4px;
                                display: inline-block;
                                margin: 4px;
                            }

                            .tb {
                                color: #fff;
                                font-size: 10px;
                                border-radius: 4px;
                                background-color: #999;
                                padding: 5px;
                                display: inline-block;
                                margin: 4px;
                            }

                            .tc {
                                font-size: 10px;
                                border-radius: 4px;
                                color: coral;
                                border: 1px coral solid;
                                padding: 4px;
                                display: inline-block;
                                margin: 4px;
                            }
                        }
                    }
                }

                .shuliang {
                    display: flex;
                    justify-content: space-between;

                    .sl {
                        display: block;
                        margin: 10px;

                    }

                    .right-num {
                        margin: 10px;

                        text {
                            background-color: #eee;
                            color: #000;
                            font-size: 10px;
                            height: 20px;
                            display: inline-block;
                            line-height: 20px;
                            margin: 1px;
                            text-align: center;
                            width: 20px;
                        }

                        text:nth-child(2) {
                            width: 40px;
                        }
                    }

                }

                .sl-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .btn {
                        color: #fff;
                        background-color: #000;
                        display: block;
                        width: 600rpx;
                        line-height: 80rpx;
                        border-radius: 20px;
                        font-size: 16px;
                        font-weight: 500;
                        text-align: center;
                    }
                }
            }
        }

    }
</style>

 

标签:SKU,uniapp,width,color,item,规格,forEach,font,display
From: https://www.cnblogs.com/Yeziiii/p/17794178.html

相关文章

  • Uniapp中弹窗
    Uniapp中弹窗直接上代码uni.showModal({title:'提示',content:'这是一个自定义按钮文字的模态对话框',confirmText:'自定义确定',//自定义确定按钮的文字cancelText:'自定义取消',//自定义取消按钮的文字success......
  • uniapp之微信小程序 支付
    一、注册微信支付商户号(由上级或法人注册)注册链接:https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal#none,如图注意:需要由主管及更上级领导进行注册,成为公司收款账户(企业注册需要材料:营业执照、对公银行账户信......
  • uniapp的easycom模式
    uniapp的easycom模式,无需import和注册components,即可在页面使用固定目录下的组件。这个目的是简化引用,其实还挺坑的。1.直接使用组件,全局又搜索不到引用,第一感觉让人摸不着头脑2.不引用组件,文件下放了多个组件,不知道到底使用了哪个3.进行组件优化,要删除或提取某些组件的时......
  • uniapp 预览pdf app端使用自定义导航时铺满全屏,需要留出导航栏
    1、安装pdf预览插件:hybrid插件(网上资料很多) 2、封装预览vue页面(重点在加粗部分,使用原生导航没有问题,但是使用自定义导航就把状态栏全部盖住了)<template><viewclass="page"><web-view:webview-styles="webviewStyles":src="src"></web-view>&l......
  • uniapp h5低版本Android显示空白
    前言:uniapp写的H5访问一直空白,打包app就可以正常显示,排查说是箭头函数低版本不支持,一顿操作npm,还是一样空白。最后:需要发行打包h5才能正常访问,服了也没告诉我啊。注:打包出来访问报错UncaughtSyntaxError:Unexpectedtoken'<',访问空白问题,在manifest.json文件中添加如图所示......
  • uniapp引入H5调试vConsole
    在真机环境下调试移动端H5的时候,无法像浏览器一样打开控制台进行console调试,那么我们可以在前端项目中引入vconsole,便于我们在真机环境下调试移动端H5项目vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。详细文档可查看:https://gitee.com/mirrors/vConsole/功......
  • uniapp项目引入uView-ui
    通过npm下载//如果您的根目录没有package.json文件的话,请先执行如下命令://npminit-ynpminstalluview-ui//更新//npmupdateuview-ui配置步骤1.引入uView主JS库在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在importVue之后。//main.j......
  • armsom:为何选择rk3588开发与Jetson Nano引脚兼容的嵌入式产品之规格对比
    下面是JetsonNano模块(以NVIDIAJetsonNano为代表)与armsom开发的AIM5(RockchipRK3588)的主要技术规格的对比,整理成表格:规格JetsonNano(NVIDIA)ArmSoM-AIM5CPU核数四核ARM®Cortex®-A57MPCore处理器四核ARM®Cortex®-A76+四核ARM®Cortex®-A55GPU核数1......
  • armsom:为何选择rk3588开发与Jetson Nano引脚兼容的嵌入式产品之规格对比
    下面是JetsonNano模块(以NVIDIAJetsonNano为代表)与armsom开发的AIM5(RockchipRK3588)的主要技术规格的对比:规格JetsonNano(NVIDIA)ArmSoM-AIM5CPU核数四核ARM®Cortex®-A57MPCore处理器四核ARM®Cortex®-A76+四核ARM®Cortex®-A55GPU核数128核Maxwell架......
  • Niushop中uniapp的访问接口
    Niushop中uniapp的访问接口直接上代码 this.$api.sendRequest({ url:'/pintuan/api/order/isbuy', success:res=>{ console.log(res) if(res.code==1){ //跳转VIP } }, fail(){ //联网失败的回调 } });......