index.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <template>
  2. <view class="container home clearfix" :style="{ paddingTop: CustomBar + 'px' }">
  3. <customer ref="customer" :navbar-data="nvabarData"></customer>
  4. <!-- 主页内容 -->
  5. <tui-skeleton
  6. v-if="skeletonShow"
  7. backgroundColor="#fafafa"
  8. borderRadius="10rpx"
  9. :isLoading="true"
  10. :loadingType="5"
  11. ></tui-skeleton>
  12. <view class="container-home tui-skeleton">
  13. <!-- 轮播 -->
  14. <banner :list="bannerImageList" v-if="isNavRequest"></banner>
  15. <!-- 金刚区菜单 -->
  16. <navbars :list="navBarsList" v-if="isNavRequest"></navbars>
  17. <!-- 轮播公告 -->
  18. <notice :list="newsList" v-if="isNavRequest && newsList.length > 0"></notice>
  19. <!-- 优惠券入口 -->
  20. <coupon v-if="isNavRequest && couponEntry == 1"></coupon>
  21. <!-- 直播 -->
  22. <page-special :templateData="templateData" v-if="isLiveRequest"></page-special>
  23. <!-- 新品橱窗 -->
  24. <hot-floor
  25. :list="hotListPageFloor"
  26. :usserIdentity="userIdentity"
  27. :autoplay="autoplay"
  28. v-if="isRequest && hotListPageFloor.length > 0"
  29. ></hot-floor>
  30. </view>
  31. <!-- 楼层 -->
  32. <view class="container-section tui-skeleton">
  33. <page-floor :list="pageList" :userIdentity="userIdentity" :pageType="1" v-if="isRequest"></page-floor>
  34. <supplier-list :supplierObj="supplierObj" v-if="isRequest"></supplier-list>
  35. </view>
  36. <!-- 资质证书 -->
  37. <Certificate v-if="isRequest"></Certificate>
  38. <!-- 侧边 -->
  39. <scroll-top :isScrollTop="isScrollTop" :bottom="50"></scroll-top>
  40. <!-- 活动弹窗 -->
  41. <activityAlert :show="isActivity" @click="handleClick" @cancel="handleCancelClick"></activityAlert>
  42. <!-- 采美豆提示弹窗 -->
  43. <activityBean
  44. v-if="isActivityBean"
  45. :show="isActivityBean"
  46. :beansType="beansType"
  47. :beanNumber="beanNumber"
  48. @cancel="handleBeanlClick"
  49. ></activityBean>
  50. </view>
  51. </template>
  52. <script>
  53. import authorize from '@/common/config/authorize.js'
  54. import customer from '@/components/cm-module/homeIndex/customer.vue'
  55. import banner from '@/components/cm-module/homeIndex/banner.vue'
  56. import navbars from '@/components/cm-module/homeIndex/navbars.vue'
  57. import notice from '@/components/cm-module/homeIndex/notice.vue'
  58. import coupon from '@/components/cm-module/homeIndex/coupon.vue'
  59. import pageFloor from '@/components/cm-module/homeIndex/pageFloor.vue'
  60. import hotFloor from '@/components/cm-module/homeIndex/hotFloor.vue'
  61. import Certificate from '@/components/cm-module/homeIndex/certificate.vue'
  62. import pageSpecial from '@/components/cm-module/homeIndex/pageSpecial.vue'
  63. import supplierList from '@/components/cm-module/homeIndex/supplierList.vue'
  64. import activityAlert from '@/components/cm-module/activity/activity.vue'
  65. import activityBean from '@/components/cm-module/activity/activityBean.vue'
  66. import { mapState, mapMutations } from 'vuex'
  67. export default {
  68. components: {
  69. customer,
  70. banner,
  71. navbars,
  72. notice,
  73. coupon,
  74. pageFloor,
  75. hotFloor,
  76. Certificate,
  77. pageSpecial,
  78. supplierList,
  79. activityAlert,
  80. activityBean
  81. },
  82. data() {
  83. return {
  84. nvabarData: {
  85. // 顶部自定义导航
  86. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  87. showSearch: 0,
  88. title: '采美采购商城', // 导航栏 中间的标题
  89. haveBack: false,
  90. textLeft: this.$store.state.isIphone,
  91. textColor: '#FFFFFF'
  92. },
  93. CustomBar: this.CustomBar, // 顶部导航栏高度
  94. userID: 0,
  95. clubId: 0,
  96. clubStatus: '',
  97. current: 0,
  98. mode: 'round',
  99. modallayer: false,
  100. isLogin: false,
  101. skeletonShow: true,
  102. userIdentity: 0,
  103. flootData: [], // 楼层
  104. bannerImageList: [], // 轮播
  105. navBarsList: [], // 导航分类
  106. newsList: [], // 公告
  107. templateData: {},
  108. hotListPageFloor: [], // 新品橱窗
  109. pageList: [], // 楼层
  110. supplierObj: {}, // 供应商列表
  111. isScrollTop: false,
  112. isRequest: false,
  113. isNavRequest: false,
  114. isLiveRequest: false,
  115. isActivityBean: false,
  116. beansType: 1,
  117. beanNumber: 50,
  118. couponEntry: 2,
  119. autoplay: true
  120. }
  121. },
  122. onLoad() {},
  123. computed: {
  124. ...mapState(['hasLogin', 'userInfo', 'identity', 'isActivity', 'isWxAuthorize'])
  125. },
  126. methods: {
  127. ...mapMutations(['login', 'logout','updateNoticeNum']),
  128. async GetWxAuthorize() {
  129. const wechatCode = await authorize.getCode('weixin') // 根据微信的code获取用户登录状态:1已登录过 -1未登录过
  130. const getUserInfo = await authorize.getUserInfo('weixin')
  131. this.UserService.UserLoginAuthApplets({
  132. code: wechatCode,
  133. encryptedData: getUserInfo.encryptedData,
  134. iv: getUserInfo.iv
  135. })
  136. .then(response => {
  137. this.isLogin = true
  138. this.userID = response.data.userId
  139. this.clubId = response.data.clubId
  140. this.userIdentity = response.data.userIdentity
  141. this.clubStatus = response.data.clubStatus
  142. this.$store.commit('updateStatus', response.data)
  143. this.login(response.data)
  144. uni.setStorageSync('token', response.data.token)
  145. uni.setStorageSync('unionId', response.data.unionId)
  146. if (response.data.userIdentity == 1) {
  147. this.$api.redirectTo('/pages/seller/index/index')
  148. } else if (response.data.userIdentity === 3) {
  149. this.$api.redirectTo('/pages/supplier/index/index')
  150. }
  151. this.GetInitBeansInfo()
  152. this.getHomeInformation()
  153. })
  154. .catch(error => {
  155. this.isLogin = false
  156. this.logout()
  157. uni.setStorageSync('unionId', error.data.unionId)
  158. this.$store.commit('updateStatus', error.data)
  159. this.getHomeInformation()
  160. })
  161. },
  162. GetHomeTopDataInfo() {
  163. //直播、活动、文章模块
  164. this.CommonService.GetHomeTopDataInfo({ source: 2 })
  165. .then(response => {
  166. this.templateData = response.data
  167. this.isLiveRequest = true
  168. })
  169. .catch(error => {
  170. this.$util.msg(error.msg, 2000)
  171. })
  172. },
  173. GetHomeFloorInfo() {
  174. //初始化首页楼层数据
  175. this.CommonService.GetHomeDataInfo({ userId: this.userID, source: 2 })
  176. .then(response => {
  177. let data = response.data
  178. this.pageList = data.homePageFloor
  179. this.hotListPageFloor = data.pageFloorList
  180. this.supplierObj = data.supplierImage
  181. uni.setStorageSync('pageLabel','首页')
  182. setTimeout(() => {
  183. this.isRequest = true
  184. }, 500)
  185. })
  186. .catch(error => {
  187. this.$util.msg(error.msg, 2000)
  188. })
  189. },
  190. GetInitBeansInfo() {
  191. //初始化采美豆信息
  192. this.UserService.GetHomeObtainBeans({ userId: this.userID })
  193. .then(response => {
  194. this.beansType = response.data.beansType
  195. this.beanNumber = response.data.num
  196. this.isActivityBean = true
  197. })
  198. .catch(error => {
  199. console.log('用户暂无采美豆推送~')
  200. })
  201. },
  202. getHomeInformation() {
  203. //初始化首页数据
  204. this.CommonService.GetHomeModulesDataInfo({ source: 2 })
  205. .then(res => {
  206. let data = res.data
  207. this.bannerImageList = data.bannerList
  208. this.mallPageModules = data.mallPageModules
  209. this.skeletonShow = false
  210. this.navBarsList = data.topMenuList
  211. this.couponEntry = data.couponEntry
  212. this.newsList = data.annlist
  213. if (!this.hasLogin && this.couponEntry == 1) {
  214. if (uni.getStorageSync('isActivitySwitch')) {
  215. this.$store.commit('setActivity', false)
  216. } else {
  217. this.$store.commit('setActivity', true)
  218. }
  219. }
  220. this.GetHomeTopDataInfo()
  221. this.GetHomeFloorInfo()
  222. if (this.hasLogin) {
  223. this.initShoppingCartCount()
  224. this.updateNoticeNum()
  225. }
  226. this.isNavRequest = true
  227. })
  228. .catch(error => {
  229. this.$util.msg(error.msg, 2000)
  230. })
  231. },
  232. initShoppingCartCount() {
  233. // 获取购物车数量
  234. this.OrderService.ShoppingCartCount({ userId: this.userID }).then(res => {
  235. this.$store.commit('updateAllNum', res.data)
  236. })
  237. },
  238. handleClick(data) {
  239. const pageId = 306
  240. this.$api.navigateTo('/pages/user/coupon/coupon-collection')
  241. this.$store.commit('setActivity', data)
  242. uni.setStorageSync('lockTime', Date.now())
  243. uni.setStorageSync('isActivitySwitch', true)
  244. // 友盟自定义事件
  245. // if(process.env.NODE_ENV != 'development'){
  246. // this.$uma.trackEvent('meibohui_click', {
  247. // Um_Key_PageName: '美博会',
  248. // Um_Key_PageCategory: '活动专题页面',
  249. // Um_Key_SourcePage: '首页',
  250. // })
  251. // }
  252. },
  253. handleCancelClick(data) {
  254. this.$store.commit('setActivity', data)
  255. uni.setStorageSync('lockTime', Date.now())
  256. uni.setStorageSync('isActivitySwitch', true)
  257. },
  258. handleBeanlClick() {
  259. this.isActivityBean = false
  260. }
  261. },
  262. onPageScroll(e) {
  263. //实时获取到滚动的值
  264. if (e.scrollTop > 50) {
  265. this.inputActive = 'fixed'
  266. } else {
  267. this.inputActive = 'float'
  268. }
  269. if (e.scrollTop > 400) {
  270. this.isScrollTop = true
  271. } else {
  272. this.isScrollTop = false
  273. }
  274. },
  275. onPullDownRefresh() {
  276. //下拉刷新
  277. this.getHomeInformation()
  278. uni.stopPullDownRefresh()
  279. },
  280. onShareAppMessage(res) {
  281. //分享转发
  282. if (res.from === 'button') {
  283. // 来自页面内转发按钮
  284. }
  285. return {
  286. title: '生美医美正品采购服务平台',
  287. path: 'pages/tabBar/home/index',
  288. imageUrl: 'https://static.caimei365.com/app/img/bg/min-banner.jpg'
  289. }
  290. },
  291. onShow() {
  292. this.modallayer = false
  293. this.autoplay = true
  294. this.GetWxAuthorize()
  295. },
  296. onHide() {
  297. this.autoplay = false
  298. }
  299. }
  300. </script>
  301. <style lang="scss">
  302. page {
  303. background-color: #ffffff;
  304. }
  305. .container-section {
  306. width: 100%;
  307. height: auto;
  308. background-color: #f7f7f7;
  309. }
  310. </style>