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

<script setup>
import { isAmount } from '@/utils/index.ts'
import { Close } from '@vicons/ionicons5'
import { ref } from 'vue'

const loading = ref(false)
const activeTab = ref('withdrawDetail')
const showWalletModal = ref(false)
function showModal() {
  showWalletModal.value = true
}
const message = useMessage()

// 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)
async function handleWallet() {
  if (loading.value)
    return
  if (isAmount(needWalletNum.value)) {
    if (needWalletNum.value > integralGold.value.wallet)
      return message.warning('可提现金额不足')
    try {
      loading.value = true
      const res = await request.get(`/ali/pay/fetch?amount=${needWalletNum.value}`)
      if (res.code === 200) {
        message.success('提现成功!')
        closeWalletModal()
        location.reload()
        // getIntegralGold()
      }
    }
    catch (err) {
      console.log(err)
    }
    finally {
      loading.value = false
    }
  }
  else {
    message.warning('请输入正确的金额')
  }
}

function closeWalletModal() {
  showWalletModal.value = false
  needWalletNum.value = 0
}

// 获取累计收入金额
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) {
      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>

<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-spin :show="loading">
              <n-input-number
                v-model:value="needWalletNum"
                placeholder="输入要提现的金额"
                :precision="2"
                clearable
              />
            </n-spin>
          </div>
        </div>
        <div class="flex justify-center mt-6">
          <n-button type="error" @click="closeWalletModal">
            取消
          </n-button>
          <!-- :loading="loading" -->
          <n-button type="primary" class="ml-8" @click="handleWallet">
            确定
          </n-button>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

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