android-cloud-H5/pages/activity/invite-user/invite-new-user.vue

<template>
  <layout title="邀请好友得现金" :isGoBack="true" padding="0">
    <template #right>
      <!-- nav right -->
      <img @click="onRightHandle" src="~assets/image/activity/invite-user/invite-new-user/nav-right.png" alt="">
    </template>

    <!-- container -->
    <div class="invite-container">
      <div class="share-btn mb-8" @click="shareHandle">
        分享赚佣金
      </div>
      <div class="day-statistics mb-3">今日邀请注册人数：1000</div>

      <div class="user-main pt-3 pr-3 pb-3 pl-3 mb-3">
        <div class="userinfo">
          <div class="avatar mr-1"></div>
          <!-- <img class="avatar mr-4" src="~assets/image/activity/invite-user/invite-new-user/avatar.png" alt=""> -->
          <div class="userinfo-text ml-1">
            <div class="userinfo-name">用户昵称</div>
            <div class="userinfo-id">ID：123456789</div>
          </div>
        </div>
        <div class="possess-warp mb-3">
          <div class="withdrawal-text">可提现<span class="withdrawal-money ml-2">¥30.0</span></div>
          <div class="withdrawal-btn">提现</div>
        </div>
        <div class="userinfo-detail">
          <div class="userinfo-detail-item pt-4 pr-3 pb-3 pl-3">
            <div class="userinfo-detail-item-content">1000</div>
            <div class="userinfo-detail-item-title">累计邀请人数</div>
          </div>
          <div style="flex: 0 0 11px"></div>
          <div class="userinfo-detail-item pt-4 pr-3 pb-3 pl-3">
            <div class="userinfo-detail-item-content">1000</div>
            <div class="userinfo-detail-item-title">累计邀请金额</div>
          </div>
        </div>
      </div>

      <div class="record-wrap">
        <van-tabs v-model="activeTab" shrink background="#FFFBE2">
          <van-tab v-for="(tab, i) in tabs" :title="tab.title" :key="i">
            <!-- 邀请记录 -->
            <RecordList
              v-if="activeTab === 0"
              class="mt-3 pr-1 pl-1 list-wrqp"
              :data="tab.data"
              :key="i"
            />

            <!-- 购买记录 -->
            <BuyRecordList class="mt-3 pr-1 pl-1 list-wrqp" v-if="activeTab === 1" :data="tab.data"/>

            <!-- 提现记录 -->
            <RecordList
              v-if="activeTab === 2"
              class="mt-3 pr-1 pl-1 list-wrqp"
              :data="tab.data"
              :key="i"
            />

            <!-- 分页 -->
            <InvitePagination v-if="tab.total" :total="tab.total" :pageSize="tab.query.pageSize" :currentPage="tab.query.pageNum" @onPageChange="pageChangeHandle" />
          </van-tab>
        </van-tabs>
      </div>

      <!-- 分享弹窗 -->
      <SharePopup ref="sharePopup" />
    </div>
  </layout>
</template>

<script>
/**
 * Date: 2025-4-3 oem商户拉新分佣活动
*/
import layoutBack from '@/components/layout';
import layout from './components/layout';
import RecordList from './components/RecordList';
import InvitePagination from './components/InvitePagination';
import BuyRecordList from './components/BuyRecordList';
import SharePopup from './components/SharePopup';

