453530270@qq.com
3 years ago
3 changed files with 207 additions and 17 deletions
@ -0,0 +1,165 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 搜索框 --> |
|||
<search class="search" tips="搜索商品" @event="$navTo('pages/search/index')" /> |
|||
|
|||
<!-- 一级分类 --> |
|||
<primary v-if="setting.style == PageCategoryStyleEnum.ONE_LEVEL_BIG.value || setting.style == PageCategoryStyleEnum.ONE_LEVEL_SMALL.value" |
|||
:display="setting.style" :list="list" /> |
|||
|
|||
<!-- 二级分类 --> |
|||
<secondary v-if="setting.style == PageCategoryStyleEnum.TWO_LEVEL.value" :list="list" /> |
|||
|
|||
<!-- 分类+商品 --> |
|||
<commodity v-if="setting.style == PageCategoryStyleEnum.COMMODITY.value" ref="mescrollItem" :list="list" :setting="setting" /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp' |
|||
import { setCartTabBadge } from '@/core/app' |
|||
import SettingKeyEnum from '@/common/enum/setting/Key' |
|||
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category' |
|||
import SettingModel from '@/common/model/Setting' |
|||
import * as CategoryApi from '@/api/category' |
|||
import Empty from '@/components/empty' |
|||
import Search from '@/components/search' |
|||
import Primary from './components/primary' |
|||
import Secondary from './components/secondary' |
|||
import Commodity from './components/commodity' |
|||
|
|||
// 最后一次刷新时间 |
|||
let lastRefreshTime; |
|||
|
|||
export default { |
|||
components: { |
|||
Search, |
|||
Empty, |
|||
Primary, |
|||
Secondary, |
|||
Commodity |
|||
}, |
|||
mixins: [MescrollCompMixin], |
|||
data() { |
|||
return { |
|||
// 枚举类 |
|||
PageCategoryStyleEnum, |
|||
// 分类列表 |
|||
list: [], |
|||
// 分类模板设置 |
|||
setting: {}, |
|||
// 正在加载中 |
|||
isLoading: true |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad() { |
|||
// 加载页面数据 |
|||
this.onRefreshPage() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
// 每间隔5分钟自动刷新一次页面数据 |
|||
const curTime = new Date().getTime() |
|||
if ((curTime - lastRefreshTime) > 5 * 60 * 1000) { |
|||
this.onRefreshPage() |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
// 刷新页面 |
|||
onRefreshPage() { |
|||
// 记录刷新时间 |
|||
lastRefreshTime = new Date().getTime() |
|||
// 获取页面数据 |
|||
this.getPageData() |
|||
// 更新购物车角标 |
|||
setCartTabBadge() |
|||
}, |
|||
|
|||
// 获取页面数据 |
|||
getPageData() { |
|||
const app = this |
|||
app.isLoading = true |
|||
Promise.all([ |
|||
// 获取分类模板设置 |
|||
// 优化建议: 可以将此处的false改为true 启用缓存 |
|||
SettingModel.data(false), |
|||
// 获取分类列表 |
|||
CategoryApi.list() |
|||
]) |
|||
.then(result => { |
|||
// 初始化分类模板设置 |
|||
app.initSetting(result[0]) |
|||
// 初始化分类列表数据 |
|||
app.initCategory(result[1]) |
|||
}) |
|||
.finally(() => app.isLoading = false) |
|||
}, |
|||
|
|||
/** |
|||
* 初始化分类模板设置 |
|||
* @param {Object} result |
|||
*/ |
|||
initSetting(setting) { |
|||
this.setting = setting[SettingKeyEnum.PAGE_CATEGORY_TEMPLATE.value] |
|||
}, |
|||
|
|||
/** |
|||
* 初始化分类列表数据 |
|||
* @param {Object} result |
|||
*/ |
|||
initCategory(result) { |
|||
this.list = result.data.list |
|||
}, |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 设置分享内容 |
|||
*/ |
|||
onShareAppMessage() { |
|||
const app = this |
|||
return { |
|||
title: _this.templet.shareTitle, |
|||
path: '/pages/category/index?' + app.$getShareUrlParams() |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 分享到朋友圈 |
|||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta) |
|||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html |
|||
*/ |
|||
onShareTimeline() { |
|||
const app = this |
|||
return { |
|||
title: _this.templet.shareTitle, |
|||
path: '/pages/category/index?' + app.$getShareUrlParams() |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
// 搜索框 |
|||
.search { |
|||
position: fixed; |
|||
top: var(--window-top); |
|||
left: var(--window-left); |
|||
right: var(--window-right); |
|||
z-index: 9; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue