完成首页设计

app.wxss

@@ -1 +1 @@
-@import './fonts/style.wxss'
+@import './fonts/style.wxss';

components/poem-card/poem-card.js

@@ -0,0 +1,23 @@
+// components/poem-card/poem-card.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    poem: Object
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/poem-card/poem-card.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+  "t-tag": "tdesign-miniprogram/tag/tag",
+  "t-check-tag": "tdesign-miniprogram/check-tag/check-tag"
+  }
+}

components/poem-card/poem-card.wxml

@@ -0,0 +1,15 @@
+<view class="poem-card">
+  <view class="row-title">
+    <text class="title">{{poem.title}}</text>
+    <view class="tags-list">
+      <t-tag class="margin-8" size="small" variant="light-outline" theme="primary">tag</t-tag>
+    </view>
+  </view>
+  <view class="row-author">
+    <text class="author-name">{{poem.author.name}}</text>
+    <text class="author-age">[{{poem.author.age}}]</text>
+  </view>
+  <view class="row-content">
+    <text class="content" wx:for="{{poem.blocks}}" wx:for-item="block">{{block.content}}</text>
+  </view>
+</view>

components/poem-card/poem-card.wxss

@@ -0,0 +1,28 @@
+.poem-card {
+  padding: 30rpx;
+  border-bottom: 1rpx solid #D4D4D4;
+  display: flex;
+  flex-direction: column;
+  gap: 10rpx;
+}
+
+.row-title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.title {
+  font-size: 32rpx;
+}
+
+.row-author {
+  font-size: 22rpx;
+  color: #999999;
+}
+
+.row-content {
+  font-size: 24rpx;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

components/poem-list/poem-list.js

@@ -0,0 +1,24 @@
+// components/poem-list/poem-list.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    poems: Array,
+    status: Number
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/poem-list/poem-list.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "poem-card": "/components/poem-card/poem-card",
+    "t-loading": "tdesign-miniprogram/loading/loading",
+    "t-divider": "tdesign-miniprogram/divider/divider"
+  }
+}

components/poem-list/poem-list.wxml

@@ -0,0 +1,13 @@
+<view class="poem-list-container">
+  <poem-card wx:for="{{poems}}" 
+            wx:for-item="poem" 
+            wx:key="id"
+            poem="{{poem}}" />
+  <t-divider content="">
+    <view slot="content">
+      <text wx:if="{{status === 0}}">上划加载更多</text>
+      <t-loading wx:if="{{status === 1}}" theme="spinner" size="30rpx" text="正在加载中..." />
+      <text wx:if="{{status === 2}}">已经到底了</text>
+    </view>
+  </t-divider>
+</view>

components/poem-list/poem-list.wxss

@@ -0,0 +1 @@
+/* components/poem-list/poem-list.wxss */

config/network.js

@@ -0,0 +1,4 @@
+export default {
+  backstageUrl: 'http://192.168.31.241:8080',
+  ossUrl: ''
+}

custom-tab-bar/index.wxml

@@ -1,4 +1,4 @@
-<t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}">
+<t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}" fixed="{{false}}">
   <t-tab-bar-item wx:for="{{list}}" wx:key="index" value="{{item.value}}" icon="-">
     <t-icon slot="icon" prefix="icon" name="{{item.icon}}" />
     {{item.label}}

pages/author-list/author-list.js

@@ -1,66 +1,9 @@
 // pages/author-list/author-list.js
 Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
   onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+    let page = getCurrentPages()[0].route
+    this.getTabBar().setData({
+      value: page
+    })
   }
 })

pages/favorite/favorite.js

