💄 Update poem detail page

Link #1

app.wxss

@@ -4,6 +4,9 @@ page {
   --td-brand-color: #70784F;
   --poem-bg-color: #B5C0B3;
   --poem-card-bg-color: #D7DCD7;
+  --bg-white: #eeeeee;
+  --box-shadow: rgba(0, 0, 0, 0.3) 1rpx 1rpx 6rpx;
+  --card-radius: 10rpx;
   font-family: serif;
   background-color: var(--poem-bg-color);
 }

components/page-header/page-header.wxss

@@ -30,10 +30,15 @@
   width: 100%;
 }
 
+.nav-container {
+  position: relative;
+  z-index: 100;
+}
+
 .nav-bg-container {
   position: fixed;
   top: 0;
   width: 100%;
   overflow: hidden;
-  z-index: 99;
+  z-index: 0;
 }

components/poem-animation/poem-animation.wxml

@@ -2,16 +2,17 @@
   <video src="{{baseUrl}}{{current.video}}" 
     class="video-player" />
   <t-cell title="{{current.author}}" 
+    bordered="{{false}}"
     description="{{current.org}}">
     <view class="desc-avatar" slot="left-icon">
       <t-avatar>{{current.author[0]}}</t-avatar>
     </view>
     <view class="desc-thumbs" slot="right-icon">
-      <t-icon prefix="icon" name="thumbs-up" size="42rpx" />
+      <t-icon prefix="icon" name="thumbs-up" size="32rpx" />
       <view class="thumbs-count">{{current.likeCount}}</view>
     </view>
   </t-cell>
   <view class="description">
-    动画简介：{{current.description}}
+    {{current.description ? current.description : "暂无介绍"}}
   </view>
 </view>

components/poem-animation/poem-animation.wxss

@@ -1,5 +1,15 @@
+.poem-animation {
+  font-family: sans-serif;
+  --td-cell-bg-color: transient;
+  --td-cell-horizontal-padding: 30rpx;
+  background-color: var(--bg-white);
+  border-radius: var(--card-radius);
+  box-shadow: var(--box-shadow);
+  overflow: hidden;
+}
+
 .video-player {
-  width: 100vw;
+  width: 100%;
 }
 
 .desc-thumbs {
@@ -10,11 +20,13 @@
 }
 
 .thumbs-count {
+  font-family: sans-serif;
+  font-size: 28rpx;
   color: #333333;
 }
 
 .description {
-  padding: 20rpx 40rpx;
+  padding: 0 38rpx 30rpx;
   font-size: 28rpx;
   color: rgba(0, 0, 0, 0.4);
 }

components/poem-audio/poem-audio.js

@@ -6,6 +6,7 @@ Component({
    * 组件的属性列表
    */
   properties: {
+    poem: Object,
     audio: String,
     lyric: String
   },

components/poem-audio/poem-audio.json

@@ -4,6 +4,7 @@
     "t-icon": "tdesign-miniprogram/icon/icon",
     "t-progress": "tdesign-miniprogram/progress/progress",
     "audio-controls": "audio-controls/audio-controls",
-    "lyric-parser": "lyric-parser/lyric-parser"
+    "lyric-parser": "lyric-parser/lyric-parser",
+    "poem-content": "/components/poem-content/poem-content"
   }
 }

components/poem-audio/poem-audio.wxml

@@ -1,6 +1,7 @@
 <view class="poem-audio-container">
   <view class="lyric-area">
-    <lyric-parser url="{{lyric}}" time="{{currTime}}" />
+    <lyric-parser wx:if="{{lyric}}" url="{{lyric}}" time="{{currTime}}" />
+    <poem-content wx:else poem="{{poem}}" author="{{poem.author}}" blocks="{{poem.blocks}}" />
   </view>
   <audio-controls currTime="{{currTime}}"
     fullTime="{{fullTime}}"

components/poem-audio/poem-audio.wxss

@@ -1,8 +1,8 @@
 .poem-audio-container {
-  padding: 30rpx;
+  padding: 20rpx;
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 52px - 40px);
+  height: 100%;
 }
 
 .lyric-area {

components/poem-translate/poem-translate.wxss

@@ -1,6 +1,5 @@
 .poem-translate {
-  padding: 30rpx;
   display: flex;
   flex-direction: column;
-  gap: 30rpx;
+  gap: 20rpx;
 }

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

@@ -1,6 +1,7 @@
+<wxs module="_" src="../../../utils/utils.wxs" />
 <view class="translate-block">
   <view class="block-line">
-    <rich-text nodes="{{block.content}}" />
+    {{_.cleanBreakLines(block.content)}}
   </view>
   <view class="block-translate">{{block.translate}}</view>
 </view>

components/poem-translate/translate-block/translate-block.wxss

@@ -1,14 +1,18 @@
 .translate-block {
-  border-left: 8rpx solid #3c9cff;
-  padding-left: 10rpx;
+  background-color: var(--bg-white);
+  padding: 20rpx 30rpx;
+  border-radius: var(--card-radius);
+  box-shadow: var(--box-shadow);
 }
 
 .block-line {
-  font-size: 24rpx;
-  color: #999999;
+  /* font-size: 24rpx; */
+  color: var(--td-brand-color);
+  font-weight: bold;
 }
 
 .block-translate {
-  font-size: 34rpx;
-  margin-top: 15rpx;
+  font-size: 30rpx;
+  margin-top: 20rpx;
+  line-height: 44rpx;
 }

pages/poem-detail/poem-detail.js

@@ -5,6 +5,7 @@ import Toast from 'tdesign-miniprogram/toast/index'
 // pages/poem-detail/poem-detail.js
 Page({
   data: {
+    tabIndex: 0,
     poemId: 0,
     poem: {id: 0, appreciation: '', audio: '', authorId: ''},
     author: {},
@@ -15,7 +16,9 @@ Page({
     isFav: false,
     // 展示注释窗口
     showNotes: false,
-    notes: {}
+    notes: {},
+    stickyProps: {},
+    headerHeight: 0
   },
   loadPoem: function (id) {
     request(`/poem/poem/${id}`).then(res => {
@@ -45,6 +48,15 @@ Page({
     this.setData({
       poemId
     })
+    // Sticky Container
+    const header = this.createSelectorQuery().select('#header');
+    header.boundingClientRect().exec(res => {
+      this.setData({stickyProps: {
+        offsetTop: res[0].height - 48
+      },
+      headerHeight: res[0].height})
+    })
+    // Load data
     this.loadPoem(poemId)
     this.loadBlocks(poemId)
     this.loadAnimation(poemId)
@@ -111,5 +123,8 @@ Page({
     const blocks = this.data.blocks
     const r = blocks.filter(b => b.id===id)
     this.setData({notes: r[0], showNotes: true})
+  },
+  tabChange(e) {
+    this.setData({tabIndex: parseInt(e.detail.value)})
   }
 })

pages/poem-detail/poem-detail.json

@@ -8,6 +8,8 @@
     "poem-animation": "/components/poem-animation/poem-animation",
     "t-fab": "tdesign-miniprogram/fab/fab",
     "t-toast": "tdesign-miniprogram/toast/toast",
-    "poem-notes": "/components/poem-notes/poem-notes"
-  }
+    "poem-notes": "/components/poem-notes/poem-notes",
+    "page-header": "/components/page-header/page-header"
+  },
+  "navigationStyle": "custom"
 }

pages/poem-detail/poem-detail.wxml

@@ -1,26 +1,34 @@
+<page-header id="header">
+  <t-tabs default-value="{{0}}" 
+    sticky sticky-props="{{stickyProps}}"
+    split="{{false}}"
+    bind:change="tabChange">
+    <t-tab-panel label="诗词" value="0" />
+    <t-tab-panel label="译文" value="1" />
+    <t-tab-panel label="赏析" value="2" />
+    <t-tab-panel wx:if="{{poem.audio!==null}}" label="朗读" value="3" />
+    <t-tab-panel wx:if="{{hasAnimation}}" label="动画" value="4" />
+  </t-tabs>
+</page-header>
 <view class="poem-detail-container">
   <t-toast id="t-toast" />
-  <t-tabs default-value="{{0}}" sticky swipeable="{{false}}">
-    <t-tab-panel label="诗词" value="0">
+  <view wx:if="{{tabIndex===0}}" class="poem-content">
       <poem-content poem="{{poem}}" author="{{author}}" blocks="{{blocks}}" bind:note="openNotes" />
       <t-fab icon="{{isFav?'star-filled':'star'}}" bind:click="onFavBtn" />
       <poem-notes block="{{notes}}" show="{{showNotes}}" bind:close="closeNotes" />
-    </t-tab-panel>
-    <t-tab-panel label="译文" value="1">
+  </view>
+  <view wx:if="{{tabIndex===1}}" class="translate">
       <poem-translate blocks="{{blocks}}" />
-    </t-tab-panel>
-    <t-tab-panel label="赏析" value="2">
-      <view class="appreciation">
-        <view class="appreciation-block" wx:for="{{appreciation}}" 
-          wx:key="id"
-          wx:for-item="block">{{block}}</view>
-      </view>
-    </t-tab-panel>
-    <t-tab-panel wx:if="{{poem.audio!==null}}" label="朗读" value="3">
-      <poem-audio class="poem-audio" audio="{{poem.audio}}" lyric="{{poem.lyric}}" />
-    </t-tab-panel>
-    <t-tab-panel wx:if="{{hasAnimation}}" label="动画" value="4">
-      <poem-animation animationList="{{animations}}" />
-    </t-tab-panel>
-  </t-tabs>
+  </view>
+  <view wx:if="{{tabIndex===2}}" class="appreciation">
+    <view class="appreciation-block" wx:for="{{appreciation}}" 
+      wx:key="id"
+      wx:for-item="block">{{block}}</view>
+  </view>
+  <view wx:if="{{tabIndex===3}}" class="audio" style="height: calc(100vh - 92px - {{headerHeight}}px)">
+    <poem-audio class="poem-audio" audio="{{poem.audio}}" lyric="{{poem.lyric}}" poem="{{poem}}" />  
+  </view>
+  <view wx:if="{{tabIndex===4}}" class="animate">
+    <poem-animation animationList="{{animations}}" />
+  </view>
 </view>

pages/poem-detail/poem-detail.wxss

@@ -1,5 +1,19 @@
+page {
+  --td-tab-nav-bg-color: transient;
+}
+
+.poem-detail-container {
+  padding: 20rpx;
+}
+
 .appreciation {
-  padding: 30rpx;
+  margin: 10rpx 0 26rpx;
+  padding: 20rpx;
+  font-size: 30rpx;
+  line-height: 60rpx;
+  background-color: var(--bg-white);
+  border-radius: var(--card-radius);
+  box-shadow: var(--box-shadow);
   font-size: 34rpx;
   text-indent: 2em;
   display: flex;

utils/util.js

@@ -17,7 +17,13 @@ const formatNumber = n => {
 const getTabbarHeight = () => {
 }
 
+/** 清理富文本的换行符 */
+const removeBrTags = (text) => {
+  return text.replace(/<br\s?\/?>/gi, '');
+}
+
 module.exports = {
   formatTime,
-  getTabbarHeight
+  getTabbarHeight,
+  removeBrTags
 }

utils/utils.wxs

@@ -0,0 +1,8 @@
+var regExp = getRegExp('<br\\s?/?>', 'g');
+
+module.exports = {
+  cleanBreakLines: function(html) {
+    if (!html) return html;
+    return html.replace(getRegExp('<br ?/?>', 'g'), '');
+  }
+};