supplier_more.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <template>
  2. <view class="more">
  3. <view class="supplier_login"><login-menu ref="login-menu" :menuList="menuList" @scrollPage="scrollPage" /></view>
  4. <view class="more-bg">
  5. <image src="https://static.caimei365.com/app/img/supplier-login/growth/banner.png" mode=""></image>
  6. </view>
  7. <view class="container">
  8. <view class="tabs">
  9. <view class="tab" :class="params.type === i.id ? 'active' : ''" v-for="i in activeTabs" :key="i.id" @click="handlerTabs(i)">
  10. {{ i.title }}
  11. </view>
  12. </view>
  13. <view class="growth-module-list">
  14. <active-team-com v-for="i in dataList" :key="i.id" :module="i" :active="params.type" @playVideo="playVideo"/>
  15. </view>
  16. </view>
  17. <cm-video :show="showVideo" @closeClick="closeVideo" :videoObj="videoObj" />
  18. </view>
  19. </template>
  20. <script>
  21. import LoginMenu from './components/supplier-loginMenu.vue'
  22. import activeTeamCom from './components/activeTeamCom.vue'
  23. import CmVideo from './components/caimei-video.vue'
  24. export default {
  25. components: {
  26. LoginMenu,
  27. activeTeamCom,
  28. CmVideo
  29. },
  30. data () {
  31. return {
  32. menuList: [
  33. {
  34. id: 0,
  35. title: '营销服务'
  36. },
  37. {
  38. id: 1,
  39. title: '解决方案'
  40. },
  41. {
  42. id: 2,
  43. title: '运营产品'
  44. },
  45. {
  46. id: 3,
  47. title: '营销工具'
  48. },
  49. {
  50. id: 4,
  51. title: '成功案例'
  52. },
  53. {
  54. id: 5,
  55. title: '关于采美'
  56. },
  57. {
  58. id: 6,
  59. title: '增长社区'
  60. }
  61. ],
  62. activeMenu: '',
  63. isActive: 6,
  64. activeTabs: [
  65. {
  66. id: 2,
  67. title: '美业企谈'
  68. },
  69. {
  70. id: 3,
  71. title: '干货知识'
  72. }
  73. ],
  74. dataList: [],
  75. showVideo: false,
  76. videoObj: {},
  77. params: {
  78. pageSize: 10,
  79. pageNum: 1,
  80. type: 2,
  81. source: 2
  82. },
  83. hasNextPage: false
  84. }
  85. },
  86. onLoad (option) {
  87. this.handlerInit()
  88. this.params.type = Number(option.active)
  89. this.getSupplierLanding(this.params.type)
  90. },
  91. onPullDownRefresh() {
  92. if (this.hasNextPage) {
  93. this.getSupplierLanding(this.params.type)
  94. }
  95. uni.stopPullDownRefresh()
  96. },
  97. methods: {
  98. // 滚动事件
  99. scrollPage($event) {
  100. this.activeMenu = $event
  101. uni.$emit('handlerChangeLink', $event)
  102. uni.navigateBack({ delta: 1 })
  103. },
  104. // init
  105. handlerInit () {
  106. this.$refs['login-menu'].activeMenu = 'item6'
  107. this.$refs['login-menu'].isActive = 6
  108. },
  109. handlerTabs ($event) {
  110. this.params.type = $event.id
  111. this.params.pageNum = 1
  112. this.dataList = []
  113. this.getSupplierLanding(this.params.type)
  114. },
  115. async getSupplierLanding(active) {
  116. try {
  117. const { data } = await this.UserService.supplierMoreList(this.params)
  118. this.dataList = [...this.dataList, ...data.list]
  119. } catch (error) {
  120. console.log(error)
  121. }
  122. },
  123. // 视频播放
  124. playVideo($event) {
  125. this.videoObj = $event
  126. this.showVideo = true
  127. },
  128. // 视频关闭
  129. closeVideo() {
  130. this.showVideo = false
  131. },
  132. }
  133. }
  134. </script>
  135. <style scoped lang="scss">
  136. .more {
  137. .more-bg {
  138. padding-top: 110rpx;
  139. height: 360rpx;
  140. image {
  141. width: 100%;
  142. height: 100%;
  143. }
  144. }
  145. .container {
  146. padding: 70rpx 33rpx;
  147. box-sizing: border-box;
  148. .tabs {
  149. padding-bottom: 30rpx;
  150. align-items: center;
  151. display: flex;
  152. box-sizing: border-box;
  153. .tab {
  154. color: #666666;
  155. font-size: 32rpx;
  156. margin-right: 56rpx;
  157. &.active {
  158. color: #333333;
  159. font-weight: bold;
  160. border-bottom: 3rpx solid #FF5B00;
  161. }
  162. }
  163. }
  164. .growth-module-list {
  165. display: grid;
  166. grid-template-columns: repeat(2, 1fr);
  167. grid-gap: 20rpx;
  168. }
  169. }
  170. }
  171. </style>