开发关注公众号弹窗组件

pages/my/gzh/index.js

@@ -0,0 +1,23 @@
+Component({
+    data: {
+        show: false,
+    },
+    methods: {
+        open() {
+            this.getTabBar().setData({
+                mask: true
+            })
+            this.setData({
+                show: true
+            })
+        },
+        closeModal() {
+            this.setData({
+                show: false
+            })
+            this.getTabBar().setData({
+                mask: false
+            })
+        },
+    }
+})

pages/my/gzh/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

pages/my/gzh/index.less

@@ -0,0 +1,29 @@
+.activationModal {
+    position: fixed;
+    z-index: 12;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    left: 0rpx;
+    top: 0rpx;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.7);
+
+    .modal {
+        margin-top: 300rpx;
+        width: 600rpx;
+        height: 680rpx;
+        background: url(https://reader-wx.ai160.com/images/reader/v3/bianzu73.png)no-repeat;
+        background-size: contain;
+        border-radius: 20rpx;
+        text-align: center;
+
+    }
+
+    .close {
+        padding: 40rpx;
+        width: 54rpx;
+        height: 54rpx;
+    }
+}

pages/my/gzh/index.wxml

@@ -0,0 +1,6 @@
+<view class="activationModal" wx:if="{{show}}">
+    <view class="modal">
+        <image src="/static/lollipop.png" class="qrCode" show-menu-by-longpress="true" />
+    </view>
+    <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
+</view>

pages/my/gzh/index.wxss

@@ -0,0 +1,26 @@
+.activationModal {
+  position: fixed;
+  z-index: 12;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  left: 0rpx;
+  top: 0rpx;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+}
+.activationModal .modal {
+  margin-top: 300rpx;
+  width: 600rpx;
+  height: 680rpx;
+  background: url(https://reader-wx.ai160.com/images/reader/v3/bianzu73.png) no-repeat;
+  background-size: contain;
+  border-radius: 20rpx;
+  text-align: center;
+}
+.activationModal .close {
+  padding: 40rpx;
+  width: 54rpx;
+  height: 54rpx;
+}

pages/my/index.js

@@ -118,6 +118,9 @@ Page({
             }
         })
     },
+    toGzh() {
+        this.selectComponent('#gzh').open()
+    },
     async toBuy({
         currentTarget
     }) {

pages/my/index.json

@@ -1,6 +1,7 @@
 {
     "usingComponents": {
         "navigationBar": "/components/navigationBar/index",
+        "gzhModal": "./gzh/index",
         "vipModal": "/components/vipModal/index"
     },
     "navigationStyle": "custom",

pages/my/index.wxml

@@ -90,7 +90,7 @@
         </view>
         <view class="subBtn">去激活</view>
     </view>
-    <view class="activation" bindtap="activationCode" wx:if="{{vipTime!='1'}}">
+    <view class="activation" bindtap="toGzh" wx:if="{{vipTime!='1'}}">
         <view class="tips">
             <image src="/static/care.png" class="tipsImg" />关注公众号不迷路，更多福利等您！
         </view>
@@ -106,5 +106,6 @@
         </view>
     </view>
     <vipModal id="vipModal"></vipModal>
+    <gzhModal id="gzh"></gzhModal>
     <canvas id='vip' type="2d"> </canvas>
 </view>