why_in_h5/pages/category/index.vue

<template>
  <view class="container">
    <!-- 搜索框 -->
    <search class="search" tips="搜索商品" @event="$navTo('pages/search/index')" />
	
	  <view class="secondary">
		<!-- 二级分类 20 -->
		<view class="cate-content">
		  <!-- 左侧 一级分类 -->
		  <scroll-view class="cate-left" scroll-y="true">
			<text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in menus" :key="index"
			  @click="handleSelectNav(index)">{{ item.name }}</text>
		  </scroll-view>
		  <!-- 右侧 二级分类 -->
		  <scroll-view class="cate-right" scroll-top="true" scroll-y="true" >

			<view v-if="list" 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" @click="onTargetGoodsList(item.category_id)">
					<view class="cate-img-padding">
					  <view v-if="item.goods_image" class="cate-img">
						<image class="image" mode="scaleToFill" :src="item.goods_image"></image>
					  </view>
					</view>
					<text class="name oneline-hide">{{ item.goods_name }}</text>
				  </view>
				</view>
			  </view>
			</view>
		  </scroll-view>
		</view>
		<empty v-if="!list.length" />
	  </view>

  </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 * as GoodsApi from '@/api/goods'
  import Empty from '@/components/empty'
  import Search from '@/components/search'
  import Secondary from './components/secondary'
  
  
  // 左侧菜单(固定)
  const menus = [
    { id: 'all', name: '全部标的数据', icon: 'qpdingdan' },
    { id: 'rs', name: '文化资源数据', icon: 'daifukuan', count: 0 },
    { id: 'rd', name: '文化数字内容', icon: 'daifahuo', count: 0 },
  ]
  
  //分页大小
  let limit=24;

  // 最后一次刷新时间
  let lastRefreshTime;

  export default {
    components: {
      Search,
      Empty,
      Secondary,
    },
    mixins: [MescrollCompMixin],
    data() {
      return {
        // 枚举类
        PageCategoryStyleEnum,
        // 分类列表
        list: [],
        // 分类模板设置
        setting: {},
        // 正在加载中
        isLoading: true,
		// 一级分类：指针
		curIndex: 0,
		//默认显示第一页
		page:1,
		// 菜单
		menus,
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    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()

      },

      // 获取页面数据
      getPageData() {
        const app = this
        app.isLoading = true
        Promise.all([
            // 获取分类模板设置
            // 优化建议: 可以将此处的false改为true 启用缓存
            // SettingModel.data(false),
            // 获取分类列表
            // CategoryApi.list()
			this.getAllGoods()
          ])
          .then(result => {
            // 初始化分类模板设置
            // app.initSetting(result[0])
            // 初始化分类列表数据
            // app.initCategory(result[1])
			// 
          })
          .finally(() => app.isLoading = false)
      },



      // 一级分类：选中分类
      handleSelectNav(index) {
        this.curIndex = index
        this.scrollTop = 0
		
		// 加载对应的数据
      },
	  
	  // 展示所有的数据
	  getAllGoods(){
		let rd={"goods_status":1,"page":this.page,"limit":limit}
		this.bindData(rd)
	  },
	  
	  // 查询分类 获取列表
	  getCatList(type){
		  if(type>0){
			  let rd={"record_type":type,"goods_status":1,"page":this.page,"limit":limit}
			  this.bindData(rd)
		  }else{
			  this.getAllGoods()
		  }

	  },
	  
	  // 绑定数据
	  bindData(rd){
		  GoodsApi.soglist(rd).then(res=>{
			this.list = res.data.data
			this.page=res.data.current_page
		  });
	  },


    },



  }
</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: 19;
  }
  
  //
  .secondary{
	  z-index: 6;
	  border-top: 1rpx solid #444;
	  height: 100vh;
  }
  
  // 分类内容
  .cate-content {
    display: flex;
    z-index: 1;
    background: #fff;
    padding-top: 96rpx;
	height: 100%;
  }
  
  // 一级分类+二级分类 20
  .cate-left {
    height: 100%;
    display: flex;
    flex-direction: column; 
    flex: 0 0 26%;
    background: #f8f8f8;
    color: #444;
	margin-right: 22rpx;
  }
  
  .cate-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  
    .cate-right-cont {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      padding-top: 15rpx;
  
      .cate-two-box {
        width: 100%;
        padding: 0 10px;
      }
    }
  }
  
  // 左侧一级分类
  .type-nav {
    position: relative;
    height: 90rpx;
    z-index: 10;
    display: block;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  
    &.selected {
      background: #fff;
      color: #fa2209;
      border-right: none;
      font-size: 28rpx;
    }
  }
  
  // 右侧二级分类
  .cate-cont-box {
    margin-bottom: 30rpx;
    padding-bottom: 10rpx;
    background: #fff;
    overflow: hidden;
  
    .name {
      display: block;
      padding-bottom: 30rpx;
      text-align: center;
      font-size: 26rpx;
      color: #444444;
    }

    .cate-img-padding {
      padding: 16rpx 16rpx 4rpx 16rpx;
    }
	
	.cate-img {
	  position: relative;
	  width: 100%;
	  padding-top: 100%;
	
	  .image {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    border-radius: 10rpx;
	  }
	}
  
  }
</style>