custom-tabbar.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <view class="ezy-custom-tabbar">
  3. <view class="tabbar-item-box">
  4. <view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path,index)"
  5. :style="{ backgroundImage: 'url(' + (currentTab == index ? item.activePath : item.iconPath) + ')' }">
  6. </view>
  7. </view>
  8. </view>
  9. <tip-middle-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm"
  10. :content="MESSAGE_VISITER_TO_LOGIN"></tip-middle-dialog>
  11. </template>
  12. <script>
  13. import {
  14. MESSAGE_VISITER_TO_LOGIN
  15. } from "@/utils/constant.js"
  16. import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
  17. import {
  18. useTabBarHistory
  19. } from '@/utils/emitEvents.js';
  20. import cacheManager from "@/utils/cacheManager.js";
  21. import {
  22. toast,
  23. getUserIdentity
  24. } from "@/utils/common";
  25. import {
  26. nextTick,
  27. } from "vue";
  28. export default {
  29. components: {
  30. tipMiddleDialog
  31. },
  32. data() {
  33. return {
  34. tabList: [{
  35. iconPath: 'static/images/tabbar/unselect/plan-sj.png',
  36. activePath: 'static/images/tabbar/select/plan-sj.png',
  37. path: `/pages/study/index`
  38. },
  39. {
  40. iconPath: 'static/images/tabbar/unselect/partner-sj.png',
  41. activePath: 'static/images/tabbar/select/partner-sj.png',
  42. path: '/pages/game/index'
  43. },
  44. {
  45. iconPath: 'static/images/tabbar/unselect/my-sj.png',
  46. activePath: 'static/images/tabbar/select/my-sj.png',
  47. path: `/pages/my/index`
  48. },
  49. ],
  50. currentTab: 0,
  51. MESSAGE_VISITER_TO_LOGIN
  52. };
  53. },
  54. props: {
  55. nianji: {
  56. type: String,
  57. },
  58. cardId: {
  59. type: String,
  60. },
  61. zhangId: {
  62. type: String,
  63. },
  64. currentTabNumber: {
  65. type: Number,
  66. },
  67. tipFlag: {
  68. type: String,
  69. },
  70. },
  71. methods: {
  72. // 游客弹窗---确定
  73. ykConfirm() {
  74. uni.redirectTo({
  75. url: '/pages/login/index'
  76. });
  77. },
  78. switchTab(path, index) {
  79. if (path !== '/pages/game/index') {
  80. this.currentTab = index;
  81. }
  82. if (getUserIdentity() == 'Visitor') {
  83. if (path === '/pages/game/index') {
  84. this.$refs.youkeDialogRef.handleShow();
  85. return;
  86. }
  87. uni.redirectTo({
  88. url: path + '?nianji=' + this.nianji + '&cardId=' + this.cardId + '&zhangId=' +
  89. this.zhangId+ '&tipFlag=' + this.tipFlag
  90. });
  91. } else {
  92. if (path === '/pages/game/index') {
  93. // 游戏需要返回功能
  94. uni.navigateTo({
  95. url: path,
  96. "animationType": "fade-in",
  97. "animationDuration":0
  98. });
  99. return;
  100. }
  101. uni.navigateTo({
  102. url: path,
  103. "animationType": "fade-in",
  104. "animationDuration":0
  105. });
  106. }
  107. },
  108. },
  109. created() {
  110. this.currentTab =this.currentTabNumber
  111. }
  112. }
  113. </script>
  114. <style scoped>
  115. .custom-tabbar {
  116. display: flex;
  117. justify-content: space-around;
  118. align-items: center;
  119. /* 其他样式 */
  120. }
  121. .tab-item {
  122. flex: 1;
  123. /* 样式 */
  124. }
  125. .tab-icon {
  126. /* 图标样式 */
  127. }
  128. </style>