mall-vue 门店版

<template>
    <div class="mallBox">
        <div class="mask" v-show="showShopcart" @click="toggleShopcart"></div>
        <div class="store-mask" v-show="whetherSame"></div>
        <!-- 主页面模块-->
        <flexbox orient="vertical" :gutter="0">
            <flexbox-item>
                <div class="flex-demo">
                    <scroller lock-x height="-102px" >
                        <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">
                                <span class="user-icon">
                                     <icon name="user" scale="3"></icon>
                                </span>
                            </div>
                            <div class="positionBox" @click="selectStore">
                                <span class="positionBox_icon"><icon name="position" scale="2"></icon></span>
                                <span class="positionBox_store">{{storeName.title}}</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 food-font">/份</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"  class="border-top">
                        <flexbox-item :span="7">
                            <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="store-dialog"  v-if="whetherSame">
            <div class="store-dialog_header">
                <span>请选择订餐门店</span>
                <span class="store-close" @click="choseStore('1')">×</span>
            </div>
            <div v-for="item in usedList" class="store-dialog_store" @click="choseStore('2',item)">
                <span>{{item.title}}</span>
            </div>
            <div class="store-dialog_bgcolor">

            </div>
            <div class="store-dialog_header">
                <span>当前位置</span>
            </div>
            <div class="store-dialog_store" @click="choseStore('1')">
                {{localStore.title}}
            </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>
        <!--商品详情页模块-->
        <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 {
                localStore:{},
                usedList:[],
                whetherSame:false,
                storeLocation:"麦金地集团",
                dateList:[],
                mallDate:'',
                carouselList:"",
                foodList:[],
                swiperOption: {
                    slidesPerView:2.5,
                    spaceBetween: 0,
                },
                latitude:'',
                longitude:'',
                swiperHeader: {
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                },
            }
        },
        computed:{
            ...mapGetters([
                'shopCart',
                "showShopcart",
                "showDetailFood",
                "cartStyle",
                "storeName"
            ]),
        },
        beforeRouteEnter(to, from, next){
            next(vm => {
                if (to.path === '/goodDetail') {
                    vm.$store.dispatch('showDetailFood', true)
                } else {
                    vm.$store.dispatch('showDetailFood', false)
                }
            })
        },
        created(){
            this.wechatConfig()
            this.$wechat.ready(()=>{
                this.getLocation()
            })
            this.getImg()
            this.getProduct()
            this.getStorage()
        },
        methods: {
            wechatConfig() {
                let urls = location.href.split('#')[0]
                let postData={
                    url:urls,
                    mallId:_global.mallId
                }
                this.$http.post('/shop/api/js-sdk-config', postData).then((response) => {
                    if (response.status === 200 && response.data.status === 1) {
                        this.$wechat.config(JSON.parse(response.data.data))
                    } else {
                        this.$vux.toast.show({
                            text: '微信参数错误',
                            type: 'cancel'
                        })
                    }
                }).catch(() => {
                    this.$vux.toast.show({
                        text: "网络异常",
                        type: 'cancel'
                    })
                })
            },
            getLocation(){
                let $this= this
                this.$wechat.getLocation({
                    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                    success: function (res) {
                        $this.latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                        $this.longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                        console.log( $this.latitude)
                        console.log( $this.longitude)
                        $this.getStoreList()
                        $this.$store.commit("saveLocation",res)
                    }
                });
            },
            getStoreList(){
                this.$http.get('/shop/api/last-store',{
                    params: {
                        latitude:this.latitude,
                        longitude:this.longitude,
                        userId:_global.customerId,
                        mallId:_global.mallId,
                    }
                }).then((response) => {
                    let res = response.data;
                    if (res.status == 1) {
                        this.usedList=res.data.lastCheckStoreLog
                        this.localStore=res.data.minDistanceStore
                        let storeStorage = JSON.parse(window.sessionStorage.getItem('storeName'))
                        if(storeStorage){
                            this.$store.dispatch("storageStore",storeStorage)
                            return
                        }else{
                            if(res.data.isSame){
                                this.whetherSame=false
                                this.$store.dispatch("storageStore",res.data.minDistanceStore)
                            }else{
                                this.whetherSame=true
                                return
                            }
                        }
                    }
                    else{
                        this.$vux.toast.show({
                            text: res.message,
                            type: 'cancel'
                        })
                    }
                }).catch((error)=>{
                    this.$vux.toast.show({
                        text: "网络异常",
                        type:'cancel'
                    })
                })
            },
            choseStore(arg,last){
                if(arg=='1'){
                    this.whetherSame=false
                    this.$store.dispatch("storageStore",this.localStore)
                }else{
                    this.whetherSame=false
//                    this.storeName=last
                    this.$store.dispatch("storageStore",last)
                }
            },
            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.localStore=res.data[0]
                        let storeStorage = JSON.parse(window.sessionStorage.getItem('storeName'))
                        if(storeStorage){
                            return
                        }
                        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(){
                this.$router.push({path:"/store"})
            },
            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:50px')
                }else{
                   document.getElementById("all-order").setAttribute('style','bottom:100px')
               }

            },
            getMealCode(){
                this.showMealCode=true
                this.refreshTime=60
            },
            showDetail(item){
                this.$router.push({path: '/goodDetail'})
                this.$store.commit('controlCartStyle',"2")
                this.$store.dispatch("watchDetail", item)
                this.$store.dispatch("showDetailFood", true)
            },
            cartMinus(item){
                this.$store.dispatch("minusCart", item)
            },
            cartAdd(item,module){
                if(item.count==0){
                    this.$vux.toast.show({
                        text: "商品已售罄",
                        type:'cancel'
                    })
                    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;
            background: #434343;
            color: white;
            div{
                height: 25px;
                line-height: 25px;
                font-size: 14px;
            }
        }
        .demo1-item-selected {
            background: orangered;
            color:white;
        }
        .menu-box{
            height:50px;
            padding:10px 12px;
            font-size: 18px;
            line-height: 50px;
            background: transparent;
            position: relative;
            box-sizing: border-box;
            text-align: left;
            &_money{
                position: absolute;
                top:1px;
                left:71px;
                color: red;
                font-size: 20px;
            }
            .vux-badge{
                position: absolute;
                top:5px;
                left:30px;
            }
        }
        .goPay{
            background:#EE492B;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
            color: white;
        }
    .mallBox{
        position: relative;
        img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .store-mask{
            height: 100%;
            width: 100%;
            position: absolute;
            left:0;
            z-index:8;
            background: rgba(0,0,0,0.5);
        }
        .mask{
            height: 100%;
            width: 100%;
            position: absolute;
            bottom:120px;
            left:0;
            z-index:5;
            background: rgba(0,0,0,0.5);
        }
        .food_unit{
            color:#c0c0c0;
            position: relative;
            top:-1px;
        }
        .food-font_color{
            color:#EB3D3D;
        }
        .food-font{
            font-size: 12px;
        }
        .inner-box{
            .meal-detial{
                font-weight: 600;
            }
            .money{
                color: orangered;
            }

        }
        .food-box{
            border-bottom: 1px solid #cccccc;
        }
    }
/*门店弹框样式*/
    .store-dialog{
        position: absolute;
        border: 1px solid darkgray;
        background: white;
        z-index: 9;
        width:70%;
        left:15%;
        top:30%;
        &_header{
            border-bottom: 1px solid #ccc;
            font-weight: 700;
            font-size: 18px;
            height: 35px;
            line-height:35px;
            padding: 0 15px;
            .store-close{
                float: right;
                font-size: 38px;
            }
        }
        &_bgcolor{
            height: 30px;
            background:#bcbcbc;
        }
        &_store{
            border-bottom: 1px solid #ccc;
            padding: 5px 15px;
        }
    }

    /*购物车样式--*/
    #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;
            }
        }
    }

    /* 商品详情样式*/


    /*底部下单样式*/
    .border-top{
        border-top:2px solid #D7D7D7;
        box-shadow: 0 5px 5px #ccc;
    }
    .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;
        background: #f2f2f2;
        .detail_box{
            height: 40px;
        }
        .swiper-pagination-bullet-active{
            background:#EE492B;
        }
        .foodBox{
            .swiper-slide{
                box-sizing: border-box;
                min-width:90px;
                padding: 8px;
            }
            .vux-divider{
                margin: auto;
                font-size: 20px;
            }
            .vux-divider:after, .vux-divider:before{
                width: 43%;
            }
        }
        .swiperBox_img{
            height: 150px;
            overflow: hidden;
            img{
                width: 100%;
                height: auto;
            }
        }

        .userBox{
            display: inline;
            position: absolute;
            top: 20px;
            right: 20px;
            width: 27px;
            height: 27px;
            border-radius: 15px;
            background: black;
            opacity: 0.5;
            z-index: 2;
            .user-icon{
                position: relative;
            }
        }
        .positionBox{
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 2;
            background: black;
            opacity: 0.5;
            min-width: 120px;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            border-radius: 15px;
            &_icon{
                position: relative;
                top:3px;
            }
            &_store{
                position: relative;
                font-size:14px;
                color:white;
                opacity:0.9;
            }
        }
        .swiper-box{
            position: relative;
            padding: 10px;
            /*min- 90px;*/
            /*max- 130px;*/
            border-radius:7.5px;
            background: white;
            height: 130px;
            box-shadow:1px 2px 18px #ccc;
            &_img{
                min-width: 90px;
                /*max- 130px;*/
                height:80px;
            }
            .food_height{
                height: 30px;
                color: #333333;
                font-size: 12px;
            }
            .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: 17px;
                height: 17px;
                font-size: 18px;
                border-radius: 50%;
                border: 1px solid red;
                line-height: 15px;
                text-align: center;
                margin-top: 3px;
                color: red;
            }

        }
    }

</style>