index.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <view class="container">
  3. <!-- 搜索框 -->
  4. <search class="search" tips="搜索商品" @event="$navTo('pages/search/index')" />
  5. <!-- 一级分类 -->
  6. <primary v-if="setting.style == PageCategoryStyleEnum.ONE_LEVEL_BIG.value || setting.style == PageCategoryStyleEnum.ONE_LEVEL_SMALL.value"
  7. :display="setting.style" :list="list" />
  8. <!-- 二级分类 -->
  9. <secondary v-if="setting.style == PageCategoryStyleEnum.TWO_LEVEL.value" :list="list" />
  10. <!-- 分类+商品 -->
  11. <commodity v-if="setting.style == PageCategoryStyleEnum.COMMODITY.value" ref="mescrollItem" :list="list" :setting="setting" />
  12. </view>
  13. </template>
  14. <script>
  15. import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp'
  16. import { setCartTabBadge } from '@/core/app'
  17. import SettingKeyEnum from '@/common/enum/setting/Key'
  18. import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
  19. import SettingModel from '@/common/model/Setting'
  20. import * as CategoryApi from '@/api/category'
  21. import Empty from '@/components/empty'
  22. import Search from '@/components/search'
  23. import Primary from './components/primary'
  24. import Secondary from './components/secondary'
  25. import Commodity from './components/commodity'
  26. import { cateList, Setting } from '@/common/mock.js'
  27. // 最后一次刷新时间
  28. let lastRefreshTime;
  29. export default {
  30. components: {
  31. Search,
  32. Empty,
  33. Primary,
  34. Secondary,
  35. Commodity
  36. },
  37. mixins: [MescrollCompMixin],
  38. data() {
  39. return {
  40. // 枚举类
  41. PageCategoryStyleEnum,
  42. // 分类列表
  43. list: [],
  44. // 分类模板设置
  45. setting: {},
  46. // 正在加载中
  47. isLoading: true
  48. }
  49. },
  50. /**
  51. * 生命周期函数--监听页面加载
  52. */
  53. onLoad() {
  54. // 加载页面数据
  55. this.onRefreshPage()
  56. },
  57. /**
  58. * 生命周期函数--监听页面显示
  59. */
  60. onShow() {
  61. // 每间隔5分钟自动刷新一次页面数据
  62. const curTime = new Date().getTime()
  63. if ((curTime - lastRefreshTime) > 5 * 60 * 1000) {
  64. this.onRefreshPage()
  65. }
  66. },
  67. methods: {
  68. // 刷新页面
  69. onRefreshPage() {
  70. // 记录刷新时间
  71. lastRefreshTime = new Date().getTime()
  72. // 获取页面数据
  73. this.getPageData()
  74. // 更新购物车角标
  75. setCartTabBadge()
  76. },
  77. // 获取页面数据
  78. getPageData() {
  79. const app = this
  80. app.isLoading = true
  81. Promise.all([
  82. // 获取分类模板设置
  83. // 优化建议: 可以将此处的false改为true 启用缓存
  84. SettingModel.data(false),
  85. // 获取分类列表
  86. CategoryApi.list()
  87. ])
  88. .then(result => {
  89. // 初始化分类模板设置
  90. app.initSetting(result[0])
  91. // 初始化分类列表数据
  92. app.initCategory(result[1])
  93. })
  94. .finally(() => app.isLoading = false)
  95. },
  96. /**
  97. * 初始化分类模板设置
  98. * @param {Object} result
  99. */
  100. initSetting(setting) {
  101. this.setting = setting[SettingKeyEnum.PAGE_CATEGORY_TEMPLATE.value]
  102. },
  103. /**
  104. * 初始化分类列表数据
  105. * @param {Object} result
  106. */
  107. initCategory(result) {
  108. this.list = result.data.list
  109. },
  110. },
  111. /**
  112. * 设置分享内容
  113. */
  114. onShareAppMessage() {
  115. const app = this
  116. return {
  117. title: _this.templet.shareTitle,
  118. path: '/pages/category/index?' + app.$getShareUrlParams()
  119. }
  120. },
  121. /**
  122. * 分享到朋友圈
  123. * 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta)
  124. * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
  125. */
  126. onShareTimeline() {
  127. const app = this
  128. return {
  129. title: _this.templet.shareTitle,
  130. path: '/pages/category/index?' + app.$getShareUrlParams()
  131. }
  132. }
  133. }
  134. </script>
  135. <style>
  136. page {
  137. background: #fff;
  138. }
  139. </style>
  140. <style lang="scss" scoped>
  141. // 搜索框
  142. .search {
  143. position: fixed;
  144. top: var(--window-top);
  145. left: var(--window-left);
  146. right: var(--window-right);
  147. z-index: 9;
  148. }
  149. </style>