page-btm-bar.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <view>
  3. <view class="tab-bar">
  4. <view class="item" :style="[active == 2?{color: '#a07c5a'}:'']"
  5. :class="active == 2?'active':''"
  6. @click="navTo(2,'/pages/theater/index/index')">
  7. <image src="/static/images/huodong.png" class="menu-icon"/>
  8. <text class="title" :style="[active == 2?{color: '#a07c5a'}:'']">活 动</text>
  9. </view>
  10. <view class="item" :style="[active == 1?{color: '#a07c5a'}:'']"
  11. :class="active == 1?'active':''"
  12. @click="navTo(1,'/pages/home/home')">
  13. <image src="/static/images/changdi.png" class="menu-icon"/>
  14. <text class="title" :style="[active == 1?{color: '#a07c5a'}:'']">场 地</text>
  15. </view>
  16. <view class="item" :style="[active == 3?{color: '#a07c5a'}:'']"
  17. :class="active == 3?'active':''"
  18. @click="onOpenHw">
  19. <image src="/static/images/2ndhome.png" class="menu-icon" style="width: 67px;height: 67px">
  20. </view>
  21. <view class="item" :style="[active == 4?{color: '#a07c5a'}:'']"
  22. :class="active == 4?'active':''"
  23. @click="navTo(4,'/pages/index/index?store_id=3')">
  24. <image src="/static/images/gongyi.png" class="menu-icon"/>
  25. <text class="title" :style="[active ==4?{color: '#a07c5a'}:'']">商 城</text>
  26. </view>
  27. <view class="item" :style="[active == 5?{color: '#a07c5a'}:'']"
  28. :class="active == 5?'active':''"
  29. @click="navTo(5,'/pages/home/myhome')">
  30. <image src="/static/images/wode.png" class="menu-icon" />
  31. <text class="title" :style="[active ==5?{color: '#a07c5a'}:'']">我 的</text>
  32. </view>
  33. </view>
  34. <!-- 号外号外 -->
  35. <uni-popup ref="hwPopForm" type="center" style="z-index: 60;">
  36. <SoundForm :dataList="movieList"></SoundForm>
  37. </uni-popup>
  38. </view>
  39. </template>
  40. <script>
  41. import SoundForm from '@/components/SoundForm/SoundForm.vue'
  42. export default {
  43. props: {
  44. active: {
  45. type: Number,
  46. default: 1
  47. }
  48. },
  49. components: {
  50. SoundForm
  51. },
  52. data() {
  53. return {
  54. // diy:2
  55. // active:1
  56. };
  57. },
  58. computed: {
  59. diy() {
  60. return this.$store.state.systemInfo.is_vip;
  61. },
  62. setColor() {
  63. return this.$store.state.setColor;
  64. }
  65. },
  66. watch:{
  67. active(val){
  68. console.log(val);
  69. this.active=val
  70. }
  71. },
  72. methods: {
  73. navTo(index, url) {
  74. console.log(index);
  75. if (index != this.active) {
  76. uni.switchTab({
  77. url: url
  78. })
  79. }
  80. },
  81. //打开收音机
  82. onOpenHw(e){
  83. this.$refs.hwPopForm.open('center');
  84. },
  85. }
  86. }
  87. </script>
  88. <style scoped>
  89. .tab-bar {
  90. background-color: #fff;
  91. width: 100vw;
  92. /*兼容 IOS<11.2*/
  93. padding-bottom: constant(safe-area-inset-bottom);
  94. /*兼容 IOS>11.2*/
  95. padding-bottom: env(safe-area-inset-bottom);
  96. display: flex;
  97. flex-flow: row nowrap;
  98. justify-tab-bar: space-around;
  99. align-items: center;
  100. border-top: 1px solid #f0f0f0;
  101. position: fixed;
  102. left: 0;
  103. bottom: 0;
  104. z-index: 900;
  105. }
  106. .tab-bar .item {
  107. flex: auto;
  108. display: flex;
  109. flex-flow: column nowrap;
  110. justify-content: center;
  111. align-items: center;
  112. color: #8a8a8a;
  113. height: 120rpx;
  114. }
  115. .menu-icon{
  116. width:24px;
  117. height:24px;
  118. }
  119. .tab-bar .iconfont {
  120. display: block;
  121. font-size: 48rpx;
  122. /* color: #8a8a8a; */
  123. }
  124. .tab-bar .active .iconfont {
  125. /* color: #3387FF; */
  126. }
  127. .tab-bar .title {
  128. font-size: 28rpx;
  129. height: 36rpx;
  130. line-height: 48rpx;
  131. text-align: center;
  132. /* color: #8a8a8a; */
  133. }
  134. .tab-bar .active .title {
  135. /* color: #3387FF; */
  136. color: #8a8a8a;
  137. font-weight: bold;
  138. }
  139. </style>