You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

167 lines
3.3 KiB

9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
  1. <template>
  2. <view class="list bx popup-bx">
  3. <view
  4. :class="{item : true, active : select == index}"
  5. @click="toPath(item, index)"
  6. v-for="(item, index) in list">
  7. <view class="icon">
  8. <image :src="'/static/tabbar/' + (index + 1) + '.png'" class="icon-image" mode=""></image>
  9. </view>
  10. <view class="title">
  11. {{ $t(item.title) }}
  12. </view>
  13. </view>
  14. <!-- 客服列表 -->
  15. <serviceList :show="showService" @close="closeServiceList"></serviceList>
  16. </view>
  17. </template>
  18. <script>
  19. import serviceList from '@/components/serviceList/serviceList.vue'
  20. export default {
  21. props : ['select'],
  22. components : {
  23. serviceList,
  24. },
  25. data() {
  26. return {
  27. // "list": [
  28. // {
  29. // "selectedIconPath": "/static/tabbar/2.png",
  30. // "iconPath": "/static/tabbar/1.png",
  31. // "pagePath": "/pages/home/home",
  32. // "title": "tabbar.title.1"
  33. // },{
  34. // "selectedIconPath": "/static/tabbar/4.png",
  35. // "iconPath": "/static/tabbar/3.png",
  36. // "pagePath": "/pages/prizeDraw/prizeDraw",
  37. // "title": "tabbar.title.2"
  38. // },{
  39. // "selectedIconPath": "/static/tabbar/6.png",
  40. // "iconPath": "/static/tabbar/5.png",
  41. // "pagePath": "/pages/order/order",
  42. // "title": "tabbar.title.3"
  43. // },{
  44. // "selectedIconPath": "/static/tabbar/8.png",
  45. // "iconPath": "/static/tabbar/7.png",
  46. // "pagePath": "/pages/center/center",
  47. // "title": "tabbar.title.4"
  48. // }
  49. // ],
  50. "list": [
  51. {
  52. "pagePath": "/pages/home/home",
  53. "title": "tabbar.title.1"
  54. },
  55. {
  56. "pagePath": "/pages/order/order",
  57. "title": "tabbar.title.2"
  58. },
  59. {
  60. "pagePath": "/pages/starting/starting",
  61. "title": "tabbar.title.3"
  62. },
  63. {
  64. "title": "tabbar.title.4"
  65. },
  66. {
  67. "pagePath": "/pages/center/center",
  68. "title": "tabbar.title.5"
  69. }
  70. ],
  71. showService: false,
  72. serverList: [],
  73. }
  74. },
  75. methods: {
  76. toPath(item, index){
  77. if(index == this.select){
  78. return
  79. }
  80. if(!item.pagePath){
  81. return this.revealServiceList()
  82. }
  83. this.$play()
  84. uni.redirectTo({
  85. url: item.pagePath
  86. })
  87. },
  88. //显示客服列表
  89. revealServiceList() {
  90. this.$play()
  91. this.showService = true;
  92. },
  93. //关闭客服列表
  94. closeServiceList() {
  95. this.$play()
  96. this.showService = false;
  97. },
  98. }
  99. }
  100. </script>
  101. <style scoped lang="scss">
  102. .list{
  103. position: fixed;
  104. width: 100vw;
  105. background-color: #000;
  106. display: flex;
  107. justify-content: center;
  108. align-items: center;
  109. height: 120rpx;
  110. z-index: 999;
  111. font-size: 20rpx;
  112. bottom: 0;
  113. left: 0;
  114. line-height: 50rpx;
  115. color: #fff;
  116. box-shadow: 0px 0rpx 10rpx 10rpx #00000022;
  117. width: 750rpx;
  118. font-weight: 500;
  119. .item:nth-child(2){
  120. // .icon{
  121. // .icon-image{
  122. // width: 95rpx;
  123. // height: 95rpx;
  124. // margin-top: -55rpx;
  125. // }
  126. // }
  127. }
  128. .item{
  129. flex: 1;
  130. display: flex;
  131. flex-direction: column;
  132. justify-content: center;
  133. align-items: center;
  134. .icon{
  135. width: 100%;
  136. height: 50%;
  137. display: flex;
  138. justify-content: center;
  139. align-items: center;
  140. .icon-image{
  141. width: 45rpx;
  142. height: 45rpx;
  143. }
  144. }
  145. .icon-image{
  146. width: 100%;
  147. height: 50%;
  148. }
  149. .title{
  150. overflow:hidden;
  151. white-space: nowrap;
  152. text-overflow: ellipsis;
  153. -o-text-overflow:ellipsis;
  154. }
  155. }
  156. }
  157. .active{
  158. color: rgb(92, 173, 255) !important;
  159. }
  160. </style>