消息订阅

pages2/dailyPractice/index.vue

@@ -59,6 +59,26 @@
                 </view>
             </view>
         </view>
+
+        <!-- 订阅消息弹窗 -->
+        <!-- :mask-close-able="false" -->
+        <u-popup class="modal" v-model="meassgeModal" mode="bottom" border-radius="24" >
+            <view class="message_box">
+                <view class="officials">
+                    <image src="/pages2/static/daily/logo_icon.png" class="offi_icon"></image>
+                    <text class="apply">祥粤云学堂申请</text>
+                </view>
+                <view class="titles">{{ dayExamDetail.subscription == 1 ? '不再订阅消息' : '发送以下消息' }}</view>
+                <view class="warns">
+                    <u-icon name="checkmark-circle-fill fill_icon" color="#01C65A" size="50"></u-icon>
+                    <text class="w_tips">每日刷题提醒</text>
+                </view>
+                <view class="bottons">
+                    <view class="cancel_btn btns" @click="cancel()">取消</view>
+                    <view class="confirm_btn btns" @click="confirm()">确定</view>
+                </view>
+            </view>
+        </u-popup>
     </view>
 </template>
 
@@ -74,6 +94,7 @@ export default {
             orderGoodsId: '',
             dayExamDetail: {}, // 每日一练当天信息试卷
             dayRecordList: [], // 每日一练试卷日历打卡记录
+            meassgeModal: true
         }
     },
     onLoad(option) {
@@ -167,8 +188,7 @@ export default {
                 +'&moduleId=' + moduleExamId + '&chapterId=' + chapterExamId + '&entryType=daily'
             })
         },
-        // 订阅消息
-        getSubscription() {
+        confirm() {
             this.$http({
                 url: '/bank/question/today/exam/subscription',
                 method: 'post',
@@ -179,7 +199,11 @@ export default {
                 }
             }).then((res) => {
                 if (res.data.code == 200) {
-                    this.$u.toast('订阅成功')
+                    let msg = this.dayExamDetail.subscription == 0 ? '订阅成功' : '取消订阅成功'
+                    this.$u.toast(msg)
+                    this.meassgeModal = false
+                    let value = this.dayExamDetail.subscription == 0 ? 1 : 0
+                    this.$set(this.dayExamDetail, 'subscription', value)
                 } else {
                     this.$u.toast('订阅失败，请重新订阅')
                 }
@@ -187,6 +211,14 @@ export default {
                 this.$u.toast('订阅失败，请重新订阅')
             })
         },
+        cancel() {
+            this.meassgeModal = false
+        },
+        // 订阅消息
+        getSubscription() {
+            this.meassgeModal = true
+            
+        },
     },
 }
 </script>
@@ -408,4 +440,68 @@ export default {
         }
     }   
 }
+// 订阅消息弹窗
+.message_box {
+    width: 100%;
+    height: 756rpx;
+    background-color: #fff;
+    padding: 64rpx 56rpx 0rpx;
+    .officials {
+        display: flex;
+        align-items: center;
+        margin-bottom: 48rpx;
+        .offi_icon {
+            width: 56rpx;
+            height: 56rpx;
+            margin-right: 56rpx;
+        }
+        .apply {
+            font-size: 32rpx;
+            font-weight: 500;
+            color: #222222;
+        }
+    }
+    .titles {
+        font-size: 36rpx;
+        font-weight: bold;
+        color: #222222;
+        margin-bottom: 48rpx;
+    }
+    .warns {
+        padding: 38rpx 0rpx;
+        border-top: 2rpx solid #E9E9E9;
+        border-bottom: 2rpx solid #E9E9E9;
+        display: flex;
+        align-items: center;
+        .w_tips {
+            margin-left: 24rpx;
+            font-size: 32rpx;
+            font-weight: 500;
+            color: #666666;
+        }
+    }
+    .bottons {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        margin-top: 160rpx;
+        .btns {
+            width: 252rpx;
+            height: 84rpx;
+            line-height: 84rpx;
+            text-align: center;
+            border-radius: 16rpx;
+            font-size: 36rpx;
+            font-weight: 500;
+        }
+        .confirm_btn {
+            background: #01C65A;
+            color: #FFFFFF;
+        }
+        .cancel_btn {
+            color: #01C65A;
+            background: #F1F1F1;
+        }
+    }
+}
 </style>