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">
      <!-- 分享按钮 -->
      <van-button @click="shareHandle" class="share-btn mb-8" round />

      <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" :class="{'disable': withdrawalBalance < withdrawalThreshold || withdrawalBalance === 0 }" @click="()=>(withdrawalBalance >= withdrawalThreshold && 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" :qrText="qrText" :nickname="nickname" />
    </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 {
      qrText: '', // 生成二维码的文本
      registerCount: 0, // 今日注册人数
      nickname: '', // 用户昵称
      withdrawalBalance: 0, // 可提现余额
      withdrawalThreshold: 0, // 提现门槛值
      inviteBuyAmount: 0, // 累计邀请金额
      accumulatedWithdrawal: 0, // 累计提现金额,
      // 查询参数
      queryData: {
        activityId: '', // 活动ID
      },
      activeTab: 0,
      tabs: [{
        title: '邀请记录',
        requireMethod: 'getInviteRecordList', // 请求定义的方法key
        query: {
          pageNum: 1, // 页码
          pageSize: 5, // 每页数量
        },
        data: [],
        total: 0,
      },{
        title: '购买记录',
        requireMethod: 'getInviteBuyRecordList', // 请求定义的方法key
        query: {
          pageNum: 1,
          pageSize: 5,
        },
        data: [],
        total: 0,
      },{
        title: '提现记录',
        requireMethod: 'getInviteBuyRecordList', // 请求定义的方法key
        query: {
          pageNum: 1,
          pageSize: 5,
        },
        data: [],
        total: 0,
      }],
    }
  },
  // 页面初始化后触发
  async fetch() {
    // 获取参数的token值
    let token = this.$route.query.token;
    if(!token) {return this.$toast('用户信息获取失败')}

    // token参数会自动被系统获取,请求接口自动带上token

    await this.getActivityData();
    await this.getInviteRecordList();
    await this.getInviteBuyRecordList();
    await this.getInviteWithdrawalRecordList();
    // await this.getActivityRule(this.queryData.activityId);
  },
  computed: {
    // 是否为微信浏览器环境
    isWeChatBrowser() {
      return this.$userAgent.isWx;
    }
  },
  methods: {
    // nav right菜单点击事件
    onRightHandle() {
      this.$router.push({ path: '/activity/invite-user/invite-new-user-rule', query: { activityId: this.queryData.activityId} })
    },
    // 分享按钮点击事件
    shareHandle() {
      this.$refs.sharePopup.showPopup();
    },
    // 分页点击事件
    pageChangeHandle(page) {
      let active =  this.activeTab;
      this.tabs[active].query.pageNum = page;

      // 发起请求
      this[this.tabs[active].requireMethod]();
    },
    // 提现按钮点击
    withdrawalHandle() {
      Dialog.alert({
        message: '请到APP内-我的-联系客服提现',
        confirmButtonColor: '#1A96D2',
      });
    },
    // 获取活动页上部分数据
    async getActivityData() {
      const res = await this.$axios.$get('/activity/v5/activity/inviteNewUser/getInviteNewUserPageData');
      let {
        registerCount, // 今日注册人数
        nickname, // 用户昵称
        withdrawalBalance, // 可提现余额
        withdrawalThreshold, // 提现门槛值
        inviteBuyAmount, // 累计邀请金额
        activityId, // 活动ID
        accumulatedWithdrawal, // 累计提现金额
        jumpAddress, // 分享的链接
      } = res.data;

      // 页面展示数据
      this.registerCount = registerCount;
      this.nickname = nickname;
      this.withdrawalBalance = withdrawalBalance;
      this.withdrawalThreshold = withdrawalThreshold;
      this.inviteBuyAmount = inviteBuyAmount;
      this.accumulatedWithdrawal = accumulatedWithdrawal;
      // 查询参数
      this.queryData.activityId = activityId;
      jumpAddress;
      // 生成二维码的文本
      this.qrText = jumpAddress;
    },
    // 获取活动页好友注册记录列表
    async getInviteRecordList() {
      let {status, success, data} = await this.$axios.$post(
        '/activity/v5/activity/inviteNewUser/getInviteNewRegisterUserData',
        { ...this.queryData, ...this.tabs[0].query },
      );
      if(status === 0 && success) {
        this.tabs[0].data = data.list;
        this.tabs[0].total = data.total;
      }
      /*
      友注册记录列表数据格式
      {
        id: 1,
        name: '1305677',
        phoneNumber: '13800138000',
        createTime: '2025-04-03 10:00:00',
        money: '100.00',
        status: '已提现',
      }
      */
    },
    // 获取活动页好友购买记录列表
    async getInviteBuyRecordList() {
      let {status, success, data} = await this.$axios.$post(
        '/activity/v5/activity/inviteNewUser/getInviteNewUserBuyData',
        { ...this.queryData, ...this.tabs[1].query },
      );
      if(status === 0 && success) {
        this.tabs[1].data = data.list;
        this.tabs[1].total = data.total;
      }
      /*
      友购买记录列表数据格式
      {
        id: 1,
        newPhone: '13800138000',
        finishTime: '2025-04-03 10:00:00',
        totalAmount: '100.00',
        rakeBackAmount: '30.00',
      }
      */
    },
    // 获取活动页好友提现记录列表
    async getInviteWithdrawalRecordList() {
      let {status, success, data} = await this.$axios.$post(
        '/activity/v5/activity/inviteNewUser/getInviteNewUserWithdrawalRecodeList',
        {...this.queryData,...this.tabs[2].query },
      );

      if(status === 0 && success) {
        this.tabs[2].data = data.list;
        this.tabs[2].total = data.total;
      }

      /*
      友提现记录列表数据格式
      {
        withdrawalTime: '2025-04-03 10:00:00',
        withdrawalMoney: '100.00',
      }
      */
    },
    // 获取邀请url地址,用于生成二维码 id: 活动ID
    async getActivityRule(id) {
      let {status, success, data} = await this.$axios.$get('/activity/activity/basic/getDetailsById',{
        params: { id }
      });

      if(status === 0 && success) {
        // 生成二维码的文本
        this.qrText = `${data?.activityInviteNewUser?.jumpAddress}?activityId=${id}&invitationUserName=${this.nickname}`;
      }
    }
  }
}
</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;
    z-index: 0;
  }

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

        &.disable{
          background-color: #E0E0E0;
          color: #979797;
        }
      }
    }

    .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>