开发充值成功弹窗

pages/commodity/index.js

@@ -5,6 +5,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    activationModal: false,
     checkedId: '1'
   },
   onLoad(options) {
@@ -21,6 +22,16 @@ Page({
       checkedId: currentTarget.dataset.id
     })
   },
+  activation() {
+    this.setData({
+      activationModal: true
+    })
+  },
+  closeModal() {
+    this.setData({
+      activationModal: false
+    })
+  },
   async toBuy({
     currentTarget
   }) {

pages/commodity/index.less

@@ -119,4 +119,45 @@
       font-size: 36rpx;
     }
   }
+
+  .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: 660rpx;
+      height: 550rpx;
+      background-color: white;
+      border-radius: 20rpx;
+      text-align: center;
+
+
+      .sLcon {
+        margin-top: 164rpx;
+        width: 580rpx;
+        height: 326rpx;
+      }
+
+      .close {
+        position: absolute;
+        padding: 40rpx;
+        width: 54rpx;
+        height: 54rpx;
+        left: 0;
+        right: 0;
+        bottom: -140rpx;
+        margin: auto;
+      }
+    }
+  }
 }

pages/commodity/index.wxml

@@ -35,8 +35,14 @@
     <view class="left">
       合计 <text>￥299.00</text>
     </view>
-    <view class="buyBtn" bindtap="toBuy">
+    <view class="buyBtn" bindtap="toBuy" bindtap="activation">
       立即购买
     </view>
   </view>
+  <view class="activationModal" wx:if="{{activationModal}}">
+    <view class="box zoomIn">
+      <image src="http://reader-wx.ai160.com/images/reader/v3/learn/svip.png" class="sLcon" />
+      <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+    </view>
+  </view>
 </view>

pages/commodity/index.wxss

@@ -102,3 +102,39 @@
   color: white;
   font-size: 36rpx;
 }
+.commodity .activationModal {
+  position: fixed;
+  z-index: 2;
+  left: 0rpx;
+  top: 0rpx;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+}
+.commodity .activationModal .box {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 30%;
+  margin: auto;
+  width: 660rpx;
+  height: 550rpx;
+  background-color: white;
+  border-radius: 20rpx;
+  text-align: center;
+}
+.commodity .activationModal .box .sLcon {
+  margin-top: 164rpx;
+  width: 580rpx;
+  height: 326rpx;
+}
+.commodity .activationModal .box .close {
+  position: absolute;
+  padding: 40rpx;
+  width: 54rpx;
+  height: 54rpx;
+  left: 0;
+  right: 0;
+  bottom: -140rpx;
+  margin: auto;
+}