开发充值成功弹窗

pages/my/index.js

@@ -20,7 +20,10 @@ Page({
     vipTime: '',
     tasks: [],
     isIos: app.globalData.isIOS,
-    activationModal: false,
+    activationModal: true,
+    isPay: true,
+    // activationModal: false,
+    // isPay: false,
     activationRes: {},
     products: []
   },
@@ -53,7 +56,7 @@ Page({
   async setUserInfo() {
     let userInfo = await getMyInfo()
     let vipTime = await getVipInfo()
-    console.log(vipTime );
+    console.log(vipTime);
     this.setUser(userInfo.user)
     this.setData({
       userInfo,
@@ -96,6 +99,7 @@ Page({
             }
             this.setData({
               activationModal: true,
+              isPay: false,
               activationRes
             })
           } else {
@@ -119,7 +123,6 @@ Page({
   async toBuy({
     currentTarget
   }) {
-    console.log(currentTarget);
     wx.showLoading({
       title: '提交中',
       mask: true
@@ -147,9 +150,9 @@ Page({
         this.setData({
           activationModal: true
         })
-        /*   setTimeout(() => {
-            this.setUserInfo()
-          }, 1500) */
+        setTimeout(() => {
+          this.setUserInfo()
+        }, 1500)
       },
       fail(res) {
         wx.showToast({

pages/my/index.less

@@ -193,60 +193,8 @@
     }
   }
 
-  .activationModal {
-    position: fixed;
-    z-index: 2;
-    left: 0rpx;
-    top: 0rpx;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.7);
-
-    .box {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 30%;
-      margin: auto;
-      width: 496rpx;
-      height: 365rpx;
-      background-color: white;
-      border-radius: 20rpx;
-      text-align: center;
 
 
-      .sLcon {
-        margin-top: 34rpx;
-        width: 100rpx;
-        height: 100rpx;
-      }
-
-      .tips1 {
-        margin: 36rpx 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;
-      }
-
-    }
-  }
-
   .payBox {
     position: relative;
     margin-top: 36rpx;
@@ -295,8 +243,11 @@
       font-size: 30rpx;
 
       .left {
+        flex: 1;
+        margin-right: 40rpx;
         display: flex;
         align-items: center;
+        justify-content: space-between;
         color: #666666;
 
         .money {
@@ -305,10 +256,79 @@
       }
 
       .pay {
-        padding: 6rpx 50rpx;
+        padding: 6rpx 40rpx;
         border-radius: 50rpx;
         background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
       }
     }
   }
+
+  .activationModal {
+    position: fixed;
+    z-index: 2;
+    left: 0rpx;
+    top: 0rpx;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.7);
+
+    .box {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 30%;
+      margin: auto;
+      width: 496rpx;
+      height: 365rpx;
+      background-color: white;
+      border-radius: 20rpx;
+      text-align: center;
+
+
+      .sLcon {
+        margin-top: 34rpx;
+        width: 100rpx;
+        height: 100rpx;
+      }
+
+      .tips1 {
+        margin: 36rpx 0rpx 24rpx;
+        color: #131313;
+        font-weight: bold;
+        font-size: 34rpx;
+      }
+
+      .tips2 {
+        font-size: 30rpx;
+        color: #12C962;
+      }
+
+    }
+
+    .vipModal {
+      position: relative;
+      left: 0;
+      right: 0;
+      top: 30%;
+      margin: auto;
+      border-radius: 20rpx;
+      text-align: center;
+
+      .mBg {
+        width: 600rpx;
+      }
+    }
+
+    .close {
+      position: absolute;
+      padding: 40rpx;
+      width: 54rpx;
+      height: 54rpx;
+      left: 0;
+      right: 0;
+      bottom: -140rpx;
+      margin: auto;
+    }
+
+  }
 }

pages/my/index.wxml

@@ -62,14 +62,7 @@
     <view class="tips">请输入学习卡激活码</view>
     <view class="subBtn">激活</view>
   </view>
-  <view class="activationModal" wx:if="{{activationModal}}">
-    <view class="box zoomIn">
-      <image src="{{activationRes.code==200?'/static/lan.png':'/static/df.png'}}" class="sLcon" />
-      <view class="tips1">{{activationRes.code==200?'恭喜您，激活成功':'很遗憾，激活失败'}}</view>
-      <view class="tips2">{{activationRes.message}}</view>
-      <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
-    </view>
-  </view>
+
   <view class="payBox" wx:if="{{!vipTime||vipTime=='1'}}">
     <view class="buyBtn" bindtap="toBuy" data-id="{{products[0].id}}">
       {{ !vipTime?'立即开通':'终身使用'}}
@@ -87,12 +80,25 @@
     <view class="renew">
       <view class="left">升级成svlp会员终身的 <view class="money">+200元</view>
       </view>
-      <view class="pay">续费</view>
+      <view class="pay">购买</view>
     </view>
     <view class="renew">
-      <view class="left">升级成svlp会员终身的 <view class="money">+200元</view>
+      <view class="left">{{products[1].title}} <view class="money">{{products[1].price/100}}元</view>
       </view>
-      <view class="pay">续费</view>
+      <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">续费</view>
+    </view>
+  </view>
+  <!-- 弹窗 -->
+  <view class="activationModal" wx:if="{{activationModal}}">
+    <view class="box zoomIn" wx:if="{{!isPay}}">
+      <image src="{{activationRes.code==200?'/static/lan.png':'/static/df.png'}}" class="sLcon" />
+      <view class="tips1">{{activationRes.code==200?'恭喜您，激活成功':'很遗憾，激活失败'}}</view>
+      <view class="tips2">{{activationRes.message}}</view>
+      <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+    </view>
+    <view class="vipModal" wx:if="{{isPay}}">
+      <image src="/static/vipModal.png" class="mBg" />
+      <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
     </view>
   </view>
 </view>

pages/my/index.wxss

@@ -163,52 +163,6 @@
   font-size: 25rpx;
   background-color: #FC614E;
 }
-.container .activationModal {
-  position: fixed;
-  z-index: 2;
-  left: 0rpx;
-  top: 0rpx;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.7);
-}
-.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;
-}
-.container .activationModal .box .sLcon {
-  margin-top: 34rpx;
-  width: 100rpx;
-  height: 100rpx;
-}
-.container .activationModal .box .tips1 {
-  margin: 36rpx 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;
-}
 .container .payBox {
   position: relative;
   margin-top: 36rpx;
@@ -253,15 +207,76 @@
   font-size: 30rpx;
 }
 .container .renewBox .renew .left {
+  flex: 1;
+  margin-right: 40rpx;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   color: #666666;
 }
 .container .renewBox .renew .left .money {
   color: #FC614E;
 }
 .container .renewBox .renew .pay {
-  padding: 6rpx 50rpx;
+  padding: 6rpx 40rpx;
   border-radius: 50rpx;
   background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
 }
+.container .activationModal {
+  position: fixed;
+  z-index: 2;
+  left: 0rpx;
+  top: 0rpx;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+}
+.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;
+}
+.container .activationModal .box .sLcon {
+  margin-top: 34rpx;
+  width: 100rpx;
+  height: 100rpx;
+}
+.container .activationModal .box .tips1 {
+  margin: 36rpx 0rpx 24rpx;
+  color: #131313;
+  font-weight: bold;
+  font-size: 34rpx;
+}
+.container .activationModal .box .tips2 {
+  font-size: 30rpx;
+  color: #12C962;
+}
+.container .activationModal .vipModal {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 30%;
+  margin: auto;
+  border-radius: 20rpx;
+  text-align: center;
+}
+.container .activationModal .vipModal .mBg {
+  width: 600rpx;
+}
+.container .activationModal .close {
+  position: absolute;
+  padding: 40rpx;
+  width: 54rpx;
+  height: 54rpx;
+  left: 0;
+  right: 0;
+  bottom: -140rpx;
+  margin: auto;
+}

utils/filter.wxs

@@ -7,7 +7,6 @@ var formatNumber = function (n) {
  */
 //时间戳转时间
 function formatDate(time, flag) {
-  console.log(time,'zz');
   if (!time) {
     return
   }