home.vue 5.1 KB

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