导航栏菜单处理

pages/signIn/record/record.js

@@ -343,6 +343,15 @@ Page({
         this.getRequestData();
     },
 
+    scrollToBottom() {
+        if (this.data.lock || this.data.noMore) {
+            return
+        }
+        this.data.lock = true
+        this.data.page++
+        this.getRequestData();
+    },
+
     /**
      * 用户点击右上角分享
      */

pages/signIn/record/record.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "topbar": "../../../components/topbar"
+    "topbar": "../../../components/topbar",
+    "custom-page": "../../../components/customPage/customPage"
   },
   "navigationStyle":"custom",
   "navigationBarTextStyle": "white"

pages/signIn/record/record.wxml

@@ -1,108 +1,109 @@
 <!--pages/signIn/record/record.wxml-->
-<view class="record flex-column">
-  <!-- 首部信息 -->
-  <view class="head flex-column">
-    <topbar />
-    <topbar wx:if="{{noCoupon}}" title="签到优惠券" topbar-title-class="record-topbar"/>
-    <topbar wx:if="{{noDetail}}" title="获取明细" topbar-title-class="record-topbar"/>
-    <topbar wx:if="{{noUtility}}" title="使用/失效" topbar-title-class="record-topbar"/>
-    <view class="head_num" wx:if="{{!isLogin}}">{{notUseNum}}</view>
-    <view class="head_num" wx:if="{{isLogin}}">{{notUseNum?notUseNum:0}}</view>
-    <view class="head_text" wx:if="{{isLogin}}">请在优惠券有效期内尽快使用</view>
-    <button class="sigin-isLogin" wx:if="{{!isLogin}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登录</button>
-  </view>
-  <!-- 中部说明 -->
-  <view class="explain flex-row">
-    <view class="explain-left flex-column" catchtap="{{isLogin?'getCoupon':''}}">
-      <view class="explain-discount">签到优惠券</view>
-      <view class="{{noCoupon?'explain-column':'explain-columnNo'}}"></view>
-    </view>
-    <view class="explain-center flex-column" catchtap="{{isLogin?'getDetail':''}}">
-      <view class="explain-detailed">获取明细</view>
-      <view class="{{noDetail?'explain-column':'explain-columnNo'}}"></view>
+<!-- 首部信息 -->
+<custom-page head-bg-image="https://dy.shpr.top/luckDraw/per_head.png" bind:reachbottom="scrollToBottom">
+  <topbar wx:if="{{!isLogin}}" slot="head" title="签到优惠券" topbar-title-class="record-topbar" />
+  <topbar wx:if="{{noCoupon}}" slot="head" title="签到优惠券" topbar-title-class="record-topbar" />
+  <topbar wx:if="{{noDetail}}" slot="head" title="获取明细" topbar-title-class="record-topbar" />
+  <topbar wx:if="{{noUtility}}" slot="head" title="使用/失效" topbar-title-class="record-topbar" />
+
+  <view slot="body">
+    <view class="head flex-column">
+      <view class="head_num" wx:if="{{!isLogin}}">{{notUseNum}}</view>
+      <view class="head_num" wx:if="{{isLogin}}">{{notUseNum?notUseNum:0}}</view>
+      <view class="head_text" wx:if="{{isLogin}}">请在优惠券有效期内尽快使用</view>
+      <button class="sigin-isLogin" wx:if="{{!isLogin}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登录</button>
     </view>
-    <view class="explain-right flex-column" catchtap="{{isLogin?'getUtility':''}}">
-      <view class="explain-utility">使用/失效</view>
-      <view class="{{noUtility?'explain-column':'explain-columnNo'}}"></view>
+    <!-- 中部说明 -->
+    <view class="explain flex-row">
+      <view class="explain-left flex-column" catchtap="{{isLogin?'getCoupon':''}}">
+        <view class="explain-discount">签到优惠券</view>
+        <view class="{{noCoupon?'explain-column':'explain-columnNo'}}"></view>
+      </view>
+      <view class="explain-center flex-column" catchtap="{{isLogin?'getDetail':''}}">
+        <view class="explain-detailed">获取明细</view>
+        <view class="{{noDetail?'explain-column':'explain-columnNo'}}"></view>
+      </view>
+      <view class="explain-right flex-column" catchtap="{{isLogin?'getUtility':''}}">
+        <view class="explain-utility">使用/失效</view>
+        <view class="{{noUtility?'explain-column':'explain-columnNo'}}"></view>
+      </view>
     </view>
-  </view>
 