@@ -1,66 +1,9 @@
 // pages/favorite/favorite.js
 Page({
-
-  /**
-   * 页面的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
   onShow() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+    let page = getCurrentPages()[0].route
+    this.getTabBar().setData({
+      value: page
+    })
   }
 })

pages/poem-list/poem-list.js

@@ -1,10 +1,84 @@
+import request from "../../utils/request";
+
 // pages/poem-list/poem-list.js
 Page({
+  data: {
+    category: [
+      {id: 0, name: '推荐'},
+    ],
+    tabDefaultValue: 0,
+    // 当前所在分类
+    currentCategory: 0,
+    // 每页数量
+    pageSize: 10,
+    poems: [],
+    // 刷新状态: 0-等待 1-加载中 2-到底了
+    status: 0,
+    page: 0,
+    tbh: 0,
+  },
+  getPoemList: function (id, refresh=false) {
+    // 修改状态
+    this.setData({status: 1})
+    // 添加分类ID
+    let parmas= ''
+    if (id !== 0) parmas = `categoryId=${id}&`
+    // 刷新清空页面处理 
+    if (refresh) {
+      this.setData({
+        page: 1,
+        poems: []
+      })
+    } else {
+      this.setData({page: this.data.page + 1})
+    }
+    parmas += `pageNum=${this.data.page}&pageSize=${this.data.pageSize}`
+    // 请求
+    request(`/poem/poem/list?${parmas}`).then(res => {
+      // 拼接页面
+      let poems = this.data.poems.concat(res.data.rows)
+      this.setData({
+        poems: poems,
+        status: res.data.rows.length < this.data.pageSize ? 2 : 0
+      })
+    })
+  },
+  // 更换分类
+  changeCategorys(e) {
+    let select = e.detail.value
+    this.setData({
+      currentCategory: select
+    })
+    this.getPoemList(select, true)
+  },
+  // 加载更多
+  onReachBottom() {
+    // 只用在待命状态才可进行刷新
+    if (this.data.status === 0) {
+      this.getPoemList(this.data.currentCategory)
+    }
+  },
   onShow() {
+    /// Tab属性
     let page = getCurrentPages()[0].route
-    console.log(page);
     this.getTabBar().setData({
       value: page
     })
+    // 底部安全区计算
+    wx.getSystemInfo().then(res => {
+      let lift = res.screenHeight - res.safeArea.bottom
+      this.setData({tbh: lift + 60})
+    })
+    // 刷新初始数据
+    request('/poem/category/list').then(res => {
+      let category = [{id: 0, name: '推荐'}]
+      category = category.concat(res.data.rows)
+      this.setData({
+        category,
+        tabDefaultValue: 0
+      })
+    })
+    // 刷新全部诗词
+    this.getPoemList(0)
   }
 })

pages/poem-list/poem-list.json

@@ -1,3 +1,7 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+  "t-tabs": "tdesign-miniprogram/tabs/tabs",
+  "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
+  "poem-list": "/components/poem-list/poem-list"
+  }
 }

pages/poem-list/poem-list.wxml

@@ -1,2 +1,12 @@
-<!--pages/poem-list/poem-list.wxml-->
-<text>pages/poem-list/poem-list.wxml</text>
+<view class="page" style="{{'padding-bottom:' + tbh +'px;'}}">
+  <t-tabs sticky="{{true}}"
+   default-value="{{tabDefaultValue}}" 
+   bind:change="changeCategorys">
+    <t-tab-panel wx:for="{{category}}" 
+    wx:for-item="item" 
+    label="{{item.name}}" 
+    wx:key="id" 
+    value="{{item.id}}" />
+  </t-tabs>
+  <poem-list poems="{{poems}}" status="{{status}}" />
+</view>

pages/poem-list/poem-list.wxss

@@ -1 +1,3 @@
-/* pages/poem-list/poem-list.wxss */
+.tabs {
+  height: 100vh;
+}

project.private.config.json

@@ -2,6 +2,20 @@
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "projectname": "poem-native",
   "setting": {
-    "compileHotReLoad": true
+    "compileHotReLoad": true,
+    "urlCheck": false
+  },
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "poem-list",
+          "pathName": "pages/poem-list/poem-list",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
   }
 }

utils/request.js

@@ -0,0 +1,14 @@
+import network from "../config/network";
+
+export default function request(url, method = 'GET', data = {}, header = {}) {
+  return new Promise((res, rej) => {
+    wx.request({
+      url: network.backstageUrl + url,
+      method,
+      data,
+      header,
+      success: res,
+      fail: rej
+    })
+  })
+}

utils/util.js

@@ -14,6 +14,10 @@ const formatNumber = n => {
   return n[1] ? n : `0${n}`
 }
 
-module.exports = {
-  formatTime
+const getTabbarHeight = () => {
+}
+
+module.exports = {
+  formatTime,
+  getTabbarHeight
 }