扫脸页样式高度获取延迟处理

pages/album/albumIndex.vue

 <template>
 	<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}" v-if="show">
 
-		<view class="nav-bar" :style="{'top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
+		<view class="nav-bar"
+			:style="{'top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
 			<u-icon name="arrow-left" v-if="options.index" @click="returnClick"></u-icon>
 			摄影/旅拍
 		</view>
 
 		<view class="body">
-			<view class="scroll-view" >
+			<view class="scroll-view">
 				<view class="item" @click="jumpToScanFaceClick">
 					<image class="img" src="./static/album/myAlbum.png"></image>
 					<text class="title">我的相片</text>
@@ -30,7 +31,8 @@
 				<view class="title">私人定制</view>
 				<u-waterfall v-model="list" ref="uWaterfall">
 					<template v-slot:left="{leftList}">
-						<view class="left demo-water" v-for="(item, index) in leftList" :key="index" @click="jumpToClick(item.title)">
+						<view class="left demo-water" v-for="(item, index) in leftList" :key="index"
+							@click="jumpToClick(item.title)">
 							<image :src="item.image" mode="aspectFill"></image>
 							<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> -->
 							<view class="info-box" :style="{'background-color': item.color}">
@@ -47,7 +49,8 @@
 						</view>
 					</template>
 					<template v-slot:right="{rightList}">
-						<view class="demo-water" v-for="(item, index) in rightList" :key="index" @click="jumpToClick(item.title)">
+						<view class="demo-water" v-for="(item, index) in rightList" :key="index"
+							@click="jumpToClick(item.title)">
 							<image :src="item.image" mode="aspectFill"></image>
 							<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> -->
 							<view class="info-box" :style="{'background-color': item.color}">
@@ -68,11 +71,7 @@
 		</view>
 
 		<view class="coupon" @click="couponTip = true">
-			<image
-				class="coupon-img"
-				src="@/static/img/my/coupon.png"
-				mode="aspectFit"
-				v-if="isHaveCoupon">
+			<image class="coupon-img" src="@/static/img/my/coupon.png" mode="aspectFit" v-if="isHaveCoupon">
 			</image>
 			<text class="coupon-price">
 				<text class="r-symbol">￥</text>
