开发

pages/invite/index.js

@@ -274,21 +274,21 @@ Page({
             open: '/static/30-2.png',
             top: 4924,
             left: 16
-        }, {
-            id: 60,
-            close: '/static/always.png',
-            open: '/static/always-2.png',
-            top: 9676,
-            left: 194
         }],
-        count: 50
+        count: 29,
+        state: false
     },
 
     async onShow() {
-        // wx.pageScrollTo({
-        //     selector: `#p${this.data.list.length}`,
-        //     duration: 800
-        // })
+        if (this.data.count > 2) {
+            wx.pageScrollTo({
+                selector: `#p${this.data.count<60?this.data.count:60}`,
+                duration: 800
+            })
+        }
+        this.setData({
+            state: true
+        })
         /*  let {
              list
          } = await getInviteList({
@@ -313,6 +313,11 @@ Page({
             url: `/pages/personal/index?uid=${currentTarget.dataset.uid}&type=user`,
         })
     },
+    closeMediaBox() {
+        this.setData({
+            state: false
+        })
+    },
     /**
      * 用户点击右上角分享
      */

pages/invite/index.less

@@ -56,5 +56,95 @@
             width: 250rpx;
             height: 262rpx;
         }
+
+        .always {
+            position: absolute;
+            width: 300rpx;
+            height: 300rpx;
+            top: 9650rpx;
+            left: 180rpx;
+        }
+    }
+}
+
+.mediaBox {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    z-index: 3;
+    background-color: rgba(0, 0, 0, 0.5);
+
+    .media {
+        position: relative;
+        margin-top: 240rpx;
+        width: 550rpx;
+        height: 550rpx;
+
+        .close {
+            position: absolute;
+            right: -50rpx;
+            top: -50rpx;
+            width: 58rpx;
+            height: 58rpx;
+        }
+
+        .body {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            box-sizing: border-box;
+            background-color: white;
+            border-radius: 20rpx;
+
+            .inviteH {
+                width: 210rpx;
+                height: 187rpx;
+                margin-top: -120rpx;
+            }
+
+            .title {
+                margin: 36rpx 0rpx 32rpx;
+                color: #8616B9;
+                font-size: 40rpx;
+                font-weight: bold;
+            }
+
+            .tips {
+                font-size: 30rpx;
+            }
+
+
+
+            .shareBtn {
+                position: absolute;
+                bottom: 40rpx;
+                left: 0px;
+                right: 0px;
+                margin:  auto;
+                width: 380rpx;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 12rpx 0rpx;
+                background: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+                box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(50, 197, 255, 0.46);
+                border-radius: 34rpx;
+                color: white;
+                font-weight: bold;
+                letter-spacing: 2px;
+                font-size: 30rpx;
+
+                .shareImg {
+                    width: 36rpx;
+                    height: 32rpx;
+                    margin-right: 10rpx;
+                }
+            }
+        }
     }
 }

pages/invite/index.wxml

@@ -9,7 +9,22 @@
             <image src="{{filters.showPennant(count,item.num)}}" class='icon' />
             <view class="num">邀{{item.num}}人</view>
         </view>
-        <image wx:for="{{treasureList}}" wx:key='id' src="{{item.close}}"
+        <image wx:for="{{treasureList}}" wx:key='id' src="{{item.id>count?item.close:item.open}}"
             style="top:{{item.top}}rpx;left:{{item.left}}rpx" class="treasure" />
+        <image src="{{60>count?'/static/always.png':'/static/always-2.png'}}" class="always" />
+    </view>
+
+</view>
+<view class="mediaBox" wx:if="{{state}}">
+    <view class="media">
+        <image src="/static/lollipop.png" class="close" catchtap="closeMediaBox" />
+        <view class="body">
+            <image src="/static/inviteH.png" class="inviteH" />
+            <view class="title">恭喜，您已通关第5关</view>
+            <view class="tips">挑战更高级难度！赢取更多奖励</view>
+            <button class="resetBtn shareBtn" open-type="share" bindtap="shareVideo">
+                <image src="/static/forward.png" class="shareImg" />邀请我的同学朋友
+            </button>
+        </view>
     </view>
 </view>

pages/invite/index.wxss

@@ -51,3 +51,81 @@
   width: 250rpx;
   height: 262rpx;
 }
+.invite .body .always {
+  position: absolute;
+  width: 300rpx;
+  height: 300rpx;
+  top: 9650rpx;
+  left: 180rpx;
+}
+.mediaBox {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  z-index: 3;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.mediaBox .media {
+  position: relative;
+  margin-top: 240rpx;
+  width: 550rpx;
+  height: 550rpx;
+}
+.mediaBox .media .close {
+  position: absolute;
+  right: -50rpx;
+  top: -50rpx;
+  width: 58rpx;
+  height: 58rpx;
+}
+.mediaBox .media .body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 20rpx;
+}
+.mediaBox .media .body .inviteH {
+  width: 210rpx;
+  height: 187rpx;
+  margin-top: -120rpx;
+}
+.mediaBox .media .body .title {
+  margin: 36rpx 0rpx 32rpx;
+  color: #8616B9;
+  font-size: 40rpx;
+  font-weight: bold;
+}
+.mediaBox .media .body .tips {
+  font-size: 30rpx;
+}
+.mediaBox .media .body .shareBtn {
+  position: absolute;
+  bottom: 40rpx;
+  left: 0px;
+  right: 0px;
+  margin: auto;
+  width: 380rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx 0rpx;
+  background: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(50, 197, 255, 0.46);
+  border-radius: 34rpx;
+  color: white;
+  font-weight: bold;
+  letter-spacing: 2px;
+  font-size: 30rpx;
+}
+.mediaBox .media .body .shareBtn .shareImg {
+  width: 36rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
+}