118 lines
4.0 KiB
Vue
118 lines
4.0 KiB
Vue
<template>
|
||
<section class="m-page m-page--white m-recharge-page">
|
||
<PageHeader title="储入" />
|
||
<AsyncState :loading="loading" :error="error" @retry="load">
|
||
<div class="m-level-table">
|
||
<div class="m-level-row m-level-head">
|
||
<b>等级名称</b><b>金额</b><b>赠送</b><b>单数</b><b>佣金比例</b>
|
||
</div>
|
||
<div v-for="level in levels" :key="level.id" class="m-level-row">
|
||
<span>{{ level.name }}</span>
|
||
<span>{{ yuan(level.upgrade_amount) }}</span>
|
||
<span>{{ yuan(level.gift_amount) }}</span>
|
||
<span>{{ level.daily_order_limit }}</span>
|
||
<span>{{ rate(level.commission_rate) }}</span>
|
||
</div>
|
||
<div v-if="!levels.length" class="m-level-empty">暂无可用等级</div>
|
||
</div>
|
||
|
||
<form class="m-recharge-form" @submit.prevent="submit">
|
||
<label>
|
||
<span>储入方式：</span>
|
||
<select v-model.number="form.channelId" :disabled="submitting">
|
||
<option :value="0" disabled>请选择储入方式</option>
|
||
<option v-for="channel in channels" :key="channel.id" :value="channel.id">
|
||
{{ channel.name }}
|
||
</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
<span>输入金额：</span>
|
||
<input v-model.trim="form.amount" :disabled="submitting" inputmode="decimal" placeholder="请输入金额" />
|
||
</label>
|
||
<label>
|
||
<span>姓名：</span>
|
||
<input v-model.trim="form.name" :disabled="submitting" maxlength="32" placeholder="请输入姓名" />
|
||
</label>
|
||
<p v-if="formError" class="m-form-error">{{ formError }}</p>
|
||
<button class="m-primary-btn" :disabled="submitting || !channels.length">
|
||
{{ submitting ? '提交中...' : '提交' }}
|
||
</button>
|
||
</form>
|
||
</AsyncState>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, reactive, ref } from 'vue';
|
||
import PageHeader from '../components/PageHeader.vue';
|
||
import AsyncState from '../components/AsyncState.vue';
|
||
import { errorText, request } from '../api';
|
||
|
||
const levels = ref<any[]>([]);
|
||
const channels = ref<any[]>([]);
|
||
const loading = ref(true);
|
||
const error = ref('');
|
||
const formError = ref('');
|
||
const submitting = ref(false);
|
||
const form = reactive({ channelId: 0, amount: '', name: '' });
|
||
|
||
const yuan = (value: number) => `${Number(value || 0) / 100}元`;
|
||
const rate = (value: number) => String(Number(value || 0) / 10000);
|
||
async function load() {
|
||
loading.value = true;
|
||
error.value = '';
|
||
try {
|
||
const [levelRows, channelRows] = await Promise.all([
|
||
request<any[]>({ url: '/v1/member-levels' }),
|
||
request<any[]>({ url: '/v1/recharge/channels' }),
|
||
]);
|
||
levels.value = levelRows;
|
||
channels.value = channelRows;
|
||
if (!form.channelId && channelRows.length) form.channelId = channelRows[0].id;
|
||
} catch (err) {
|
||
error.value = errorText(err);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
async function submit() {
|
||
formError.value = '';
|
||
if (!form.channelId) {
|
||
formError.value = '请选择储入方式';
|
||
return;
|
||
}
|
||
if (!/^\d+(?:\.\d{1,2})?$/.test(form.amount) || Number(form.amount) <= 0) {
|
||
formError.value = '请输入正确的储入金额';
|
||
return;
|
||
}
|
||
if (!form.name) {
|
||
formError.value = '请输入姓名';
|
||
return;
|
||
}
|
||
const amount = Math.round(Number(form.amount) * 100);
|
||
submitting.value = true;
|
||
try {
|
||
const order = await request<any>({
|
||
url: '/v1/recharge-orders',
|
||
method: 'POST',
|
||
data: {
|
||
channel_id: form.channelId,
|
||
amount,
|
||
currency: 'CNY',
|
||
voucher_attachment_ids: [],
|
||
remark: `姓名：${form.name}`,
|
||
},
|
||
});
|
||
window.$message?.success(`储入申请 ${order.recharge_no} 已提交审核`);
|
||
form.amount = '';
|
||
form.name = '';
|
||
} catch (err) {
|
||
formError.value = errorText(err);
|
||
} finally {
|
||
submitting.value = false;
|
||
}
|
||
}
|
||
onMounted(load);
|
||
</script>
|