@@ -140,16 +139,15 @@ export default {
   },
   data() {
     return {
-      postCartTip: false,//明信片领取提示
-      couponTip: false,//券领取提示
-      showUseRule: false,//使用规则提示
+      postCartTip: false, //明信片领取提示
+      couponTip: false, //券领取提示
+      showUseRule: false, //使用规则提示
       statusBarHeight: 0,
       capsule: 0,
       navHeight: 0,
-      show: false,//是否显示首页
-      isHaveCoupon: false,//是否有劵
-      list: [
-        {
+      show: false, //是否显示首页
+      isHaveCoupon: false, //是否有劵
+      list: [{
         title: '精彩瞬间',
         count: '10W+',
         image: './static/album/wonderfulMoment.png',
@@ -186,18 +184,20 @@ export default {
         color: '#D48D46'
       }
       ],
-      rules: [],//使用规则
-      options: {},//路由参数
-      couponPrice: '',//优惠券金额
+      rules: [], //使用规则
+      options: {}, //路由参数
+      couponPrice: '', //优惠券金额
       openid: '',
       userId: '',
     }
   },
   methods: {
     returnClick() {
-      uni.navigateBack({delta: 1})
+      uni.navigateBack({
+        delta: 1
+      })
     },
-    closeMask() {//---关闭遮罩
+    closeMask() { //---关闭遮罩
       this.postCartTip = false
       this.couponTip = false
       this.showUseRule = false
@@ -206,23 +206,24 @@ export default {
       this.couponTip = false
       this.showUseRule = true
     },
-    jumpToScanFaceClick() {//---跳转扫脸页面
-			
-      this.$request('wechatUser/pdFace/checkScanFace',{openid: this.openid}).then(res => {
+    jumpToScanFaceClick() { //---跳转扫脸页面
+      this.$request('wechatUser/pdFace/checkScanFace', {
+        openid: this.openid
+      }).then(res => {
         if (res.code === '00') {
-          const merchantId = this.options.merchantId || 'z0015605022691a5945bbe463141668c'// 默认长江索道
-			    if(res.data.isScanFace === 0) {//未扫脸
+          const merchantId = this.options.merchantId || 'z0015605022691a5945bbe463141668c' // 默认长江索道
+          if (res.data.isScanFace === 0) { //未扫脸
             uni.navigateTo({
               url: `./getPortrait?merchantId${merchantId}`
             })
-          }else if(res.data.isScanFace === 1) {//已扫脸
+          } else if (res.data.isScanFace === 1) { //已扫脸
             const faceIds = JSON.stringify(res.data.faceIds)
             const companyId = this.options.companyId
             uni.navigateTo({
               url: `./myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId${merchantId}`
             })
           }
-			  }else{
+        } else {
           uni.showToast({
             title: res.message,
             icon: 'none'
@@ -235,22 +236,22 @@ export default {
         })
       })
     },
-    jumptoVlog() {//---跳转到vlog页面
+    jumptoVlog() { //---跳转到vlog页面
       uni.redirectTo({
         url: '/pages/vlog/vlogIndex/vlogIndex'
       })
     },
     jumpToClick(title) {
-      if(title === '精彩瞬间' || title === '网红旅拍') {
+      if (title === '精彩瞬间' || title === '网红旅拍') {
         this.jumpToScanFaceClick()
       }
     },
-    judgeWhether(url, data) {//---判断是否成功的封装函数
+    judgeWhether(url, data) { //---判断是否成功的封装函数
       return new Promise((resolve, reject) => {
         this.$request(url, data).then(res => {
           if (res.code === '00') {
             resolve(res.data)
-		      }else{
+          } else {
             reject(false)
           }
         }).catch(() => {
@@ -258,11 +259,11 @@ export default {
         })
       })
     },
-	  async	handleWhetherToVotePage() {//---判断是否跳转投票页面
+    async handleWhetherToVotePage() { //---判断是否跳转投票页面
       // 1.获取调查列表
       const surveyQueryData = {
-        pageCode: 'albumIndex',//默认前端写死
-        channelId: this.options.channelId//游客扫码携带的channelId或者是胖丁登录时的公司id
+        pageCode: 'albumIndex', //默认前端写死
+        channelId: this.options.channelId //游客扫码携带的channelId或者是胖丁登录时的公司id
       }
 
       const surveyList = await this.judgeWhether('scenic/market/findPageMarket', surveyQueryData)
@@ -271,15 +272,17 @@ export default {
       let surveyIds
       let surveyResult = []
 
-      if(surveyList.length) {
+      if (surveyList.length) {
         surveyIds = surveyList.map(item => item.surveyId)
-        surveyResult = await this.judgeWhether('scenic/albumConfig/getSurveyConfig', { surveyIds })
+        surveyResult = await this.judgeWhether('scenic/albumConfig/getSurveyConfig', {
+          surveyIds
+        })
       }
 
       // 3.判断用户是否已经投过票
-      let voteObj = {}// 用户投票信息
+      let voteObj = {} // 用户投票信息
 
-      if(surveyResult.length) {				
+      if (surveyResult.length) {
         // 默认保存第一个商店id
         // this.options.merchantId = surveyResult[0].merchantId
 
@@ -291,25 +294,25 @@ export default {
       }
 
       // 4.判断是否跳转投票页面
-      if(voteObj.alreadySurvey === 0) {// 未投过票	
+      if (voteObj.alreadySurvey === 0) { // 未投过票	
         uni.navigateTo({
           url: `./chooseFavorite?surveyConfig=${JSON.stringify(surveyResult)}`
         })
-      }else if(voteObj.alreadySurvey === 1) {// 已投票
+      } else if (voteObj.alreadySurvey === 1) { // 已投票
         this.show = true
       }
     },
-    findPageMarketFun(){//---获取优惠券
+    findPageMarketFun() { //---获取优惠券
       var data = {
         pageCode: 'albumIndex',
         marketingStatus: 1,
         openid: this.openid,
         userId: this.userId
       }
-		  this.$request('scenic/market/findPageMarket',data).then((res)=>{
-			  if(res.code === '00'){
+      this.$request('scenic/market/findPageMarket', data).then((res) => {
+        if (res.code === '00') {
           this.couponIsUse()
-		    }else{
+        } else {
           uni.showToast({
             title: res.message,
             icon: 'none'
@@ -317,27 +320,34 @@ export default {
         }
       })
     },
-    couponIsUse() {//---判断是否有劵
-      this.$request('wechatUser/myPage/getUserCouponList',{openid: this.openid}).then(res => {
+    couponIsUse() { //---判断是否有劵
+      this.$request('wechatUser/myPage/getUserCouponList', {
+        openid: this.openid
+      }).then(res => {
         if (res.code === '00') {
           res.data.forEach(item => {
-            if(item.useRange === 11 && item.couponStatus === 1) {
+            if (item.useRange === 11 && item.couponStatus === 1) {
               this.isHaveCoupon = true
               this.couponPrice = item.deductPrice
 
               // 处理使用规则数据结构
               let ruleContents = item.couponRule ? item.couponRule.split(';') : []
               ruleContents = ruleContents.map(value => {
-							  return {value}
+                return {
+                  value
+                }
               })
               this.rules.push({
                 ruleName: '规则说明',
                 contents: ruleContents
               })
 
-              let elseContents = item.couponRuleRemind ? item.couponRuleRemind.split(';') : []
+              let elseContents = item.couponRuleRemind ? item.couponRuleRemind.split(
+                ';') : []
               elseContents = elseContents.map(value => {
-							  return {value}
+                return {
+                  value
+                }
               })
               this.rules.push({
                 ruleName: '补充说明',
@@ -345,7 +355,7 @@ export default {
               })
             }
           })
-			  }else{
+        } else {
           uni.showToast({
             title: res.message,
             icon: 'none'
@@ -358,7 +368,7 @@ export default {
         })
       })
     },
-    recordDeviceInfo() {//---记录设备信息
+    recordDeviceInfo() { //---记录设备信息
       this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
       this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
       this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
@@ -371,18 +381,18 @@ export default {
     this.findPageMarketFun()
     this.recordDeviceInfo()
     this.options = options
-    if(this.options.tip === 'true') {// 从模板选择页进入
+    if (this.options.tip === 'true') { // 从模板选择页进入
       this.show = true
       this.postCartTip = true
-    }else if(this.options.index == 1) {// 从vlog首页进入
+    } else if (this.options.index == 1) { // 从vlog首页进入
       this.show = true
-    }else {// 扫码进入本页
+    } else { // 扫码进入本页
       this.handleWhetherToVotePage()
     }
 
-    if(uni.getStorageSync('location')) return
+    if (uni.getStorageSync('location')) return
 
-    uni.getLocation({//获取定位
+    uni.getLocation({ //获取定位
       type: 'wgs84',
       success: res => {
         uni.setStorageSync('location', JSON.stringify(res))
@@ -404,6 +414,7 @@ export default {
 		padding: 0 24rpx;
 		background: linear-gradient(to right bottom, #c778f350, #66ddad50, #68d6de50);
 		z-index: 0;
+
 		&::after {
 			content: '';
 			width: 100%;
@@ -414,22 +425,26 @@ export default {
 			z-index: -1;
 			background: linear-gradient(to top, #f7f7f7, #f7f7f7 80%, transparent 100%);
 		}
+
 		/deep/.u-mask {
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			transform: scale(1);
 		}
+
 		.coupon {
 			position: fixed;
 			right: -30rpx;
 			bottom: 200rpx;
 			width: 180rpx;
 			height: 180rpx;
+
 			.coupon-img {
 				width: 100%;
 				height: 100%;
 			}
+
 			.coupon-price {
 				position: absolute;
 				bottom: 64rpx;
@@ -439,16 +454,19 @@ export default {
 				font-weight: 700;
 				color: #fff;
 			}
+
 			.r-symbol {
 				font-size: 10rpx;
 			}
 		}
 	}
+
 	.nav-bar {
 		font-size: 36rpx;
 		font-weight: 700;
 		z-index: 9;
 	}
+
 	.scroll-view {
 		display: flex;
 		width: calc(100% + 48rpx);
@@ -458,34 +476,40 @@ export default {
 		overflow-x: auto;
 		padding: 46rpx 0 0 24rpx;
 		margin-bottom: 48rpx;
+
 		&::-webkit-scrollbar {
 			display: none;
 		}
+
 		.item {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			margin-right: 24rpx;
 		}
+
 		.img {
 			width: 200rpx;
 			height: 136rpx;
 			border-radius: 16rpx;
 			margin-bottom: 16rpx;
-			box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.12);
+			box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.12);
 			overflow: hidden;
 		}
+
 		.title {
 			font-size: 28rpx;
 			font-weight: 700;
 		}
 	}
+
 	.private-custom {
 		.title {
 			position: relative;
 			margin-bottom: 24rpx;
 			font-size: 32rpx;
 			font-weight: 700;
+
 			&::after {
 				content: '';
 				width: 128rpx;
@@ -496,23 +520,28 @@ export default {
 				background: url('@/pages/album/static/album/private-custom.png') no-repeat;
 			}
 		}
+
 		.demo-water {
 			image {
 				border-radius: 16rpx 16rpx 0 0;
 				height: 458rpx;
 				width: 100%;
 			}
+
 			/deep/.u-wrap,
 			/deep/.u-lazy-item {
 				broder-radius: 16rpx 16rpx 0 0 !important;
 			}
 		}
+
 		.left.demo-water {
 			margin-right: 14rpx;
+
 			image {
 				height: 400rpx;
 			}
 		}
+
 		.info-box {
 			display: flex;
 			flex-direction: column;
@@ -524,13 +553,16 @@ export default {
 			box-sizing: border-box;
 			border-radius: 0 0 16rpx 16rpx;
 			color: #fff;
+
 			.item-title {
 				font-size: 28rpx;
 				font-weight: 700;
 			}
+
 			.slogan {
 				font-size: 24rpx;
 			}
+
 			.img-btn {
 				display: flex;
 				justify-content: center;
@@ -542,9 +574,11 @@ export default {
 				color: #333;
 				font-size: 22rpx;
 			}
+
 			.bottom {
 				display: flex;
 				justify-content: space-between;
+
 				.count {
 					font-size: 28rpx;
 					color: #ececec;
@@ -552,20 +586,24 @@ export default {
 			}
 		}
 	}
+
 	.mask {
 		width: 504rpx;
 		height: 720rpx;
+
 		.img-box {
 			position: relative;
 			margin-bottom: 32rpx;
 			width: 100%;
 			height: 100%;
+
 			.close {
 				position: absolute;
 				top: -64rpx;
 				right: 24rpx;
 				color: #fff;
 				font-size: 40rpx;
+
 				&::after {
 					position: absolute;
 					content: '';
@@ -577,6 +615,7 @@ export default {
 					border-left: 1px dotted #fff;
 				}
 			}
+
 			.bg {
 				position: absolute;
 				left: 0;
@@ -585,11 +624,13 @@ export default {
 				height: 100%;
 				z-index: -1;
 			}
+
 			.my-card {
 				width: 85%;
 				height: 340rpx;
 			}
 		}
+
 		.post-card,
 		.coupon-box,
 		.rules {
@@ -600,53 +641,66 @@ export default {
 			height: 100%;
 			overflow-y: auto;
 		}
+
 		.post-card {
 			justify-content: space-between;
 			font-size: 36rpx;
+
 			.thank {
 				font-size: 28rpx;
 				color: #999;
 			}
+
 			.tip-content {
 				display: flex;
 				flex-direction: column;
 				align-items: center;
 			}
+
 			.address {
 				font-size: 24rpx;
 				font-weight: 700;
 			}
 		}
+
 		.coupon-box {
 			justify-content: space-between;
 			font-size: 36rpx;
+
 			.congra {
 				font-weight: 700;
 			}
+
 			.price {
 				margin: 0 6rpx;
 				font-size: 64rpx;
 				font-weight: 700;
 				color: #EE520E;
 			}
+
 			.use-rule,
 			.address {
 				font-size: 24rpx;
 			}
+
 			.address {
 				font-weight: 700;
 			}
 		}
+
 		.rules {
 			padding: 50rpx 32rpx 24rpx;
+
 			.title {
 				font-size: 36rpx;
 				font-weight: 700;
 				margin-bottom: 48rpx;
 			}
+
 			.block {
 				font-size: 32rpx;
 				align-self: flex-start;
+
 				.name {
 					display: inline-block;
 					padding: 4rpx 16rpx;
@@ -656,21 +710,26 @@ export default {
 					background-color: #000;
 					color: #fff;
 				}
+
 				.small-font {
 					display: flex;
 					font-size: 20rpx;
 				}
+
 				.small-font:not(:last-child) {
 					margin-bottom: 16rpx;
 				}
+
 				.dot {
 					margin-right: 10rpx;
 				}
 			}
+
 			.block:not(:last-child) {
 				margin-bottom: 32rpx;
 			}
 		}
+
 		/deep/.u-btn {
 			width: 304rpx;
 		}

pages/album/getPortrait.vue

 <template>
-	<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}">
+	<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}" v-if="statusBarHeight">
 		<view class="nav-bar" :style="{'height': navHeight + 'px'}"></view>
 		<text class="title">扫脸获取您的照片</text>
 		<view class="scan">