reader/pages/invite/index.wxml

<view class="invite">
    <image src="http://reader-wx.ai160.com/images/reader/v3/learn/yxbg.png" class='headerBg' />
    <view class="progressBox">
        <!-- 第一关 -->
        <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>
            <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>
            <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>
</view>