判断是否用劵，及用卷使用规则

pages/album/albumIndex.vue

@@ -71,15 +71,15 @@
 			class="coupon"
 			src="@/static/img/my/coupon.png"
 			mode="aspectFit"
-			@click="showUseRule = true"
+			@click="couponTip = true"
 			v-if="isHaveCoupon">
 		</image>
 		
-		<u-mask :show="showtip || showUseRule">
+		<u-mask :show="postCartTip || couponTip || showUseRule">
 			<view class="mask">
 				<view class="img-box">
 					<image class="bg" src="@/static/img/my/backgroundIcon01.png" mode="aspectFit"></image>
-					<view class="post-card" v-if="showtip">
+					<view class="post-card" v-if="postCartTip">
 						<view class="thank">- 感谢您的参与 -</view>
 						<view class="tip-content">
 							<text>免费领取</text>
@@ -88,6 +88,19 @@
 						<image class="my-card" src="./static/album/myCard.png" mode="aspectFit"></image>
 						<view class="address">（领取地址：南站观景台旁）</view>
 					</view>
+					<view class="coupon-box" v-if="couponTip">
+						<view class="congra">恭喜您！</view>
+						<view class="get-coupon">
+							获得摄影抵用券 
+							<text class="price">20</text>元
+						</view>
+						<image class="my-card" src="./static/album/myCard.png" mode="aspectFit"></image>
+						<view class="use-rule" @click="showUseRuleClick">
+							使用规则
+							<u-icon name="arrow-right"></u-icon>
+						</view>
+						<view class="address">（使用地址：长江索道南站观景台旁）</view>
+					</view>
 					<view class="rules" v-if="showUseRule">
 						<view class="title">使用规则</view>
 						<view class="block" v-for="item in rules" :key="item.ruleName">
@@ -122,7 +135,8 @@ export default {
   },
   data() {
     return {
-      showtip: false,//领取提示
+      postCartTip: false,//明信片领取提示
+      couponTip: false,//券领取提示
       showUseRule: false,//使用规则提示
       statusBarHeight: 0,
       capsule: 0,
@@ -167,25 +181,7 @@ export default {
           color: '#D48D46'
         }
       ],
-      rules: [
-        {
-          ruleName: '规则说明',
-          contents: [
-            {value: '任意金额皆可抵扣，最高抵扣20'},
-            {value: '指定地点可用，提交订单时可自动抵扣'},
-            {value: '优惠券只可使用一次，不找零不折现'},
-            {value: '仅支持下载电子照片至手机'},
-            {value: '如需打印，需额外支付打印费用'}
-          ]
-        },
-        {
-				  ruleName: '补充说明',
-          contents: [
-            {value: '使用地址：重庆市渝中区新华路151号长江索道南站观景台旁'},
-            {value: '咨询电话：023-68567748'}
-          ]
-        }
-      ],
+      rules: [],//使用规则
       options: {}//路由参数
     }
   },
@@ -194,9 +190,14 @@ export default {
       uni.navigateBack({delta: 1})
     },
     closeMask() {//---关闭遮罩
-      this.showtip = false
+      this.postCartTip = false
+      this.couponTip = false
       this.showUseRule = false
     },
+    showUseRuleClick() {
+      this.couponTip = false
+      this.showUseRule = true
+    },
     jumpToScanFaceClick() {//---跳转扫脸页面
       const openid = uni.getStorageSync('openid')
 			
@@ -296,10 +297,28 @@ export default {
 			
       this.$request('wechatUser/myPage/getUserCouponList',{openid}).then(res => {
 			  if (res.code === '00') {
-			    console.log(res.data)
           res.data.forEach(item => {
-            if(item.userRange === 11 && item.couponStatus === 1) {
+            if(item.useRange === 11 && item.couponStatus === 1) {
               this.isHaveCoupon = true
+							
+              // 处理使用规则数据结构
+              let ruleContents = item.couponRule ? item.couponRule.split(';') : []
+              ruleContents = ruleContents.map(value => {
+							  return {value}
+              })
+              this.rules.push({
+              	ruleName: '规则说明',	
+              	contents: ruleContents
+              })
+							
+              let elseContents = item.couponRuleRemind ? item.couponRuleRemind.split(';') : []
+              elseContents = elseContents.map(value => {
+							  return {value}
+              })
+              this.rules.push({
+              	ruleName: '补充说明',
+              	contents: elseContents
+              })
             }
           })
 			  }else{
@@ -328,7 +347,7 @@ export default {
     this.options = options
     if(this.options.tip === 'true') {// 从模板选择页进入
       this.show = true
-      this.showtip = true
+      this.postCartTip = true
     }else if(this.options.index == 1) {// 从vlog首页进入
       this.show = true
     }else {// 扫码进入本页
@@ -530,16 +549,17 @@ export default {
 			}
 		}
 		.post-card,
+		.coupon-box,
 		.rules {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			padding: 66rpx 0 24rpx 0;
 			height: 100%;
+			overflow-y: auto;
 		}
 		.post-card {
 			justify-content: space-between;
-			
 			font-size: 36rpx;
 			.thank {
 				font-size: 28rpx;
@@ -555,6 +575,25 @@ export default {
 				font-weight: 700;
 			}
 		}
+		.coupon-box {
+			justify-content: space-between;
+			font-size: 36rpx;
+			.congra {
+				font-weight: 700;
+			}
+			.price {
+				font-size: 64rpx;
+				font-weight: 700;
+				color: #EE520E;
+			}
+			.use-rule,
+			.address {
+				font-size: 24rpx;
+			}
+			.address {
+				font-weight: 700;
+			}
+		}
 		.rules {
 			padding: 50rpx 32rpx 24rpx;
 			.title {
@@ -592,8 +631,5 @@ export default {
 		/deep/.u-btn {
 			width: 304rpx;
 		}
-		
-	}
-	.rules {
 	}
 </style>
\ No newline at end of file