index.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <view class="content" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }">
  3. <!-- 采美采购商城 -->
  4. <view :style="{ display: show_index == 0 ? 'block' : 'none' }">
  5. <seller-home ref="home" v-if="isHomeData"></seller-home>
  6. </view>
  7. <!-- 商品分类 -->
  8. <view :style="{ display: show_index == 1 ? 'block' : 'none' }">
  9. <seller-category ref="category" v-if="isCategory"></seller-category>
  10. </view>
  11. <!-- 消息 -->
  12. <view :style="{ display: show_index == 2 ? 'block' : 'none' }">
  13. <seller-message ref="message" v-if="isMessage"></seller-message>
  14. </view>
  15. <!-- 账户中心 -->
  16. <view :style="{ display: show_index == 3 ? 'flex' : 'none' }">
  17. <seller-user ref="user" v-if="isUserData"></seller-user>
  18. </view>
  19. <!-- isIphoneX判断是否为刘海屏在main.js里,好像uniapp有一个css变量获取刘海屏的安全区域 -->
  20. <view class="tabBar" :style="{ height: isIphoneX ? '140rpx' : '98rpx' }">
  21. <!-- 导航的中间圆圈 -->
  22. <view class="tabBar_list" :style="{ paddingBottom: isIphoneX ? '40rpx' : '' }">
  23. <view v-for="item in tab_nav_list" :key="item.id" class="tabBar_item" @tap="cut_index(item.id)">
  24. <image v-if="show_index == item.id" :src="item.iconAc"></image>
  25. <image v-else :src="item.icon"></image>
  26. <view :class="{ tabBar_name: true, nav_active: show_index == item.id }">{{ item.name }}</view>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import sellerHome from '../components/home.vue'
  34. import sellerUser from '../components/user.vue'
  35. import sellerCategory from '../components/category.vue'
  36. import sellerMessage from '../components/message.vue'
  37. import { mapMutations, mapState } from 'vuex'
  38. export default {
  39. components: {
  40. sellerHome, //采美采购商城 0
  41. sellerUser, //账户中心 3
  42. sellerCategory, //商品分类 1
  43. sellerMessage, //消息 2
  44. },
  45. data() {
  46. return {
  47. show_index: 3, //控制显示那个组件
  48. isUserData: false,
  49. isCategory: false,
  50. isHomeData: false,
  51. isMessage: false,
  52. isIphoneX: this.$store.state.isIphone,
  53. tab_nav_list: [
  54. //菜单列表
  55. {
  56. id: 0,
  57. name: '首页',
  58. icon: 'https://static.caimei365.com/app/img/icon/icon-home@3x.png',
  59. iconAc: 'https://static.caimei365.com/app/img/icon/icon-home-active@3x.png'
  60. },
  61. {
  62. id: 1,
  63. name: '分类',
  64. icon: 'https://static.caimei365.com/app/img/icon/icon-sort@3x.png',
  65. iconAc: 'https://static.caimei365.com/app/img/icon/icon-sort-active@3x.png'
  66. },
  67. {
  68. id: 2,
  69. name: '消息',
  70. icon: 'https://static.caimei365.com/app/img/icon/icon-news@3x.png',
  71. iconAc: 'https://static.caimei365.com/app/img/icon/icon-news-active@3x.png'
  72. },
  73. {
  74. id: 3,
  75. name: '我的',
  76. icon: 'https://static.caimei365.com/app/img/icon/icon-user@3x.png',
  77. iconAc: 'https://static.caimei365.com/app/img/icon/icon-user-active@3x.png'
  78. }
  79. ],
  80. nvabarData: {
  81. //顶部自定义导航
  82. showCapsule: 0, // 是否显示左上角图标 1表示显示 0表示不显示,
  83. showSearch: 0,
  84. title: '账户中心', // 导航栏 中间的标题
  85. textLeft: false
  86. },
  87. isIphoneX: this.$store.state.isIphoneX,
  88. CustomBar: this.CustomBar // 顶部导航栏高度
  89. }
  90. },
  91. onLoad() {
  92. this.$nextTick(() => {
  93. // 一定要等视图更新完再调用方法
  94. setTimeout(() => {
  95. this.isUserData = true
  96. }, 100)
  97. })
  98. },
  99. computed: {
  100. ...mapState(['userInfo'])
  101. },
  102. // onShow() {
  103. // this.updateSellerNoticeNum() // 消息通知
  104. // },
  105. methods: {
  106. // ...mapMutations(['updateSellerNoticeNum']),
  107. // 切换组件
  108. cut_index(type) {
  109. this.show_index = type
  110. if (this.show_index == 0) {
  111. this.isHomeData = true
  112. this.isUserData = false
  113. this.isCategory = false
  114. this.isMessage = false
  115. } else if (this.show_index == 1) {
  116. this.isHomeData = false
  117. this.isUserData = false
  118. this.isCategory = true
  119. this.isMessage = false
  120. } else if (this.show_index == 2) {
  121. this.isHomeData = false
  122. this.isUserData = false
  123. this.isCategory = false
  124. this.isMessage = true
  125. } else if (this.show_index == 3) {
  126. this.isHomeData = false
  127. this.isUserData = true
  128. this.isCategory = false
  129. this.isMessage = false
  130. }
  131. },
  132. onPullDownRefresh() {
  133. if (this.show_index == 0) {
  134. this.$refs.home.getHomeInformation()
  135. } else if (this.show_index == 3) {
  136. this.$refs.user.initData()
  137. } else if (this.show_index == 2) {
  138. this.$refs.message.getMessageList()
  139. }
  140. uni.stopPullDownRefresh()
  141. }
  142. },
  143. onShareAppMessage(res) {
  144. //分享转发
  145. if (res.from === 'button') {
  146. // 来自页面内转发按钮
  147. }
  148. return {
  149. title: '生美医美正品采购服务平台',
  150. path: `pages/tabBar/home/index?type=sellerShare&sellerUserId=${this.userInfo.userId || 0}`,
  151. imageUrl: 'https://static.caimei365.com/app/img/bg/min-banner.jpg'
  152. }
  153. }
  154. }
  155. </script>
  156. <style lang="scss">
  157. .tabBar {
  158. width: 100%;
  159. height: 98rpx;
  160. background: #fff;
  161. border-top: 1px solid #e5e5e5;
  162. position: fixed;
  163. bottom: 0px;
  164. left: 0px;
  165. right: 0px;
  166. display: flex;
  167. align-items: center;
  168. justify-content: center;
  169. z-index: 999;
  170. .tabBar_list {
  171. width: 86%;
  172. display: flex;
  173. justify-content: space-between;
  174. image {
  175. width: 48rpx;
  176. height: 48rpx;
  177. margin-bottom: 2rpx;
  178. }
  179. .tabBar_item {
  180. width: 150rpx;
  181. display: flex;
  182. justify-content: center;
  183. align-items: center;
  184. flex-direction: column;
  185. font-size: 20rpx;
  186. color: #999999;
  187. }
  188. }
  189. }
  190. .nav_active {
  191. color: $color-system;
  192. }
  193. </style>