wanghongjun
2 years ago
6 changed files with 875 additions and 160 deletions
@ -0,0 +1,269 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="secondary"> |
|||
<!-- 二级分类 20 --> |
|||
<view class="cate-content"> |
|||
<!-- 左侧 一级分类 --> |
|||
<scroll-view class="cate-left" scroll-y="true"> |
|||
<view class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in informationList" :key="index" |
|||
@click="handleSelectNav(index,item.consultingId)"> |
|||
<image class="cate-left-image" :src="'./static/tabbar/recommend-cate.png'"></image> |
|||
<text class="cate-left-text">{{ item.consultingName }}</text> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- 右侧 二级分类 --> |
|||
<scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }"> |
|||
<view v-if="list" class="cate-right-cont"> |
|||
<view class="cate-two-box"> |
|||
<view class="cate-cont-box"> |
|||
<view class="flex-three"> |
|||
<view class="cate-cont"> |
|||
<view class="cate-cont-title"> |
|||
<text v-if="list.contextTitle">{{list.contextTitle}}</text> |
|||
<text v-else>无标题信息</text> |
|||
</view> |
|||
<view class="cate-cont-context"> |
|||
<rich-text :nodes="list.context"></rich-text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 空白提示 --> |
|||
<view v-else class="cate-right-cont"> |
|||
<view class="empty-content"> |
|||
<view class="empty-icon"> |
|||
<image class="image" src="/static/empty.png" mode="widthFix"></image> |
|||
</view> |
|||
<view class="tips">暂无数据</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp' |
|||
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category' |
|||
import * as CategoryApi from '@/api/category' |
|||
import Empty from '@/components/empty' |
|||
import Secondary from './../components/secondary' |
|||
import { rpx2px,base64ToUint8Array} from '@/utils/util' |
|||
|
|||
//分页大小 |
|||
let limit=4; |
|||
|
|||
// 最后一次刷新时间 |
|||
let lastRefreshTime; |
|||
|
|||
export default { |
|||
components: { |
|||
Empty, |
|||
Secondary, |
|||
}, |
|||
mixins: [MescrollCompMixin], |
|||
data() { |
|||
return { |
|||
// 枚举类 |
|||
PageCategoryStyleEnum, |
|||
// 分类列表 |
|||
informationList: [], |
|||
// 分类列表 |
|||
list: [], |
|||
// 分类模板设置 |
|||
setting: {}, |
|||
// 正在加载中 |
|||
isLoading: true, |
|||
// 一级分类：指针 |
|||
curIndex: 0, |
|||
//默认显示第一页 |
|||
page:1, |
|||
// 列表高度 |
|||
scrollHeight: 0, |
|||
// 内容区竖向滚动条位置 |
|||
scrollTop: 0, |
|||
// 分类id |
|||
contextId: '', |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
this.contextId = options.contextId |
|||
this.curIndex = options.curIndex ? options.curIndex : 0 |
|||
// 加载页面数据 |
|||
this.onRefreshPage() |
|||
this.getConsultingContextSelection() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
// 每间隔5分钟自动刷新一次页面数据 |
|||
const curTime = new Date().getTime() |
|||
if ((curTime - lastRefreshTime) > 5 * 60 * 1000) { |
|||
this.onRefreshPage() |
|||
} |
|||
}, |
|||
created() { |
|||
// 设置分类列表高度 |
|||
this.setListHeight() |
|||
}, |
|||
methods: { |
|||
// 设置列表内容的高度 |
|||
setListHeight() { |
|||
const { windowHeight } = uni.getSystemInfoSync() |
|||
this.scrollHeight = windowHeight - rpx2px(96) |
|||
}, |
|||
// 刷新页面 |
|||
onRefreshPage() { |
|||
// 记录刷新时间 |
|||
lastRefreshTime = new Date().getTime() |
|||
//加载分类数据 |
|||
this.getCatList() |
|||
}, |
|||
// 一级分类：选中分类 |
|||
handleSelectNav(curIndex, consultingId) { |
|||
this.$navTo('pages/category/consulting/list', { consultingId,curIndex }) |
|||
}, |
|||
// 查询分类 获取列表 |
|||
getCatList(){ |
|||
const app = this |
|||
CategoryApi.consultingContextInfo(app.contextId).then(res => { |
|||
if (res.resultCode === '00000000') { |
|||
app.list = res.data |
|||
} |
|||
}) |
|||
}, |
|||
// 资讯中心 |
|||
getConsultingContextSelection() { |
|||
const app = this |
|||
CategoryApi.consultingContextSelection().then(res=>{ |
|||
if (res.resultCode == '00000000') { |
|||
app.informationList = res.data |
|||
} else { |
|||
app.$error('获取资讯信息失败') |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background: #fff; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
.secondary{ |
|||
z-index: 19; |
|||
height: 100vh; |
|||
} |
|||
|
|||
// 分类内容 |
|||
.cate-content { |
|||
display: flex; |
|||
z-index: 1; |
|||
background: #fff; |
|||
padding-top: 6rpx; |
|||
height: 100%; |
|||
} |
|||
|
|||
// 一级分类+二级分类 20 |
|||
.cate-left { |
|||
// height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 0 0 26%; |
|||
background: #f8f8f8; |
|||
color: #444; |
|||
margin-right: 22rpx; |
|||
} |
|||
|
|||
// 资讯中心内容 |
|||
.flex-three { |
|||
float: left; |
|||
width: 100%; |
|||
|
|||
.cate-cont { |
|||
width: 96%; |
|||
height: 100%; |
|||
padding: 16rpx; |
|||
margin-top: 20rpx; |
|||
margin-right: 60rpx; |
|||
color: #8e908e; |
|||
background-color: #f7f7f7; |
|||
display: block; |
|||
position: relative; |
|||
|
|||
.cate-cont-context img { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin-top: 20rpx; |
|||
} |
|||
.cate-cont-title { |
|||
width: 100%; |
|||
border-radius: 10rpx; |
|||
padding: 0rpx 20rpx 0rpx 20rpx; |
|||
color: #0b0b0b; |
|||
background-color: #a8a8a8; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 左侧一级分类 |
|||
.type-nav { |
|||
position: relative; |
|||
height: 180rpx; |
|||
z-index: 10; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
|
|||
&.selected { |
|||
background: #fff; |
|||
color: #cec7bf; |
|||
border-right: none; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.cate-left-image{ |
|||
position: absolute; |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 10rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.cate-left-text{ |
|||
position: absolute; |
|||
margin-top: 80rpx; |
|||
} |
|||
} |
|||
|
|||
// 右侧二级分类 |
|||
.cate-cont-box { |
|||
margin-bottom: 30rpx; |
|||
padding-bottom: 10rpx; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,344 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="secondary"> |
|||
<!-- 二级分类 20 --> |
|||
<view class="cate-content"> |
|||
<!-- 左侧 一级分类 --> |
|||
<scroll-view class="cate-left" scroll-y="true"> |
|||
<view class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in informationList" :key="index" |
|||
@click="handleSelectNav(index,item.consultingId)"> |
|||
<image class="cate-left-image" :src="'./static/tabbar/recommend-cate.png'"></image> |
|||
<text class="cate-left-text">{{ item.consultingName }}</text> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- 右侧 二级分类 --> |
|||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback"> |
|||
<scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }"> |
|||
<view v-if="list.length>0" class="cate-right-cont"> |
|||
<view class="cate-two-box"> |
|||
<view class="cate-cont-box"> |
|||
<view class="flex-three" v-for="(item, idx) in list" :key="idx" > |
|||
<view class="cate-cont"> |
|||
<view class="cate-title"> |
|||
<text class="cate-title-label">标题名称：</text> |
|||
{{item.contextTitle}} |
|||
</view> |
|||
<view class="cate-date"> |
|||
<text class="cate-title-label">发布时间：</text> |
|||
{{item.contextCreationTime}} |
|||
</view> |
|||
<view class="cate-bt"> |
|||
<button @click="onConsulting(item.contextId,curIndex)">阅读全文</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 空白提示 --> |
|||
<view v-else class="cate-right-cont"> |
|||
<view class="empty-content"> |
|||
<view class="empty-icon"> |
|||
<image class="image" src="/static/empty.png" mode="widthFix"></image> |
|||
</view> |
|||
<view class="tips">暂无数据</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
</mescroll-body> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
|||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
|||
import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp' |
|||
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category' |
|||
import * as CategoryApi from '@/api/category' |
|||
import Empty from '@/components/empty' |
|||
import Secondary from './../components/secondary' |
|||
import { rpx2px,base64ToUint8Array} from '@/utils/util' |
|||
|
|||
//分页大小 |
|||
let pageSize = 10 |
|||
|
|||
// 最后一次刷新时间 |
|||
let lastRefreshTime; |
|||
|
|||
export default { |
|||
components: { |
|||
Empty, |
|||
Secondary, |
|||
// 滚动标签 |
|||
MescrollBody |
|||
}, |
|||
mixins: [MescrollCompMixin,MescrollMixin], |
|||
data() { |
|||
return { |
|||
// 枚举类 |
|||
PageCategoryStyleEnum, |
|||
// 分类列表 |
|||
informationList: [], |
|||
// 分类列表 |
|||
list: [], |
|||
// 分类模板设置 |
|||
setting: {}, |
|||
// 正在加载中 |
|||
isLoading: true, |
|||
// 一级分类：指针 |
|||
curIndex: 0, |
|||
// 列表高度 |
|||
scrollHeight: 0, |
|||
// 内容区竖向滚动条位置 |
|||
scrollTop: 0, |
|||
// 分类id |
|||
consultingId: '', |
|||
// 上拉加载配置 |
|||
upOption: { |
|||
// 首次自动执行 |
|||
auto: true, |
|||
// 每页数据的数量; 默认10 |
|||
page: { size: pageSize }, |
|||
// 数量要大于4条才显示无更多数据 |
|||
noMoreSize: 4, |
|||
// 空布局 |
|||
empty: { |
|||
tip: '暂无记录' |
|||
} |
|||
}, |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
this.consultingId = options.consultingId |
|||
this.curIndex = options.curIndex ? options.curIndex : 0 |
|||
// 加载页面数据 |
|||
this.onRefreshPage() |
|||
this.getConsultingContextSelection() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
// 每间隔5分钟自动刷新一次页面数据 |
|||
const curTime = new Date().getTime() |
|||
if ((curTime - lastRefreshTime) > 5 * 60 * 1000) { |
|||
this.onRefreshPage() |
|||
} |
|||
}, |
|||
created() { |
|||
// 设置分类列表高度 |
|||
this.setListHeight() |
|||
}, |
|||
methods: { |
|||
// 设置列表内容的高度 |
|||
setListHeight() { |
|||
const { windowHeight } = uni.getSystemInfoSync() |
|||
this.scrollHeight = windowHeight - rpx2px(96) |
|||
}, |
|||
// 刷新页面 |
|||
onRefreshPage() { |
|||
// 记录刷新时间 |
|||
lastRefreshTime = new Date().getTime() |
|||
// 获取页面数据 |
|||
this.getPageData() |
|||
//加载分类数据 |
|||
this.getCatList() |
|||
}, |
|||
// 获取页面数据 |
|||
getPageData() { |
|||
const app = this |
|||
app.isLoading = true |
|||
Promise.all([]).then(result => {}).finally(() => app.isLoading = false) |
|||
}, |
|||
// 一级分类：选中分类 |
|||
handleSelectNav(index,consultingId) { |
|||
this.curIndex = index |
|||
this.scrollTop = 0 |
|||
this.consultingId = consultingId |
|||
this.getCatList() |
|||
}, |
|||
/** |
|||
* 上拉加载的回调 (页面初始化时也会执行一次) |
|||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 |
|||
* @param {Object} page |
|||
*/ |
|||
upCallback(page) { |
|||
const app = this |
|||
// 设置列表数据 |
|||
app.getCatList(page.num).then(list => { |
|||
const curPageLen = list.length |
|||
const totalSize = list.total |
|||
app.mescroll.endBySize(curPageLen, totalSize) |
|||
}) |
|||
.catch(() => app.mescroll.endErr()) |
|||
}, |
|||
// 查询分类 获取列表 |
|||
getCatList(pageIndex = 1){ |
|||
const app = this |
|||
let param = { |
|||
pageIndex : pageIndex, |
|||
pageRows : pageSize, |
|||
contextConsultingId : app.consultingId |
|||
} |
|||
return new Promise((resolve, reject) => { |
|||
CategoryApi.consultingContextList(param).then(res => { |
|||
if (res.resultCode === '00000000') { |
|||
let newList = res.data.pageDataList; |
|||
app.list = CategoryApi.getMoreListData(newList, app.list, pageIndex) |
|||
resolve(newList) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
// 阅读全文 |
|||
onConsulting(contextId,curIndex){ |
|||
this.$navTo('pages/category/consulting/detail', { contextId,curIndex}) |
|||
}, |
|||
// 资讯中心 |
|||
getConsultingContextSelection() { |
|||
const app = this |
|||
CategoryApi.consultingContextSelection().then(res=>{ |
|||
if (res.resultCode == '00000000') { |
|||
app.informationList = res.data |
|||
} else { |
|||
app.$error('获取资讯信息失败') |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background: #fff; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
.secondary{ |
|||
z-index: 19; |
|||
height: 100vh; |
|||
} |
|||
|
|||
// 分类内容 |
|||
.cate-content { |
|||
display: flex; |
|||
z-index: 1; |
|||
background: #fff; |
|||
padding-top: 6rpx; |
|||
height: 100%; |
|||
} |
|||
|
|||
// 一级分类+二级分类 20 |
|||
.cate-left { |
|||
// height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 0 0 26%; |
|||
background: #f8f8f8; |
|||
color: #444; |
|||
margin-right: 22rpx; |
|||
} |
|||
|
|||
// 资讯中心内容 |
|||
.flex-three { |
|||
float: left; |
|||
width: 100%; |
|||
|
|||
.cate-cont { |
|||
width: 96%; |
|||
height: 300rpx; |
|||
padding: 16rpx; |
|||
margin-top: 20rpx; |
|||
margin-right: 60rpx; |
|||
color: #8e908e; |
|||
background-color: #f7f7f7; |
|||
display: block; |
|||
position: relative; |
|||
|
|||
.cate-title { |
|||
margin-right: 20rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
.cate-title-label { |
|||
color: #0b0b0b; |
|||
font-weight: bold; |
|||
} |
|||
.cate-date { |
|||
position: absolute; |
|||
top: 200rpx; |
|||
} |
|||
.cate-bt { |
|||
position: absolute; |
|||
top: 240rpx; |
|||
left: 385rpx; |
|||
width: 110rpx; |
|||
height: 50rpx; |
|||
border-radius: 5rpx; |
|||
border: 1rpx #8e908e solid; |
|||
background-color: #fff; |
|||
|
|||
button { |
|||
padding-right: 0rpx; |
|||
padding-left: 0rpx; |
|||
font-size: 19rpx; |
|||
color: #8e908e; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 左侧一级分类 |
|||
.type-nav { |
|||
position: relative; |
|||
height: 180rpx; |
|||
z-index: 10; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
|
|||
&.selected { |
|||
background: #fff; |
|||
color: #cec7bf; |
|||
border-right: none; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.cate-left-image{ |
|||
position: absolute; |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 10rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.cate-left-text{ |
|||
position: absolute; |
|||
margin-top: 80rpx; |
|||
} |
|||
} |
|||
|
|||
// 右侧二级分类 |
|||
.cate-cont-box { |
|||
margin-bottom: 30rpx; |
|||
padding-bottom: 10rpx; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue