index.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <view class="container">
  3. <tab-control ref="tabControl" :active="opentabControl" />
  4. <home ref="Home" v-show="PageCur == 'Home'" />
  5. <facility ref="Map" :tabHeight="tabHeight" 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
  11. @click="changePage('Home')"
  12. :class="
  13. PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'
  14. "
  15. >
  16. <view
  17. class="iconfont"
  18. :class="
  19. PageCur == 'Home'
  20. ? 'icon-shouye-xuanzhong'
  21. : 'icon-shouye-weixuanzhong'
  22. "
  23. />
  24. 首页
  25. </view>
  26. <view
  27. @click="changePage('Map')"
  28. :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'"
  29. >
  30. <view
  31. class="iconfont"
  32. :class="
  33. PageCur == 'Map' ? 'icon-ditu-xuanzhong' : 'icon-ditu-weixuanzhong'
  34. "
  35. />
  36. 地图
  37. </view>
  38. <view class="text-gray" @click.stop="opentabControl(true)">
  39. <button
  40. class="cu-btn cuIcon-add shadow more"
  41. style="background-color: #0b3f7e; color: #fff"
  42. ></button>
  43. </view>
  44. <view
  45. @click="changePage('Message')"
  46. :class="
  47. PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'
  48. "
  49. >
  50. <view
  51. class="iconfont"
  52. :class="
  53. PageCur == 'Message'
  54. ? 'icon-xiaoxi-xuanzhong'
  55. : 'icon-xiaoxi-weixuanzhong'
  56. "
  57. >
  58. <!-- <view class="cu-tag badge">99</view> -->
  59. </view>
  60. 消息
  61. </view>
  62. <view
  63. @click="changePage('Mine')"
  64. :class="
  65. PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'
  66. "
  67. >
  68. <view
  69. class="iconfont"
  70. :class="
  71. PageCur == 'Mine' ? 'icon-wode-xuanzhong' : 'icon-wode-weixuanzhong'
  72. "
  73. />
  74. 我的
  75. </view>
  76. </view>
  77. </view>
  78. </template>
  79. <script>
  80. import home from "./modules/home.vue";
  81. import facility from "../facility/index.vue";
  82. import message from "./modules/message.vue";
  83. import mine from "./modules/mine.vue";
  84. import tabControl from "./modules/bottomTabControl.vue";
  85. export default {
  86. components: { home, facility, message, mine, tabControl },
  87. data() {
  88. return {
  89. PageCur: "Home",
  90. tabHeight: 98,
  91. };
  92. },
  93. mounted() {
  94. this.getHeight(".cu-bar", this, false).then((res) => {
  95. this.tabHeight = res.height;
  96. });
  97. this.loadElement();
  98. },
  99. onShow() {
  100. this.$refs.Home.renderData();
  101. },
  102. methods: {
  103. opentabControl(active) {
  104. if (this.$refs.tabControl.active !== active)
  105. this.$nextTick(() => (this.$refs.tabControl.active = active));
  106. },
  107. changePage(page) {
  108. this.PageCur = page;
  109. this.opentabControl(false);
  110. this.loadElement();
  111. },
  112. loadElement(forcedUpdating) {
  113. let page = this.$refs[this.PageCur];
  114. if (page.uninitialized || forcedUpdating) page.init();
  115. },
  116. },
  117. };
  118. </script>
  119. <style lang="scss" scoped></style>