滚动组件，预览图组件

components/customPage/customPage.js

@@ -0,0 +1,71 @@
+const { isEmpty } = require("../../utils/util")
+
+// components/customPage/customPage.js
+Component({
+    options:{
+        multipleSlots: true
+    },
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        headBgImage: {
+            type: String,
+            value: ''
+        },
+        headBgColor: {
+            type: String,
+            value: ''
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        bodyImageHeight: 0
+    },
+
+    attached: function() {
+        let dwObj = wx.getMenuButtonBoundingClientRect()
+        let navHeight_ = (dwObj.top + dwObj.height)
+        let capsuleTop_ = dwObj.top
+        const systemInfoSync = wx.getSystemInfoSync()
+        const windowHeight = systemInfoSync.windowHeight
+        const windowWidth = systemInfoSync.windowWidth;
+        navHeight_ += capsuleTop_ / 8;
+
+        let headStyle = "height:" + navHeight_ + "px;";
+        if (this.data.headBgColor) {
+            headStyle += "background-color:" + this.data.headBgColor +";"
+        }
+
+        console.log(windowWidth, systemInfoSync)
+
+        this.setData({
+            navHeight: navHeight_,
+            capsuleTop:capsuleTop_, 
+            capHeight: dwObj.height,
+            bodyHeight: windowHeight - navHeight_,
+            windowWidth,
+            windowHeight,
+            headStyle,
+        });
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        loadImage(e) {
+            let { detail: {width, height} } = e
+            let wB =  this.data.windowWidth / width
+            this.setData({
+                bodyImageHeight: height * wB - this.data.navHeight
+            })
+        },
+        handleReachBottom(e) {
+            this.triggerEvent("reachbottom", e)
+        }
+    }
+})

components/customPage/customPage.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/customPage/customPage.wxml

@@ -0,0 +1,22 @@
+<!--components/customPage/customPage.wxml-->
+<view class="custom-page">
+   <view class="custom-head" style="{{headStyle}}">
+        <slot name="head"/>
+        <view wx:if="{{headBgImage}}" class="head-bg">
+            <image src="{{headBgImage}}" mode=widthFix" bindload="loadImage"/>
+        </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;">
+        <image style="top:-{{navHeight}}px" src="{{headBgImage}}" mode="widthFix"/>
+     </view>
+     <view class="body-content" style="top:-{{bodyImageHeight}}px;">
+        <slot name="body" />
+     </view>
+   </scroll-view>
+   </view>
+
+   
+
+</view>

components/customPage/customPage.wxss

@@ -0,0 +1,45 @@
+/* components/customPage/customPage.wxss */
+page {
+    height: 100vh;
+    overflow: hidden;
+}
+.custom-body {
+    overflow-y: hidden;
+}
+.custom-head {
+    position: relative;
+    width: 100vw;
+}
+.head-bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: block;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+}
+.head-bg image {
+    display: block;
+    width: 100%;
+}
+
+.body-split-bg {
+    width: 100%;
+    position: relative;
+    z-index: 0;
+    display: block;
+    overflow: hidden;
+}
+.body-split-bg image {
+    width: 100%;
+    position: relative;
+    display: block;
+    padding: 0;
+    margin: 0;
+}
+
+.body-content {
+    position: relative;
+    z-index: 1;
+}

components/customPreviewImage/customPreviewImage.js

@@ -26,7 +26,20 @@ Component({
      */
     methods: {
         handleClose() {
-            this.triggerEvent("closeCallback")
+            console.log(this.endTime, this.startTime, this.endTime - this.startTime)
+            if (this.endTime - this.startTime < 350) {
+                this.triggerEvent("closeCallback")
+            }
+        },
+        handleStart() {
+            this.startTime = new Date().getTime()
+        },
+        handleEnd() {
+            this.endTime = new Date().getTime()
+        },
+        longPress() {
+            //this.triggerEvent("closeCallback")
         }
+
     }
 })

components/customPreviewImage/customPreviewImage.wxml

@@ -1,6 +1,10 @@
 <!--components/customPreviewImage/customPreviewImage.wxml-->
-<view class="preview-body" bindtap="handleClose">
-    <image src="{{src}}" mode="aspectFit" />
+<view class="preview-body" bindtouchstart="handleStart" bindtouchend="handleEnd" bindlongpress="longPress" bindtap="handleClose">
+
+    <view class="preview-box">
+        <image src="{{src}}" mode="aspectFit" />
+    </view>
+
 </view>
 
 

components/customPreviewImage/customPreviewImage.wxss

@@ -8,7 +8,24 @@
     z-index: 10001;
     background: rgba(0, 0, 0, 0.9);
 }
