why_in_h5/pages/category/consulting/detail.vue

<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>