jdt-mer/src/views/settlement/y_list/index.vue

<template>
  <!-- <div> -->
  <CommonPage show-footer :title="$route.title">
    <div w-1200 flex items-center justify-between>
      <n-card class="w-300">
        <n-statistic label="可提现余额">
          <n-number-animation
            ref="numberAnimationInstRef"
            :precision="2"
            :from="0"
            :to="userInfo.integral"
          />
        </n-statistic>
      </n-card>
      <div w-100 text-center text-25>/</div>
      <n-card class="w-300">
        <n-statistic label="兑换比例">
          <n-number-animation ref="numberAnimationInstRef" :precision="2" :from="0" :to="100" />
        </n-statistic>
      </n-card>
      <div w-100 text-center text-25>=</div>
      <n-card class="w-300">
        <n-statistic label="CNY">
          <n-number-animation
            ref="numberAnimationInstRef"
            :precision="2"
            :from="0"
            :to="userInfo.integral / 100"
          />
        </n-statistic>
      </n-card>
      <div ml-10 w-300 flex flex-col items-center justify-center>
        <n-input-number v-model:value="formData.integral" clearable placeholder="请输入提现积分" />
        <n-button mt-10 w-full type="primary" @click="ok">立即提现</n-button>
      </div>
    </div>

    <n-data-table
      class="mt-10"
      :loading="loading"
      :columns="columns"
      :data="data"
      :pagination="pagination"
      :bordered="false"
      remote
    />
  </CommonPage>
  <!-- </div> -->
</template>

<script setup>
import api from './api'
import comm from '@/api'
import { NTag, NImage } from 'naive-ui'

const loading = ref(false)
const columns = ref([
  {
    title: 'ID',
    key: 'ID',
    align: 'center',
  },
  {
    title: '提现金额',
    key: 'integral',
    align: 'center',
  },
  {
    title: '上次留存余额',
    key: 'balance',
    align: 'center',
  },
  {
    title: '服务费',
    key: 'commission',
    align: 'center',
  },
  {
    title: '实际到账',
    key: 'number',
    align: 'center',
  },
  {
    title: '剩余余额',
    key: 'residue',
    align: 'center',
  },
  {
    title: '手续费比例',
    slot: 'commission_number',
    align: 'center',
    render: (row) => {
      return h(
        'span',
        {},
        {
          default: () => `${row.commission_number}%`,
        }
      )
    },
  },
  {
    title: '手续费类型',
    key: 'commission_type',
    align: 'center',
    render: (row) => {
      return h(
        NTag,
        {
          type: row.commission_type === 1 ? 'success' : 'warning',
        },
        {
          default: () => (row.commission_type === 1 ? '百分比' : '固定值'),
        }
      )
    },
  },
  {
    title: '银行名称',
    key: 'bank',
    align: 'center',
  },
  {
    title: '银行卡号',
    key: 'bank_card',
    align: 'center',
  },
  {
    title: '账户名称',
    key: 'bank_name',
    align: 'center',
  },
  {
    title: '法人',
    key: 'bank_user',
    align: 'center',
  },
  {
    title: '提现状态',
    slot: 'status',
    align: 'center',
    render: (row) => {
      return h(
        NTag,
        {
          type: row.status === 1 ? 'success' : row.status === 2 ? 'error' : 'warning',
        },
        {
          default: () => (row.status === 1 ? '已审核' : row.status === 2 ? '已拒绝' : '待审核'),
        }
      )
    },
  },
  {
    title: '提现时间',
    slot: 'add_time',
    align: 'center',
    render: (row) => {
      return h(
        'span',
        {},
        {
          default: () => row.add_time,
        }
      )
    },
  },
  {
    title: '打款截图',
    slot: 'img',
    render: (row) => {
      return h(NImage, {
        src: row.status_img,
        width: '50',
      })
    },
  },
])
const data = ref([])

const formData = ref({
  integral: null,
})

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  onChange: (page) => {
    pagination.value.page = page
    getList()
  },
  onUpdatePageSize: (pageSize) => {
    pagination.value.pageSize = pageSize
    pagination.value.page = 1
    getList()
  },
})

onMounted(() => {
  getList()
  getData()
})

const userInfo = ref({})

const getData = async () => {
  const res = await comm.getMerchantInfo()
  userInfo.value = res.data.data
}

const getList = async () => {
  loading.value = true
  try {
    const res = await api.getList({
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
    })
    data.value = res.data.data || []
    pagination.value.itemCount = res.data.total
  } catch (error) {
    $message.error(error.msg)
  }
  loading.value = false
}

const ok = async () => {
  //   if (formData.value.integral < 1000) return $message.warning('提现积分不能小于10000')
  const res = await api.apply({
    number: formData.value.integral,
  })
  $message.success(res.msg)
  clear()
}

const clear = () => {
  formData.value.integral = null
  getList()
  getData()
}
</script>

<style lang="scss" scoped></style>