feat:学员须知弹窗关闭逻辑优化

pages3/live/detail.vue

@@ -553,17 +553,23 @@
       v-model="noticeShow"
       class="notice_modal"
       mode="center"
-      border-radius="14"
-      width="700rpx"
-      height="900rpx"
+      border-radius="28"
+      width="600rpx"
+      height="622rpx"
+      :mask-close-able="false"
+      @close="closeNotice"
     >
       <div class="content">
-        <scroll-view scroll-y="true" style="height: 100%">
           <view class="title">学员须知</view>
-          <text class="text">
-            {{ goodsData.buyNote }}
-          </text>
-        </scroll-view>
+          <scroll-view scroll-y="true">
+            <view class="text">
+              {{ goodsData.buyNote || '' }}
+            </view>
+          </scroll-view>
+          <view class="had_read" :class="{'gray': CountTo >= 0}" @click="noticeConfirm()">
+            <text>我已阅读学员须知</text>
+            <text v-if="CountTo >= 0">{{ CountTo + 's' }}</text>
+          </view>
       </div>
     </u-popup>
 		
@@ -749,6 +755,7 @@ export default {
       subList: [],
       subIndex: 0,
       compareFaceData: 0, // 拍照匹配相似度
+      CountTo: 30, // 倒计时
     };
   },
   computed: {
@@ -1102,9 +1109,31 @@ export default {
 			}).then(res => {
 				let nowTime = Number(new  Date().getTime()/1000).toFixed(0)
 				// this.livingItem = res.data.data[0]
+        if (res.data.data) {
 				this.livingItem = res.data.data.find(item => item.liveStartTime<=nowTime&&item.liveEndTime>nowTime);
+        let isShowNotice = res.data.data.every(e => e.studyStatus == -1)
+          if (isShowNotice) { // studyStatus 全部等于-1的时候就是没有看过
+            this.noticeShow = true
+            var timer = setInterval(() => {
+              this.CountTo--
+              if( this.CountTo < 0 ) {
+                clearInterval(timer)
+              }
+            }, 1000)
+          } else {
+            this.CountTo = -1
+          }
+      } else {
+        this.CountTo = -1
+      }
 			})
 		},
+    noticeConfirm() {
+      console.log('CountTo:', this.CountTo);
+      if (this.CountTo < 0) {
+        this.noticeShow = false
+      }
+    },
 		studyRecordGetChannelBasicInfo(channelId) {
 			return new Promise((resolve) => {
 				this.$api
@@ -3032,17 +3061,37 @@ page {
   .content {
     width: 100%;
     height: 100%;
-    padding: 20rpx;
+    padding: 56rpx 56rpx 56rpx 64rpx;
 
     .title {
-      color: #333;
+      color: #222;
       line-height: 40rpx;
-      font-size: 30rpx;
+      font-size: 36rpx;
       text-align: center;
       font-weight: bold;
+      margin-bottom: 24rpx;
     }
     .text {
+      height: 340rpx;
       line-height: 40rpx;
+      text-indent: 2em;
+      font-size: 32rpx;
+      color: #222;
+    }
+    .had_read {
+      width: 490rpx;
+      height: 88rpx;
+      line-height: 88rpx;
+      text-align: center;
+      background: #3577E8;
+      border-radius: 240rpx;
+      font-size: 32rpx;
+      font-weight: 500;
+      color: #fff;
+      margin-top: 20rpx;
+      &.gray {
+        background: #BBBEC5;
+      }
     }
   }
 }

pages3/polyv/detail.vue

@@ -532,19 +532,24 @@
     <u-popup
       v-model="noticeShow"
       class="notice_modal"
-			@close="closeNotice"
       mode="center"
-      border-radius="14"
-      width="700rpx"
-      height="900rpx"
+      border-radius="28"
+      width="600rpx"
+      height="622rpx"
+      :mask-close-able="false"
+      @close="closeNotice"
     >
       <div class="content">
-        <scroll-view scroll-y="true" style="height: 100%">
           <view class="title">学员须知</view>
-          <text class="text">
-            {{ goodsData.buyNote }}
-          </text>
-        </scroll-view>
+          <scroll-view scroll-y="true">
+            <view class="text">
+              {{ goodsData.buyNote || '' }}
+            </view>
+          </scroll-view>
+          <view class="had_read" :class="{'gray': CountTo >= 0}" @click="noticeConfirm()">
+            <text>我已阅读学员须知</text>
+            <text v-if="CountTo >= 0">{{ CountTo + 's' }}</text>
+          </view>
       </div>
     </u-popup>
 		
@@ -742,6 +747,7 @@ export default {
       compareFaceData: 0, // 拍照匹配相似度
       prendreAutoCarme: false, // 是否发起授权相机
       studyTimer: null, // 学习记录定时器
+      CountTo: 30, // 倒计时
     };
   },
   computed: {
@@ -1310,6 +1316,11 @@ export default {
 				
 			})
 		},
+    noticeConfirm() {
+      if (this.CountTo < 0) {
+        this.noticeShow = false
+      }
+    },
 		baseHandoutTipList() {
 			this.$api.baseHandoutTipList({
 				orderGoodsId:this.orderGoodsId
@@ -1576,6 +1587,20 @@ export default {
 				// this.livingItem = res.data.data[0]
         if (res.data.data) {
 				this.livingItem = res.data.data.find(item => item.liveStartTime<=nowTime&&item.liveEndTime>nowTime);
+          let isShowNotice = res.data.data.every(e => e.studyStatus == -1)
+          if (isShowNotice) { // studyStatus 全部等于-1的时候就是没有看过
+            this.noticeShow = true
+            var timer = setInterval(() => {
+              this.CountTo--
+              if( this.CountTo < 0 ) {
+                clearInterval(timer)
+              }
+            }, 1000)
+          } else {
+            this.CountTo = -1
+          }
+        } else {
+          this.CountTo = -1
         }
 			})
 		},
@@ -3727,17 +3752,37 @@ page {
   .content {
     width: 100%;
     height: 100%;
-    padding: 20rpx;
+    padding: 56rpx 56rpx 56rpx 64rpx;
 
     .title {
-      color: #333;
+      color: #222;
       line-height: 40rpx;
-      font-size: 30rpx;
+      font-size: 36rpx;
       text-align: center;
       font-weight: bold;
+      margin-bottom: 24rpx;
     }
     .text {
+      height: 340rpx;
       line-height: 40rpx;
+      text-indent: 2em;
+      font-size: 32rpx;
+      color: #222;
+    }
+    .had_read {
+      width: 490rpx;
+      height: 88rpx;
+      line-height: 88rpx;
+      text-align: center;
+      background: #3577E8;
+      border-radius: 240rpx;
+      font-size: 32rpx;
+      font-weight: 500;
+      color: #fff;
+      margin-top: 20rpx;
+      &.gray {
+        background: #BBBEC5;
+      }
     }
   }
 }