开发邀新活动页面

pages/invite/index.js

@@ -246,39 +246,55 @@ Page({
         }],
         treasureList: [{
             id: 2,
+            num: 1,
+            text: '加油！继续挑战第2关',
+            text2: '你的成绩会被记录在排行榜上哦！ 快来展示你的实力吧！',
             close: '/static/2t.png',
             open: '/static/2t-2.png',
             top: 310,
             left: -10
         }, {
             id: 5,
+            num: 2,
+            text: '再接再厉！通往下一关！',
             close: '/static/5.png',
             open: '/static/5-2.png',
             top: 840,
             left: 20
         }, {
             id: 10,
+            num: 3,
+            text: '挑战更高级难度！赢取更多奖励',
             close: '/static/10.png',
             open: '/static/10-2.png',
             top: 1736,
             left: 510
         }, {
             id: 15,
+            num: 4,
+            text: '保持冷静，一步一个脚印！',
             close: '/static/15.png',
             open: '/static/15-2.png',
             top: 2632,
             left: 26
         }, {
             id: 30,
+            num: 5,
+            text: '全力以赴，冲刺胜利！',
+            text2: '不要气馁，坚持到底就能成功通关！',
             close: '/static/30.png',
             open: '/static/30-2.png',
             top: 4924,
             left: 16
         }],
-        count: 29,
-        state: false
+        count: 9,
+        state: false,
+        modelInfo: {
+            title: '',
+            text: '',
+            text2: ''
+        }
     },
-
     async onShow() {
         if (this.data.count > 2) {
             wx.pageScrollTo({
@@ -286,31 +302,22 @@ Page({
                 duration: 800
             })
         }
-        this.setData({
-            state: true
-        })
-        /*  let {
-             list
-         } = await getInviteList({
-             pageSize: 9999
-         })
-         this.setData({
-             list,
-             count: list.length
-         })
-         console.log(list); */
-    },
-    showTranscript() {
-        this.selectComponent("#popUp").showModal()
     },
-    closeTranscript() {
-        this.selectComponent("#popUp").hideModal()
-    },
-    jumpUserInfo({
+    openTips({
         currentTarget
     }) {
-        wx.navigateTo({
-            url: `/pages/personal/index?uid=${currentTarget.dataset.uid}&type=user`,
+        let info = currentTarget.dataset.info
+        this.setData({
+            state: true,
+            modelInfo: info.id <= this.data.count ? {
+                title: `恭喜，您已通关第${info.num}关`,
+                text: info.text,
+                text2: info.text2
+            } : {
+                title: '加油！冲关！',
+                text: '保持积极的态度和努力的精神， 相信您可以顺利完成后面的关卡',
+                text2: '展示您的实力吧！🏆'
+            }
         })
     },
     closeMediaBox() {

pages/invite/index.less

@@ -77,6 +77,7 @@
     justify-content: center;
     z-index: 3;
     background-color: rgba(0, 0, 0, 0.5);
+    text-align: center;
 
     .media {
         position: relative;
@@ -84,18 +85,11 @@
         width: 550rpx;
         height: 550rpx;
 
-        .close {
-            position: absolute;
-            right: -50rpx;
-            top: -50rpx;
-            width: 58rpx;
-            height: 58rpx;
-        }
-
         .body {
             position: relative;
             width: 100%;
             height: 100%;
+            padding: 0rpx 50rpx;
             text-align: center;
             box-sizing: border-box;
             background-color: white;
@@ -115,17 +109,17 @@
             }
 
             .tips {
+                margin: 20rpx 0;
                 font-size: 30rpx;
+                font-weight: 400;
             }
 
-
-
             .shareBtn {
                 position: absolute;
                 bottom: 40rpx;
                 left: 0px;
                 right: 0px;
-                margin:  auto;
+                margin: auto;
                 width: 380rpx;
                 display: flex;
                 align-items: center;
@@ -146,5 +140,11 @@
                 }
             }
         }
+
+        .close {
+            margin: 50rpx 0;
+            width: 60rpx;
+            height: 60rpx;
+        }
     }
 }

pages/invite/index.wxml

@@ -10,21 +10,23 @@
             <view class="num">邀{{item.num}}人</view>
         </view>
         <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" />
+            style="top:{{item.top}}rpx;left:{{item.left}}rpx" class="treasure" bindtap="openTips"
+            data-info="{{item}}" />
         <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>
+            <view class="title">{{modelInfo.title}}</view>
+            <view class="tips">{{modelInfo.text}}</view>
+            <view class="tips">{{modelInfo.text2}}</view>
             <button class="resetBtn shareBtn" open-type="share" bindtap="shareVideo">
                 <image src="/static/forward.png" class="shareImg" />邀请我的同学朋友
             </button>
         </view>
+        <image src="/static/lollipop.png" class="close" catchtap="closeMediaBox" />
     </view>
 </view>

pages/invite/index.wxss

@@ -68,6 +68,7 @@
   justify-content: center;
   z-index: 3;
   background-color: rgba(0, 0, 0, 0.5);
+  text-align: center;
 }
 .mediaBox .media {
   position: relative;
@@ -75,17 +76,11 @@
   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%;
+  padding: 0rpx 50rpx;
   text-align: center;
   box-sizing: border-box;
   background-color: white;
@@ -103,7 +98,9 @@
   font-weight: bold;
 }
 .mediaBox .media .body .tips {
+  margin: 20rpx 0;
   font-size: 30rpx;
+  font-weight: 400;
 }
 .mediaBox .media .body .shareBtn {
   position: absolute;
@@ -129,3 +126,8 @@
   height: 32rpx;
   margin-right: 10rpx;
 }
+.mediaBox .media .close {
+  margin: 50rpx 0;
+  width: 60rpx;
+  height: 60rpx;
+}