💄Update poem list ui

Link #1

app.wxss

@@ -1 +1,11 @@
-@import './fonts/style.wxss';
+@import './fonts/style.wxss';
+
+page {
+  --td-brand-color: #70784F;
+  --poem-bg-color: #B5C0B3;
+  --poem-card-bg-color: #D7DCD7;
+}
+
+.tab-bar {
+  --td-tab-bar-active-color: #70784F;
+}

components/page-header/page-header.js

@@ -0,0 +1,38 @@
+// components/page-header/page-header.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    customHeight: {
+      type: Number,
+      value: -1
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    navHeight: 0
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  },
+
+  lifetimes: {
+    ready() {
+      this.createSelectorQuery().select("#nav-container")
+        .boundingClientRect()
+        .exec((res) => {
+          console.log(res[0].height);
+          this.setData({navHeight: res[0].height})
+        })
+    }
+  }
+})

components/page-header/page-header.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "poem-content": "/components/poem-content/poem-content",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
+    "t-search": "tdesign-miniprogram/search/search"
+  }
+}

components/page-header/page-header.wxml

@@ -0,0 +1,14 @@
+<view class="page-header">
+  <image class="top-bar" src="../../assets/bg.png" mode="widthFix"/>
+  <view id="nav-container">
+    <t-navbar id="navbar">
+      <view class="search-box" slot="left">
+        <image src="../../assets/logo.png" mode="widthFix" class="logo"/>
+        <t-search disabled shape="round" placeholder="搜索诗词" bind:tap="search" />
+      </view>
+    </t-navbar>
+  </view>
+  <view class="nav-bg-container" style="height: {{customHeight > 0?customHeight:navHeight}}px;"> 
+    <image class="nav-bar-bg" src="../../assets/bg.png" mode="widthFix" />
+  </view>
+</view>

components/page-header/page-header.wxss

