mcwl-pc/app/pages/wallet/index.vue

<template>
  <div>
    <div class="p-4 flex text-white gap-3">
      <div
        class="w-60 h-28 bg-[#a494f7] px-8 py-6 rounded-lg flex flex-col justify-around"
      >
        <div class="text-xl">累计收入金额</div>
        <div class="text-base">¥ {{ totalAmount || 0 }}</div>
      </div>
      <div
        class="w-60 h-28 bg-[#e87988] px-8 py-6 rounded-lg flex flex-col justify-around"
      >
        <div class="text-xl flex justify-between items-center">
          <div>可提现金额</div>
          <div
            class="text-sm cursor-pointer select-none text-[#524f4f]"
            @click="showModal"
          >
            提现 >
          </div>
        </div>
        <div class="text-base">¥ {{ integralGold.wallet || 0 }}</div>
      </div>
    </div>
    <div class="p-4 text-[#06186d]">
      <n-tabs v-model:value="activeTab" type="line" animated>
        <!-- <n-tab-pane name="allDetail" tab="全部明细">
          <div
            class="border border-solid border-gray-200 rounded-lg relative text-[#06186d]"
          >
            <div class="mc-table flex w-full bg-gray-100 sticky top-0">
              <div class="w-[250px]">获取时间</div>
              <div class="w-[250px]">获取来源</div>
              <div class="flex-1">详情</div>
              <div class="w-[200px]">金币值</div>
            </div>
            <n-infinite-scroll
              style="height: calc(100vh - 300px)"
              :distance="10"
              @load="getPoints"
            >
              <div v-for="item in allDetailList" :key="item" class="mc-table flex w-full">
                <div class="w-[250px]">
                  {{ item.orderTime }}
                </div>
                <div class="w-[250px]">{{ item.productName }}</div>
                <div class="flex-1">-</div>
                <div class="w-[200px]">
                  {{ item.paymentAmount }}
                </div>
              </div>
            </n-infinite-scroll>
          </div>
        </n-tab-pane> -->
        <n-tab-pane name="withdrawDetail" tab="提现明细">
          <div class="border border-solid border-gray-200 rounded-lg relative">
            <div class="mc-table flex w-full bg-[#e5ecf4] sticky top-0">
              <div class="w-[250px]">提现时间</div>
              <div class="w-[250px]">账户类型</div>
              <div class="flex-1">详情</div>
              <div class="w-[200px]">提现金额</div>
            </div>
            <n-infinite-scroll
              style="height: calc(100vh - 300px)"
              :distance="10"
              @load="getWithdrawDetail"
            >
              <div
                v-for="item in withdrawDetailList"
                :key="item"
                class="mc-table flex w-full"
              >
                <div class="w-[250px]">
                  {{ item.createTime }}
                </div>
                <div class="w-[250px]">{{ item.account }}</div>
                <div class="flex-1">-</div>
                <div class="w-[200px]">
                  {{ item.amount }}
                </div>
              </div>
            </n-infinite-scroll>
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>

    <n-modal v-model:show="showWalletModal">
      <n-card
        style="width: 600px"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="false"
        preset="dialog"
      >
        <div class="flex justify-between">
        <div class="text-xl">
          提现
        </div>
          <n-icon size="20" class="mr-2 cursor-pointer" @click="closeWalletModal">
            <Close />
          </n-icon>
        </div>
        <div class="py-4">
          <div class="text-sm text-gray-600">
            可提现金额: ¥ {{ integralGold.wallet || 0 }}
          </div>
          <div class="mt-6">
            <n-input-number
              placeholder="输入要提现的金额"
              v-model:value="needWalletNum"
              :precision="2"
              clearable
            />
          </div>
        </div>
        <div class="flex justify-center mt-6">
          <n-button type="error" @click="closeWalletModal"> 取消 </n-button>
          <n-button type="primary" class="ml-8" @click="handleWallet"> 确定 </n-button>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup>
import { isAmount } from '@/utils/index.ts';
import { Close } from "@vicons/ionicons5";
import { ref } from "vue";
const activeTab = ref("withdrawDetail");
const showWalletModal = ref(false);
const showModal = () => {
  showWalletModal.value = true;
};
const closeWalletModal = () => {
  showWalletModal.value = false;
  needWalletNum.value = 0
};
// const allDetailList = ref([]);
// 获取可提现金额
const integralGold = ref({});
async function getIntegralGold() {
  try {
    const res = await request.post("/personalCenter/getPointAndWallet");
    if (res.code === 200) {
      integralGold.value = res.data;
    }
  } catch (err) {
    console.log(err);
  }
}
getIntegralGold();

// 提现操作
const needWalletNum = ref(0)
const handleWallet = async() =>{
  if(isAmount(needWalletNum.value)){
    try {
      const res = await request.get(`/ali/pay/fetch?amount=${needWalletNum.value}`);
      if (res.code === 200) {
        closeWalletModal()
        getIntegralGold()
      }
    } catch (err) {
      console.log(err);
    }
  }else{
    message.warning('请输入正确的金额')
  }
}

//获取累计收入金额
const totalAmount = ref(0);
async function getTotalAmount() {
  try {
    const res = await request.get("/invitation/totalAmount");
    if (res.code === 200) {
      totalAmount.value = res.data;
    }
  } catch (err) {
    console.log(err);
  }
}
getTotalAmount();

//获取提现明细列表
const withdrawFinished = ref(false);
const withdrawDetailList = ref([]);
const withdrawParams = ref({
  pageNum: 1,
  pageSize: 10,
});
async function getWithdrawDetail() {
  try {
    if (withdrawFinished.value) return;
    const res = await request.post("/invitation/withdrawalRecord", withdrawParams.value);
    if (res.code === 200) {
      // withdrawDetailList.value = res.data;
      if (withdrawParams.value.pageNum === 1) {
        withdrawDetailList.value = res.rows;
      } else {
        withdrawDetailList.value = [...withdrawDetailList.value, ...res.rows];
      }
      // 判断是否加载完所有数据
      if (withdrawDetailList.value.length >= res.total) {
        withdrawFinished.value = true;
      }
      withdrawParams.value.pageNum++;
    }
  } catch (err) {
    console.log(err);
  }
}
getWithdrawDetail();
</script>

<style scoped>
.mc-table {
  padding: 10px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
}
</style>