index.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <view class="container">
  3. <tab-control ref="tabControl" :active='opentabControl' />
  4. <home ref="Home" v-show="PageCur == 'Home'" />
  5. <my-map ref="Map" v-show="PageCur == 'Map'" />
  6. <message ref="Message" v-show="PageCur == 'Message'" />
  7. <mine ref="Mine" v-show="PageCur == 'Mine'" />
  8. <view class="cu-bar tabbar bg-white foot" style="z-index: 100000;">
  9. <!-- bg-black -->
  10. <view @click="changePage('Home')" :class="PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'">
  11. <view class="iconfont" :class="PageCur == 'Home' ? 'icon-shouye-xuanzhong' : 'icon-shouye-weixuanzhong'" />
  12. 首页
  13. </view>
  14. <view @click="changePage('Map')" :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'">
  15. <view class="iconfont" :class="PageCur == 'Map' ? 'icon-ditu-xuanzhong' : 'icon-ditu-weixuanzhong'" /> 地图
  16. </view>
  17. <view class="text-gray" @click.stop="opentabControl(true)">
  18. <button class="cu-btn cuIcon-add shadow more" style="background-color:#0B3F7E;color: #fff;"></button>
  19. </view>
  20. <view @click="changePage('Message')"
  21. :class="PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'">
  22. <view class="iconfont" :class="PageCur == 'Message' ? 'icon-xiaoxi-xuanzhong' : 'icon-xiaoxi-weixuanzhong'">
  23. <view class="cu-tag badge">99</view>
  24. </view> 消息
  25. </view>
  26. <view @click="changePage('Mine')" :class="PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'">
  27. <view class="iconfont" :class="PageCur == 'Mine' ? 'icon-wode-xuanzhong' : 'icon-wode-weixuanzhong'" /> 我的
  28. </view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import home from "./modules/home.vue";
  34. import myMap from "./modules/my-map.vue";
  35. import message from "./modules/message.vue";
  36. import mine from "./modules/mine.vue";
  37. import tabControl from "../../components/bottomTabControl.vue";
  38. export default {
  39. components: { home, myMap, message, mine, tabControl },
  40. data() {
  41. return {
  42. PageCur: "Home",
  43. }
  44. },
  45. methods: {
  46. opentabControl(active) {
  47. if (this.$refs.tabControl.active !== active) this.$nextTick(() => this.$refs.tabControl.active = active);
  48. },
  49. changePage(page) {
  50. this.PageCur = page;
  51. this.opentabControl(false)
  52. this.loadElement()
  53. },
  54. loadElement(forcedUpdating) {
  55. let page = this.$refs[this.PageCur];
  56. if (page.uninitialized || forcedUpdating) page.init();
  57. }
  58. }
  59. }
  60. </script>
  61. <style lang="scss" scoped></style>