饭侠mall.vue 首页 模块化 flexBox 布局

<template>
    <div class="mallBox">
        <div class="mask" v-show="showShopcart" @click="toggleShopcart"></div>
        <div class="maskForCode" v-show="showMealCode" @click="closeMealCode"></div>
        <!-- 主页面模块-->
//底部不再需要绝对定位 防止出现闪屏

        <flexbox orient="vertical" :gutter="0">
            <flexbox-item>
                <div class="flex-demo">
                    <scroller lock-x height="-120px" >
                        <div class="scrollBox">
                            <div class="swiperBox">
                                <swiper :options="swiperHeader">
                                    <swiper-slide v-for="item in carouselList ">
                                        <div class="swiperBox_img">
                                            <img :src="item.url" alt="">
                                        </div>
                                    </swiper-slide>
                                    <div class="swiper-pagination" slot="pagination"></div>
                                </swiper>
                            </div>
                            <div class="userBox" @click="personal">
                                <icon name="user" scale="3"></icon>
                            </div>
                            <div class="positionBox" @click="selectStore">
                                <span class="positionBox_icon"><icon name="position" scale="2"></icon></span>
                                <span class="positionBox_store">{{storeName.name}}</span>
                            </div>
                            <div class="foodBox">
                                <div v-for="item in foodList">
                                    <divider>{{item.name}}</divider>
                                    <swiper :options="swiperOption">
                                        <swiper-slide v-for="i in item.data ">
                                            <div  class="swiper-box">
                                                <div class="swiper-box_img" @click="showDetail(i)">
                                                    <img :src="i.url[0]" alt="">
                                                </div>
                                                <div class="food_height" @click="showDetail(i)">
                                                    <span>{{i.name}}</span>
                                                </div>
                                                <div>
                                                    <span class="food-font_color">￥</span>
                                                    <span class="food-font food-font_color">{{i.price}}</span>
                                                    <span class="food_unit">/份</span>
                                                    <span class="shopCart_add" @click="cartAdd(i)">+</span>
                                                </div>
                                                <div class="soldOut" v-show="i.count==0">
                                                    <img src="../../images/u229.png" alt="">
                                                    <span class="countEmpty">售罄</span>
                                                </div>
                                            </div>
                                        </swiper-slide>
                                    </swiper>
                                </div>
                            </div>
                        </div>
                    </scroller>
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="flex-demo menu-bottom" >
                    <flexbox :gutter="0">
                        <flexbox-item :span="9">
                            <div class="flex-demo menu-box"  @click="toggleShopcart">
                                <span><icon name="cart" :scale="3"></icon></span>
                                <badge :text="shopCart.num" ></badge>
                                <span class="menu-box_money">￥{{shopCart.totalMoney}}</span>
                            </div>
                        </flexbox-item>
                        <flexbox-item>
                            <div class="flex-demo goPay" @click="goToPay">
                                    <span>去结算</span>
                            </div>
                        </flexbox-item>
                    </flexbox>
                    <div class="date-box">
                        <checker   v-model="mallDate"  radio-required default-item-class="demo1-item" selected-item-class="demo1-item-selected">
                            <checker-item v-for="item in dateList" :value="item.key" @on-item-click="changeDate">
                                <div>{{item.label}}</div>
                                <div>{{item.date}}</div>
                            </checker-item>
                        </checker>
                    </div>
                </div>
            </flexbox-item>
        </flexbox>
        <!--取餐图片模块-->
        <div class="takeMealImg" @click="getMealCode">
            <div class="takeMealImg_img">
                <img src="../../images/u617.png" alt="">
            </div>
            <div class="takeMealImg_bgImg">
                <img src="../../images/u618.png" alt="">
                <span>取餐啦</span>
            </div>
        </div>
        <!--取餐码模块-->
        <div class="takeMealCode" v-show="showMealCode">
            <span class="cancelCode" @click="closeMealCode"><icon name="cancel" :scale="4"></icon></span>
            <div class="takeMealCode_header">
                <span>目前可取</span>
            </div>
            <div class="takeMealCode_scoll">
                <scroller lock-x height="300px">
                    <div class="scollCodeBox">
                        <div class="detailCodeBox" v-for="item in codeList">
                            <flexbox>
                                <flexbox-item :span="5" >
                                    <div class="codeName">
                                        {{item.codeName}}
                                    </div>
                                </flexbox-item>
                                <flexbox-item :span="7" >
                                    <div class="codeName codeColor">
                                        <div>
                                            <span>取餐码:</span>
                                            <span class="codeColor_font">{{item.codeNum}}</span>
                                        </div>
                                        <div>
                                            <span>机柜号:</span>
                                            <span class="codeColor_font">{{item.cabinetNum}}</span>
                                        </div>
                                    </div>
                                </flexbox-item>
                            </flexbox>
                        </div>
                    </div>
                </scroller>
            </div>
            <div class="takeMealCode_footer" @click="refreshCode">
                <span>{{refreshTime}}秒</span>
            </div>
        </div>


        <!--购物车详情模块 -->
            <shopcart  v-show="showShopcart" >
                <template v-for="list of shopCart.items">
                    <shopcart-item :good=item v-for="item of list"></shopcart-item>
                </template>
            </shopcart>
