wx-mls/pages/index/index.wxml

<view class="container">
  <view class="index">
    <swiper 
      class="swiper-container" 
      indicator-dots="{{true}}" 
      interval="{{3000}}"
      duration="{{500}}"
      circular="{{true}}"
      autoplay="{{true}}"
    >
      <block wx:for="{{banners}}" wx:key="index">
        <swiper-item>
          <image 
            class="swiper-image" 
            src="{{item.img}}" 
            mode="widthFix"
            lazy-load="true" 
          />
        </swiper-item>
      </block>
    </swiper>
    <view class="bg-color">
      <view class="content">
        <view class="card-box">
          <!-- 活动规则 -->
          <view class="rules-bg">
            <view class="rules-item" bindtap="goPage" data-index="0">
              <image class="rules-img" src="/static/image/rules.png" mode="aspectFit"></image>
              <text>活动须知</text>
            </view>
            <view class="line"></view>
            <view class="rules-item" bindtap="goPage" data-index="1">
              <image class="rules-img" src="/static/image/rules.png" mode="aspectFit"></image>
              <text>隐私政策</text>
            </view>
          </view>
          <!-- 日历 -->
          <block wx:if="{{start_time && end_time}}">
            <view class="countdown">距离活动开跑剩余</view>
            <countdown end-time="{{start_time}}" />
          </block>
        </view>
        <!-- 报名 -->
        <view class="registration">
          <view class="registration-lf" bindtap="goRegister" data-action="register">
            <image class="lf-bg-img" src="{{baseUrl + '/static/image/registration.png'}}" mode="aspectFit" />
            <image class="registration-img" src="/static/image/lkbm.png" mode="aspectFit" />
            <button wx:if="{{!loggedIn}}" class="cover-btn" open-type="getPhoneNumber"      bindgetphonenumber="onGetPhoneNumber" data-action="register"></button>
          </view>
          <view class="registration-ri" bindtap="goRegister" data-action="invite">
            <image class="ri-bg-img" src="{{baseUrl + '/static/image/invitation.png'}}" mode="aspectFit" />
            <image class="registration-img" src="/static/image/yqhy.png" mode="aspectFit"/>
            <button wx:if="{{!loggedIn}}" class="cover-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" data-action="invite"></button>
          </view>
        </view>
        <view class="ad-img" bindtap="goRegister" data-action="register">
          <image class="ad-img" wx:if="{{ad_img}}" src="{{ad_img}}" mode="widthFix"/>
          <button wx:if="{{!loggedIn}}" class="cover-btn-ad" open-type="getPhoneNumber"      bindgetphonenumber="onGetPhoneNumber" data-action="register"></button>
        </view>
        <rich-text style="width: 100%;" nodes="{{introduction}}" />
      </view>
    </view>
  </view>
  <!-- 弹窗 -->
  <van-popup show="{{showShare}}" position="bottom" round>
    <view class="share-container">
      <view class="share-options">
        <button class="share-item" open-type="share" data-type="friend">
          <image class="share-icon" src="/static/tabbar/weixin.png" mode="aspectFit" />
          <text class="share-text">微信好友</text>
        </button>

        <button class="share-item" bindtap="openPoster">
          <image class="share-icon" src="/static/tabbar/tp.png" mode="aspectFit" />
          <text class="share-text">海报转发</text>
        </button>
      </view>
      <view class="share-cancel" bindtap="onClose" hover-class="btn-hover" hover-start-time="50">
        <image class="share-cancel-img" src="/static/tabbar/cancel.png" mode="aspectFit"/>
      </view>
    </view>
  </van-popup>
  <!-- 海报 -->
  <view class="poster-container" wx:if="{{showPoster}}" bindtap="closePoster">
    <view class="poster-content">
      <van-loading wx:if="{{posterLoading}}" color="#FFA100" class="poster-loading">海报生成中...</van-loading>
      <canvas wx:if="{{posterLoading}}" canvas-id="posterCanvas"
        style="width:300px;height:600px;position:absolute;top:-9999px;"></canvas>
      <image 
        wx:if="{{posterImg}}" 
        src="{{posterImg}}" 
        mode="aspectFit" 
        class="poster-img"
        style="opacity: {{imageReady ? 1 : 0}}; transition: opacity 0.3s;"
        bindload="onImageLoad"
      />
      <view class="poster-actions" wx:if="{{posterImg && imageReady}}">
        <button class="poster-lf" bindtap="savePoster">保存到相册</button>
        <button class="poster-ri" bindtap="sendImg" data-type="poster">发送朋友</button>
      </view>
    </view>
  </view>
</view>