home.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <view class="container home clearfix" :style="{paddingTop:CustomBar+'px'}">
  3. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5" />
  4. <customer ref="customer" :isScroll="isScroll" :navbar-data="nvabarData" :navBarsList="navBarsList" v-if="isNavRequest" />
  5. <!-- 主页内容 -->
  6. <view class="container-home tui-skeleton">
  7. <!-- 轮播 -->
  8. <banner :list="bannerImageList" v-if="isNavRequest" />
  9. <!-- 金刚区菜单 -->
  10. <navbars :list="shortcutList" v-if="isNavRequest" />
  11. <!-- 直播 -->
  12. <page-special :templateData="templateData" v-if="isLiveRequest" />
  13. <!-- 新品橱窗 -->
  14. <hot-floor :list="hotListPageFloor" :usserIdentity="userIdentity" v-if="isRequest" />
  15. </view>
  16. <!-- 楼层 -->
  17. <view class="container-section tui-skeleton" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }">
  18. <page-floor :list="pageList" :userIdentity="userIdentity" :pageType='1' v-if="isRequest" />
  19. <supplier-list :supplierObj="supplierObj" v-if="isRequest" />
  20. </view>
  21. <!-- 活动弹窗 -->
  22. <activityAlert :show="isActivity" @click="handleClick" @cancel="handleCancelClick" />
  23. <!-- 侧边 -->
  24. <scroll-top :isScrollTop="isScrollTop" :isShowSupplier="true" :isShowKefu='false' :bottom="130" />
  25. </view>
  26. </template>
  27. <script>
  28. import authorize from '@/common/config/authorize.js'
  29. import customer from './homeIndex/customer.vue'
  30. import banner from './homeIndex/banner.vue'
  31. import navbars from './homeIndex/navbars.vue'
  32. import hotFloor from './homeIndex/hotFloor.vue'
  33. import pageFloor from './homeIndex/pageFloor.vue'
  34. import pageSpecial from './homeIndex/pageSpecial.vue'
  35. import supplierList from './homeIndex/supplierList.vue'
  36. import { mapState,mapMutations} from 'vuex'
  37. export default {
  38. components:{
  39. customer,
  40. banner,
  41. navbars,
  42. hotFloor,
  43. pageFloor,
  44. pageSpecial,
  45. supplierList
  46. },
  47. data() {
  48. return {
  49. nvabarData: {
  50. // 顶部自定义导航
  51. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  52. showSearch: 0,
  53. title: '采美采购商城', // 导航栏 中间的标题
  54. haveBack: false,
  55. textLeft: this.$store.state.isIphone,
  56. textColor: '#333333'
  57. },
  58. isIphoneX: this.$store.state.isIphone,
  59. CustomBar:this.CustomBar,// 顶部导航栏高度
  60. userID:0,
  61. clubStatus:'',
  62. current:0,
  63. mode:'round',
  64. modallayer:false,
  65. isLogin:false,
  66. skeletonShow: true,
  67. userIdentity:'',
  68. flootData:[],//楼层
  69. bannerImageList:[],//轮播
  70. navBarsList:[],//导航分类
  71. newsList:[], // 公告
  72. templateData:{},
  73. hotListPageFloor:[], // 新品橱窗
  74. pageList:[],//楼层
  75. supplierObj:{},//供应商列表
  76. isScrollTop:false,
  77. isRequest:false,
  78. isNavRequest:false,
  79. isLiveRequest:false,
  80. shortcutList: [], // 快捷运营
  81. isScroll: false
  82. }
  83. },
  84. created() {
  85. this.$api.getStorage().then((resolve) =>{
  86. this.userID = resolve.userId ? resolve.userId : 0
  87. this.userIdentity = resolve.userIdentity
  88. this.getHomeInformation()
  89. })
  90. },
  91. filters: {
  92. NumFormat:function(text) {//处理金额
  93. return Number(text).toFixed(2)
  94. },
  95. },
  96. computed: {
  97. ...mapState(['hasLogin','userInfo','isActivity'])
  98. },
  99. methods: {
  100. ...mapMutations(['login','logout']),
  101. GetHomeTopDataInfo(){//直播、活动、文章模块
  102. this.CommonService.GetHomeTopDataInfo({source:2}).then(response =>{
  103. this.templateData = response.data
  104. this.isLiveRequest = true
  105. }).catch(error =>{
  106. this.$util.msg(error.msg,2000)
  107. })
  108. },
  109. GetHomeFloorInfo(){//初始化首页楼层数据
  110. this.CommonService.GetHomeDataInfo({userId:this.userID,source:2}).then(response =>{
  111. let data = response.data
  112. this.pageList = data.homePageFloor
  113. this.hotListPageFloor = data.pageFloorList
  114. console.log('hotListPageFloor',this.hotListPageFloor)
  115. this.supplierObj = data.supplierImage
  116. this.isRequest = true
  117. }).catch(error =>{
  118. this.$util.msg(error.msg,2000)
  119. })
  120. },
  121. getHomeInformation(){//初始化首页数据
  122. this.CommonService.GetHomeModulesDataInfo({ source: 2 }).then(res =>{
  123. let data = res.data
  124. this.bannerImageList = data.bannerList
  125. this.mallPageModules = data.mallPageModules
  126. this.skeletonShow = false
  127. this.navBarsList = data.topMenuList
  128. this.newsList = data.annlist
  129. this.shortcutList = data.shortcutList || [] // 快捷运营
  130. this.isNavRequest = true
  131. this.GetHomeTopDataInfo()
  132. this.GetHomeFloorInfo()
  133. }).catch(error =>{
  134. this.$util.msg(error.msg,2000)
  135. })
  136. },
  137. handleClick(data){
  138. this.$api.navigateTo('/pages/h5/activity/meobohui')
  139. this.$store.commit('setActivity',data)
  140. },
  141. handleCancelClick(data){
  142. this.$store.commit('setActivity',data)
  143. }
  144. },
  145. onPageScroll(e){//实时获取到滚动的值
  146. if (e.scrollTop > 0) {
  147. this.isScroll = true
  148. } else {
  149. this.isScroll = false
  150. }
  151. if(e.scrollTop>50){
  152. this.inputActive = 'fixed'
  153. }else{
  154. this.inputActive = 'float'
  155. }
  156. if(e.scrollTop>400){
  157. this.isScrollTop = true
  158. }else{
  159. this.isScrollTop = false
  160. }
  161. },
  162. onPullDownRefresh() {//下拉刷新
  163. this.getHomeInformation()
  164. uni.stopPullDownRefresh()
  165. },
  166. onShareAppMessage(res){//分享转发
  167. if (res.from === 'button') {
  168. // 来自页面内转发按钮
  169. }
  170. return {
  171. title: '生美医美正品采购服务平台',
  172. path: 'pages/tabBar/home/index',
  173. imageUrl:'https://static.caimei365.com/app/img/bg/min-banner.jpg'
  174. }
  175. }
  176. }
  177. </script>
  178. <style lang="scss">
  179. .home{
  180. background-color: #FFFFFF;
  181. }
  182. .container-section{
  183. width: 100%;
  184. height: auto;
  185. background-color: #F7F7F7;
  186. }
  187. </style>