You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
393 lines
9.6 KiB
393 lines
9.6 KiB
<template>
|
|
<view class="container">
|
|
<view class="secondary">
|
|
<!-- 搜索 -->
|
|
<view class="search">
|
|
<view class="search-wrapper">
|
|
<view class="index-search">
|
|
<view class="index-cont-search t-c">
|
|
<text class="search-icon iconfont icon-search"></text>
|
|
<text class="search-text">
|
|
<input type="text" placeholder="请输入搜索关键字" v-model="searchValue">
|
|
</text>
|
|
<button class="search-text-bu" @click="onSearch">搜索</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 二级分类 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-time" v-if="list.contextTitle">发布时间：{{list.contextCreationTime}}</view>
|
|
<view class="cate-cont-context">
|
|
<rich-text :nodes="list.context" @click.stop="previewImage"></rich-text>
|
|
</view>
|
|
<q-previewImage ref="previewImage" :urls="imgList"></q-previewImage>
|
|
</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'
|
|
import readmore from 'utils/json/readmore.json'
|
|
// 以下路径需根据项目实际情况填写
|
|
import {pathToBase64,base64ToPath} from '@/js_sdk/mmmm-image-tools/index.js'
|
|
|
|
//分页大小
|
|
let limit=4;
|
|
|
|
// 最后一次刷新时间
|
|
let lastRefreshTime;
|
|
|
|
export default {
|
|
components: {
|
|
Empty,
|
|
Secondary,
|
|
},
|
|
mixins: [MescrollCompMixin],
|
|
data() {
|
|
return {
|
|
// 枚举类
|
|
PageCategoryStyleEnum,
|
|
// 分类列表
|
|
informationList: [],
|
|
// 分类列表
|
|
// list: [],
|
|
list: readmore.data,
|
|
// 分类模板设置
|
|
setting: {},
|
|
// 正在加载中
|
|
isLoading: true,
|
|
// 一级分类：指针
|
|
curIndex: 0,
|
|
//默认显示第一页
|
|
page:1,
|
|
// 列表高度
|
|
scrollHeight: 0,
|
|
// 内容区竖向滚动条位置
|
|
scrollTop: 0,
|
|
// 分类id
|
|
contextId: '',
|
|
// 图片列表
|
|
imgList:[]
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
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: {
|
|
// 搜索
|
|
async onSearch() {
|
|
if (this.searchValue == '') {
|
|
this.$error('请输入搜索关键词');
|
|
} else {
|
|
await this.getGoodsList()
|
|
await this.getHomeListImage()
|
|
}
|
|
},
|
|
previewImage(){
|
|
// 富文本全部内容
|
|
let richText = this.list.context
|
|
// 获取 img 标签数组
|
|
let tagsImage = richText.match(/<img[^>]+>/g)
|
|
let base64Arr = []
|
|
for (let i = 0; i < tagsImage.length; i++) {
|
|
tagsImage[i].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
|
|
base64Arr.push(capture)
|
|
})
|
|
}
|
|
// 数组倒序 从第一张开始预览
|
|
// base64Arr = base64Arr.reverse()
|
|
// console.log(base64Arr)
|
|
// 串行,base64转换成临时url
|
|
base64Arr.reduce((promise, path) => promise.then(res => base64ToPath(path).then(base64 => (res.push(base64), res))), Promise.resolve([])).then(res => {
|
|
// 临时url
|
|
this.imgList = res
|
|
this.$nextTick(()=>{
|
|
this.$refs.previewImage.open(res); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
|
|
})
|
|
})
|
|
.catch(error => {
|
|
console.error(error)
|
|
})
|
|
},
|
|
// 设置列表内容的高度
|
|
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: 100%;
|
|
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;
|
|
font-size: 30rpx;
|
|
// background-color: #a8a8a8;
|
|
text-align: center;
|
|
}
|
|
.cate-cont-time{
|
|
text-align: center;
|
|
margin-top: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 左侧一级分类
|
|
.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;
|
|
}
|
|
|
|
// 搜索
|
|
.search {
|
|
position: fixed;
|
|
float: top;
|
|
top: var(--window-top);
|
|
left: var(--window-left);
|
|
right: var(--window-right);
|
|
z-index: 19;
|
|
|
|
.search-wrapper {
|
|
background: #1c223b;
|
|
padding: 0rpx 20rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.index-search {
|
|
border-bottom: 0;
|
|
background: #fff;
|
|
border-radius: 50rpx;
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
color: #6d6d6d;
|
|
box-sizing: border-box;
|
|
height: 74rpx;
|
|
line-height: 74rpx;
|
|
|
|
.index-cont-search {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
background: #f7f7f7;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.search-icon {
|
|
font-size: 34rpx;
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
.search-text {
|
|
text-align: left;
|
|
float: left;
|
|
margin-left: 20rpx;
|
|
width: 100%;
|
|
|
|
input {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
.search-text-bu {
|
|
margin-right: 20rpx;
|
|
color: #ffffff;
|
|
background-color: #1c223b;
|
|
font-size: 20rpx;
|
|
width: 120rpx;
|
|
height: 50rpx;
|
|
text-align: center;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|