登录页 & 文章详情逻辑调整

project.config.json

@@ -42,24 +42,24 @@
   "packOptions": {
     "ignore": [
       {
-        "value": "src/images/*.*",
+        "value": "/images/*.*",
         "type": "glob"
       },
       {
-        "value": "src/images/**/*.*",
+        "value": "/images/**/*.*",
         "type": "glob"
       },
       {
-        "value": "src/images/**/**/*.*",
+        "value": "/images/**/**/*.*",
         "type": "glob"
       }
     ],
     "include": [
       {
-        "value": "src/images/tabbar/*.*",
+        "value": "/images/tabbar/*.*",
         "type": "glob"
       }
     ]
   },
-  "appid": "wxbdf6f933281b1eb4"
+  "appid": "wxa4a28b299df7d921"
 }

project.private.config.json

@@ -11,7 +11,7 @@
         {
           "name": "文章详情",
           "pathName": "pages/article/index",
-          "query": "id=3",
+          "query": "id=8",
           "launchMode": "default",
           "scene": null
         },

src/app.ts

@@ -17,14 +17,14 @@ App<IAppOption>({
     // 测试号 wx2b0bb13edf717c1d
     // dev
     // appid:wxbdf6f933281b1eb4
-    url: 'https://m.shizhong.hbraas.com',
+    // url: 'https://m.shizhong.hbraas.com',
-    upFileUrl: 'https://m.shizhong.hbraas.com/',
+    // upFileUrl: 'https://m.shizhong.hbraas.com/',
-    imageUrl: 'https://m.shizhong.hbraas.com/api/shizhong/',
+    // imageUrl: 'https://m.shizhong.hbraas.com/api/shizhong/',
     // pro
     // appid:wxa4a28b299df7d921
-    // url: 'https://m.shizhong.hbsaas.com',
+    url: 'https://m.shizhong.hbsaas.com',
-    // upFileUrl: 'https://m.shizhong.hbsaas.com/',
+    upFileUrl: 'https://m.shizhong.hbsaas.com/',
-    // imageUrl: 'https://m.shizhong.hbsaas.com/api/shizhong/',
+    imageUrl: 'https://m.shizhong.hbsaas.com/api/shizhong/',
 
     loginState: '',
     isLogin: 0,

src/pages/article/index.scss

@@ -143,6 +143,7 @@
     background: #ffffff;
 
     .item {
+      position: relative;
       flex: 1;
       display: flex;
       align-items: center;
@@ -154,6 +155,36 @@
         width: 56rpx;
         height: 56rpx;
       }
+      .item-tip {
+        position: absolute;
+        left: 0;
+        top: -45rpx;
+        transform: translateY(-100%);
+        padding: 16rpx 32rpx;
+        font-size: 36rpx;
+        color: #ffffff;
+        background: rgba(0, 0, 0, 0.8);
+        border-radius: 8rpx 8rpx 8rpx 8rpx;
+        white-space: nowrap;
+        .close {
+          position: absolute;
+          top: -12rpx;
+          right: -12rpx;
+          width: 36rpx;
+          height: 36rpx;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -10rpx;
+          left: 40%;
+          width: 0;
+          height: 0;
+          border-left: 12rpx solid transparent;
+          border-right: 12rpx solid transparent;
+          border-top: 12rpx solid rgba(0, 0, 0, 0.9);
+        }
+      }
     }
   }
 }

src/pages/article/index.ts

@@ -19,6 +19,8 @@ Page({
     currentTime: 0,
     drag: false,
 
+    chapterTip: false,
+
     toastShow: false,
     toastType: 3,
   },
@@ -82,6 +84,7 @@ Page({
             next: Array.isArray(res.prevAndNext.next) ? null : res.prevAndNext.next,
           },
           ChapterId: res.chapter.Id,
+          show: !this.data.ChapterId,
         });
         if (res.chapter.AudioUrl?.url) {
           const time = `00:00/${this.formatTime(res.chapter.AudioUrl.duration)}`;
@@ -128,9 +131,16 @@ Page({
     this.handlePause();
   },
   onClose() {
+    const chapterTip = !wx.getStorageSync('chapterTip');
     this.setData({
       show: false,
+      chapterTip,
     });
+    if (chapterTip) {
+      setTimeout(() => {
+        this.handleTipClsoe();
+      }, 5000);
+    }
   },
 
   handleCollect() {
@@ -266,12 +276,19 @@ Page({
       url: '/pages/login/index?back=1',
     });
   },
-
   handleType() {
     wx.redirectTo({
       url: `/pages/classify/index?id=${this.data.chapter.CateId}`,
     });
   },
+  handleTipClsoe() {
+    if (this.data.chapterTip) {
+      wx.setStorageSync('chapterTip', 'open');
+    }
+    this.setData({
+      chapterTip: false,
+    });
+  },
 });
 
 export {};

src/pages/article/index.wxml

@@ -68,6 +68,10 @@
     <view class="item" bind:tap="handleDirectory">
       <image class="icon" src="{{imageUrl}}icon-directory.png?t={{Timestamp}}"></image>
       目录
