首页新增劵使用规则提示

pages/album/albumIndex.vue

 <template>
 	<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}" v-show="show">
+		
 		<view class="nav-bar" :style="{'top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
 			摄影/旅拍
 		</view>
+		
 		<view class="body">
 			<view class="scroll-view" >
 				<view class="item" @click="jumpToScanFaceClick">
@@ -63,15 +65,21 @@
 				</u-waterfall>
 			</view>
 		</view>
-		<u-mask :show="showtip" >
+		
+		<image class="coupon" src="./static/album/coupon.png" mode="aspectFit" @click="showUseRule = true"></image>
+		
+		<u-mask :show="showtip || showUseRule">
 			<view class="mask">
 				<view class="img-box">
-					<image src="./static/album/postcardTip.png" mode="aspectFit"></image>
-					<u-icon class="close" name="close-circle" @click="showtip = false"></u-icon>
+					<image src="./static/album/postcardTip.png" mode="aspectFit" v-if="showtip"></image>
+					<image src="./static/album/useRule.png" mode="aspectFit" v-if="showUseRule"></image>
+					<u-icon class="close" name="close-circle" @click="closeMask"></u-icon>
+					<view class="use-rule" @click="useRuleClick" v-if="showtip"></view>
 				</view>
-				<u-button type="primary" shape="circle" @click="showtip = false">知道了</u-button>
+				<u-button type="primary" shape="circle" @click="showtip = false" v-if="showtip">知道了</u-button>
 			</view>
 		</u-mask>
+		
 	</view>
 </template>
 
@@ -89,6 +97,7 @@ export default {
   data() {
     return {
       showtip: false,//领取提示
+			showUseRule: false,//使用规则提示
       statusBarHeight: 0,
       capsule: 0,
       navHeight: 0,
@@ -135,6 +144,14 @@ export default {
     }
   },
   methods: {
+		closeMask() {//---关闭遮罩
+			this.showtip = false
+			this.showUseRule = false
+		},
+		useRuleClick() {//---查看使用规则
+			this.showtip = false
+			this.showUseRule = true
+		},
     jumpToScanFaceClick() {//---跳转扫脸页面
       const openid = uni.getStorageSync('openid')
 			
@@ -276,6 +293,13 @@ export default {
 			justify-content: center;
 			align-items: center;
 		}
+		.coupon {
+			position: fixed;
+			right: -30rpx;
+			bottom: 200rpx;
+			width: 120rpx;
+			height: 120rpx;
+		}
 	}
 	.nav-bar {
 		font-size: 36rpx;
@@ -405,6 +429,14 @@ export default {
 					border-left: 1px dashed #fff;
 				}
 			}
+			.use-rule {
+				position: absolute;
+				left: 50%;
+				bottom: 40px;
+				transform: translateX(-50%);
+				width: 66px;
+				height: 16px;
+			}
 		}
 		image {
 			width: 504rpx;