商城c端前端

2026-10-12 23:40:02 +08:00
parent dd729cb679
commit 96d1de4a95
105 changed files with 6762 additions and 6 deletions
@@ -0,0 +1,117 @@
+<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>