-.preview-body image {
+
+.preview-box {
+    margin: 120rpx 20rpx;
+    width: calc(100vw - 40rpx);
+    height: calc(100vh - 240rpx);
+    position: relative;
+    z-index: 2;
+}
+
+.preview-box image {
+    width: 100%;
+    height: 100%;
+}
+.preview-body ._layer {
     width: 100%;
     height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
 }

pages/luckDraw/profile.js

@@ -154,6 +154,10 @@ Page({
      * 页面上拉触底事件的处理函数
     */
     onReachBottom: function () {
+
+    },
+
+    scrollToBottom() {
         if (this.data.lock || this.data.noMore) {
             return
         }
@@ -161,7 +165,6 @@ Page({
         this.data.page++
         this.getUserPrizeList()
     },
-    
 
     toPrize(e) {
         const url = "prize?id=" + e.currentTarget.dataset.id

pages/luckDraw/profile.json

@@ -3,7 +3,8 @@
   "usingComponents": {
     "tab-bar": "./components/tabbar",
     "topbar": "../../components/topbar",
-    "custom-preview-image": "../../components/customPreviewImage/customPreviewImage"
+    "custom-preview-image": "../../components/customPreviewImage/customPreviewImage",
+    "custom-page": "../../components/customPage/customPage"
   },
   "navigationStyle":"custom"
 }

pages/luckDraw/profile.wxml

@@ -1,79 +1,86 @@
 <!--pages/luckDraw/profile.wxml-->
 <!-- 首部信息 -->
-<view class="head flex-column">
-<topbar title="抽奖记录" topbar-title-class="profile-topbar"/>
-  <image wx:if="{{!isLogin}}" class="head_portrait" src="/images/welfareMall/head-portrait.png" />
-  <!-- 获取用户头像 -->
-  <open-data wx:if="{{isLogin}}" class="head_portrait" type="userAvatarUrl"></open-data>
-  <view class="head_text" wx:if="{{isLogin}}">{{phone.toHide(mobileTop)}}</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?'getProfile':''}}">
-    <view class="explain-text">{{couponNum}}</view>
-    <view class="explain-discount">优惠券</view>
-    <view class="{{noCoupon?'explain-column':'explain-columnNo'}}"></view>
-  </view>
-  <view class="explain-right flex-column" catchtap="{{isLogin?'getPrize':''}}">
-    <view class="explain-text">{{thirdPrizeNum}}</view>
-    <view class="explain-utility">奖品</view>
-    <view class="{{noPrize?'explain-column':'explain-columnNo'}}"></view>
-  </view>
-</view>
-<!-- 主要内容 -->
-<view class="check-in-content flex-column">
-  <!-- 优惠券内容 -->
-  <view hidden="{{hidden1}}">
-    <view wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" class="{{item.couponType == 'C'?'coupon flex-row':'coupon2 flex-row'}}">
-      <view class="coupon-left flex-row">
-        <!-- 代金券 -->
-        <view class="coupon-left-symbol" wx:if="{{item.couponType == 'C'}}">￥</view>
-        <view class="{{item.formatReduceCost.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.couponType == 'C'}}">{{item.formatReduceCost ?item.formatReduceCost:0}}</view>
-        <!-- 折扣券 -->
-        <view class="{{item.formatDiscount.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.couponType == 'D'}}">{{item.formatDiscount ?item.formatDiscount:0}}</view>
-        <view class="coupon-left-symbol" wx:if="{{item.couponType == 'D'}}" style="font-size: 16px;">折</view>
+<custom-page head-bg-image="https://dy.shpr.top/luckDraw/per_head.png" bind:reachbottom="scrollToBottom">
+  <topbar slot="head" title="抽奖记录" topbar-title-class="profile-topbar"/>
+  <view slot="body">
+    <view class="head flex-column">
+      <image wx:if="{{!isLogin}}" class="head_portrait" src="/images/welfareMall/head-portrait.png" />
+      <!-- 获取用户头像 -->
+      <open-data wx:if="{{isLogin}}" class="head_portrait" type="userAvatarUrl"></open-data>
+      <view class="head_text" wx:if="{{isLogin}}">{{phone.toHide(mobileTop)}}</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?'getProfile':''}}">
+        <view class="explain-text">{{couponNum}}</view>
+        <view class="explain-discount">优惠券</view>
+        <view class="{{noCoupon?'explain-column':'explain-columnNo'}}"></view>
       </view>
-      <view class="coupon-center flex-column">
-        <view class="coupon-center-upper over-ellipsis">{{item.couponTitle}}</view>
-        <view class="coupon-center-bm flex-row">
-          <view class="coupon-center-block1"></view>
-          <view class="coupon-center-middle" wx:if="{{item.formatLeastCost == '0'}}">无门槛</view>
-          <view class="coupon-center-middle" wx:if="{{item.formatLeastCost != '0'}}">满{{item.formatLeastCost}}使用</view>
-          <view class="coupon-center-block2"></view>
-        </view>
-        <view class="coupon-center-lower">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</view>
+      <view class="explain-right flex-column" catchtap="{{isLogin?'getPrize':''}}">
+        <view class="explain-text">{{thirdPrizeNum}}</view>
+        <view class="explain-utility">奖品</view>
+        <view class="{{noPrize?'explain-column':'explain-columnNo'}}"></view>
       </view>
-      <view class="coupon-right">
-        <view class="{{item.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 class="check-in-content flex-column">
+      <!-- 优惠券内容 -->
+      <view hidden="{{hidden1}}">
+        <view wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}" class="{{item.couponType == 'C'?'coupon flex-row':'coupon2 flex-row'}}">
+          <view class="coupon-left flex-row">
+            <!-- 代金券 -->
+            <view class="coupon-left-symbol" wx:if="{{item.couponType == 'C'}}">￥</view>
+            <view class="{{item.formatReduceCost.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.couponType == 'C'}}">{{item.formatReduceCost ?item.formatReduceCost:0}}</view>
+            <!-- 折扣券 -->
+            <view class="{{item.formatDiscount.length > 3 ?'coupon-left-numSmall':'coupon-left-num'}}" wx:if="{{item.couponType == 'D'}}">{{item.formatDiscount ?item.formatDiscount:0}}</view>
+            <view class="coupon-left-symbol" wx:if="{{item.couponType == 'D'}}" style="font-size: 16px;">折</view>
+          </view>
+          <view class="coupon-center flex-column">
+            <view class="coupon-center-upper over-ellipsis">{{item.couponTitle}}</view>
+            <view class="coupon-center-bm flex-row">
+              <view class="coupon-center-block1"></view>
+              <view class="coupon-center-middle" wx:if="{{item.formatLeastCost == '0'}}">无门槛</view>
+              <view class="coupon-center-middle" wx:if="{{item.formatLeastCost != '0'}}">满{{item.formatLeastCost}}使用</view>
+              <view class="coupon-center-block2"></view>
+            </view>
+            <view class="coupon-center-lower">{{item.couponBeginTimestamp}}-{{item.couponEndTimestamp}}</view>
+          </view>
+          <view class="coupon-right">
+            <view class="{{item.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 class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可用优惠券 ————</view>
+        <view class="no_result" wx:if="{{noMore}}">———— 更多优惠券 | 敬请期待 ————</view>
       </view>
