diff --git a/package.json b/package.json
index 991afe3..46b4526 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@vant/weapp": "^1.11.6",
     "dayjs": "^1.11.13",
     "miniprogram-licia": "^1.39.2",
+    "mp-html": "^2.5.0",
     "typescript": "^5.3.3"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b489a8..876ed99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       miniprogram-licia:
         specifier: ^1.39.2
         version: 1.43.0
+      mp-html:
+        specifier: ^2.5.0
+        version: 2.5.0
       typescript:
         specifier: ^5.3.3
         version: 5.6.3
@@ -1084,6 +1087,9 @@ packages:
   mlly@1.7.2:
     resolution: {integrity: sha512-tN3dvVHYVz4DhSXinXIk7u9syPYaJvio118uomkovAtWBT+RdbP6Lfh/5Lvo519YMmwBafwlh20IPTXIStscpA==}
 
+  mp-html@2.5.0:
+    resolution: {integrity: sha512-uvBH5tIaDIlj8qaxsvNXU3RKX0jvXOo3J6FAi/notUv/ds6j79UUTE82aDkxxUk0eLUU0CiCqMrR7WWnytk30Q==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -2752,6 +2758,8 @@ snapshots:
       pkg-types: 1.2.1
       ufo: 1.5.4
 
+  mp-html@2.5.0: {}
+
   ms@2.1.3: {}
 
   nanoid@3.3.7: {}
diff --git a/project.private.config.json b/project.private.config.json
index 15688d0..7e84be8 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -9,6 +9,13 @@
     "miniprogram": {
       "list": [
         {
+          "name": "文章详情",
+          "pathName": "pages/article/index",
+          "query": "id=1",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "个人信息",
           "pathName": "pages/userInfo/index",
           "query": "",
@@ -30,13 +37,6 @@
           "scene": null
         },
         {
-          "name": "文章详情",
-          "pathName": "pages/article/index",
-          "query": "",
-          "launchMode": "default",
-          "scene": null
-        },
-        {
           "name": "分类列表",
           "pathName": "pages/classify/index",
           "query": "",
diff --git a/src/app.ts b/src/app.ts
index c84fdd6..739f54b 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -21,7 +21,7 @@ App<IAppOption>({
     // appid:wx2b0bb13edf717c1d
     url: 'https://m.shizhong.hbraas.com',
     upFileUrl: 'https://m.shizhong.hbraas.com/',
-    imageUrl: 'https://m.shizhong.hbraas.com/shizhong/',
+    imageUrl: 'https://m.shizhong.hbraas.com/api/shizhong/',
     // pro
     // appid:wx1e025040096c7e1d
     // url: 'https://m.shizhong.hbsaas.com',
@@ -67,10 +67,10 @@ App<IAppOption>({
   },
   waitLogin(waitLoginState = false, requireLogin = false) {
     let time: number;
-    const { isLogin } = this.globalData;
     return new Promise((resolve) => {
       time = setInterval(() => {
-        if (this.globalData.loginState) {
+        const { isLogin, loginState } = this.globalData;
+        if (loginState) {
           clearInterval(time);
           if (waitLoginState) {
             resolve(true);
diff --git a/src/images/none.png b/src/images/none.png
new file mode 100644
index 0000000..e0c650f
Binary files /dev/null and b/src/images/none.png differ
diff --git a/src/pages/article/index.json b/src/pages/article/index.json
index b37fe4a..f28c64e 100644
--- a/src/pages/article/index.json
+++ b/src/pages/article/index.json
@@ -3,6 +3,7 @@
   "navigationBarTitleText": "详情",
   "usingComponents": {
     "van-slider": "@vant/weapp/slider/index",
-    "van-popup": "@vant/weapp/popup/index"
+    "van-popup": "@vant/weapp/popup/index",
+    "mp-html": "mp-html"
   }
 }
diff --git a/src/pages/article/index.ts b/src/pages/article/index.ts
index 89a3fd7..a3be5c5 100644
--- a/src/pages/article/index.ts
+++ b/src/pages/article/index.ts
@@ -1,33 +1,142 @@
-const _app = getApp<IAppOption>();
+const app = getApp<IAppOption>();
 
 Page({
   data: {
     show: false,
+    BookId: '',
+    ChapterId: '',
+    chapterList: [],
+
+    book: {} as any,
+    chapter: {} as any,
+    prevAndNext: {} as any,
 
     progress: 0,
     url: 'http://m10.music.126.net/20241126110303/3f2481d2d6d50acd2009359539eadda0/ymusic/5353/0f0f/0358/d99739615f8e5153d77042092f07fd77.mp3',
     play: false,
-    time: '00:01/00:00',
+    time: '00:00/00:00',
   },
   innerAudioContext: null as WechatMiniprogram.InnerAudioContext | null,
-  onLoad() {
+  onLoad(options) {
     this.innerAudioContext = wx.createInnerAudioContext();
+    this.setData({
+      BookId: options.id,
+    });
+    app.waitLogin().then(() => {
+      this.getChapterList();
+      this.getDetail();
+    });
   },
   onUnload() {
     if (this.innerAudioContext) {
       this.innerAudioContext?.stop();
-      this.innerAudioContext.destroy();
+      this.innerAudioContext?.destroy();
     }
   },
+  getChapterList() {
+    wx.ajax({
+      method: 'GET',
+      url: '?r=shizhong/book/chapter-list',
+      data: {
+        BookId: this.data.BookId,
+      },
+    }).then((res) => {
+      this.setData({
+        chapterList: res.list,
+      });
+    });
+  },
+  getDetail() {
+    wx.ajax({
+      method: 'GET',
+      url: '?r=shizhong/book/detail',
+      data: {
+        BookId: this.data.BookId,
+        ChapterId: this.data.ChapterId,
+      },
+    }).then((res) => {
+      this.setData({
+        book: {
+          ...res.book,
+          PublishDate: res.book.PublishTime.split(' ')[0],
+        },
+        chapter: res.chapter,
+        prevAndNext: {
+          prev: Array.isArray(res.prevAndNext.prev) ? null : res.prevAndNext.prev,
+          next: Array.isArray(res.prevAndNext.next) ? null : res.prevAndNext.next,
+        },
+        ChapterId: res.chapter.Id,
+      });
+      if (res.chapter.AudioUrl?.url) {
+        const time = `00:00/${this.formatTime(res.chapter.AudioUrl.duration)}`;
+        this.setData({
+          time,
+        });
+      }
+    });
+  },
+  handleDirectory() {
+    this.setData({
+      show: true,
+    });
+  },
+  handleSwitchDirectory(e) {
+    const { id } = e.currentTarget.dataset;
+    this.setData({
+      ChapterId: id,
+    });
+    this.getDetail();
+    this.onClose();
+    this.handlePause();
+  },
+  onClose() {
+    this.setData({
+      show: false,
+    });
+  },
+
+  handleCollect() {
+    const { Id } = this.data.book;
+    wx.ajax({
+      method: 'POST',
+      url: '?r=shizhong/book/collect',
+      data: { BookId: Id },
+    }).then(() => {
+      wx.showToast({
+        title: '收藏成功',
+        icon: 'none',
+      });
+      this.setData({
+        [`book.IsCollect`]: 1,
+      });
+    });
+  },
+  handleUnCollect() {
+    const { Id } = this.data.book;
+    wx.ajax({
+      method: 'POST',
+      url: '?r=shizhong/book/cancel-collect',
+      data: { BookId: Id },
+    }).then(() => {
+      wx.showToast({
+        title: '取消收藏',
+        icon: 'none',
+      });
+      this.setData({
+        [`book.IsCollect`]: 0,
+      });
+    });
+  },
+
   handlePlay() {
-    const { url, play } = this.data;
+    const { chapter, play } = this.data;
     if (this.innerAudioContext) {
       if (play) {
         this.innerAudioContext.stop();
         return;
       }
       this.innerAudioContext.stop();
-      this.innerAudioContext.src = url;
+      this.innerAudioContext.src = chapter.AudioUrl.url;
       this.innerAudioContext.play();
       this.setData({
         play: true,
@@ -69,11 +178,6 @@ Page({
     const seconds = Math.floor(time % 60);
     return `${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
   },
-  onClose() {
-    this.setData({
-      show: false,
-    });
-  },
 });
 
 export {};
diff --git a/src/pages/article/index.wxml b/src/pages/article/index.wxml
index d0334b3..e6d8d52 100644
--- a/src/pages/article/index.wxml
+++ b/src/pages/article/index.wxml
@@ -1,7 +1,7 @@
 <view class="page">
-  <view class="page-title">身体活动引用的指南与专家共识</view>
-  <view class="page-date">2024/05/21</view>
-  <view class="audio-bar">
+  <view class="page-title">{{chapter.ChapterName}}</view>
+  <view class="page-date">{{book.PublishDate}}</view>
+  <view class="audio-bar" wx:if="{{chapter.AudioUrl}}">
     <view class="a-header">
       <view class="wrap">
         <view class="name">概要解读</view>
@@ -22,52 +22,71 @@
       use-button-slot
     />
   </view>
-  <view class="rich"></view>
-  <view class="quick-article">
+  <view class="rich">
+    <mp-html content="{{chapter.Content}}"></mp-html>
+  </view>
+  <view
+    class="quick-article"
+    wx:if="{{prevAndNext.prev}}"
+    bind:tap="handleSwitchDirectory"
+    data-id="{{prevAndNext.prev.Id}}"
+  >
     <text class="label">上一篇：</text>
-    身体活动引用的政策与文献
+    {{prevAndNext.prev.ChapterName}}
   </view>
-  <view class="quick-article">
+  <view
+    class="quick-article"
+    wx:if="{{prevAndNext.next}}"
+    bind:tap="handleSwitchDirectory"
+    data-id="{{prevAndNext.next.Id}}"
+  >
     <text class="label">下一篇：</text>
-    身体活动引用的政策与文献
+    {{prevAndNext.next.ChapterName}}
   </view>
-  <view class="type">
+  <view class="type" wx:if="{{chapter.CateName}}">
     <view class="label">分类</view>
-    <view class="item">健康生活方式</view>
+    <view class="item">{{chapter.CateName}}</view>
   </view>
 
   <view class="footer">
-    <view class="item">
+    <view class="item" bind:tap="handleDirectory">
       <image class="icon" src="/images/icon-directory.png"></image>
       目录
     </view>
-    <view class="item">
-      <image class="icon" src="/images/icon-collection1.png"></image>
-      目录
+    <view class="item" wx:if="{{book.IsCollect===1}}" bind:tap="handleUnCollect">
+      <image class="icon" src="/images/icon-collection-active.png"></image>
+      取消收藏
+    </view>
+    <view class="item" wx:else bind:tap="handleCollect">
+      <image class="icon" src="/images/icon-collection.png"></image>
+      收藏
     </view>
   </view>
 </view>
 
 <van-popup show="{{ show }}" round position="bottom" bind:close="onClose">
   <view class="popup-directory">
-    <view class="p-close-line">
+    <view class="p-close-line" bind:tap="onClose">
       <view class="option">
         收起
         <image class="icon" src="/images/fold-up.png"></image>
       </view>
     </view>
-    <view class="p-title">身体活动引用的指南与专家共识</view>
-    <view class="p-type">
+    <view class="p-title">{{book.BookName}}</view>
+    <view class="p-type" wx:if="{{chapter.CateName}}">
       <view class="label">分类</view>
-      <view class="item">健康生活方式</view>
+      <view class="item">{{chapter.CateName}}</view>
     </view>
     <view class="p-scroll">
-      <view class="row current">1.身体活动引用的政策与文献</view>
-      <view class="row">1.身体活动引用的政策与文献</view>
-      <view class="row">1.身体活动引用的政策与文献</view>
-      <view class="row">1.身体活动引用的政策与文献</view>
-      <view class="row">1.身体活动引用的政策与文献</view>
-      <view class="row">1.身体活动引用的政策与文献</view>
+      <view
+        class="row {{ChapterId === item.Id && 'current'}}"
+        wx:for="{{chapterList}}"
+        wx:key="Id"
+        bind:tap="handleSwitchDirectory"
+        data-id="{{item.Id}}"
+      >
+        {{item.ChapterName}}
+      </view>
     </view>
   </view>
 </van-popup>
diff --git a/src/pages/classify/index.scss b/src/pages/classify/index.scss
index d6f09ad..67c5421 100644
--- a/src/pages/classify/index.scss
+++ b/src/pages/classify/index.scss
@@ -27,7 +27,7 @@ page {
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
-          content: "";
+          content: '';
           width: 44rpx;
           height: 8rpx;
           background: #3795f7;
@@ -37,7 +37,7 @@ page {
     }
   }
   .types {
-    padding: 32rpx;
+    padding: 32rpx 32rpx 0;
     display: flex;
     gap: 16rpx;
     flex-wrap: wrap;
@@ -51,10 +51,14 @@ page {
       background-color: #fff;
       border-radius: 8rpx;
       text-align: center;
+      &.active {
+        color: #fff;
+        background-color: #3795f7;
+      }
     }
   }
   .card {
-    margin: 0 32rpx 24rpx;
+    margin: 32rpx 32rpx 24rpx;
     padding: 24rpx;
     display: flex;
     gap: 24rpx;
@@ -72,6 +76,9 @@ page {
     }
     .c-container {
       flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
       .title {
         font-size: 32rpx;
         color: #222222;
@@ -80,6 +87,7 @@ page {
       }
       .type {
         margin-top: 16rpx;
+        flex: 1;
         font-size: 28rpx;
         color: #999999;
         line-height: 28rpx;
@@ -88,6 +96,7 @@ page {
         margin-top: 42rpx;
         display: flex;
         align-items: center;
+        justify-content: space-between;
         gap: 40rpx;
         .s-item {
           display: flex;
diff --git a/src/pages/classify/index.ts b/src/pages/classify/index.ts
index 65267b1..02483d0 100644
--- a/src/pages/classify/index.ts
+++ b/src/pages/classify/index.ts
@@ -1,45 +1,177 @@
-const _app = getApp<IAppOption>();
+const app = getApp<IAppOption>();
 
 Page({
   data: {
-    background: "transparent",
+    background: 'transparent',
 
+    list: [],
     pagination: {
       page: 1,
       pages: 1,
       count: 1,
     },
-    list: [],
+    recommendList: [],
+    recommendPagination: {
+      page: 1,
+      pages: 1,
+      count: 1,
+    },
+
+    cateList: [] as any,
+    CateId: '',
+    CateSecondId: '',
+    cateSecondList: [] as any,
   },
-  onLoad() {},
-  getList(newPage = 1) {
-    // wx.ajax({
-    //   method: "GET",
-    //   url: `?r=takeda/case/get-list`,
-    //   data: {
-    //     page: newPage,
-    //   },
-    // }).then((res) => {
-    //   const list = res.page === 1 ? res.list : [...this.data.list, ...res.list];
-    //   this.setData({
-    //     list,
-    //     pagination: {
-    //       page: res.page,
-    //       pages: res.pages,
-    //       count: res.count,
-    //     },
-    //   });
-    // });
+  onLoad() {
+    app.waitLogin().then(() => {
+      this.getCateList();
+      this.cateCallback(this.data.CateId, this.data.CateSecondId);
+    });
+  },
+  getCateList() {
+    wx.ajax({
+      method: 'GET',
+      url: '?r=shizhong/book/cate-list',
+      data: {},
+    }).then((res) => {
+      this.setData({
+        cateList: res,
+      });
+    });
+  },
+  handleCate(e) {
+    const { index } = e.currentTarget.dataset;
+    if (typeof index === 'number') {
+      this.setData({
+        CateId: this.data.cateList[index].Id,
+        CateSecondId: '',
+        cateSecondList: this.data.cateList[index].Children,
+      });
+    } else {
+      this.setData({ CateId: '', CateSecondId: '', cateSecondList: [] });
+    }
+    this.cateCallback(this.data.CateId, this.data.CateSecondId);
+  },
+  handleSecondCate(e) {
+    const { index } = e.currentTarget.dataset;
+    if (typeof index === 'number') {
+      this.setData({
+        CateSecondId: this.data.cateSecondList[index].Id,
+      });
+    } else {
+      this.setData({ CateSecondId: '' });
+    }
+    this.cateCallback(this.data.CateId, this.data.CateSecondId);
+  },
+  cateCallback(CateId, CateSecondId) {
+    this.setData({
+      list: [],
+      pagination: {
+        page: 1,
+        pages: 1,
+        count: 1,
+      },
+      recommendList: [],
+      recommendPagination: {
+        page: 1,
+        pages: 1,
+        count: 1,
+      },
+    });
+    this.getList(1, CateId, CateSecondId);
+    if (CateId && CateSecondId) {
+      this.getRecommendList(1, CateId, CateSecondId);
+    }
+  },
+  getList(newPage = 1, CateId, CateSecondId) {
+    wx.ajax({
+      method: 'GET',
+      url: `?r=shizhong/book/list`,
+      data: {
+        page: newPage,
+        CateId,
+        CateSecondId,
+      },
+    }).then((res) => {
+      const list = res.page === 1 ? res.list : [...this.data.list, ...res.list];
+      this.setData({
+        list,
+        pagination: {
+          page: res.page,
+          pages: res.pages,
+          count: res.count,
+        },
+      });
+    });
+  },
+  getRecommendList(newPage = 1, CateId, CateSecondId) {
+    wx.ajax({
+      method: 'GET',
+      url: '?r=shizhong/book/recommend-list',
+      data: {
+        CateId,
+        CateSecondId,
+        page: newPage,
+      },
+    }).then((res) => {
+      const recommendList = res.page === 1 ? res.list : [...this.data.recommendList, ...res.list];
+      this.setData({
+        recommendList,
+        recommendPagination: {
+          page: res.page,
+          pages: res.pages,
+          count: res.count,
+        },
+      });
+    });
   },
   onReachBottom() {
     const { page, pages } = this.data.pagination;
+    const { page: rPage, pages: rPages } = this.data.recommendPagination;
     if (pages > page && this.data.list.length) {
-      this.getList(page + 1);
+      this.getList(page + 1, this.data.CateId, this.data.CateSecondId);
+    } else if (rPages > rPage && this.data.recommendList.length && this.data.CateId && this.data.CateSecondId) {
+      this.getRecommendList(rPage + 1, this.data.CateId, this.data.CateSecondId);
     }
   },
-  handleDetail() {
+  handleCollect(e) {
+    const { index, list } = e.currentTarget.dataset;
+    const { Id } = this.data[list][index];
+    wx.ajax({
+      method: 'POST',
+      url: '?r=shizhong/book/collect',
+      data: { BookId: Id },
+    }).then(() => {
+      wx.showToast({
+        title: '收藏成功',
+        icon: 'none',
+      });
+      this.setData({
+        [`${list}[${index}].IsCollect`]: '1',
+      });
+    });
+  },
+  handleUnCollect(e) {
+    const { index, list } = e.currentTarget.dataset;
+    const { Id } = this.data[list][index];
+    wx.ajax({
+      method: 'POST',
+      url: '?r=shizhong/book/cancel-collect',
+      data: { BookId: Id },
+    }).then(() => {
+      wx.showToast({
+        title: '取消收藏',
+        icon: 'none',
+      });
+      this.setData({
+        [`${list}[${index}].IsCollect`]: '0',
+      });
+    });
+  },
+  handleDetail(e) {
+    const { id } = e.currentTarget.dataset;
     wx.navigateTo({
-      url: "/pages/article/index",
+      url: `/pages/article/index?id=${id}`,
     });
   },
   handleBack() {
diff --git a/src/pages/classify/index.wxml b/src/pages/classify/index.wxml
index e3be432..374af37 100644
--- a/src/pages/classify/index.wxml
+++ b/src/pages/classify/index.wxml
@@ -1,48 +1,84 @@
 <view class="page">
   <view class="nav">
-    <view class="nav-item active">全部</view>
-    <view class="nav-item">引用指南与专家共识</view>
-    <view class="nav-item">引用指南与专家共识</view>
-    <view class="nav-item">引用指南与专家共识</view>
-    <view class="nav-item">引用指南与专家共识</view>
-    <view class="nav-item">引用指南与专家共识</view>
-    <view class="nav-item">引用指南与专家共识</view>
-    <view class="nav-item">引用指南与专家共识</view>
+    <view class="nav-item {{!CateId && 'active'}}" bind:tap="handleCate">全部</view>
+    <view
+      class="nav-item {{CateId=== item.Id &&'active'}}"
+      wx:for="{{cateList}}"
+      wx:key="Id"
+      bind:tap="handleCate"
+      data-index="{{index}}"
+    >
+      {{item.CateName}}
+    </view>
   </view>
-  <view class="types">
-    <view class="type active">全部</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
-    <view class="type">口腔</view>
+  <view class="types" wx:if="{{CateId && cateSecondList.length}}">
+    <view class="type {{!CateSecondId && 'active'}}" bind:tap="handleSecondCate">全部</view>
+    <view
+      class="type {{CateSecondId=== item.Id && 'active'}}"
+      wx:for="{{cateSecondList}}"
+      wx:key="Id"
+      bind:tap="handleSecondCate"
+      data-index="{{index}}"
+    >
+      {{item.CateName}}
+    </view>
   </view>
-  <view class="card" bind:tap="handleDetail">
-    <image class="photo" mode="aspectFill" src="/images/place.png"></image>
+  <view class="card" wx:for="{{list}}" wx:key="Id" data-id="{{item.Id}}" bind:tap="handleDetail">
+    <image class="photo" mode="aspectFill" src="{{item.CoverUrl}}"></image>
     <view class="c-container">
-      <view class="title">骨密度是骨健康的关键指标，我们检查对吗？</view>
-      <view class="type">健康管理/口腔</view>
+      <view class="title">{{item.BookName}}</view>
+      <view class="type">{{item.CateName}}{{item.CateSecondName ? '/'+item.CateSecondName : ''}}</view>
       <view class="stat">
         <view class="s-item">
           <image class="icon" src="/images/icon-eye.png"></image>
-          123
+          {{item.BrowseNum}}
         </view>
-        <view class="s-item active">
+        <view
+          class="s-item active"
+          wx:if="{{item.IsCollect === '1'}}"
+          catch:tap="handleUnCollect"
+          data-index="{{index}}"
+          data-list="list"
+        >
           <image class="icon" src="/images/icon-collection-active.png"></image>
           已收藏
         </view>
-        <view class="s-item">
+        <view class="s-item" wx:else catch:tap="handleCollect" data-index="{{index}}" data-list="list">
           <image class="icon" src="/images/icon-collection.png"></image>
           收藏
         </view>
       </view>
     </view>
   </view>
-  <pagination pagination="{{pagination}}"></pagination>
+  <pagination wx:if="{{!CateId && !CateSecondId}}" pagination="{{pagination}}"></pagination>
+  <block wx:elif="{{pagination.page >= pagination.pages}}">
+    <view class="card" wx:for="{{recommendList}}" wx:key="Id" bind:tap="handleDetail" data-id="{{item.Id}}">
+      <image class="photo" mode="aspectFill" src="{{item.CoverUrl}}"></image>
+      <view class="c-container">
+        <view class="title">{{item.BookName}}</view>
+        <view class="type">{{item.CateName}}{{item.CateSecondName ? '/'+item.CateSecondName : ''}}</view>
+        <view class="stat">
+          <view class="s-item">
+            <image class="icon" src="/images/icon-eye.png"></image>
+            {{item.BrowseNum}}
+          </view>
+          <view
+            class="s-item active"
+            wx:if="{{item.IsCollect === '1'}}"
+            catch:tap="handleUnCollect"
+            data-index="{{index}}"
+            data-list="recommendList"
+          >
+            <image class="icon" src="/images/icon-collection-active.png"></image>
+            已收藏
+          </view>
+          <view class="s-item" wx:else catch:tap="handleCollect" data-index="{{index}}" data-list="recommendList">
+            <image class="icon" src="/images/icon-collection.png"></image>
+            收藏
+          </view>
+        </view>
+      </view>
+    </view>
+    <pagination pagination="{{recommendPagination}}"></pagination>
+  </block>
 </view>
diff --git a/src/pages/collection/index.scss b/src/pages/collection/index.scss
index d370b48..11cb175 100644
--- a/src/pages/collection/index.scss
+++ b/src/pages/collection/index.scss
@@ -19,6 +19,9 @@ page {
     }
     .c-container {
       flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
       .title {
         font-size: 32rpx;
         color: #222222;
@@ -26,6 +29,7 @@ page {
         line-height: 48rpx;
       }
       .type {
+        flex: 1;
         margin-top: 16rpx;
         font-size: 28rpx;
         color: #999999;
@@ -35,6 +39,7 @@ page {
         margin-top: 42rpx;
         display: flex;
         align-items: center;
+        justify-content: space-between;
         gap: 40rpx;
         .s-item {
           display: flex;
diff --git a/src/pages/collection/index.ts b/src/pages/collection/index.ts
index 1e18f4f..6c75785 100644
--- a/src/pages/collection/index.ts
+++ b/src/pages/collection/index.ts
@@ -1,8 +1,8 @@
-const _app = getApp<IAppOption>();
+const app = getApp<IAppOption>();
 
 Page({
   data: {
-    background: "transparent",
+    background: 'transparent',
 
     pagination: {
       page: 1,
@@ -11,25 +11,32 @@ Page({
     },
     list: [],
   },
-  onLoad() {},
+  onLoad() {
+    app.waitLogin().then(() => {
+      this.getList();
+    });
+  },
   getList(newPage = 1) {
-    // wx.ajax({
-    //   method: "GET",
-    //   url: `?r=takeda/case/get-list`,
-    //   data: {
-    //     page: newPage,
-    //   },
-    // }).then((res) => {
-    //   const list = res.page === 1 ? res.list : [...this.data.list, ...res.list];
-    //   this.setData({
-    //     list,
-    //     pagination: {
-    //       page: res.page,
-    //       pages: res.pages,
-    //       count: res.count,
-    //     },
-    //   });
-    // });
+    wx.ajax({
+      method: 'GET',
+      url: `?r=shizhong/book/collect-list`,
+      data: {
+        page: newPage,
+      },
+    }).then((res) => {
+      res.list.forEach((item) => {
+        item.IsCollect = '1';
+      });
+      const list = res.page === 1 ? res.list : [...this.data.list, ...res.list];
+      this.setData({
+        list,
+        pagination: {
+          page: res.page,
+          pages: res.pages,
+          count: res.count,
+        },
+      });
+    });
   },
   onReachBottom() {
     const { page, pages } = this.data.pagination;
@@ -37,6 +44,40 @@ Page({
       this.getList(page + 1);
     }
   },
+  handleCollect(e) {
+    const { index, list } = e.currentTarget.dataset;
+    const { Id } = this.data[list][index];
+    wx.ajax({
+      method: 'POST',
+      url: '?r=shizhong/book/collect',
+      data: { BookId: Id },
+    }).then(() => {
+      wx.showToast({
+        title: '收藏成功',
+        icon: 'none',
+      });
+      this.setData({
+        [`${list}[${index}].IsCollect`]: '1',
+      });
+    });
+  },
+  handleUnCollect(e) {
+    const { index, list } = e.currentTarget.dataset;
+    const { Id } = this.data[list][index];
+    wx.ajax({
+      method: 'POST',
+      url: '?r=shizhong/book/cancel-collect',
+      data: { BookId: Id },
+    }).then(() => {
+      wx.showToast({
+        title: '取消收藏',
+        icon: 'none',
+      });
+      this.setData({
+        [`${list}[${index}].IsCollect`]: '0',
+      });
+    });
+  },
   handleBack() {
     wx.navigateBack();
   },
diff --git a/src/pages/collection/index.wxml b/src/pages/collection/index.wxml
index 30fed97..f65037c 100644
--- a/src/pages/collection/index.wxml
+++ b/src/pages/collection/index.wxml
@@ -9,21 +9,27 @@
 </van-nav-bar>
 
 <view class="page" style="padding-top:{{menuButtonInfo.bottom}}px;">
-  <view class="card">
+  <view class="card" wx:for="{{list}}" wx:key="Id">
     <image class="photo" mode="aspectFill" src="/images/place.png"></image>
     <view class="c-container">
-      <view class="title">骨密度是骨健康的关键指标，我们检查对吗？</view>
-      <view class="type">健康管理/口腔</view>
+      <view class="title">{{item.BookName}}</view>
+      <view class="type">{{item.CateName}}{{item.CateSecondName ? '/'+item.CateSecondName : ''}}</view>
       <view class="stat">
         <view class="s-item">
           <image class="icon" src="/images/icon-eye.png"></image>
-          123
+          {{item.BrowseNum}}
         </view>
-        <view class="s-item active">
+        <view
+          class="s-item active"
+          wx:if="{{item.IsCollect === '1'}}"
+          catch:tap="handleUnCollect"
+          data-index="{{index}}"
+          data-list="list"
+        >
           <image class="icon" src="/images/icon-collection-active.png"></image>
-          取消收藏
+          已收藏
         </view>
-        <view class="s-item">
+        <view class="s-item" wx:else catch:tap="handleCollect" data-index="{{index}}" data-list="list">
           <image class="icon" src="/images/icon-collection.png"></image>
           收藏
         </view>
diff --git a/src/pages/home/index.ts b/src/pages/home/index.ts
index 06ad7e5..11b0103 100644
--- a/src/pages/home/index.ts
+++ b/src/pages/home/index.ts
@@ -1,13 +1,35 @@
 const app = getApp<IAppOption>();
 
 Page({
-  data: {},
+  data: {
+    cateList: [] as any,
+  },
   onLoad() {
-    app.waitLogin().then(() => {});
+    app.waitLogin().then(() => {
+      this.getCateList();
+    });
+  },
+  getCateList() {
+    wx.ajax({
+      method: 'GET',
+      url: '?r=shizhong/book/cate-list',
+      data: {},
+    }).then((res) => {
+      this.setData({
+        cateList: res,
+      });
+    });
+  },
+  handleDetail(e) {
+    const { index } = e.currentTarget.dataset;
+    const item = this.data.cateList[index];
+    wx.navigateTo({
+      url: `/pages/classify/index?id=${item.Id}`,
+    });
   },
-  handleDetail() {
+  handleSearch() {
     wx.navigateTo({
-      url: '/pages/classify/index',
+      url: '/pages/search/index',
     });
   },
 });
diff --git a/src/pages/home/index.wxml b/src/pages/home/index.wxml
index 8edd728..fe2014a 100644
--- a/src/pages/home/index.wxml
+++ b/src/pages/home/index.wxml
@@ -1,14 +1,12 @@
-<view
-  class="page"
-  style="background: url('/images/home-bg.png') no-repeat top center/100% 580rpx;padding-top:{{menuButtonInfo.top}}px;"
->
+<view class="page" style="background: url('/images/home-bg.png') no-repeat top center/100% 580rpx;padding-top:{{menuButtonInfo.top}}px;">
   <image class="logo" src="/images/home-logo.png"></image>
   <image class="page-title" src="/images/home-title.png"></image>
   <view class="page-slogan">人人都是家庭健康师，让生活更有质量</view>
-  <view class="search">
+  <view class="search" bind:tap="handleSearch">
     <image class="icon" src="/images/icon-search.png"></image>
     <input
       type="text"
+      disabled="{{true}}"
       class="input"
       placeholder-class="place-input"
       confirm-type="search"
@@ -16,7 +14,12 @@
       placeholder="请输入要搜索的内容"
     />
   </view>
-  <swiper class="swiper" indicator-dots indicator-color="rgba(255,255,255,0.62)" indicator-active-color="#FFFFFF">
+  <swiper
+    class="swiper"
+    indicator-dots
+    indicator-color="rgba(255,255,255,0.62)"
+    indicator-active-color="#FFFFFF"
+  >
     <swiper-item class="swiper-item">
       <image class="banner" src="/images/place.png"></image>
     </swiper-item>
@@ -24,20 +27,25 @@
   <view class="cards">
     <view
       class="card"
-      wx:for="{{10}}"
+      wx:for="{{cateList}}"
       wx:key="index"
       style="background: url('/images/home-card-bg.png') no-repeat center/100%"
       bind:tap="handleDetail"
+      data-index="{{index}}"
     >
-      <view class="title">公司综合信息</view>
+      <view class="title">{{item.CateName}}</view>
       <view class="content">
-        健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策健康政策三医政策
+        {{item.Intro}}
       </view>
     </view>
   </view>
   <view class="remark">
     <view class="r-header">留言板</view>
-    <textarea class="r-content" placeholder-class="textarea-placeholder" placeholder="欢迎反馈您的问题"></textarea>
+    <textarea
+      class="r-content"
+      placeholder-class="textarea-placeholder"
+      placeholder="欢迎反馈您的问题"
+    ></textarea>
     <view class="submit">提交</view>
   </view>
 </view>
diff --git a/src/pages/search/index.scss b/src/pages/search/index.scss
index afd76ee..3f0598f 100644
--- a/src/pages/search/index.scss
+++ b/src/pages/search/index.scss
@@ -47,35 +47,45 @@ page {
     }
     .c-container {
       flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
       .title {
         font-size: 32rpx;
         color: #222222;
         font-weight: bold;
         line-height: 48rpx;
       }
-      .type {
-        margin-top: 16rpx;
+      .book-name {
+        flex: 1;
+        padding-top: 20rpx;
         font-size: 28rpx;
         color: #999999;
-        line-height: 28rpx;
       }
-      .stat {
-        margin-top: 42rpx;
+      .c-footer {
+        margin-top: 20px;
         display: flex;
         align-items: center;
-        gap: 40rpx;
-        .s-item {
-          display: flex;
-          align-items: center;
-          gap: 8rpx;
+        justify-content: space-between;
+        .type {
           font-size: 28rpx;
           color: #999999;
-          .icon {
-            width: 28rpx;
-            height: 28rpx;
-          }
-          &.active {
-            color: #3795f7;
+          line-height: 28rpx;
+        }
+        .stat {
+          display: flex;
+          align-items: center;
+          gap: 40rpx;
+          .s-item {
+            display: flex;
+            align-items: center;
+            gap: 8rpx;
+            font-size: 28rpx;
+            color: #999999;
+            .icon {
+              width: 28rpx;
+              height: 28rpx;
+            }
           }
         }
       }
diff --git a/src/pages/search/index.ts b/src/pages/search/index.ts
index 1e18f4f..03d4529 100644
--- a/src/pages/search/index.ts
+++ b/src/pages/search/index.ts
@@ -1,35 +1,54 @@
-const _app = getApp<IAppOption>();
+const app = getApp<IAppOption>();
 
 Page({
   data: {
-    background: "transparent",
+    background: 'transparent',
 
+    focus: false,
+    Search: '',
     pagination: {
       page: 1,
       pages: 1,
-      count: 1,
+      count: 0,
     },
     list: [],
   },
-  onLoad() {},
+  onLoad() {
+    app.waitLogin().then(() => {
+      this.setData({
+        focus: true,
+      });
+    });
+  },
+  handleSearch() {
+    if (!this.data.Search) {
+      wx.showToast({
+        title: '请输入搜索内容',
+        icon: 'none',
+      });
+      return;
+    }
+    this.getList();
+  },
   getList(newPage = 1) {
-    // wx.ajax({
-    //   method: "GET",
-    //   url: `?r=takeda/case/get-list`,
-    //   data: {
-    //     page: newPage,
-    //   },
-    // }).then((res) => {
-    //   const list = res.page === 1 ? res.list : [...this.data.list, ...res.list];
-    //   this.setData({
-    //     list,
-    //     pagination: {
-    //       page: res.page,
-    //       pages: res.pages,
-    //       count: res.count,
-    //     },
-    //   });
-    // });
+    wx.ajax({
+      method: 'GET',
+      url: `?r=shizhong/book/search-list`,
+      data: {
+        page: newPage,
+        Search: this.data.Search,
+      },
+    }).then((res) => {
+      const list = res.page === 1 ? res.list : [...this.data.list, ...res.list];
+      this.setData({
+        list,
+        pagination: {
+          page: res.page,
+          pages: res.pages,
+          count: res.count,
+        },
+      });
+    });
   },
   onReachBottom() {
     const { page, pages } = this.data.pagination;
diff --git a/src/pages/search/index.wxml b/src/pages/search/index.wxml
index 27ec7dd..a707acc 100644
--- a/src/pages/search/index.wxml
+++ b/src/pages/search/index.wxml
@@ -5,7 +5,12 @@
   bind:click-left="handleBack"
   fixed
 >
-  <van-icon name="arrow-left" slot="left" color="#000" size="46rpx" />
+  <van-icon
+    name="arrow-left"
+    slot="left"
+    color="#000"
+    size="46rpx"
+  />
 </van-nav-bar>
 
 <view class="page" style="padding-top:{{menuButtonInfo.bottom}}px;">
@@ -14,30 +19,35 @@
     <input
       type="text"
       class="input"
+      model:value="{{Search}}"
+      focus="{{focus}}"
       placeholder-class="place-input"
       confirm-type="search"
       bindconfirm="handleSearch"
       placeholder="请输入要搜索的内容"
     />
   </view>
-  <view class="tip">以下为搜到的内容</view>
-  <view class="card">
-    <image class="photo" mode="aspectFill" src="/images/place.png"></image>
+  <view class="tip" wx:if="{{list.length}}">以下为搜到的内容</view>
+  <view
+    class="card"
+    wx:for="{{list}}"
+    wx:key="index"
+  >
+    <image
+      class="photo"
+      mode="aspectFill"
+      src="{{item.CoverUrl}}"
+    ></image>
     <view class="c-container">
-      <view class="title">骨密度是骨健康的关键指标，我们检查对吗？</view>
-      <view class="type">健康管理/口腔</view>
-      <view class="stat">
-        <view class="s-item">
-          <image class="icon" src="/images/icon-eye.png"></image>
-          123
-        </view>
-        <view class="s-item active">
-          <image class="icon" src="/images/icon-collection-active.png"></image>
-          取消收藏
-        </view>
-        <view class="s-item">
-          <image class="icon" src="/images/icon-collection.png"></image>
-          收藏
+      <view class="title">{{item.ChapterName}}</view>
+      <div class="book-name">{{item.BookName}}</div>
+      <view class="c-footer">
+        <view class="type">{{item.CateName}}{{item.CateSecondName ? '/'+item.CateSecondName : ''}}</view>
+        <view class="stat">
+          <view class="s-item">
+            <image class="icon" src="/images/icon-eye.png"></image>
+            ???
+          </view>
         </view>
       </view>
     </view>