//shopcart.vue  注意写入<slot></slot>
　　　　

        <!--商品详情页模块-->
        <div v-show="showDetailFood">
            <mall-detail ></mall-detail>
        </div>

    </div>
</template>

<script>
    import { mapGetters } from ‘vuex‘
    import {Shopcart,ShopcartItem} from "../shopcart"
    import MallDetail from "../malldetail/malldetail.vue"
    import {Divider,Scroller,Checker, CheckerItem,Flexbox, FlexboxItem,Badge  } from ‘vux‘
    import { swiper, swiperSlide } from ‘vue-awesome-swiper‘
    export default {
        data() {
            return {
                storeName:{},
                codeList:[
                    {"codeName":‘黄焖鸡米饭1‘,"codeNum":‘112365‘,"cabinetNum":"1235"},
                    {"codeName":‘黄焖鸡米饭2‘,"codeNum":‘212365‘,"cabinetNum":"2235"},
                    {"codeName":‘黄焖鸡米饭3‘,"codeNum":‘312365‘,"cabinetNum":"3235"},
                    {"codeName":‘黄焖鸡米饭4‘,"codeNum":‘412365‘,"cabinetNum":"4235"},
                ],
                refreshTime:60,
                showMealCode:false,
                dateList:[],
                mallDate:‘‘,
                carouselList:"",
                foodList:[],
                swiperOption: {
                    slidesPerView:2.2,
                    spaceBetween: 0,
                },
                swiperHeader: {
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: ‘.swiper-pagination‘,
                        clickable: true
                    },
                },
            }
        },
        computed:{
            ...mapGetters([
                ‘shopCart‘,
                "showShopcart",
                "showDetailFood",
                "cartStyle"
            ]),
        },
        created(){
            this.getImg()
            this.getProduct()
            this.getStore()
            this.getStorage()
        },
        methods: {
            getStorage(){
                let cartStorage = JSON.parse(window.sessionStorage.getItem(‘shopCart‘))
                    if(cartStorage){
                        this.$store.commit("saveShopCart",cartStorage)
                    }
                },
            getStore(){
                this.$http.get(‘/shop/api/get-mall-device-data‘).then((response) => {
                    let res = response.data;
                    if (res.status == 1) {
                        this.storeName=res.data[0]
                        this.$store.dispatch("storageStore",res.data[0])
                    }
                    else{
                        this.$vux.toast.show({
                            text: res.message,
                            type: ‘cancel‘
                        })
                    }
                }).catch((error)=>{
                    this.$vux.toast.show({
                        text: "网络异常",
                        type:‘cancel‘
                    })
                })
            },
            getProduct(){
                this.$http.get(‘/shop/api/get-mall-data‘,{
                    params: {
                        date:this.mallDate,
                        type:‘new‘,
                    }
                }).then((response) => {
                    let res = response.data;
                    if (res.status == 1) {
                        this.mallDate=res.data.oldDate
                        this.foodList=res.data.productArr
                        this.dateList=res.data.date
                    }
                    else{
                        this.$vux.toast.show({
                            text: res.message,
                            type: ‘cancel‘
                        })
                    }
                }).catch((error)=>{
                    this.$vux.toast.show({
                        text: "网络异常",
                        type:‘cancel‘
                    })
                })
            },
            getImg(){
                this.$http.get(‘/shop/api/get-img-arr‘).then((response) => {
                    let res = response.data;
                    if (res.status == 1) {
                        this.carouselList=res.data
                    }
                    else{
                        this.$vux.toast.show({
                            text: res.message,
                            type: ‘cancel‘
                        })
                    }
                }).catch((error)=>{
                    this.$vux.toast.show({
                        text: "网络异常",
                        type:‘cancel‘
                    })
                })
            },
            selectStore(){

            },
            toggleShopcart(){
                if(this.shopCart.num==0){
                    this.showShopcart=false
                    return
                }
                this.$store.dispatch("showCart")
                if(this.cartStyle=="2"){
                    document.getElementById("all-order").setAttribute(‘style‘,‘bottom:60px‘)
                }else{
                   document.getElementById("all-order").setAttribute(‘style‘,‘bottom:120px‘)
               }

            },
            closeMealCode(){
                this.showMealCode=false
            },
            times(){
                var IntervalName= setInterval(() => {
                    this.time--;
                    if(this.time<1){
                        this.refreshTime=60
                    }
                }, 1000)
            },
            getMealCode(){
                this.showMealCode=true
                this.refreshTime=60
            },
            refreshCode(){

            },
            showDetail(item){
                this.$store.commit(‘controlCartStyle‘,"2")
                this.$store.dispatch("watchDetail", item)
                this.$store.dispatch("showDetailFood")
            },
            cartMinus(item){
                this.$store.dispatch("minusCart", item)
            },
            cartAdd(item,module){
                if(module==2&&item.count==0){
                    return
                }
                if(item.count==0){
                    this.$vux.alert.show({
                        content: ‘商品已售罄‘,
                    })
                    return
                }
                this.$store.dispatch("addCart", item)
                this.$vux.toast.show({
                    text: "商品已加进购物车",
                    time:"1000",
                    type:‘text‘
                })
            },
            goToPay(){
                let $this=this
                if(this.shopCart.num==0){
                    this.$vux.toast.show({
                        text: "请选择商品",
                        type:‘warn‘
                    })
                    return
                }
                this.$router.push({path:‘/account‘})
            },
            personal(){
                this.$router.push({ path: ‘personal‘ });
            },
            changeDate(value){
                if(value==this.mallDate){
                    return
                }
                this.mallDate=value
                this.getProduct()
            }
        },
        components: {
            MallDetail,
            Shopcart,ShopcartItem,
            Divider,
            swiper,
            swiperSlide,
            Scroller,
            Checker, CheckerItem
            ,Flexbox, FlexboxItem,Badge
        }
    }
