开发页面

pages/invite/index.js

@@ -5,7 +5,7 @@ Page({
      * 页面的初始数据
      */
     data: {
-        count: 9
+        count: 29
     },
 
     /**

pages/invite/index.less

@@ -1,6 +1,6 @@
 .invite {
     width: 100%;
-    padding: 0 20rpx;
+    padding: 0 20rpx 400rpx;
     box-sizing: border-box;
     min-height: 100vh;
     background-color: #291068;
@@ -97,5 +97,26 @@
                 }
             }
         }
+
+        .btns {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 70rpx;
+
+            .transcript {
+                width: 184rpx;
+                height: 68rpx;
+            }
+
+            .resetBtn {
+                font-size: 0px;
+            }
+
+            .inviteBtn {
+                width: 390rpx;
+                height: 68rpx;
+            }
+        }
     }
 }

pages/invite/index.wxml

@@ -2,45 +2,177 @@
     <image src="http://reader-wx.ai160.com/images/reader/v3/learn/yxbg.png" class='headerBg' />
     <view class="progressBox">
         <!-- 第一关 -->
-        <view class="row ">
-            <view class="line"></view>
-            <view class="numBox" wx:for="{{2}}" wx:key="index">
-                <view class="num">邀{{index+1}}人</view>
-                <image src="{{count>=index+1?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
-                <image src="/static/ct.png" class="current" wx:if='{{count==index+1}}' />
-            </view>
-            <view class="numBox {{count>2?'qualify':''}}">
-                <view class="rewardNum">VIP7天</view>
-                <view class="rewardN">第一关</view>
-                <image src="{{count>=2?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
+        <view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{2}}" wx:key="index">
+                    <view class="num">邀{{index+1}}人</view>
+                    <image src="{{count>=index+1?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+1}}' />
+                </view>
+                <view class="numBox {{count>2?'qualify':''}}">
+                    <view class="rewardNum">VIP7天</view>
+                    <view class="rewardN">第一关</view>
+                    <image src="{{count>=2?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
+                </view>
+            </view>
+            <view class="btns" wx:if="{{count<2}}">
+                <image src="/static/cjd.png" class="transcript" />
+                <button class="resetBtn" open-type="share">
+                    <image src="/static/yqb.png" class="inviteBtn" />
+                </button>
             </view>
         </view>
         <!-- 第二关 -->
-        <view class="row ">
-            <view class="line"></view>
-            <view class="numBox" wx:for="{{3}}" wx:key="index">
-                <view class="num">邀{{index+3}}人</view>
-                <image src="{{count>=index+3?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
-                <image src="/static/ct.png" class="current" wx:if='{{count==index+3}}' />
-            </view>
-            <view class="numBox {{count>=5?'qualify':''}}">
-                <view class="rewardNum">VIP15天</view>
-                <view class="rewardN">第二关</view>
-                <image src="{{count>=5?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
+        <view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{3}}" wx:key="index">
+                    <view class="num">邀{{index+3}}人</view>
+                    <image src="{{count>=index+3?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+3}}' />
+                </view>
+                <view class="numBox {{count>=5?'qualify':''}}">
+                    <view class="rewardNum">VIP15天</view>
+                    <view class="rewardN">第二关</view>
+                    <image src="{{count>=5?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
+                </view>
+            </view>
+            <view class="btns" wx:if="{{count>=2&count<5}}">
+                <image src="/static/cjd.png" class="transcript" />
+                <button class="resetBtn" open-type="share">
+                    <image src="/static/yqb.png" class="inviteBtn" />
+                </button>
             </view>
         </view>
         <!-- 第三关 -->
-        <view class="row ">
-            <view class="line"></view>
-            <view class="numBox" wx:for="{{5}}" wx:key="index">
-                <view class="num">邀{{index+6}}人</view>
-                <image src="{{count>=index+6?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
-                <image src="/static/ct.png" class="current" wx:if='{{count==index+6}}' />
-            </view>
-            <view class="numBox {{count>=10?'qualify':''}}">
-                <view class="rewardNum">VIP1个月</view>
-                <view class="rewardN">第三关</view>
-                <image src="{{count>=10?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
+        <view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+6}}人</view>
+                    <image src="{{count>=index+6?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+6}}' />
+                </view>
+                <view class="numBox {{count>=10?'qualify':''}}">
+                    <view class="rewardNum">VIP1个月</view>
+                    <view class="rewardN">第三关</view>
+                    <image src="{{count>=10?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
+                </view>
+            </view>
+            <view class="btns" wx:if="{{count>=5&&count<10}}">
+                <image src="/static/cjd.png" class="transcript" />
+                <button class="resetBtn" open-type="share">
+                    <image src="/static/yqb.png" class="inviteBtn" />
+                </button>
+            </view>
+        </view>
+        <!-- 第四关 -->
+        <view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+11}}人</view>
+                    <image src="{{count>=index+11?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+11}}' />
+                </view>
+            </view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+16}}人</view>
+                    <image src="{{count>=index+16?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+16}}' />
+                </view>
+            </view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+21}}人</view>
+                    <image src="{{count>=index+21?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+21}}' />
+                </view>
+            </view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+26}}人</view>
+                    <image src="{{count>=index+26?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+26}}' />
+                </view>
+                <view class="numBox {{count>=30?'qualify':''}}">
+                    <view class="rewardNum">VIP12个月</view>
+                    <view class="rewardN">第四关</view>
+                    <image src="{{count>=30?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
+                </view>
+            </view>
+            <view class="btns" wx:if="{{count>=10&count<30}}">
+                <image src="/static/cjd.png" class="transcript" />
+                <button class="resetBtn" open-type="share">
+                    <image src="/static/yqb.png" class="inviteBtn" />
+                </button>
+            </view>
+        </view>
+        <!-- 第五关 -->
+        <view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+31}}人</view>
+                    <image src="{{count>=index+31?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+31}}' />
+                </view>
+            </view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+36}}人</view>
+                    <image src="{{count>=index+36?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+36}}' />
+                </view>
+            </view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+41}}人</view>
+                    <image src="{{count>=index+41?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+41}}' />
+                </view>
+            </view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+46}}人</view>
+                    <image src="{{count>=index+46?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+46}}' />
+                </view>
+            </view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+51}}人</view>
+                    <image src="{{count>=index+51?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+51}}' />
+                </view>
+            </view>
+            <view class="row ">
+                <view class="line"></view>
+                <view class="numBox" wx:for="{{5}}" wx:key="index">
+                    <view class="num">邀{{index+56}}人</view>
+                    <image src="{{count>=index+56?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
+                    <image src="/static/ct.png" class="current" wx:if='{{count==index+56}}' />
+                </view>
+                <view class="numBox {{count>=60?'qualify':''}}">
+                    <view class="rewardNum">SVIP终身</view>
+                    <view class="rewardN">第五关</view>
+                    <image src="{{count>=60?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
+                </view>
+            </view>
+            <view class="btns" wx:if="{{count>=30&count<60}}">
+                <image src="/static/cjd.png" class="transcript" />
+                <button class="resetBtn" open-type="share">
+                    <image src="/static/yqb.png" class="inviteBtn" />
+                </button>
             </view>
         </view>
     </view>

pages/invite/index.wxss

@@ -1,6 +1,6 @@
 .invite {
   width: 100%;
-  padding: 0 20rpx;
+  padding: 0 20rpx 400rpx;
   box-sizing: border-box;
   min-height: 100vh;
   background-color: #291068;
@@ -84,3 +84,20 @@
 .invite .progressBox .row .qualify .rewardN {
   color: #962304;
 }
+.invite .progressBox .btns {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 70rpx;
+}
+.invite .progressBox .btns .transcript {
+  width: 184rpx;
+  height: 68rpx;
+}
+.invite .progressBox .btns .resetBtn {
+  font-size: 0px;
+}
+.invite .progressBox .btns .inviteBtn {
+  width: 390rpx;
+  height: 68rpx;
+}