-  <!-- 使用内容 -->
-  <view class="content">
-    <!-- 主要内容 -->
-    <view class="check-in-content flex-column">
-      <!-- 优惠券内容 -->
-      <view hidden="{{hiddenCoupon}}">
-        <view wx:for="{{couponList}}" wx:key="index" data-id="{{item.id}}">
-          <view class="{{item.coupon.couponType == 'C'?'coupon flex-row':'coupon2 flex-row'}}">
-            <view class="coupon-left flex-row">
-              <!-- 代金券 -->
-              <view class="coupon-left-symbol" wx:if="{{item.coupon.couponType == 'C'}}">￥</view>
-              <view class="{{item.coupon.formatReduceCost.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.coupon.couponType == 'C'}}">{{item.coupon.formatReduceCost ?item.coupon.formatReduceCost:0}}</view>
-              <!-- 折扣券 -->
-              <view class="{{item.coupon.formatDiscount.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.coupon.couponType == 'D'}}">{{item.coupon.formatDiscount ?item.coupon.formatDiscount:0}}</view>
-              <view class="coupon-left-symbol" wx:if="{{item.coupon.couponType == 'D'}}" style="font-size: 16px;">折</view>
-            </view>
-            <view class="coupon-center flex-column">
-              <view class="coupon-center-upper">{{item.coupon.couponTitle}}</view>
-              <view class="coupon-center-bm flex-row">
-                <view class="coupon-center-block1"></view>
-                <view class="coupon-center-middle" wx:if="{{item.coupon.formatLeastCost == '0'}}">无门槛</view>
-                <view class="coupon-center-middle" wx:if="{{item.coupon.formatLeastCost != '0'}}">满{{item.coupon.formatLeastCost}}使用</view>
-                <view class="coupon-center-block2"></view>
+    <!-- 使用内容 -->
+    <view class="content">
+      <!-- 主要内容 -->
+      <view class="check-in-content flex-column">
+        <!-- 优惠券内容 -->
+        <view hidden="{{hiddenCoupon}}">
+            <view wx:for="{{couponList}}" wx:key="index" data-id="{{item.id}}"  class="{{item.coupon.couponType == 'C'?'coupon flex-row':'coupon2 flex-row'}}">
+              <view class="coupon-left flex-row">
+                <!-- 代金券 -->
+                <view class="coupon-left-symbol" wx:if="{{item.coupon.couponType == 'C'}}">￥</view>
+                <view class="{{item.coupon.formatReduceCost.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.coupon.couponType == 'C'}}">{{item.coupon.formatReduceCost ?item.coupon.formatReduceCost:0}}</view>
+                <!-- 折扣券 -->
+                <view class="{{item.coupon.formatDiscount.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.coupon.couponType == 'D'}}">{{item.coupon.formatDiscount ?item.coupon.formatDiscount:0}}</view>
+                <view class="coupon-left-symbol" wx:if="{{item.coupon.couponType == 'D'}}" style="font-size: 16px;">折</view>
               </view>
-              <view class="coupon-center-lower">{{item.coupon.couponBeginTimestamp}}-{{item.coupon.couponEndTimestamp}}</view>
-            </view>
-            <view class="coupon-right">
-              <view class="{{item.coupon.couponType == 'C'?'coupon-right-usenow flex-row':'coupon-right-usenow2 flex-row'}}">
-                <navigator class="btn_exchange" target="miniProgram" app-id="wxd92a2d29f8022f40" path="page/index/index" open-type='navigate'>
-                </navigator>
+              <view class="coupon-center flex-column">
+                <view class="coupon-center-upper">{{item.coupon.couponTitle}}</view>
+                <view class="coupon-center-bm flex-row">
+                  <view class="coupon-center-block1"></view>
+                  <view class="coupon-center-middle" wx:if="{{item.coupon.formatLeastCost == '0'}}">无门槛</view>
+                  <view class="coupon-center-middle" wx:if="{{item.coupon.formatLeastCost != '0'}}">满{{item.coupon.formatLeastCost}}使用</view>
+                  <view class="coupon-center-block2"></view>
+                </view>
+                <view class="coupon-center-lower">{{item.coupon.couponBeginTimestamp}}-{{item.coupon.couponEndTimestamp}}</view>
+              </view>
+              <view class="coupon-right">
+                <view class="{{item.coupon.couponType == 'C'?'coupon-right-usenow flex-row':'coupon-right-usenow2 flex-row'}}">
+                  <navigator class="btn_exchange" target="miniProgram" app-id="wxd92a2d29f8022f40" path="page/index/index" open-type='navigate'>
+                  </navigator>
+                </view>
               </view>
             </view>
-          </view>
         </view>
