custom-tabbar.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  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)"
  5. :style="{backgroundImage: 'url(' + item.iconPath + ')'}"></view>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. import {
  11. useTabBarHistory
  12. } from '@/utils/emitEvents.js';
  13. import cacheManager from "@/utils/cacheManager.js";
  14. import {
  15. toast,getUserIdentity
  16. } from "@/utils/common";
  17. export default {
  18. data() {
  19. return {
  20. tabList: [{
  21. iconPath: 'static/images/tabbar/unselect/plan-sj.png',
  22. path: `/pages/study/index`
  23. },
  24. {
  25. iconPath: 'static/images/tabbar/unselect/partner-sj.png',
  26. path: '/pages/game/index'
  27. },
  28. {
  29. iconPath: 'static/images/tabbar/unselect/my-sj.png',
  30. path: `/pages/my/index`
  31. },
  32. ],
  33. };
  34. },
  35. props: {
  36. nianji: {
  37. type: String,
  38. },
  39. cardId: {
  40. type: String,
  41. },
  42. zhangId: {
  43. type: String,
  44. },
  45. },
  46. methods: {
  47. switchTab(path, params = {}) {
  48. /* if(path =='/pages/game/index'){
  49. toast("功能暂未开放!")
  50. return false
  51. } */
  52. if (getUserIdentity() == 'Visitor') {
  53. uni.redirectTo({
  54. url: path + '?nianji=' + this.nianji + '&cardId=' + this.cardId + '&zhangId=' + this
  55. .zhangId
  56. });
  57. }else{
  58. if (path === '/pages/game/index') {
  59. // 游戏需要返回功能
  60. uni.navigateTo({
  61. url: path
  62. });
  63. return ;
  64. }
  65. uni.redirectTo({
  66. url: path
  67. });
  68. }
  69. },
  70. },
  71. created() {
  72. console.log(this.nianji);
  73. }
  74. }
  75. </script>
  76. <style scoped>
  77. .custom-tabbar {
  78. display: flex;
  79. justify-content: space-around;
  80. align-items: center;
  81. /* 其他样式 */
  82. }
  83. .tab-item {
  84. flex: 1;
  85. /* 样式 */
  86. }
  87. .tab-icon {
  88. /* 图标样式 */
  89. }
  90. </style>