custom-tabbar.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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. uni.redirectTo({
  59. url: path
  60. });
  61. }
  62. },
  63. },
  64. created() {
  65. console.log(this.nianji);
  66. }
  67. }
  68. </script>
  69. <style scoped>
  70. .custom-tabbar {
  71. display: flex;
  72. justify-content: space-around;
  73. align-items: center;
  74. /* 其他样式 */
  75. }
  76. .tab-item {
  77. flex: 1;
  78. /* 样式 */
  79. }
  80. .tab-icon {
  81. /* 图标样式 */
  82. }
  83. </style>