-      </view>
-      <!-- 获得明细 -->
-      <view class="detailed flex-column" hidden="{{hiddenDetail}}">
-        <view class="detailed-content" wx:for="{{detailList}}" wx:key="index" data-id="{{item.id}}">
-          <view class="detailed-sign flex-row">
-            <view class="detailed-sign-index flex-column">
-              <view class="detailed-sign-text">{{item.source =='1'?'签到':'任务'}}</view>
-              <view class="detailed-sign-date">{{item.crateTime}}</view>
+        <!-- 获得明细 -->
+        <view class="detailed flex-column" hidden="{{hiddenDetail}}">
+          <view class="detailed-content" wx:for="{{detailList}}" wx:key="index" data-id="{{item.id}}">
+            <view class="detailed-sign flex-row">
+              <view class="detailed-sign-index flex-column">
+                <view class="detailed-sign-text">{{item.source =='1'?'签到':'任务'}}</view>
+                <view class="detailed-sign-date">{{item.crateTime}}</view>
+              </view>
+              <view class="detailed-coupon flex-column">
+                <view class="detailed-coupon-text">{{item.coupon.couponTitle}}</view>
+              </view>
             </view>
-            <view class="detailed-coupon flex-column">
-              <view class="detailed-coupon-text">{{item.coupon.couponTitle}}</view>
+            <view class="detailed-date flex-column">
+              <view class="detailed-date-lower"></view>
             </view>
           </view>
-          <view class="detailed-date flex-column">
-            <view class="detailed-date-lower"></view>
-          </view>
+
         </view>
-       
-      </view>
-      <!-- 使用/失效 -->
-      <view class="detailed flex-column" hidden="{{hiddenUtility}}">
-        <view class="detailed-content" wx:for="{{stateList}}" wx:key="index" data-id="{{item.id}}">
-          <view class="detailed-sign flex-row">
-            <view class="detailed-sign-index flex-column">
-              <view class="detailed-sign-text">{{item.coupon.couponTitle}}</view>
-              <view class="detailed-sign-date">{{item.crateTime}}</view>
+        <!-- 使用/失效 -->
+        <view class="detailed flex-column" hidden="{{hiddenUtility}}">
+          <view class="detailed-content" wx:for="{{stateList}}" wx:key="index" data-id="{{item.id}}">
+            <view class="detailed-sign flex-row">
+              <view class="detailed-sign-index flex-column">
+                <view class="detailed-sign-text">{{item.coupon.couponTitle}}</view>
+                <view class="detailed-sign-date">{{item.crateTime}}</view>
+              </view>
+              <view class="detailed-coupon flex-column" style="color: #8F8F8F;" wx:if="{{item.invalid}}">已失效</view>
+              <view class="detailed-coupon flex-column" style="color: #8F8F8F;" wx:elif="{{item.used}}">已使用</view>
+              <view class="detailed-coupon flex-column" style="color: #8F8F8F;" wx:else="{{!item.used}}">未使用</view>
+            </view>
+            <view class="detailed-date flex-column">
+              <view class="detailed-date-lower"></view>
             </view>
-            <view class="detailed-coupon flex-column" style="color: #8F8F8F;" wx:if="{{item.invalid}}">已失效</view>
-            <view class="detailed-coupon flex-column" style="color: #8F8F8F;" wx:elif="{{item.used}}">已使用</view>
-            <view class="detailed-coupon flex-column" style="color: #8F8F8F;" wx:else="{{!item.used}}">未使用</view>
-          </view>
-          <view class="detailed-date flex-column">
-            <view class="detailed-date-lower"></view>
           </view>
+
         </view>
-        
+        <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可用优惠券 ————</view>
+        <view class="no_result" wx:if="{{noMore}}">———— 更多优惠券 | 敬请期待 ————</view>
       </view>
-      <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可用优惠券 ————</view>
-      <view class="no_result" wx:if="{{noMore}}">———— 更多优惠券 | 敬请期待 ————</view>
     </view>
   </view>
-</view>
+</custom-page>
 
 <!-- 使用wxs 手机号码中间四位显示为*号 -->
 <wxs module="phone">

pages/signIn/record/record.wxss

@@ -23,9 +23,7 @@
 
 .head{
   width: 750rpx;
-  height: 464rpx;
-  background-image: url(https://dy.shpr.top/luckDraw/per_head.png);
-  background-size: 100% 100%;
+  height: 320rpx;
 }
 
 .head_num{
@@ -33,7 +31,7 @@
   font-family: Source Han Sans CN;
   font-weight: 500;
   color: #FEFEFE;
-  margin-top: 170rpx;
+  margin-top: 10rpx;
 }
 
 .head_text{