home.vue 5.4 KB

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