</script>
<style lang="less">
    /* 公共样式*/
        .demo1-item {
            width: 14.28%;
            box-sizing: border-box;
            text-align: center;
            div{
                height: 30px;
                line-height: 30px;
                font-size: 16px;
            }
        }
        .demo1-item-selected {
            background: orangered;
            color:white;
        }
        .menu-box{
            height:60px;
            padding:10px 12px;
            font-size: 18px;
            line-height: 60px;
            background: transparent;
            position: relative;
            box-sizing: border-box;
            text-align: left;
            &_money{
                position: absolute;
                top:-8px;
                left:60px;
                color: red;
                font-size: 18px;
            }
            .vux-badge{
                position: absolute;
                top:14px;
                left:30px;
            }
        }
        .goPay{
            background:#0c6;
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            text-align: center;
            color: white;
        }
    .mallBox{
        position: relative;
        img{
            width: 100%;
            height: 100%;
            display: block;
        }

        .mask{
            height: 100%;
            width: 100%;
            position: absolute;
            bottom:120px;
            left:0;
            z-index:5;
            background: rgba(0,0,0,0.5);
        }
        .maskForCode{
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left:0;
            z-index:888;
            background: rgba(0,0,0,0.5);
        }
        .food_unit{
            color:#c0c0c0;
            position: relative;
            top:-1px;
        }
        .food-font_color{
            color:red;
        }
        .food-font{
            font-size: 20px;
        }
        .inner-box{
            .meal-detial{
                font-weight: 600;
            }
            .money{
                color: orangered;
            }

        }
        .food-box{
            border-bottom: 1px solid #cccccc;
        }

        .disables{
            color: #ccc;
            .rightButton{
                color:#ccc;
            }
            .leftButton{
                color:#ccc;
            }
        }
    }

    /*取餐 样式*/
    .takeMealImg{
        position: absolute;
        bottom:150px;
        right:25px;
        z-index: 3;
        &_img{
            width:70px;
        }
        &_bgImg{
            position: relative;
            width: 80px;
            height: 35px;
            top:-12px;
            right:5px;
            transform:rotate(7deg);
            span{
                position: absolute;
                color: white;
                top: 3px;
                left: 15px;
            }
        }
    }
    /*取餐码样式*/
    .takeMealCode{
        z-index:999;
        height:400px;
        width:90%;
        position: absolute;
        background: #fff0f0;
        margin-left:5%;
        top:50%;
        margin-top:-200px;
        .cancelCode{
            position: absolute;
            top: -50px;
            right:0;
        }
        &_header{
            font-size: 20px;
            padding: 8px;
            text-align: center;
            color: white;
            background: rgba(241, 99, 61, 1);
        }
        &_footer{
            background:rgba(215, 215, 215, 1);
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.349019607843137);
            padding: 10px;
            text-align: center;
            font-size: 20px;
            color:#fff;
        }
        .scollCodeBox{
            padding:10px;
            .detailCodeBox{
                padding:10px;
                height: 100px;
                margin-bottom: 10px;
                box-shadow:1px 2px 18px #ccc;
                .codeName{
                    padding:10px;
                    color:#999;
                    height: 80px;
                    overflow: hidden;
                }
                .codeColor{
                    background: #666666;
                    color:#fff;
                    div{
                        padding: 10px 0;
                        .codeColor_font{
                            font-size: 18px;
                            float:right;
                        }
                    }
                }
            }
        }
    }
    /*购物车样式--*/
    #all-order{
        max-height:350px;
        position: fixed;
        z-index: 6;
        bottom: 120px;
        left: 0;
        background: #ffffff;
        .menuDetailBox{
            .menu-header{
                font-size: 18px;
                position: relative;
                background: mediumseagreen;
                display: inline-block;
                width: 30%;
                height: 100%;
                text-align: center;
                &_top{
                    position: relative;
                    top:3px;
                }
            }
            .menu_address{
                padding:10px;
                box-sizing: border-box;
                border-bottom: 1px solid darkgray;
                .menu-font{
                    font-size: 20px;
                    color:gray;
                }
            }
        }
        .vux-flexbox #menu_empty{
            text-align: center;
            span{
                position: relative;
                top:4px;
            }
        }
    }

    /* 商品详情样式*/


    /*底部下单样式*/
    .mall_bottom{
        height: 84px;
        z-index: 7;
        .myMenu{
            background: transparent;

            .go-pay{
                background: transparent;
                width:30%;
                right:0;
                &_icon{
                    position: relative;
                    top: 2px;
                }
                &_img{
                    height:100%;
                    img{
                        width: 100%;
                        height:100%;
                    }
                }
            }
        }
        .box {
            background: white;
        }

    }

    /*主页面下单样式 &&商品详情样式*/
    .scrollBox{
        position: relative;
        .detail_box{
            height: 40px;
        }
        .swiper-pagination{
            text-align: left;
        }
        .foodBox{
            .swiper-slide{
                box-sizing: border-box;
                min-width: 145px;
                padding: 8px;
            }
            .vux-divider{
                margin: auto;
                font-size: 20px;
            }
            .vux-divider:after, .vux-divider:before{
                width: 43%;
            }
        }
        .swiperBox_img{
            height: 150px;
        }

        .userBox{
            display: inline;
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 2;
        }
        .positionBox{
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 2;
            background:rgba(222, 216, 216, 0.43);
            min-width: 85px;
            padding: 0 5px;
            border-radius:20px;
            &_icon{
                position: relative;
                top:3px;
            }
            &_store{
                position: relative;
                font-size:16px;
                color:white;
            }
        }
        .swiper-box{
            position: relative;
            padding: 10px;
            min-width: 117px;
            max-width: 150px;
            box-shadow:1px 2px 18px #ccc;
            &_img{
                min-width: 117px;
                max-width: 150px;
                height: 100px;
            }
            .food_height{
                height: 50px;
            }
            .soldOut{
                position: absolute;
                top:-2px;
                right:-9px;
                color: #fff;
                width: 60px;
                text-align: center;
                transform:rotate(-1deg);
                padding: 1px 10px;
                .countEmpty{
                    position: absolute;
                    top: 7px;
                    right: 11px;
                    transform: rotate(48deg);
                }
            }
            .shopCart_add{
                float: right;
                display: inline-block;
                width: 20px;
                height: 20px;
                font-size: 18px;
                border-radius:50%;
                border: 1px solid red;
                line-height: 18px;
                text-align: center;
                margin-top:8px;
                color: red;
            }

        }
    }

</style>