home.vue 5.5 KB

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