home.vue 5.4 KB

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