组件修改

components/customPage/customPage.js

@@ -16,6 +16,10 @@ Component({
         headBgColor: {
             type: String,
             value: ''
+        },
+        bodyBgImage: {
+            type: String,
+            value: ''
         }
     },
 
@@ -39,9 +43,6 @@ Component({
         if (this.data.headBgColor) {
             headStyle += "background-color:" + this.data.headBgColor +";"
         }
-
-        console.log(windowWidth, systemInfoSync)
-
         this.setData({
             navHeight: navHeight_,
             capsuleTop:capsuleTop_, 
@@ -57,15 +58,37 @@ Component({
      * 组件的方法列表
      */
     methods: {
-        loadImage(e) {
+        headImageLoadSuccess(e) {
+            if (isEmpty(this.data.bodyBgImage)) {
+                let { detail: {width, height} } = e
+                let wB =  this.data.windowWidth / width
+                this.setData({
+                    bodyImageHeight: height * wB - this.data.navHeight
+                })
+                this.notifyParentView()
+            }
+        },
+        bodyImageLoadSuccess(e) {
             let { detail: {width, height} } = e
             let wB =  this.data.windowWidth / width
             this.setData({
-                bodyImageHeight: height * wB - this.data.navHeight
+                bodyImageHeight: height * wB
             })
+            this.notifyParentView()
         },
         handleReachBottom(e) {
             this.triggerEvent("reachbottom", e)
+        },
+        notifyParentView() {
+            this.triggerEvent("sizes", {
+                headHeight: this.data.navHeight,
+                bodyImageHeight: this.data.bodyImageHeight,
+                windowWidth: this.data.windowWidth,
+                windowHeight: this.data.windowHeight,
+                capsuleTop: this.data.capsuleTop, 
+                capHeight: this.data.capHeight,
+                bodyHeight: this.data.bodyHeight,
+            })
         }
     }
 })

components/customPage/customPage.wxml

@@ -3,12 +3,15 @@
    <view class="custom-head" style="{{headStyle}}">
         <slot name="head"/>
         <view wx:if="{{headBgImage}}" class="head-bg">
-            <image class="head-bg-img" src="{{headBgImage}}" mode=widthFix" bindload="loadImage"/>
+            <image class="head-bg-img" src="{{headBgImage}}" mode=widthFix" bindload="headImageLoadSuccess"/>
         </view>
    </view>
    <view class="custom-body" style="height: {{bodyHeight}}px;" >
     <scroll-view style="height: {{bodyHeight}}px;" scroll-y bindscrolltolower="handleReachBottom">
-     <view wx:if="{{headBgImage}}" class="body-split-bg"  style="height:{{bodyImageHeight}}px;">
+     <view wx:if="{{bodyBgImage}}" class="body-split-bg">
+         <image class="body-split-img" src="{{bodyBgImage}}" mode="widthFix" bindload="bodyImageLoadSuccess"/>
+     </view>
+     <view wx:elif="{{headBgImage}}" class="body-split-bg"  style="height:{{bodyImageHeight}}px;">
         <image class="body-split-img" style="top:-{{navHeight}}px" src="{{headBgImage}}" mode="widthFix"/>
      </view>
      <view class="body-content" style="top:-{{bodyImageHeight}}px;">

components/topbar.js

@@ -1,6 +1,6 @@
 // components/topbar.js
 Component({
-    externalClasses: ['topbar-class', 'topbar-title-class'],
+    externalClasses: ['topbar-class', 'topbar-title-class', 'back-color-class'],
     /**
      * 组件的属性列表
      */

components/topbar.wxml

@@ -1,7 +1,7 @@
 <!--components/topbar.wxml-->
 <view class="topbar topbar-class" style="top:{{capsuleTop + 3}}px; left: 28rpx;">
    <view class="back" catchtap="handleBack">
-      <image class="back-img" src="/images/back.png" />
+      <text class="back-iconfont back-color-class" />
    </view>
 
    <view class="title topbar-title-class">{{title}}</view>

pages/signIn/activity/activity.js

@@ -281,5 +281,8 @@ Page({
      */
     onShareAppMessage: function () {
 
+    },
+    handlePageSizes(e) {
+        // console.log(e)
     }
 })

pages/signIn/activity/activity.json

@@ -1,7 +1,8 @@
 {
   "usingComponents": {
     "jumpmallapp": "../../../components/jumpmallapp",
-    "topbar": "../../../components/topbar"
+    "topbar": "../../../components/topbar",
+    "custom-page": "../../../components/customPage/customPage"
   },
   "navigationStyle": "custom"
 }

pages/signIn/activity/activity.wxml

@@ -1,98 +1,92 @@
 <!--pages/signIn/index.wxml-->
 <view wx:if="{{showPage}}">
-<topbar title="签到中心" topbar-title-class="title-color" />
-<!-- 页面主体 -->
-<view class="sign-scroll-body" style="margin-top:{{navHeight}}px; height: {{bodyHeight}}px;">
-    <view class="sign-info-extra">
-        <view class="coupon_num_box">
-          <view class="my_coupon_title">签到优惠券</view>
-          <view class="_num_arear">
-              <text class="_num">{{notUseNum}}</text>
-              <text class="_unit">张</text>
-              <view class="_btn" wx:if="{{notUseNum > 0}}">
-               <jumpmallapp>去使用</jumpmallapp>
-              </view>
-          </view>
-        </view>
-        <view class="_look_btn" catchtap="toRecordDetailPage">明细 | 查看</view>
-    </view>
-    <!-- 签到卡片 -->
-    <view class="sign-card-box">
-        <view class="sign-item-box">
-            <view class="_left">
-                <view class="_item" wx:for="{{signInNodes}}" wx:key="index" >
-                    <image class="_figure" src="{{item.figure}}" mode="aspectFill" />
-                    <view class="_no" style="{{item.textBgGround}}">{{item.text}}</view>
-                    <image wx:if="{{item.isSignIn == -1}}" class="_lose_sign_in" src="/images/signIn/losesign.png" />
-                    <image wx:if="{{item.isSignIn == 1}}" class="_finish_sign_in" src="/images/signIn/finishsign.png" />
+
+<custom-page head-bg-image="{{activity.themePic}}" bind:sizes="handlePageSizes">
+    <topbar slot="head" title="签到中心" topbar-title-class="title-color" back-color-class="title-color" />
+    <!-- 页面主体 -->
+    <view slot="body" class="sign-scroll-body">
+        <view class="sign-info-extra">
+            <view class="coupon_num_box">
+            <view class="my_coupon_title">签到优惠券</view>
+            <view class="_num_arear">
+                <text class="_num">{{notUseNum}}</text>
+                <text class="_unit">张</text>
+                <view class="_btn" wx:if="{{notUseNum > 0}}">
+                <jumpmallapp>去使用</jumpmallapp>
                 </view>
             </view>
-            <view class="_right">
-                <view class="_item">
-                    <image class="_figure" src="{{lastSignInNode.figure}}" mode="aspectFill" />
-                    <view class="_no" style="{{lastSignInNode.textBgGround}}">{{lastSignInNode.text}}</view>
-                    <image wx:if="{{lastSignInNode.isSignIn == -1}}" class="_lose_sign_in" src="/images/signIn/losesign.png" />
-                    <image wx:if="{{lastSignInNode.isSignIn == 1}}" class="_finish_sign_in" src="/images/signIn/finishsign.png" />
-                </view>
             </view>
+            <view class="_look_btn" catchtap="toRecordDetailPage">明细 | 查看</view>
         </view>
-        
-        <block wx:if="{{todayIsSigned}}">
-            <view class="_sign_in_btn">今日已签到</view>
-        </block>
-        <block wx:else>
-            <view class="_sign_in_btn" style="{{backGroundStyle}}" catchtap="tapSignIn">
-                签到领好礼
-                <button wx:if="{{!isLogin}}" class="phone-button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" />
+        <!-- 签到卡片 -->
+        <view class="sign-card-box">
+            <view class="sign-item-box">
+                <view class="_left">
+                    <view class="_item" wx:for="{{signInNodes}}" wx:key="index" >
+                        <image class="_figure" src="{{item.figure}}" mode="aspectFill" />
+                        <view class="_no" style="{{item.textBgGround}}">{{item.text}}</view>
+                        <image wx:if="{{item.isSignIn == -1}}" class="_lose_sign_in" src="/images/signIn/losesign.png" />
+                        <image wx:if="{{item.isSignIn == 1}}" class="_finish_sign_in" src="/images/signIn/finishsign.png" />
+                    </view>
+                </view>
+                <view class="_right">
+                    <view class="_item">
+                        <image class="_figure" src="{{lastSignInNode.figure}}" mode="aspectFill" />
+                        <view class="_no" style="{{lastSignInNode.textBgGround}}">{{lastSignInNode.text}}</view>
+                        <image wx:if="{{lastSignInNode.isSignIn == -1}}" class="_lose_sign_in" src="/images/signIn/losesign.png" />
+                        <image wx:if="{{lastSignInNode.isSignIn == 1}}" class="_finish_sign_in" src="/images/signIn/finishsign.png" />
+                    </view>
+                </view>
             </view>
-        </block>
+            
+            <block wx:if="{{todayIsSigned}}">
+                <view class="_sign_in_btn">今日已签到</view>
+            </block>
+            <block wx:else>
+                <view class="_sign_in_btn" style="{{backGroundStyle}}" catchtap="tapSignIn">
+                    签到领好礼
+                    <button wx:if="{{!isLogin}}" class="phone-button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" />
+                </view>
+            </block>
 
-    </view>
+        </view>
 
-    <!-- 签到任务列表 -->
-    <view class="sign-task-box">
-        <view class="_task_title">做任务领优惠券</view>
-        <view class="_task_list">
-            <!-- 签到项 -->
-            <view wx:for="{{activity.taskAwardList}}" wx:key="index" class="_task_item">
-               <view  class="_task_item_left">
-                   <view class="_ico">
-                     <image src="{{item.figure}}" mode="aspectFill" />
-                   </view>
-                   <view class="_info">
-                        <view class="_title">{{item.taskTitle}}</view>
-                        <view class="_des">{{item.taskSubtitle}}</view>
-                   </view>
-               </view>
-               <view class="_task_item_right">
-                   <view style="color:#999;" class="_btn" wx:if="{{item.isComplete == 1}}">
-                    已完成
-                   </view>
-                   <view style="color: {{mainColor}};" class="_btn" wx:else>
-                    未完成
-                   </view>
-               </view>
+        <!-- 签到任务列表 -->
+        <view class="sign-task-box">
+            <view class="_task_title">做任务领优惠券</view>
+            <view class="_task_list">
+                <!-- 签到项 -->
+                <view wx:for="{{activity.taskAwardList}}" wx:key="index" class="_task_item">
+                <view  class="_task_item_left">
+                    <view class="_ico">
+                        <image src="{{item.figure}}" mode="aspectFill" />
+                    </view>
+                    <view class="_info">
+                            <view class="_title">{{item.taskTitle}}</view>
+                            <view class="_des">{{item.taskSubtitle}}</view>
+                    </view>
+                </view>
+                <view class="_task_item_right">
+                    <view style="color:#999;" class="_btn" wx:if="{{item.isComplete == 1}}">
+                        已完成
+                    </view>
+                    <view style="color: {{mainColor}};" class="_btn" wx:else>
+                        未完成
+                    </view>
+                </view>
+                </view>
             </view>
         </view>
-    </view>
 
-    <!-- 活动说明 -->
-    <view class="activity-des">
-       <view class="_title">活动说明</view>
-       <view class="_des">
-          <text>{{activity.activityDesc}}</text>
-       </view>
+        <!-- 活动说明 -->
+        <view class="activity-des">
+            <view class="_title">活动说明</view>
+            <view class="_des">
+                <text>{{activity.activityDesc}}</text>
+            </view>
+        </view>
     </view>
-
-</view>
-
-<!-- 页面头部 -->
-<view class="sign-head">
-   <view class="head-bg">
-    <image src="{{activity.themePic}}" />
-   </view>
-</view>
-
+</custom-page>
 
 <!-- 签到成功弹窗 -->
 <view class="dlg" wx:if="{{showSignInSuccessDlg}}">

pages/signIn/activity/activity.wxss

@@ -4,7 +4,7 @@ page {
 }
 
 .title-color {
-    color: #fff;
+    color: #EA443A;
 }
 
 .sign-head {
@@ -30,12 +30,10 @@ page {
 .sign-scroll-body {
     position: relative;
     z-index: 2;
-    height: 10000rpx;
-    overflow-y: auto;
 }
 
 .sign-info-extra {
-    height: 285rpx;
+    height: 252rpx;
     width: 100vw;
     display: flex;
     flex-direction: row;
@@ -44,11 +42,11 @@ page {
 .coupon_num_box {
     flex: 1;
     box-sizing: border-box;
-    padding: 52rpx 0 20rpx 80rpx;
+    padding: 20rpx 0 20rpx 80rpx;
 }
 
 .coupon_num_box {
-    color: #fff;
+    color: #EA443A;
 }
 .my_coupon_title {
     font-size: 24rpx;