|
@@ -1,33 +1,80 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <tab-control ref="tabControl" :active='opentabControl' />
|
|
|
- <home ref="Home" v-show="PageCur == 'Home'" />
|
|
|
- <facility ref="Map" :tabHeight="tabHeight" v-show="PageCur == 'Map'" />
|
|
|
- <message ref="Message" v-show="PageCur == 'Message'" />
|
|
|
- <mine ref="Mine" v-show="PageCur == 'Mine'" />
|
|
|
- <view class="cu-bar tabbar bg-white foot" style="z-index: 100000;">
|
|
|
- <!-- bg-black -->
|
|
|
- <view @click="changePage('Home')" :class="PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'">
|
|
|
- <view class="iconfont" :class="PageCur == 'Home' ? 'icon-shouye-xuanzhong' : 'icon-shouye-weixuanzhong'" />
|
|
|
- 首页
|
|
|
- </view>
|
|
|
- <view @click="changePage('Map')" :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'">
|
|
|
- <view class="iconfont" :class="PageCur == 'Map' ? 'icon-ditu-xuanzhong' : 'icon-ditu-weixuanzhong'" /> 地图
|
|
|
- </view>
|
|
|
- <view class="text-gray" @click.stop="opentabControl(true)">
|
|
|
- <button class="cu-btn cuIcon-add shadow more" style="background-color:#0B3F7E;color: #fff;"></button>
|
|
|
- </view>
|
|
|
- <view @click="changePage('Message')"
|
|
|
- :class="PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'">
|
|
|
- <view class="iconfont" :class="PageCur == 'Message' ? 'icon-xiaoxi-xuanzhong' : 'icon-xiaoxi-weixuanzhong'">
|
|
|
- <!-- <view class="cu-tag badge">99</view> -->
|
|
|
- </view> 消息
|
|
|
- </view>
|
|
|
- <view @click="changePage('Mine')" :class="PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'">
|
|
|
- <view class="iconfont" :class="PageCur == 'Mine' ? 'icon-wode-xuanzhong' : 'icon-wode-weixuanzhong'" /> 我的
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <tab-control ref="tabControl" :active="opentabControl" />
|
|
|
+ <home ref="Home" v-show="PageCur == 'Home'" />
|
|
|
+ <facility ref="Map" :tabHeight="tabHeight" v-show="PageCur == 'Map'" />
|
|
|
+ <message ref="Message" v-show="PageCur == 'Message'" />
|
|
|
+ <mine ref="Mine" v-show="PageCur == 'Mine'" />
|
|
|
+ <view class="cu-bar tabbar bg-white foot" style="z-index: 100000">
|
|
|
+ <!-- bg-black -->
|
|
|
+ <view
|
|
|
+ @click="changePage('Home')"
|
|
|
+ :class="
|
|
|
+ PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="iconfont"
|
|
|
+ :class="
|
|
|
+ PageCur == 'Home'
|
|
|
+ ? 'icon-shouye-xuanzhong'
|
|
|
+ : 'icon-shouye-weixuanzhong'
|
|
|
+ "
|
|
|
+ />
|
|
|
+ 首页
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ @click="changePage('Map')"
|
|
|
+ :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="iconfont"
|
|
|
+ :class="
|
|
|
+ PageCur == 'Map' ? 'icon-ditu-xuanzhong' : 'icon-ditu-weixuanzhong'
|
|
|
+ "
|
|
|
+ />
|
|
|
+ 地图
|
|
|
+ </view>
|
|
|
+ <view class="text-gray" @click.stop="opentabControl(true)">
|
|
|
+ <button
|
|
|
+ class="cu-btn cuIcon-add shadow more"
|
|
|
+ style="background-color: #0b3f7e; color: #fff"
|
|
|
+ ></button>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ @click="changePage('Message')"
|
|
|
+ :class="
|
|
|
+ PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="iconfont"
|
|
|
+ :class="
|
|
|
+ PageCur == 'Message'
|
|
|
+ ? 'icon-xiaoxi-xuanzhong'
|
|
|
+ : 'icon-xiaoxi-weixuanzhong'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- <view class="cu-tag badge">99</view> -->
|
|
|
+ </view>
|
|
|
+ 消息
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ @click="changePage('Mine')"
|
|
|
+ :class="
|
|
|
+ PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="iconfont"
|
|
|
+ :class="
|
|
|
+ PageCur == 'Mine' ? 'icon-wode-xuanzhong' : 'icon-wode-weixuanzhong'
|
|
|
+ "
|
|
|
+ />
|
|
|
+ 我的
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -37,37 +84,38 @@ import message from "./modules/message.vue";
|
|
|
import mine from "./modules/mine.vue";
|
|
|
import tabControl from "./modules/bottomTabControl.vue";
|
|
|
export default {
|
|
|
- components: { home, facility, message, mine, tabControl },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- PageCur: "Home",
|
|
|
- tabHeight: 98
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getHeight('.cu-bar', this, false).then(res => {
|
|
|
- this.tabHeight = res.height
|
|
|
- })
|
|
|
- this.loadElement()
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.$refs.Home.renderData();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- opentabControl(active) {
|
|
|
- if (this.$refs.tabControl.active !== active) this.$nextTick(() => this.$refs.tabControl.active = active);
|
|
|
- },
|
|
|
- changePage(page) {
|
|
|
- this.PageCur = page;
|
|
|
- this.opentabControl(false)
|
|
|
- this.loadElement()
|
|
|
- },
|
|
|
- loadElement(forcedUpdating) {
|
|
|
- let page = this.$refs[this.PageCur];
|
|
|
- if (page.uninitialized || forcedUpdating) page.init();
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ components: { home, facility, message, mine, tabControl },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ PageCur: "Home",
|
|
|
+ tabHeight: 98,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getHeight(".cu-bar", this, false).then((res) => {
|
|
|
+ this.tabHeight = res.height;
|
|
|
+ });
|
|
|
+ this.loadElement();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.$refs.Home.renderData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ opentabControl(active) {
|
|
|
+ if (this.$refs.tabControl.active !== active)
|
|
|
+ this.$nextTick(() => (this.$refs.tabControl.active = active));
|
|
|
+ },
|
|
|
+ changePage(page) {
|
|
|
+ this.PageCur = page;
|
|
|
+ this.opentabControl(false);
|
|
|
+ this.loadElement();
|
|
|
+ },
|
|
|
+ loadElement(forcedUpdating) {
|
|
|
+ let page = this.$refs[this.PageCur];
|
|
|
+ if (page.uninitialized || forcedUpdating) page.init();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped></style>
|