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>
    <!-- 微信环境提示浏览器打开 -->
    <WxPopTpis v-if="isWeChatBrowser" />

    <!-- container -->
    <div v-else class="invite-container">
      <!-- 分享按钮 -->
      <v-btn @click="shareHandle" class="share-btn mb-8" rounded />

      <div class="day-statistics mb-3">今日邀请注册人数：{{ registerCount }}</div>

      <div class="user-main pt-3 pr-3 pb-3 pl-3 mb-3">
        <div class="userinfo">
          <img class="avatar mr-1" src="~assets/image/activity/invite-user/invite-new-user/avatar.png" alt="">
          <div class="userinfo-text ml-1">
            <div class="userinfo-name">{{ nickname }}</div>
          </div>
        </div>
        <div class="possess-warp mb-3">
          <div class="withdrawal-text">可提现<span class="withdrawal-money ml-2">¥{{ withdrawalBalance }}</span></div>
          <div class="withdrawal-btn" @click="withdrawalHandle">提现</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">{{ inviteBuyAmount }}</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">{{ accumulatedWithdrawal }}</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"/>

            <!-- 提现记录 -->
            <WithdrawalRecord
              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 { Dialog } from 'vant';

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 WithdrawalRecord from './components/WithdrawalRecord';
import SharePopup from './components/SharePopup';
import WxPopTpis from './components/WxPopTpis';

export default {
  auth: false,
  name: 'OemInviteNewUser',
  head: {
    title: '邀请好友得现金',
  },
  components: { layout, layoutBack, RecordList, InvitePagination, BuyRecordList, WithdrawalRecord, SharePopup, WxPopTpis },
  data() {
    return {
      registerCount: 0, // 今日注册人数
      nickname: '', // 用户昵称
      withdrawalBalance: 0, // 可提现余额
      inviteBuyAmount: 0, // 累计邀请金额
      activityId: 1, // 活动ID
      accumulatedWithdrawal: 0, // 累计提现金额,
      // 查询参数
      queryData: {
        phoneNumber: '', // 手机号
        merchantSign: '', // 商户标识
        userName: '', // 邀请人用户名
        quiltUserName: '', // 被邀请人用户名
        activityId: '', // 活动ID
        toDay: '', // 今日日期
        inviteUserName: '', // 邀请人名称
      },
      activeTab: 0,
      tabs: [{
        title: '邀请记录',
        query: {
          pageNum: 1, // 页码
          pageSize: 10, // 每页数量
        },
        data: [{
          id: 1,
          name: '1305677',
          phoneNumber: '13800138000',
          createTime: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
        },
        {
          id: 1,
          name: '1305677',
          phoneNumber: '13800138000',
          createTime: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
        },
        {
          id: 1,
          name: '1305677',
          phoneNumber: '13800138000',
          createTime: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
        },
        {
          id: 1,
          name: '1305677',
          phoneNumber: '13800138000',
          createTime: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
        },
        {
          id: 1,
          name: '1305677',
          phoneNumber: '13800138000',
          createTime: '2025-04-03 10:00:00',
          money: '100.00',
          status: '已提现',
        },
        ],
        total: 1,
      },{
        title: '购买记录',
        query: {
          pageNum: 1,
          pageSize: 10,
        },
        data: [{
          id: 1,
          newPhone: '13800138000',
          finishTime: '2025-04-03 10:00:00',
          totalAmount: '100.00',
          rakeBackAmount: '30.00',
        },{
          id: 1,
          newPhone: '13800138000',
          finishTime: '2025-04-03 10:00:00',
          totalAmount: '100.00',
          rakeBackAmount: '30.00',
        },{
          id: 1,
          newPhone: '13800138000',
          finishTime: '2025-04-03 10:00:00',
          totalAmount: '100.00',
          rakeBackAmount: '30.00',
        },{
          id: 1,
          newPhone: '13800138000',
          finishTime: '2025-04-03 10:00:00',
          totalAmount: '100.00',
          rakeBackAmount: '30.00',
        },{
          id: 1,
          newPhone: '13800138000',
          finishTime: '2025-04-03 10:00:00',
          totalAmount: '100.00',
          rakeBackAmount: '30.00',
        }],
        total: 1,
      },{
        title: '提现记录',
        query: {
          pageNum: 1,
          pageSize: 10,
        },
        data: [{
          withdrawalTime: '2025-04-03 10:00:00',
          withdrawalMoney: '100.00',
        }],
        total: 0,
      }],
    }
  },
   // 页面初始化后触发
  async fetch() {
    await this.getActivityData();
  },
  computed: {
    // 是否为微信浏览器环境
    isWeChatBrowser() {
      return this.$userAgent.isWx;
    }
  },
  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);
      // 发起请求
    },
    // 提现按钮点击
    withdrawalHandle() {
      Dialog.alert({
        message: '请到APP内-我的-联系客服提现',
        confirmButtonColor: '#1A96D2',
      });
    },
    // 获取活动页上部分数据
    async getActivityData() {
      const res = await this.$axios.$get(
        '/activity/v5/activity/inviteNewUser/getInviteNewUserPageData',
      );
      let {
        registerCount, // 今日注册人数
        nickname, // 用户昵称
        withdrawalBalance, // 可提现余额
        inviteBuyAmount, // 累计邀请金额
        activityId, // 活动ID
        accumulatedWithdrawal, // 累计提现金额
      } = res.data;
      this.registerCount = registerCount;
      this.nickname = nickname;
      this.withdrawalBalance = withdrawalBalance;
      this.inviteBuyAmount = inviteBuyAmount;
      this.activityId = activityId;
      this.accumulatedWithdrawal = accumulatedWithdrawal;
    },
    // 获取活动页好友注册记录列表
    async getInviteRecordList() {
      const res = await this.$axios.$post(
        '/activity/v5/activity/inviteNewUser/getInviteNewRegisterUserData',
        { ...this.queryData, ...this.tabs[0].query }
      );

      this.tabs[0].data = res.data.list;
      this.tabs[0].total = res.data.total;
    },
    // 获取活动页好友购买记录列表
    async getInviteBuyRecordList() {
      const res = await this.$axios.$post(
        '/activity/v5/activity/inviteNewUser/getInviteNewUserBuyData',
        { ...this.queryData, ...this.tabs[1].query }
      );

      this.tabs[1].data = res.data.list;
      this.tabs[1].total = res.data.total;
    },
    // 获取活动页好友提现记录列表
    async getInviteWithdrawalRecordList() {
      const res = await this.$axios.$post(
        '/activity/v5/activity/inviteNewUser/getInviteNewUserWithdrawalRecodeList',
        {...this.queryData,...this.tabs[2].query }
      );

      this.tabs[2].data = res.data.list;
      this.tabs[2].total = res.data.total;
    }
  }
}
</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-color: #FF505C;
    background-image: url('~/assets/image/activity/invite-user/invite-new-user/share-to-earn-commission.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: padding-box;
  }

  .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%;
      }

      .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{
    min-height: 220px;
    background-color: $-bg-yellow;
    border-radius:  $-radeus-12;
    overflow: hidden;
  }
}
</style>