va_admin_frontend/src/modules/payment/views/wallet.vue

<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />

			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索关键字" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table">
				<template #slot-btn="{ scope }">
					<el-button text bg type="success" @click="rechange(scope.row)">充值</el-button>
					<el-button text bg type="success" @click="showWithdraw(scope.row)"
						>提现</el-button
					>
					<el-button text bg type="success" @click="showTransfer(scope.row)"
						>划转</el-button
					>
				</template>
			</cl-table>
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert">
			<template #slot-currency="{ scope }">
				<el-select v-model="scope.currency" clearable>
					<el-option
						v-for="item in currencyList.filter(
							item =>
								channelList
									.find(v => v.code == scope.channel)
									?.supportedCurrencies.includes(item.id) || item.type == '2'
						)"
						:key="item.id"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</template>
		</cl-upsert>
		<withdraw
			v-if="WithdrawVisible"
			:channel="channel"
			:currency="currency"
			v-model:show="WithdrawVisible"
			@refresh="refresh"
		/>
		<transfer
			v-if="TransferVisible"
			:fromWalletId="fromWalletId"
			:channel="channel"
			v-model:show="TransferVisible"
			@refresh="refresh"
		/>
		<cl-dialog title="充值信息" v-model="rechangeVisible" width="80%">
			<div v-if="rechangeInfo && rechangeInfo.currency === 'EUR'" class="currency-box">
				<el-row style="margin-bottom: 12px">
					<el-col :span="12">
						<span class="label">bic:</span>
						<span class="content">{{ rechangeInfo.config[0].bic }}</span>
					</el-col>
					<el-col :span="12">
						<span class="label">iBan:</span
						><span class="content">{{ rechangeInfo.config[0].iBan }}</span>
					</el-col>
				</el-row>
				<el-row style="margin-bottom: 12px">
					<el-col :span="12">
						<span class="label">status:</span
						><span class="content">{{ rechangeInfo.config[0].status }}</span>
					</el-col>
					<el-col :span="12">
						<span class="label">bankName:</span
						><span class="content">{{ rechangeInfo.config[0].bankName }}</span>
					</el-col>
				</el-row>
				<el-row style="margin-bottom: 12px">
					<el-col :span="12">
						<span class="label">currency:</span
						><span class="content">{{ rechangeInfo.config[0].currency }}</span>
					</el-col>
					<el-col :span="12">
						<span class="label">bankAddress:</span
						><span class="content">{{ rechangeInfo.config[0].bankAddress }}</span>
					</el-col>
				</el-row>
				<el-row style="margin-bottom: 12px">
					<el-col :span="12">
						<span class="label">bankCountry:</span
						><span class="content">{{ rechangeInfo.config[0].bankCountry }}</span>
					</el-col>
					<el-col :span="12">
						<span class="label">accountNumber:</span
						><span class="content">{{ rechangeInfo.config[0].accountNumber }}</span>
					</el-col>
				</el-row>
				<el-row style="margin-bottom: 12px">
					<el-col :span="12">
						<span class="label">routingCodeEntries:</span
						><span class="content">{{
							rechangeInfo.config[0].routingCodeEntries
						}}</span>
					</el-col>
					<el-col :span="12">
						<span class="label">bankAccountHolderName:</span
						><span class="content">{{
							rechangeInfo.config[0].bankAccountHolderName
						}}</span>
					</el-col>
				</el-row>
			</div>
			<div v-else>
				<pre class="json-content">{{ rechangeInfo.config[0] }}</pre>
			</div>
		</cl-dialog>
	</cl-crud>
</template>

<script lang="ts" name="payment-wallet" setup>
import Withdraw from './components/withdraw.vue';
import Transfer from './components/transfer.vue';
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import ClCrud from '/~/crud/src/components/crud';
const { service } = useCool();
const WithdrawVisible = ref(false);
const TransferVisible = ref(false);
const channel = ref('');
const currency = ref('');
const fromWalletId = ref('');
const rechangeVisible = ref(false);
const currencyList = ref([] as any);
const rechangeInfo: any = ref({});
service.payment.currency.list().then(res => {
	currencyList.value = res.map(v => ({ label: v.name, value: v.code, id: v.id, type: v.type }));
});
const channelList = ref([] as any);
const getCustomerList = ref([] as any);
// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: '渠道',
			prop: 'channel',
			component: { name: 'el-select', props: { clearable: true } },
			required: true
		},
		{
			label: '货币类型',
			prop: 'currency',
			component: { name: 'slot-currency', props: { clearable: true } },
			required: true
		}
	],
	async onOpen() {
		channelList.value = await service.payment.channel.list();
		Upsert.value?.setOptions(
			'channel',
			channelList.value.map(v => ({ label: v.name, value: v.code }))
		);
		// console.log(11300000888, channelList.value);
		// getCustomerList.value = await service.payment.customer.list({ merchantId: 24 });
		// console.log(1130000, getCustomerList.value);

		// getCustomerList = await service.payment.customer.list({});
	}
});

// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ label: '渠道', prop: 'channel', minWidth: 140 },
		{ label: '货币类型', prop: 'currency', minWidth: 140 },
		{ label: '余额', prop: 'balance', minWidth: 140 },
		{ label: '状态', prop: 'status', minWidth: 140 },

		{ type: 'op', buttons: ['slot-btn', 'edit', 'delete'], width: 300 }
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.payment.wallet
	},
	app => {
		app.refresh();
	}
);
const showWithdraw = (row: any) => {
	channel.value = row.channel;
	currency.value = row.currency;
	WithdrawVisible.value = true;
};
const showTransfer = (row: any) => {
	fromWalletId.value = row.id;
	channel.value = row.channel;
	TransferVisible.value = true;
};
const rechange = async row => {
	rechangeInfo.value = null;
	if (!/^(TRC20|ERC20)$/.test(row.currency)) {
		rechangeInfo.value = row;
	} else {
		try {
			const res = await service.payment.wallet.order({
				channel: row.channel,
				currency: row.currency
			});
			rechangeInfo.value = {
				config: {
					充值链接: res.payment_url,
					充值地址: res.address
				}
			};
		} catch (e: any) {
			console.log(e);
			ElMessage.error(e.message);
		}
	}
	rechangeVisible.value = true;
};
// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>
<style lang="scss" scoped>
.json-content {
	white-space: pre-wrap;
	/* 保留空格和换行 */
	word-wrap: break-word;
	/* 允许长单词或 URL 地址换行到下一行 */
	font-family: monospace;
	/* 使用等宽字体 */
	background: #f5f5f5;
	/* 浅灰色背景 */
	color: #333;
	padding: 15px;
	/* 内边距 */
	border-radius: 4px;
	/* 圆角 */
	max-height: 500px;
	/* 最大高度 */
	overflow: auto;
	/* 内容过多时显示滚动条 */
}

.currency-box {
	.el-col-12 {
		display: flex;
		align-items: center;
		.label {
			flex: 0 0 200px;
			font-weight: bold;
			display: block;
		}
		.content {
			display: block;
		}
	}
}
</style>