+      <view class="item-tip" catch:tap="handleTipClsoe" wx:if="{{chapterTip}}">
+        查看全文目录，可点击这里
+        <image class="close" src="{{imageUrl}}item-tip-close.png?t={{Timestamp}}"></image>
+      </view>
     </view>
     <view class="item" wx:if="{{book.IsCollect===1}}" bind:tap="handleUnCollect">
       <image class="icon" src="{{imageUrl}}icon-collection-active.png?t={{Timestamp}}"></image>
@@ -84,7 +88,7 @@
   <view class="popup-directory">
     <view class="p-close-line" bind:tap="onClose">
       <view class="option">
-        收起
+        目录收起
         <image class="icon" src="{{imageUrl}}fold-up.png?t={{Timestamp}}"></image>
       </view>
     </view>

src/pages/login/index.scss

@@ -30,12 +30,12 @@
       display: flex;
       align-items: center;
       gap: 30rpx;
+      background-color: #f4f7fa;
+      border-radius: 96rpx;
 
       .code {
         flex: 1;
         padding: 24rpx 48rpx;
-        background-color: #f4f7fa;
-        border-radius: 96rpx;
         font-size: 32rpx;
       }
 
@@ -48,9 +48,8 @@
         padding: 24rpx;
         width: 7em;
         text-align: center;
-        color: #fff;
+        color: #3795f7;
         font-size: 32rpx;
-        background-color: #3795f7;
         border-radius: 96rpx;
       }
     }
@@ -72,43 +71,27 @@
     }
 
     .submit {
-      margin-top: 88rpx;
+      margin-top: 70rpx;
-      padding: 22rpx;
       text-align: center;
       font-size: 36rpx;
-      color: #fff;
+      color: #3795f7;
-      line-height: 44rpx;
+      line-height: 84rpx;
-      background: linear-gradient(90deg, #134df6 36%, #3795f7 100%);
+      border: 1px solid rgba(55, 149, 247, 0.2);
       border-radius: 96rpx 96rpx 96rpx 96rpx;
     }
 
     .tel-btn {
-      margin: 78rpx auto 0;
+      margin-top: 32rpx;
-      padding: 12rpx 44rpx;
+      text-align: center;
-      border-radius: 52rpx;
+      font-size: 36rpx;
-      width: 352rpx;
+      color: #ffffff;
-      font-size: 32rpx;
+      line-height: 88rpx;
-      line-height: 40rpx;
+      border-radius: 96rpx 96rpx 96rpx 96rpx;
-      color: rgba(153, 153, 153, 1);
+      background: linear-gradient(90deg, #134df6 16%, #3795f7 100%);
-      display: flex;
-      gap: 12rpx;
-      align-items: center;
-      justify-content: center;
-      outline: none;
-
-      .icon {
-        width: 28rpx;
-        height: 40rpx;
-      }
-
-      &::after {
-        border: none;
-        outline: none;
-      }
     }
 
     .visitor {
-      margin-top: 196rpx;
+      margin-top: 236rpx;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -153,7 +136,7 @@
     .cancel {
       padding: 32rpx 0;
       font-size: 32rpx;
-      color: #3795F7;
+      color: #3795f7;
       text-align: center;
     }
   }

src/pages/login/index.wxml

@@ -12,7 +12,12 @@
   class="page"
   style="background: url('{{imageUrl}}login-bg.png?t={{Timestamp}}') no-repeat top center/100% 624rpx;padding-top:{{menuButtonInfo.bottom}}px;"
 >
-  <image class="logo" style="top:{{menuButtonInfo.top}}px" mode="widthFix" src="{{imageUrl}}home-logo.png?t={{Timestamp}}"></image>
+  <image
+    class="logo"
+    style="top:{{menuButtonInfo.top}}px"
+    mode="widthFix"
+    src="{{imageUrl}}home-logo.png?t={{Timestamp}}"
+  ></image>
   <view class="container">
     <view class="tel">
       <input
@@ -39,15 +44,11 @@
       我已阅读并同意
       <text class="link" bind:tap="handleNavProtool">《用户隐私协议》</text>
     </view>
-    <view class="submit" bind:tap="handleSubmit">登录</view>
+    <view class="submit" bind:tap="handleSubmit">手机验证码登录</view>
     <button wx:if="{{protool}}" class="tel-btn" open-type="getPhoneNumber" bindgetphonenumber="handleWxSubmit">
-      <image class="icon" src="{{imageUrl}}icon-phone.png?t={{Timestamp}}"></image>
+      手机号一键快捷登录
-      手机号快捷登录
-    </button>
-    <button wx:else class="tel-btn" bind:tap="handleWxSubmit">
-      <image class="icon" src="{{imageUrl}}icon-phone.png?t={{Timestamp}}"></image>
-      手机号快捷登录
     </button>
+    <button wx:else class="tel-btn" bind:tap="handleWxSubmit">手机号一键快捷登录</button>
     <view class="visitor" bind:tap="handleVisitor" wx:if="{{!back}}">
       游客访问
       <van-icon name="arrow" />