@@ -0,0 +1,38 @@
+.page-header {
+  --td-navbar-bg-color: transient;
+}
+
+.search-box {
+  --td-search-height: 64rpx;
+  --td-search-font-size: 28rpx;
+  display: flex;
+  gap: 10rpx;
+  align-items: center;
+}
+
+.search-box .t-icon {
+  font-size: 32rpx !important;
+}
+
+.logo {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.top-bar {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+.nav-bar-bg {
+  width: 100%;
+}
+
+.nav-bg-container {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  overflow: hidden;
+}

components/poem-card/poem-card.wxml

@@ -2,13 +2,13 @@
   <view class="poem-card">
     <view class="row-title">
       <text class="title">{{poem.title}}</text>
-      <view class="tags-list">
+      <!-- <view class="tags-list">
         <t-tag class="margin-8" size="small" variant="light-outline" theme="primary">tag</t-tag>
-      </view>
+      </view> -->
     </view>
     <view class="row-author">
       <text class="author-name">{{poem.author.name}}</text>
-      <text class="author-age">[{{poem.author.age}}]</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>

components/poem-card/poem-card.wxss

@@ -1,6 +1,10 @@
 .poem-card {
+  margin:20rpx;
+  border-radius: 10rpx;
   padding: 30rpx;
-  border-bottom: 1rpx solid #D4D4D4;
+  background-color: var(--poem-card-bg-color);
+  color: var(--td-brand-color);
+  /* border-bottom: 1rpx solid #D4D4D4; */
   display: flex;
   flex-direction: column;
   gap: 10rpx;

components/poem-content/poem-content.js

@@ -6,7 +6,8 @@ Component({
   properties: {
     poem: Object,
     author: Object,
-    blocks: Array
+    blocks: Array,
+    cardStyle: String
   },
 
   /**
@@ -21,7 +22,8 @@ Component({
    */
   methods: {
     openNotes(e) {
-      this.triggerEvent("note", {id: e.target.dataset.id})
+      console.log(e);
+      this.triggerEvent("note", {id: e.currentTarget.dataset.id})
     }
   }
 })

components/poem-content/poem-content.wxml

@@ -1,4 +1,4 @@
-<view class="poem-content">
+<view class="poem-content" style="{{cardStyle}}">
   <view class="title">{{poem.title}}</view>
   <view class="author">[{{author.age}}] {{author.name}}</view>
   <view class="content-blocks">
@@ -6,6 +6,9 @@
       wx:key="id" 
       wx:for-item="block"
       data-id="{{block.id}}"
-      bind:tap="openNotes">{{block.content}}</view>
+      bind:tap="openNotes">
+        <rich-text nodes="{{block.content}}"></rich-text>
+      </view>
   </view>
+  <image class="poem-bg" src="../../assets/poem-bg.jpg" mode="aspectFill" />
 </view>

components/poem-content/poem-content.wxss

@@ -1,15 +1,45 @@
 .poem-content {
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 40rpx;
+  padding: 60rpx 40rpx;
   gap: 30rpx;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 5px;
+  z-index: 10;
+  transition: all .5s;
+}
+
+.poem-content view {
+  z-index: 10;
+}
+
+.poem-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+}
+
+.poem-bg::after {
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: #F6F6F699;
+  z-index: 1;
 }
 
 .poem-content .title {
   font-size: 50rpx;
-  color: #333333;
+  text-align: center;
+  color: var(--td-brand-color, #70784F);
 }
 
 .poem-content .author {
@@ -20,4 +50,6 @@
 .poem-content .block {
   font-size: 30rpx;
   line-height: 58rpx;
+  color: #646963;
+  text-align: center;
 }

components/poem-list/poem-list.wxss

@@ -1 +1,4 @@
-/* components/poem-list/poem-list.wxss */
+/* components/poem-list/poem-list.wxss */
+.poem-list-container {
+  overflow:scroll;
+}

components/poem-notes/poem-notes.wxml

@@ -5,7 +5,9 @@
     </view>
 
     <view class="content">
-      <view class="title">{{block.content}}</view>
+      <view class="title">
+        <rich-text nodes="{{block.content}}" />
+      </view>
       <view class="notes-title">注释</view>
       <view class="notes">
         <view class="notes-block" 

components/poem-translate/translate-block/translate-block.wxml

@@ -1,4 +1,6 @@
 <view class="translate-block">
-  <view class="block-line">{{block.content}}</view>
+  <view class="block-line">
+    <rich-text nodes="{{block.content}}" />
+  </view>
   <view class="block-translate">{{block.translate}}</view>
 </view>

config/network.js

@@ -1,5 +1,5 @@
 export default {
   // backstageUrl: 'http://192.168.31.184:8080',
-  backstageUrl: 'https://poem.mczhengyi.top/prod-api',
+  backstageUrl: 'http://poem.mczhengyi.top/prod-api',
   ossUrl: ''
 }

custom-tab-bar/index.wxml

@@ -1,4 +1,4 @@
-<t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}" fixed="{{false}}">
+<t-tab-bar class="tab-bar" value="{{value}}" bindchange="onChange" theme="normal" 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}}

custom-tab-bar/index.wxss

@@ -1 +1,5 @@
-/* components/tab-bar/tab-bar.wxss */
+/* components/tab-bar/tab-bar.wxss */
+.tab-bar {
+  --td-tab-bar-active-color: #70784F;
+  --td-tab-bar-color: #646963;
+}

pages/author-detail/author-detail.js

@@ -26,17 +26,16 @@ Page({
   tabChange(v) {
     this.setData({tab: parseInt(v.detail.value)})
   },
-  /** 获取作者基本信息 */
-  getAuthorInfo(authorId) {
-    request(`/poem/author/${authorId}`).then(res => {
-      this.setData({authorInfo: res.data.data})
-    })
-  },
   /** 获取作者详情信息 */
   getAuthorDetail(authorId) {
-    request(`/poem/info/list?authorId=${authorId}`).then(res => {
-      let authorDetail = res.data.data
-      this.setData({authorKV: authorDetail})
+    request(`/poem/author/info/${authorId}`).then(res => {
+      this.setData({
+        authorInfo: res.data.data.author,
+        authorKV: res.data.data.info,
+        achievement: res.data.data.wiki.filter(wi => wi.type === TYPE_ACHIVEMENT),
+        life: res.data.data.wiki.filter(wi => wi.type === TYPE_LIFE),
+        allusion: res.data.data.wiki.filter(wi => wi.type === TYPE_ALLUSION)
+      })
     })
   },
   /** 获取诗人的作品 */
@@ -61,33 +60,14 @@ Page({
       this.getAuthorPoem(this.data.authorId)
     }
   },
-  /** 获取作者WIKI并重组 */
-  getWiki(authorId) {
-    request(`/poem/wiki/list?authorId=${authorId}`).then(res => {
-      let wikis = res.data.data
-      let achievement = []
-      let allusion = []
-      let life = []
-      wikis.map(wiki => {
-        if (wiki.type===TYPE_ACHIVEMENT) {
-          achievement.push(wiki)
-        } else if (wiki.type===TYPE_LIFE) {
-          life.push(wiki)
-        } else if (wiki.type===TYPE_ALLUSION) {
-          allusion.push(wiki)
-        }
-      })
-      this.setData({achievement,life, allusion})
-    })
-  },
   onLoad(options) {
     let authorId = options?.id
     if(!authorId) authorId = 100
     this.setData({authorId})
     // 获取作者信息
-    this.getAuthorInfo(authorId)
+    // this.getAuthorInfo(authorId)
     this.getAuthorDetail(authorId)
     this.getAuthorPoem(authorId, true)
-    this.getWiki(authorId)
+    // this.getWiki(authorId)
   }
 })

pages/index/index.js

@@ -4,10 +4,14 @@ import request from "../../utils/request"
 
 // 获取应用实例
 const app = getApp()
+let taping = false
+let clientWidth = -1
+let start = -1
 
 Page({
   data: {
-    recommend: null
+    recommend: null,
+    progress: 0
   },
   getRecommend: function () {
     request('/poem/poem/recommend').then(res => {
@@ -28,5 +32,43 @@ Page({
     })
     // 获取数据
     this.getRecommend()
-  }
+  },
+  move(e) {
+    if (taping) {
+      const cx = e.changedTouches[0].clientX
+      let progress = (start - cx) / clientWidth / 0.5
+      this.setData({
+        progress: progress > 1 ? 1 : progress
+      })
+    }
+  },
+  start(e) {
+    if (clientWidth < 0) {
+      clientWidth = wx.getSystemInfoSync().windowWidth
+    }
+    start = e.changedTouches[0].clientX;
+    taping = true
+  },
+  end(e) {
+    taping = false
+    const cx = e.changedTouches[0].clientX
+    if (Math.abs((start - cx) / clientWidth) > 0.5) {
+      this.setData({progress: this.data.progress > 0 ? 6 : -6, recommend: null}, () => {
+        this.getRecommend()
+      })
+      setTimeout(() => {
+        this.setData({progress: this.data.progress > 0 ? -6 : 6})
+      }, 300)
+      setTimeout(() => {
+        this.setData({progress: 0})
+      }, 800)
+      return
+    } 
+    this.setData({progress: 0})
+  },
+  search: function () {
+    wx.navigateTo({
+      url: '/pages/search/search',
+    })
+  },
 })

pages/index/index.json

@@ -2,6 +2,10 @@
   "usingComponents": {
     "t-icon": "tdesign-miniprogram/icon/icon",
     "poem-content": "/components/poem-content/poem-content",
-    "t-button": "tdesign-miniprogram/button/button"
-  }
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
+    "t-search": "tdesign-miniprogram/search/search",
+    "page-header": "../../components/page-header/page-header"
+  },
+  "navigationStyle": "custom"
 }

pages/index/index.wxml

@@ -1,9 +1,15 @@
+<page-meta page-style="overflow: hidden;" />
+<page-header></page-header>
 <view class="recommend-container">
-  <poem-content poem="{{recommend}}" 
+  <view class="title">📅 今日推荐</view>
+  <poem-content class="poem-card"
+    poem="{{recommend}}" 
     author="{{recommend.author}}" 
-    blocks="{{recommend.blocks}}" />
-  <view class="operation">
-    <t-button icon="refresh" theme="primary" ghost block size="large" bind:tap="getRecommend">换一换</t-button>
-    <t-button icon="browse" theme="primary" ghost block size="large" bind:tap="more">查看详情</t-button>
-  </view>
+    blocks="{{recommend.blocks}}" 
+    bind:tap="more"
+    bind:touchend="end"
+    bind:touchstart="start"
+    bind:touchmove="move"
+    card-style="transform: translateX({{-progress * 60}}px) rotate({{-progress * 10}}deg); opacity: {{progress>1 || progress<-1 ? 0 : 1}}; padding: 80rpx 40rpx;" />
+    <view class="tips">⬅️ 滑动切换诗词 ➡️</view>
 </view>

pages/index/index.wxss

@@ -4,4 +4,32 @@
     flex-direction: column;
     align-items: center;
     gap: 20rpx;
+}
+
+page {
+  background-color: #BAC6B8;
+  --td-search-bg-color: #BAC6B8;
+}
+
+.recommend-container {
+  position: relative;
+  padding: 20px;
+}
+
+.title {
+  font-size: 60rpx;
+  text-align: center;
+  margin: 30rpx;
+  color: var(--td-brand-color);
+}
+
+.poem-card {
+  position: relative;
+}
+
+.tips {
+  font-size: 30rpx;
+  text-align: center;
+  color: #777777;
+  margin-top: 20rpx;
 }

pages/poem-list/poem-list.js

@@ -16,6 +16,7 @@ Page({
     status: 0,
     page: 0,
     tbh: 0,
+    stickyTop: 0
   },
   getPoemList: function (id, refresh=false) {
     // 修改状态
@@ -69,6 +70,11 @@ Page({
     this.getTabBar().setData({
       value: page
     })
+    // Sticky Container
+    const header = this.createSelectorQuery().select('#header');
+    header.boundingClientRect().exec(res => {
+      this.setData({stickyTop: res[0].height})
+    })
     // 底部安全区计算
     wx.getSystemInfo().then(res => {
       let lift = res.screenHeight - res.safeArea.bottom
@@ -81,6 +87,9 @@ Page({
       this.setData({
         category,
         tabDefaultValue: 0
+      },() => {
+        const tabs = this.selectComponent('#tabs');
+        tabs.setTrack();
       })
     })
     // 刷新全部诗词

pages/poem-list/poem-list.json

@@ -4,6 +4,7 @@
   "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
   "poem-list": "/components/poem-list/poem-list",
   "poem-translate": "/components/poem-translate/poem-translate",
-  "t-search": "tdesign-miniprogram/search/search"
-  }
+  "page-header": "../../components/page-header/page-header"
+  },
+  "navigationStyle": "custom"
 }

pages/poem-list/poem-list.wxml

@@ -1,15 +1,17 @@
 <view class="page" style="{{'padding-bottom:' + tbh +'px;'}}">
+  <page-header id="header" custom-height="{{stickyTop+48}}" />
   <t-tabs sticky="{{true}}"
-   default-value="{{tabDefaultValue}}" 
-   bind:change="changeCategorys">
+    id="tabs"
+    split="{{false}}"
+    sticky="{{true}}"
+    sticky-props="{{ {offsetTop:stickyTop} }}"
+    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>
-  <view class="search-box">
-    <t-search placeholder="搜索诗词/作者/内容" center bind:focus="search" />
-  </view>
-  <poem-list poems="{{poems}}" status="{{status}}" />
+  <poem-list style="flex: 1;" poems="{{poems}}" status="{{status}}" />
 </view>

pages/poem-list/poem-list.wxss

@@ -1,3 +1,14 @@
+page {
+  background-color: var(--poem-bg-color);
+}
+
+.page {
+  --td-tab-nav-bg-color: transient;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
 .tabs {
   height: 100vh;
 }

project.config.json

@@ -1,9 +1,5 @@
 {
   "description": "项目配置文件",
-  "packOptions": {
-    "ignore": [],
-    "include": []
-  },
   "setting": {
     "ignoreDevUnusedFiles": false,
     "ignoreUploadUnusedFiles": false,
@@ -26,8 +22,6 @@
     "nodeModules": false,
     "enhance": true,
     "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": true,
     "showShadowRootInWxmlPanel": true,
     "packNpmManually": false,
     "enableEngineNative": false,
@@ -42,12 +36,15 @@
     }
   },
   "compileType": "miniprogram",
-  "libVersion": "2.19.4",
-  "appid": "wx9c40a78ce736380e",
-  "projectname": "miniprogram-92",
   "condition": {},
   "editorSetting": {
     "tabIndent": "insertSpaces",
     "tabSize": 2
-  }
+  },
+  "libVersion": "2.19.4",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "appid": "wx9c40a78ce736380e"
 }

project.private.config.json

@@ -8,6 +8,13 @@
   "condition": {
     "miniprogram": {
       "list": [
+        {
+          "name": "pages/poem-detail/poem-detail",
+          "pathName": "pages/poem-detail/poem-detail",
+          "query": "poemId=1055",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "poem-list",
           "pathName": "pages/poem-list/poem-list",