payProject/pages/invitationDetails/invitationDetails.wxml

<wxs src="../../app.wxs" module="util" />
<view class="invit">
  <view class="banner">
    <image src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E7%BC%96%E7%BB%84%2012%402x.png"></image>
  </view>
  <view class="content">
    <image class="content-image" src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E5%89%8D%E8%A8%80%402x.png"></image>
    <view class="list">
      <view class="list-title">
        <view>喊好友到店<text class="title-text">免费体验</text>项目</view>
        <!-- <view>满5位可获得：</view> -->
      </view>
      <view class="list-tips">
        <!-- <view><text class="tips-text">299</text> 元购买价值1297元</view>
      <view>JOLI聚拉提项目 <text class="tips-text">特权</text></view> -->
        <view class="list-tips-item">
          <image src="../../images/矩形 3.png" style="width: 30rpx;height: 30rpx;"></image>
          <view class="list-tips-num">成功邀请<text>1</text>人</view>
        </view>
        <view class="list-tips-text">获得价值226元<text>修丽可补水</text>1次</view>
        <view class="list-tips-item">
          <image src="../../images/矩形 3.png" style="width: 30rpx;height: 30rpx;"></image>
          <view class="list-tips-num">成功邀请<text>3</text>人</view>
        </view>
        <view class="list-tips-text">获得价值799元<text>小热玛吉</text>1次</view>
        <!-- <van-steps direction="vertical" active-color="#FA3020" active="{{active}}" steps="{{steps}}">
        </van-steps> -->
      </view>
      <view class="list-button" bindtap="onOpenShow" >
      <image src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E7%BC%96%E7%BB%84%2016%402x.png"></image>
      <text>马上邀请</text>
      </view>
    </view>
    <image class="center-image" src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E7%BC%96%E7%BB%84%2018%402x.png" style="position: relative; left: -37rpx; top: -58rpx"></image>
  </view>
    <view class="bottom">
    <!-- <view class="info-title">— 好友可免费体验 —</view>
    <view class="list other-list"> -->
      <!-- <view class="other-list-info" wx:for="{{experienceList}}" wx:for-item="item" wx:key="index">{{item}}</view> -->
      <!-- <view class="title">华熙生物润百颜补水1次</view>
      <image class="" src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220527/invite/project_img.png" mode="aspectFit|aspectFill|widthFix" />
    </view> -->
    <!-- 好友免费体验 -->
    <view class="freeImage">
      <image  src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E5%A5%BD%E5%8F%8B%E5%85%8D%E8%B4%B9%E4%BD%93%E9%AA%8C%402x.png"></image>
    </view>
    <!-- 邀请记录 -->
    <view class="call-list">
    <image src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E7%BC%96%E7%BB%84%2014%402x.png">
      <view class="info-title">邀请记录</view>
      <view class="call-team">
        <view class="team-content">
          <!-- <view class="content-title">已邀请{{total}}人</view> -->
          <scroll-view class="content-list" scroll-y lower-threshold="100" bindscrolltolower="scrollToLower">
            <view class="list-info" wx:for="{{call_team}}" wx:key="index">
              <image src="{{item.avatar_url}}"></image>
              <text>{{ util.mysub( item.nickname,0,3)}}</text>
              <text class="list-info-text"><text>获得 </text>{{util.mysub(item.product_name,0,9)}}</text>
              <text>{{item.receive_time}}</text>
            </view>
            <van-loading wx:if="{{loading}}" size="24px">加载中...</van-loading>
            <!-- <view class="finished" wx:if="{{finished}}">没有更多了</view> -->
          </scroll-view>
        </view>
      </view>
    </image>
    </view>
    <!-- <view class="info-title">— 邀请记录 —</view>
    <view class="call-list">
      <view class="call-team">
        <view class="team-content">
          <view class="content-title">已邀请{{total}}人</view>
          <scroll-view class="content-list" scroll-y lower-threshold="100" bindscrolltolower="scrollToLower">
            <view class="list-info" wx:for="{{call_team}}" wx:key="index">
              <image src="{{item.avatar_url}}"></image>
              <text>{{ util.mysub( item.nickname,0,3)}}</text>
              <text><text>获得 </text>{{util.mysub(item.product_name,0,9)}}</text>
              <text>{{item.receive_time}}</text>
            </view>
            <van-loading wx:if="{{loading}}" size="24px">加载中...</van-loading> -->
            <!-- <view class="finished" wx:if="{{finished}}">没有更多了</view> -->
          <!-- </scroll-view>
        </view>
      </view>
    </view> -->
    <!-- 项目介绍 -->
    <view class="productInfo">
    <image src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E7%BC%96%E7%BB%84%2011%402x.png"></image>
    </view>
    <!-- <view class="info-title">— 活动介绍 —</view>
    <view class="introduce">
      <view class="tips" style="margin-top: 22rpx;">1.邀请者活动参与条件：到店体验过项目后的用户；</view>
      <view class="tips" style="margin-top: 20rpx;">2.被邀请者活动参与条件：新用户（未注册使用过小程序的用户）；</view>
      <view class="tips" style="margin-top: 28rpx;">3.项目体验需提前在小程序进行预约，如无法在预约时间到场，可联系店员进行时间调整。</view>
    </view> -->
    <!-- 活动介绍 -->
    <view class="productIntroduce">
    <image src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E6%B4%BB%E5%8A%A8%E4%BB%8B%E7%BB%8D%402x.png"></image>
    </view>
  </view>
</view>
<van-popup show="{{ show }}" round position="bottom" custom-style="height: 35%;" bind:close="onClose">
  <view class="share">
    <view class="close" bindtap="onClose">
      <image src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220413/close.png"></image>
    </view>
    <view class="share-title">分享到</view>
    <view class="share-mode">
      <view class="weixin">
        <button type="default" bindtap="onShareFriends" open-type="share" class="clear-style">
          <image src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220413/wx.png"></image>
          <view class="title">微信</view>
        </button>
      </view>
      <view class="wechat-moments" bindtap="onMoments">
        <image src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220413/moments_icon.png"></image>
        <view class="title">朋友圈</view>
      </view>
    </view>
  </view>
</van-popup>