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