menduner/src/views/recruit/personal/myWallet/myBalance/index.vue

<template>
  <div class="default-width">
    <div class="pa-3 mb-2 white-bgc">
      <!-- 余额展示 -->
      <div class="statisticsBox">
        <div class="ml-10 mt-2">
          <div class="item-title">
            您当前可用余额
          </div>
          <div class="item-value">
            {{ userAccount?.balance && userAccount?.balance > 0 ? (userAccount?.balance / 100.0).toFixed(2) : 0 }}
            <span
              class="text-decoration-underline cursor-pointer"
              style="color: #666; font-size: 13px;"
              @click="handleRecharge"
            >充值</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="mt-3 white-bgc pa-3 pt-3">
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
        <v-tab value="rechargeDetails">{{ $t('points.rechargeDetails') }}</v-tab>
        <!-- <v-tab :value="otherHeader">otherHeader</v-tab> -->
      </v-tabs>
      <CtTable
        class="mt-3"
        :items="dataList"
        :headers="headerList[tab]"
        :loading="false"
        :elevation="0"
        :isTools="false"
        :showPage="true"
        :total="total"
        :page-info="query"
        itemKey="id"
        @pageHandleChange="handleChangePage"
      >
      </CtTable>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'myWallet-myBalance-index'})
import { ref } from 'vue'
import { timesTampChange } from '@/utils/date'
import { getUserWalletRechargePage } from '@/api/recruit/personal/myWallet.js'

const tab = ref('rechargeDetails')

const userAccount = ref(JSON.parse(localStorage.getItem('userAccount')) || {}) // 账户信息

const total = ref(0)
const query = ref({
  pageNo: 1,
  pageSize: 10,
})
const dataList = ref([])

const headerList = {
  rechargeDetails: [
    { title: '充值金额', key: 'payPrice', sortable: false },
    { title: '支付方式', key: 'payChannelName', sortable: false },
    { title: '支付订单编号', key: 'payOrderId', sortable: false },
    { title: '交易时间', key: 'payTime', value: item =>  timesTampChange(item.payTime), sortable: false },
  ],
  // otherHeader: []
}


// 积分、签到明细
const getData = async () => {
  const res = await getUserWalletRechargePage(query.value)
  dataList.value = res.list
  total.value = res.total
}
getData()

const handleChangePage = (e) => {
  query.value.pageNo = e
  getData()
}

// 切换
const handleChangeTab = () => {
  query.value.pageNo = 1
  getData()
}

// 充值
import { useRouter } from 'vue-router'; const router = useRouter()
const handleRecharge = () => {
  router.push({ path: '/personalRecharge' })
}
</script>

<style lang="scss" scoped>
.statisticsBox {
  padding: 10px 0;
  border-radius: 10px;
  background-color: var(--default-bgc);
  // background-color: var(--color-f3);
  // font-family: 宋体, SimSun;
}
.item-title {
  font-size: 20px; 
  color: var(--color-333); 
  line-height: 28px; 
  font-weight: bold;
}
.item-value {
  font-size: 42px; 
  color: #10897bba;
  line-height: 50px;
}
</style>