商品详情页面

<template lang="html">
<div id="productDetailBox">
<flexbox orient="vertical" :gutter="0">
            <flexbox-item>
                <div class="flex-demo">
                   <scroller lock-x height="-60px" ref="scroller" >
                        <div class="scrollBox">
                            <div class="swiperBox">
                                <swiper :options="swiperHeader">
                                    <swiper-slide v-for="item in detailProList.url ">
                                        <div class="swiperBox_img">
                                            <img :src="item" alt="">
                                        </div>
                                    </swiper-slide>
                                    <div class="swiper-pagination" slot="pagination"></div>
                                </swiper>
                            </div>
                            <div class="rebackBox" @click="closeDetail">
                                <icon name="reback" scale="3"></icon>
                            </div>

                            <div class="inner-box food-box" >
                                <flexbox>
                                    <flexbox-item :span="8" >
                                        <div class="img_box">
                                            <div class="meal-detial">
                                                <span>{{detailProList.date}}</span>
                                                <span class="separation">|</span>
                                                <span>{{detailProList.sellTimeType}}</span>
                                            </div>
                                            <div class="foodNameBox">
                                                <span class="food_color">{{detailProList.name}}</span>
                                            </div>
                                            <div>
                                                <span class="food-font_color">￥</span>
                                                <span class="food-font food-font_color">{{detailProList.price}}</span>
                                                <span class="food_unit">/份</span>
                                            </div>
                                        </div>
                                    </flexbox-item>
                                    <flexbox-item :span="4" class="pay-number" style="margin-left:0">
                                        <div>
                                            <div class="mealNumber" :class="{disables:detailProList.count==0}">
                                                <span @click="cartMinus(detailProList)" class="changeButton leftButton">-</span>
                                                <span class="changeNumber">{{detailProList.num}}</span>
                                                <span @click="cartAdd(detailProList,2)" class="changeButton rightButton">+</span>
                                            </div>
                                        </div>
                                    </flexbox-item>
                                </flexbox>
                            </div>
                            <div class="send_product">
                                <span><icon name="send" scale="3"></icon></span>
                                <input type="checkbox" id="meals" disabled value="1" v-model="self_mention">
                                <label for="meals">自提取餐</label>
                                <input type="checkbox" id="delivery" disabled value="1" v-model="delivery">
                                <label for="delivery">送货上门</label>
                            </div>
                            <div class="graphic">
                                <divider>图文详情</divider>
                            </div>
                            <div id="detail" class="detailImg_box" v-html="detailProList.description_detail">

                            </div>
                        </div>
                    </scroller>
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="flex-demo" >
                    <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>
            </flexbox-item>
        </flexbox>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import {Flexbox, FlexboxItem,Scroller,Divider,Badge } from 'vux'
export default {
    components:{
        Flexbox, FlexboxItem,Scroller,Divider,Badge,
        swiper,
        swiperSlide,
    },
    data(){
      return{
          swiperHeader: {
              spaceBetween: 30,
              centeredSlides: true,
              autoplay: {
                  delay: 2500000,
                  disableOnInteraction: false
              },
              pagination: {
                  el: '.swiper-pagination',
                  clickable: true
              },
              delivery:"",
              self_mention:"",
          },
      }
    },
    computed:{
        ...mapGetters([
            "showDetailFood",
            "detailProList",
            "shopCart",
            "cartStyle",
        ]),
    },
    watch: {
        // 深度 watcher
        detailProList: {
            handler: function (val, oldVal) {
                let self = this
                setTimeout(()=>{
                    let imgs = document.getElementById("detail").getElementsByTagName("img")
                    for (let i in imgs) {
                        if (typeof imgs[i] === 'object'){
                            imgs[i].onload = function () {
                                console.log('img onloaded')
                                self.$refs.scroller.reset()
                            }
                        }
                    }
                    this.$refs.scroller.reset()
                },100)
            },
            deep: true
        }
    },
    created(){
        this.getMealWay()
        this.getStorage()
    },
    methods: {
        getStorage(){
            let cartStorage = JSON.parse(window.sessionStorage.getItem('shopCart'))
            if(cartStorage){
                this.$store.commit("saveShopCart",cartStorage)
            }
        },
        goToPay(){
            if(this.shopCart.num==0){
                this.$vux.toast.show({
                    text: "请选择商品",
                    type:'warn'
                })
                return
            }
            this.$router.push({path:'/account'})
        },
        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')
            }
        },
        closeDetail(){
            this.$store.dispatch("showDetailFood")
            this.$store.commit('controlCartStyle',"1")
        },
        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)
        },
        getMealWay(){
            this.$http.get('/shop/api/get-mall-delivery-type').then((response) => {
                let res = response.data;
                if (res.status == 1) {
                    this.delivery=Number(res.data.delivery)
                    this.self_mention=Number(res.data.self_mention)
                    this.$store.commit('delivery', res.data.delivery)
                    this.$store.commit('selfMention', res.data.self_mention)
                }
                else{
                    this.$vux.toast.show({
                        text: res.message,
                        type: 'cancel'
                    })
                }
            }).catch((error)=>{
                this.$vux.toast.show({
                    text: "网络异常",
                    type:'cancel'
                })
            })
        },
    },
}

</script>

<style lang="less" >
    #productDetailBox{
        z-index: 4;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background: white;
        .mealNumber{
            border:1px solid #a9a8a8bd;
            max-width: 101px;
            height: 30px;
            span{
                display: inline-block;
            }
            .changeButton{
                width: 30px;
                line-height:30px;
                text-align: center;
            }
            .leftButton{
                border-right: 1px solid #cccccc;
                color: #292727;
                font-size: 22px;
                font-weight: bold;
            }
            .rightButton{
                border-left: 1px solid #cccccc;
                color: #292727;
                font-size: 22px;
                font-weight: bold;
            }
            .changeNumber{
                text-align: center;
                line-height: 30px;
                width: 30px;
            }
        }
        .img_box{
            padding: 10px;
            .foodNameBox{
                .food_color{
                    color: #c0c0c0;
                }
            }
        }
        .rebackBox{
            display: inline;
            position: absolute;
            top: 10px;
            left: 20px;
            z-index: 2;
        }
        .send_product{
            padding: 5px 15px;
            span{
                display: inline-block;
                vertical-align: middle;
                padding-right: 20px;
            }
            label{
                padding-right: 20px;
                color: #5a5252;
            }
        }
        .graphic{
            background: #f2f2f2;
            .vux-divider{
                margin: auto;
                font-size: 20px;
            }
            .vux-divider:after, .vux-divider:before{
                width: 37%;
            }
        }
    }
</style>