export default {
  auth: false,
  name: 'OemInviteNewUser',
  head: {
    title: '邀请好友得现金',
  },
  components: { layout, layoutBack, RecordList, InvitePagination, BuyRecordList, SharePopup },
  data() {
    return {
      activeTab: 0,
      tabs: [{
        title: '邀请记录',
        query: {
          pageNum: 1,
          pageSize: 10,
        },
        data: [{
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
          statusColor: '#FF505C',
        },
        {
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
          statusColor: '#FF505C',
        },
        {
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
          statusColor: '#FF505C',
        },
        {
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
          statusColor: '#FF505C',
        },
        {
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
          statusColor: '#FF505C',
        },
        // {
        //   id: 1,
        //   name: '1305677',
        //   phone: '13800138000',
        //   time: '2025-04-03 10:00:00',
        //   money: '100.00',
        //   status: '已提现',
        //   statusColor: '#FF505C',
        // },
        // {
        //   id: 1,
        //   name: '1305677',
        //   phone: '13800138000',
        //   time: '2025-04-03 10:00:00',
        //   money: '100.00',
        //   status: '已提现',
        //   statusColor: '#FF505C',
        // },
        // {
        //   id: 1,
        //   name: '1305677',
        //   phone: '13800138000',
        //   time: '2025-04-03 10:00:00',
        //   money: '100.00',
        //   status: '已提现',
        //   statusColor: '#FF505C',
        // },
        // {
        //   id: 1,
        //   name: '1305677',
        //   phone: '13800138000',
        //   time: '2025-04-03 10:00:00',
        //   money: '100.00',
        //   status: '已提现',
        //   statusColor: '#FF505C',
        // },
        // {
        //   id: 1,
        //   name: '1305677',
        //   phone: '13800138000',
        //   time: '2025-04-03 10:00:00',
        //   money: '100.00',
        //   status: '已提现',
        //   statusColor: '#FF505C',
        // }
        ],
        total: 0,
      },{
        title: '购买记录',
        query: {
          pageNum: 1,
          pageSize: 10,
        },
        data: [{
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '30.00',
          statusColor: '#FF505C',
        },{
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '30.00',
          statusColor: '#FF505C',
        },{
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '30.00',
          statusColor: '#FF505C',
        },{
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '30.00',
          statusColor: '#FF505C',
        },{
          id: 1,
          name: '1305677',
          phone: '13800138000',
          time: '2025-04-03 10:00:00',
          money: '100.00',
          status: '30.00',
          statusColor: '#FF505C',
        },],
        total: 0,
      },{
        title: '提现记录',
        query: {
          pageNum: 1,
          pageSize: 10,
        },
        data: [],
        total: 0,
      }],
    }
  },
  methods: {
    // nav right菜单点击事件
    onRightHandle() {
      this.$router.push({ path: '/activity/invite-user/invite-new-user-rule' })
    },
    // 分享按钮点击事件
    shareHandle() {
      this.$refs.sharePopup.showPopup();
    },
    // 分页点击事件
    pageChangeHandle(page) {
      let active =  this.activeTab;
      this.tabs[active].query.pageNum = page;
      console.log('pageChangeHandle', page);
      // 发起请求
    }
  }
}
</script>
<style lang="scss" scoped>
.mb-12{
  margin-bottom: 12px;
}
// 动态生成 从 0 到 100px 的样式
@for $i from 0 through 100 {
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }

  .mt-#{$i} {
    margin-top: #{$i}px;
  }

  .ml-#{$i} {
    margin-left: #{$i}px;
  }

  .mr-#{$i} {
    margin-right: #{$i}px;
  }
}
$-radeus-12: 12px;
$-bg-yellow: rgb(255, 253, 241);

.invite-container {
  font-size: 12px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-image: url('~assets/image/activity/invite-user/invite-new-user/bg-img.png');
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
  background-color: #EB3043;
  padding: 372px 16px 16px;

  .share-btn {
    height: 56px;
    background: #FF505C;
  }

  .day-statistics{
    line-height: 32px;
    font-size: 14px;
    color: #FA393A;
    font-weight: 500;
    border-radius:  $-radeus-12;
    background-color: $-bg-yellow;
    text-align: center;
  }

  .user-main{
    display: flex;
    flex-direction: column;
    background-color: $-bg-yellow;
    border-radius: $-radeus-12;
    
    .userinfo{
      display: flex;
      align-items: center;

      .avatar{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #FF505C;
      }

      .userinfo-text{
        display: flex;
        flex-direction: column;

        .userinfo-name{
          font-size: 14px;
          color: #242424;
        }

        .userinfo-id{
          color: #979797;
        }
      }
    }

    .possess-warp{
      display: flex;
      align-items: center;
      justify-content: space-between;

      .withdrawal-text{
        color: #0A132B;

        .withdrawal-money{
          color: #FA393A;
          font-size: 24px;
          font-weight: bold;
        }
      }

      
      .withdrawal-btn{
        width: 70px;
        line-height: 26px;
        border-radius: $-radeus-12;
        background-color: #FA393A;
        color: #fff;
        font-size: 14px;
        text-align: center;
      }
    }

    .userinfo-detail{
      display: flex;
      align-items: center;
      justify-content: space-between;

      .userinfo-detail-item{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: start;
        background-color: rgb(255, 242, 231);
        border-radius: 12px;

        .userinfo-detail-item-content{
          font-size: 18px;
          font-weight: bold;
          color: #242424;
        }

        .userinfo-detail-item-title{
          font-weight: 400;
          color: #979797;
        }
      }
    }
  }

  .record-wrap{
    height: 276px;
    background-color: $-bg-yellow;
    border-radius:  $-radeus-12;
    overflow: hidden;
  }
}
</style>