h5-dm-orderFront/src/views/membership/user/chargeConsumeRecord.vue

<template>
  <div class="order-console">
    <el-drawer
        v-model="showOrderConsole"
        title="余额变动记录"
        direction="rtl"
        size="50%"
        :before-close="beforeClose"
    >
      <el-table class="mt-4" size="large" :data="pager.lists">
        <el-table-column type="index" width="55"/>
        <el-table-column label="变动类型" prop="typeDesc" min-width="80"/>
        <el-table-column label="来源/场景" prop="bizScene" show-tooltip-when-overflow/>
        <el-table-column label="变动金额(元)" prop="amount" align="right" show-tooltip-when-overflow>
          <template #default="scope">
            <span v-if="scope.row.type > 0" style="font-weight: bolder;color:#F56C6C">+{{ formatAmount(scope.row.amount) }}</span>
            <span v-else style="font-weight: bolder;color:#67C23A">-{{ formatAmount(scope.row.amount) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" prop="eventTime"/>
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination v-model="pager" @change="getLists"/>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ElScrollbar } from 'element-plus'
import feedback from '@/utils/feedback'
import {useElabPaging} from "@/hooks/useElabPaging";
import {queryBalanceRecordPage} from "@/api/membership";
// const route = useRoute()
const queryParams = reactive({
  mobile: ''
})
const { pager, getLists, resetPage, resetParams } = useElabPaging({
  fetchFun: queryBalanceRecordPage,
  params: queryParams
})
const showOrderConsole = ref(false)
const open = (item: any) => {
  showOrderConsole.value = true
  queryParams.userId = item.userId
  getLists()
}
const beforeClose = () => {
  showOrderConsole.value = false
}

// 示例：添加千分位分隔符并保留两位小数
const formatAmount = (amount: string) => {
  return Number(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

onMounted(() => {
  // initData()
})
defineExpose({
  open
})

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