联调分类页面

api/works.js

@@ -2,6 +2,10 @@ import {
   request
 } from "../utils/request";
 module.exports = {
+  // 获取作品类目
+  getCategoryList: data => request('/v3/column', 'get', data),
+  // 获取作品二级类目内容
+  getCategoryWorks: data => request('/v3/column/opus', 'get', data),
   // 获取优秀作品展播列表
   getHotrecommendList: data => request('/userRead/recommend', 'get', data),
   // 发布作品

mixins/video.js

@@ -47,7 +47,6 @@ module.exports = Behavior({
     },
     // 重置音频
     resetAudio() {
-      console.log('触发重置');
       if (this.innerAudioContext) {
         this.innerAudioContext.stop();
       }

pages/childClassify/index.js

@@ -1,13 +1,15 @@
-// pages/childClassify/index.js
+import {
+  getCategoryWorks
+} from '~/api/works'
+import reachBottom from '~/mixins/reachBottom'
 Page({
-  /**
-   * 页面的初始数据
-   */
+  behaviors: [reachBottom],
   data: {
     // class为二级,search为搜索
     type: 'class',
+    categoryList: [],
     childType: '',
-    currentClass: 0,
+    currentIndex: 0,
     scrollTop: 0,
     text: '',
   },
@@ -15,9 +17,35 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    let title = '分类'
+    console.log(options);
+    // 没有二级分类
+    if (options.id) {
+      this.setData({
+        childType: options.id
+      })
+      title = options.title
+      this.resetData()
+    } else if (options.list) {
+      let categoryList = JSON.parse(decodeURIComponent(options.list))
+      this.setData({
+        categoryList
+      })
+      title = this.data.categoryList[this.data.currentIndex].title
+      this.resetData()
+    }
+    wx.setNavigationBarTitle({
+      title
+    })
     this.setData({
       type: options.type,
-      childType: options.id
+    })
+  },
+  // 获取分类的内容
+  loadMore() {
+    let columnId = this.data.childType ? this.data.childType : this.data.categoryList[this.data.currentIndex].id
+    this.getData(getCategoryWorks, {
+      columnId
     })
   },
   setClass({
@@ -25,8 +53,12 @@ Page({
   }) {
     this.setData({
       scrollTop: 0,
-      currentClass: currentTarget.dataset.id
+      currentIndex: currentTarget.dataset.index
+    })
+    wx.setNavigationBarTitle({
+      title: this.data.categoryList[this.data.currentIndex].title
     })
+    this.resetData()
   },
   setSearch({
     detail
@@ -47,6 +79,6 @@ Page({
     })
   },
   bindscrolltolower() {
-    console.log("到底了");
+    this.loadMore()
   },
 })

pages/childClassify/index.less

@@ -105,6 +105,7 @@
             .playImg {
               width: 34rpx;
               height: 28rpx;
+              margin-right: 6rpx;
             }
 
             .num {

pages/childClassify/index.wxml

@@ -1,28 +1,30 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
 <view class="classBox">
-  <scroll-view class="classify" scroll-x="true" enhanced show-scrollbar="{{false}}" wx:if="{{type=='class'}}">
-    <view class="name {{currentClass==index?'currentClass':''}}" wx:for="{{6}}" wx:key="index" data-id="{{index}}"
-      bindtap="setClass">
-      书香美文
+  <scroll-view class="classify" scroll-x="true" enhanced show-scrollbar="{{false}}"
+    wx:if="{{type=='class'&&!childType}}">
+    <view class="name {{currentIndex==index?'currentClass':''}}" wx:for="{{categoryList}}" wx:key="id"
+      data-index="{{index}}" bindtap="setClass">
+      {{item.title}}
     </view>
   </scroll-view>
-  <view class="searchBox" wx:else>
+  <view class="searchBox" wx:if="{{type=='search'}}">
     <input class="input" placeholder="请输入搜索内容" bindblur="setSearch" />
     <view class="searchBtn" catchtap="search">
       <image src="/static/search.png" class="img" />
     </view>
   </view>
   <!-- 内容区域 -->
-  <scroll-view class="worksList" scroll-y="true" enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
-    bindscrolltolower='bindscrolltolower'>
-    <view class="worksBox" wx:for="{{16}}" wx:key="index">
+  <scroll-view class="worksList" style="{{childType?'padding-top:10rpx':''}}" scroll-y="true" enhanced
+    show-scrollbar="{{false}}" scroll-top="{{scrollTop}}" bindscrolltolower='bindscrolltolower'>
+    <view class="worksBox" wx:for="{{list}}" wx:key="id">
       <view class="left">
-        <image src="https://yfklxt-image.ai160.com/reader/20211012/1634004843742426.jpg" class="cover" />
+        <image src="{{item.coverImg}}" class="cover" />
         <view class="work">
-          <view class="title">狼来了</view>
+          <view class="title">{{item.title}}</view>
           <view class="statistics">
             <view class="statistic">
               <image src="/static/play.png" class="playImg" mode="" />
-              <view class="num">1234</view>
+              <view class="num">{{filters.numFilter(item.playAmount)|| 0}}</view>
             </view>
           </view>
         </view>

pages/childClassify/index.wxss

@@ -96,6 +96,7 @@
 .classBox .worksList .worksBox .left .work .statistic .playImg {
   width: 34rpx;
   height: 28rpx;
+  margin-right: 6rpx;
 }
 .classBox .worksList .worksBox .left .work .statistic .num {
   font-size: 26rpx;

pages/index/index.js

@@ -1,6 +1,7 @@
 const app = getApp()
 import {
-  getHotrecommendList
+  getHotrecommendList,
+  getCategoryList
 } from "~/api/works"
 import reachBottom from '~/mixins/reachBottom'
 import share from '~/mixins/share'
@@ -20,7 +21,8 @@ Page({
     background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
     currentType: '1',
     // 控制一级分类是否固定
-    isFixed: false
+    isFixed: false,
+    categoryList: []
   },
   /**
    * 生命周期函数--监听页面加载
@@ -34,6 +36,7 @@ Page({
     getApp().callBack = (res) => {
       this.getLocUserInfo()
       this.resetData()
+      this.getCategoryList()
     }
     let uid = wx.getStorageSync('uid')
     /*  if (uid) {
@@ -69,9 +72,13 @@ Page({
       })
     }
   },
-  jumpChildClassify() {
+  jumpChildClassify({
+    currentTarget
+  }) {
+    let firstInfo = currentTarget.dataset.item
+    let params = firstInfo.childList.length > 0 ? `list=${encodeURIComponent(JSON.stringify(firstInfo.childList))}` : `id=${firstInfo.id}`
     wx.navigateTo({
-      url: `/pages/childClassify/index?type=class&id=123`,
+      url: `/pages/childClassify/index?type=class&title=${firstInfo.title}&${params}`,
     })
   },
   jumpSearch() {
@@ -96,6 +103,16 @@ Page({
   onReachBottom() {
     this.loadMore()
   },
+  async getCategoryList() {
+    let grade = this.data.userInfo.grade
+    let categoryList = await getCategoryList({
+      grade
+    })
+    console.log(categoryList);
+    this.setData({
+      categoryList
+    })
+  },
   selectType({
     target
   }) {

pages/index/index.wxml

@@ -6,9 +6,9 @@
   <view class="scrollBox {{isFixed?'isFixed':''}}" style="top:{{navBarHeight}}px;">
     <!-- 一级分类区域 -->
     <scroll-view class="firstClassify" scroll-x="true" enhanced show-scrollbar="{{false}}">
-      <view class="firstBox" wx:for="{{10}}" wx:key="index" bindtap="jumpChildClassify">
-        <image class="icon" src="/static/header.png" mode="" />
-        <view class="name">书香美文</view>
+      <view class="firstBox" wx:for="{{categoryList}}" wx:key="id" data-item='{{item}}' bindtap="jumpChildClassify">
+        <image class="icon" src="{{item.icon}}" />
+        <view class="name">{{item.title}}</view>
       </view>
     </scroll-view>
     <!-- 展示类型选择 -->