BTCoinmt-H5/pages/base/index.vue

<template>
    <v-page>
        <template v-for="item in navList">
            <component
                v-if="cashViews.includes(item.tel)"
                v-show="tab == item.tel"
                :is="item.tel"
                :key="item.tel"
                :isShow="tab == item.tel && tabShow"
                :tabs="tab"
                class="layout-main"
                :tabChange="tabChange"
            ></component>
        </template>
        <view class="footer d-flex p-y-xs bg-tab-nav flex-wrap fn-center">
            <view
                class="item line-height-1 flex-fill"
                :class="{ 'router-link-active': tab == item.tel }"
                v-for="item in navList"
                :key="item.tel"
                @click="tabChange(item.tel)"
            >
                <view class="icon">
                    <img
                        class="h-24"
                        v-if="tab == item.tel"
                        :src="item.activeIcon"
                        alt=""
                    />
                    <img class="h-24" v-else :src="item.icon" alt=""/>
                </view>
                <view class="fn-12" style="margin-top: 4px;margin-bottom:10px">{{ item.label }}</view>
            </view>
            <!-- #ifdef APP-PLUS -->
            <view class="w-max" style="height:20px"></view>
            <!-- #endif -->
        </view>
        <view class="mode d-flex flex-wrap" v-if="mode">
            <img class="w-max m-x-xl" src='static/img/right.png'/>
            <text class="p-x-50">微信客户端请点击右上角【...】选择在浏览器打开</text>
        </view>
    </v-page>
</template>

<script>
import Home from "./home";
import ExchangeOperation from "./exchange-operation";
import Purchase from "../purchase/index";
import Help from "@/pages/help/index.vue"
import Mine from "./mine";
import OptionList from "./option-list";
// import List from "./list";
import Contract from "./contract";

export default {
    name: "Base",
    components: {
        Home,
        ExchangeOperation,
        OptionList,
        Mine,
        Contract,
        Purchase,
        Help
    },
    computed: {
        navList() {
            return [
                {
                    label: this.$t("base.d0"),
                    tel: "home",
                    icon: "static/img/index/base_home_0.png",
                    activeIcon: "static/img/index/base_home_1.png",
                },
                {
                    label: this.$t("exchange.a0"),
                    tel: "exchange-operation",
                    icon: "static/img/index/base_link_0.png",
                    activeIcon: "static/img/index/base_link_1.png",
                },
                {
                    label: this.$t("exchange.a2"),
                    tel: "contract",
                    icon: "static/img/index/base_caidan_0.png",
                    activeIcon: "static/img/index/base_caidan_1.png",
                },
                // {
                //     // label: this.$t("base.a4"),
                //     // tel: "option-list",
                //     label: this.$t("help.a1"),
                //     tel: "help",
                //     // label: this.$t("purchase.a5"),
                //     // tel: "purchase",
                //     icon: "static/img/base_qukuai_0.png",
                //     activeIcon: "static/img/base_qukuai_1.png",
                // },

                {
                    label: this.$t("base.d2"),
                    tel: "mine",
                    icon: "static/img/index/base_assets_0.png",
                    activeIcon: "static/img/index/base_assets_1.png",
                },
            ];
        },
    },
    data() {
        return {
            cashViews: [],
            tab: "",
            tabShow: true,
            mode: false
        };
    },
    methods: {
        tabChange(name) {
            this.tab = name;
            if (!this.cashViews.includes(name)) {
                this.cashViews.push(name);
            }
        },
        // #ifdef H5
        isWeiXinLogin() {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                this.mode = true
            } else {
                return false // 普通浏览器中打开
            }
        }
        // #endif
    },
    onShow() {
        this.tabShow = true;
        // #ifdef H5
        this.isWeiXinLogin()
        // #endif
    },
    onLoad(query) {
        if (query.tel) {
            this.tabChange(query.tel);
        } else {
            this.tabChange("home");
        }
    },
    mounted() {
    },
    onHide() {
        this.tabShow = false;
    },

};
</script>
<style lang="scss" scoped>
.footer {
    box-shadow: $tab-nav-shadow;
    // position: relative;
    // z-index: 5;
	background-color: #000;
	min-height: 88rpx;
	box-sizing: border-box;
}

.router-link-active {
    // color: $theme-1;
		color: white;
}

.mode {
    position: fixed;
    z-index: 1000000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    font-size: 16px;
    box-sizing: border-box;

    img {
        width: 95%;
        height: auto;
        box-sizing: border-box;
    }
}

.p-x-50 {
    padding: 0 50px;
}
</style>