开发激活码弹窗与动效

pages/my/index.js

@@ -21,7 +21,8 @@ Page({
     tasks: [],
     isIos: app.globalData.isIOS,
     productNum: {},
-    productVip: {}
+    productVip: {},
+    activationModal: false
   },
   onLoad() {
     this.getProducts()
@@ -136,8 +137,10 @@ Page({
     wx.showModal({
       title: '请输入激活码',
       editable: true,
-      success(res) {
-        console.log(res);
+      success: () => {
+        this.setData({
+          activationModal: true
+        })
       }
     })
   },
@@ -160,6 +163,11 @@ Page({
       }
     })
   },
+  closeModal() {
+    this.setData({
+      activationModal: false
+    })
+  },
   // 分享配置
   onShareAppMessage: function (res) {
     return {

pages/my/index.less

@@ -201,6 +201,73 @@
     }
   }
 
+  .activationModal {
+    position: fixed;
+    z-index: 2;
+    left: 0rpx;
+    top: 0rpx;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.3);
+
+    .box {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 30%;
+      margin: auto;
+      width: 496rpx;
+      height: 365rpx;
+      background-color: white;
+      border-radius: 20rpx;
+      text-align: center;
+      animation-name: zoomIn;
+      animation-duration: 0.4s;
+      animation-fill-mode: forwards;
+
+      .sLcon {
+        margin-top: 34rpx;
+        width: 100rpx;
+        height: 100rpx;
+      }
+
+      .tips1 {
+        margin: 40rpx 0rpx 24rpx;
+        color: #131313;
+        font-weight: bold;
+        font-size: 34rpx;
+      }
+
+      .tips2 {
+        font-size: 30rpx;
+        color: #12C962;
+      }
+
+      .close {
+        position: absolute;
+        padding: 40rpx;
+        width: 54rpx;
+        height: 54rpx;
+        left: 0;
+        right: 0;
+        bottom: -140rpx;
+        margin: auto;
+      }
+
+      @keyframes zoomIn {
+        from {
+          transform: scale(0);
+          opacity: 0;
+        }
+
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+    }
+  }
+
   .payBox {
     position: relative;
     margin-top: 36rpx;

pages/my/index.wxml

@@ -66,6 +66,14 @@
     <view class="tips">请输入学习卡激活码</view>
     <view class="subBtn">激活</view>
   </view>
+  <view class="activationModal" wx:if="{{activationModal}}">
+    <view class="box">
+      <image src="/static/lan.png" class="sLcon" />
+      <view class="tips1">恭喜您，激活成功</view>
+      <view class="tips2">快去朗读挑战吧！</view>
+      <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+    </view>
+  </view>
   <!-- 支付 -->
   <!--   <view class="payBox">
     <view class="title">

pages/my/index.wxss

@@ -168,6 +168,65 @@
   font-size: 25rpx;
   background-color: #FC614E;
 }
+.container .activationModal {
+  position: fixed;
+  z-index: 2;
+  left: 0rpx;
+  top: 0rpx;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.container .activationModal .box {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 30%;
+  margin: auto;
+  width: 496rpx;
+  height: 365rpx;
+  background-color: white;
+  border-radius: 20rpx;
+  text-align: center;
+  animation-name: zoomIn;
+  animation-duration: 0.4s;
+  animation-fill-mode: forwards;
+}
+.container .activationModal .box .sLcon {
+  margin-top: 34rpx;
+  width: 100rpx;
+  height: 100rpx;
+}
+.container .activationModal .box .tips1 {
+  margin: 40rpx 0rpx 24rpx;
+  color: #131313;
+  font-weight: bold;
+  font-size: 34rpx;
+}
+.container .activationModal .box .tips2 {
+  font-size: 30rpx;
+  color: #12C962;
+}
+.container .activationModal .box .close {
+  position: absolute;
+  padding: 40rpx;
+  width: 54rpx;
+  height: 54rpx;
+  left: 0;
+  right: 0;
+  bottom: -140rpx;
+  margin: auto;
+}
+@keyframes zoomIn {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 .container .payBox {
   position: relative;
   margin-top: 36rpx;