-    </view>
-    <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可用优惠券 ————</view>
-    <view class="no_result" wx:if="{{noMore}}">———— 更多优惠券 | 敬请期待 ————</view>
-  </view>
 
-  <!-- 奖品 -->
-  <view hidden="{{hidden2}}">
-    <view class="prize-content flex-row" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}">
-      <view class="prize-img flex-column">
-        <image class="prize-img-small" src="{{item.fullGoodsSmallImage}}" />
-      </view>
-      <view class="prize-text">
-        <view class="prize-text-top over-ellipsis">{{item.goodsName}}</view>
-        <view class="prize-text-buttom over-ellipsis-two">{{item.hitDesc}}</view>
-      </view>
-      <view class="prize-jump flex-row">
-        <view class="btn_exchange" data-src="{{item.fullGoodsBigImage}}" catchtap="toLookHitPhoto">
+      <!-- 奖品 -->
+      <view hidden="{{hidden2}}">
+        <view class="prize-content flex-row" wx:for="{{goodsItemList}}" wx:key="index" data-id="{{item.id}}">
+          <view class="prize-img flex-column">
+            <image class="prize-img-small" src="{{item.fullGoodsSmallImage}}" />
+          </view>
+          <view class="prize-text">
+            <view class="prize-text-top over-ellipsis">{{item.goodsName}}</view>
+            <view class="prize-text-buttom over-ellipsis-two">{{item.hitDesc}}</view>
+          </view>
+          <view class="prize-jump flex-row">
+            <view class="btn_exchange" data-src="{{item.fullGoodsBigImage}}" catchtap="toLookHitPhoto">
+            </view>
+          </view>
         </view>
+        <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可领取奖品 ————</view>
+        <view class="no_result" wx:if="{{noMore}}">———— 更多奖品 | 敬请期待 ————</view>
       </view>
     </view>
-    <view class="no_result" wx:if="{{noResult}}">———— 抱歉，您暂无可领取奖品 ————</view>
-    <view class="no_result" wx:if="{{noMore}}">———— 更多奖品 | 敬请期待 ————</view>
+
   </view>
-</view>
+</custom-page>
+
+
 
 <!-- 使用wxs 手机号码中间四位显示为*号 -->
 <wxs module="phone">

pages/luckDraw/profile.wxss

@@ -19,8 +19,6 @@
 .head{
   width: 750rpx;
   height: 464rpx;
-  background-image: url(https://dy.shpr.top/luckDraw/per_head.png);
-  background-size: 100% 100%;
 }
 
 .head_portrait{
@@ -31,6 +29,10 @@
   margin-top: 170rpx;
 }
 
+.body-content {
+  position: relative;
+}
+
 .head_text{
   font-size: 40rpx;
   font-family: Source Han Sans CN;