minitest2.0 0.0.6 → 0.0.8

package/src/views/foreign/position/create/index.vue

@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import { useAppStore } from '@/stores/app'
+import {
+  defaultForeignBusinessOption,
+  foreignBusinessOptions,
+  foreignCurrencyOptions,
+  resolveForeignCurrency,
+} from '@/utils/foreign-forecast'
+import { showAppToast } from '@/utils/toast'
+
+defineOptions({ name: 'ForeignPositionCreatePage' })
+
+type PendingForecast = {
+  institution: string
+  date: string
+  currency: string
+  business: string
+  counterparty: string
+  amount: number
+}
+
+type SelectorType = 'currency' | 'business'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+const pendingForecastKey = 'foreign-position:pending-create'
+
+const form = reactive({
+  tranDate: getInitialTranDate(),
+  institution: '北京银行总行核算中心',
+  currency: 'USD',
+  business: '1',
+  counterparty: '',
+  amount: '',
+})
+
+const submitting = ref(false)
+const selectorType = ref<SelectorType>('currency')
+const showSelector = ref(false)
+
+const selectedCurrency = computed(() => resolveForeignCurrency(form.currency))
+const selectedBusiness = computed(
+  () =>
+    foreignBusinessOptions.find((item) => item.value === form.business) ||
+    defaultForeignBusinessOption,
+)
+const selectorTitle = computed(() =>
+  selectorType.value === 'currency' ? '选择币种' : '选择业务类型',
+)
+const selectorOptions = computed(() =>
+  selectorType.value === 'currency'
+    ? foreignCurrencyOptions.filter((item) => item.value)
+    : foreignBusinessOptions.filter((item) => item.value),
+)
+
+function getInitialTranDate() {
+  const tranDate = route.query.tranDate
+
+  if (typeof tranDate === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(tranDate)) {
+    return tranDate
+  }
+
+  return appStore.systemWorkDate
+}
+
+function parseAmount(value: string) {
+  if (!value.trim()) return undefined
+
+  const amount = Number(value)
+  return Number.isFinite(amount) ? amount : undefined
+}
+
+function openSelector(type: SelectorType) {
+  selectorType.value = type
+  showSelector.value = true
+}
+
+function chooseSelectorOption(value: string) {
+  if (selectorType.value === 'currency') {
+    form.currency = value
+  } else {
+    form.business = value
+  }
+
+  showSelector.value = false
+}
+
+function submitCreate() {
+  if (submitting.value) return
+
+  const amount = parseAmount(form.amount)
+
+  if (!form.tranDate) {
+    showAppToast('请选择交易日期')
+    return
+  }
+
+  if (!form.institution.trim() || !form.business || !form.currency) {
+    showAppToast('请补充落地机构、币种和业务类型')
+    return
+  }
+
+  if (form.amount && amount === undefined) {
+    showAppToast('请输入正确的预报金额')
+    return
+  }
+
+  submitting.value = true
+
+  const pendingForecast: PendingForecast = {
+    institution: form.institution.trim(),
+    date: form.tranDate,
+    currency: form.currency,
+    business: selectedBusiness.value.label,
+    counterparty: form.counterparty.trim() || '未填写交易对手',
+    amount: amount ?? 0,
+  }
+
+  sessionStorage.setItem(pendingForecastKey, JSON.stringify(pendingForecast))
+  showAppToast('新增外币预报成功')
+  router.replace({ name: 'ForeignPosition' })
+}
+</script>
+
+<template>
+  <main class="create-page">
+    <section class="form-card" aria-label="新增外币预报表单">
+      <van-cell-group inset class="forecast-form">
+        <van-field
+          v-model="form.tranDate"
+          label="交易日期"
+          type="date"
+          inputmode="numeric"
+          placeholder="请选择交易日期"
+        />
+        <van-field v-model.trim="form.institution" label="落地机构" placeholder="请输入落地机构" />
+        <van-field
+          :model-value="selectedCurrency.label"
+          label="币种"
+          readonly
+          is-link
+          placeholder="请选择币种"
+          @click="openSelector('currency')"
+        />
+        <van-field
+          :model-value="selectedBusiness.label"
+          label="业务类型"
+          readonly
+          is-link
+          placeholder="请选择业务类型"
+          @click="openSelector('business')"
+        />
+        <van-field
+          v-model.trim="form.counterparty"
+          label="交易对手"
+          placeholder="请输入交易对手或清算行"
+        />
+        <van-field
+          v-model.trim="form.amount"
+          label="预报金额"
+          type="number"
+          inputmode="decimal"
+          placeholder="请输入金额"
+        >
+          <template #right-icon>{{ selectedCurrency.unit }}</template>
+        </van-field>
+      </van-cell-group>
+    </section>
+
+    <footer class="action-bar">
+      <button class="cancel-btn" type="button" @click="router.back()">取消</button>
+      <button class="submit-btn" type="button" :disabled="submitting" @click="submitCreate">
+        确认新增
+      </button>
+    </footer>
+
+    <van-popup v-model:show="showSelector" position="bottom" round safe-area-inset-bottom>
+      <section class="selector-panel">
+        <header class="selector-header">
+          <button type="button" @click="showSelector = false">取消</button>
+          <strong>{{ selectorTitle }}</strong>
+          <span></span>
+        </header>
+        <button
+          v-for="item in selectorOptions"
+          :key="item.value"
+          class="selector-option"
+          type="button"
+          @click="chooseSelectorOption(item.value)"
+        >
+          <span>{{ item.label }}</span>
+          <van-icon
+            v-if="
+              (selectorType === 'currency' && item.value === form.currency) ||
+              (selectorType === 'business' && item.value === form.business)
+            "
+            name="success"
+          />
+        </button>
+      </section>
+    </van-popup>
+  </main>
+</template>
+
+<style scoped>
+.create-page {
+  width: 100%;
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 13px 13px calc(env(safe-area-inset-bottom, 0px) + 88px);
+  color: #080d1f;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(255, 242, 243, 0.92), transparent 118px),
+    linear-gradient(180deg, #ffffff 0%, #fbfcfd 54%, #ffffff 100%);
+  box-sizing: border-box;
+}
+
+button {
+  border: 0;
+  padding: 0;
+  font: inherit;
+  background: transparent;
+  appearance: none;
+}
+
+.form-card {
+  margin-top: 15px;
+  border-radius: 13px;
+  padding: 8px 0;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 7px 22px rgba(21, 28, 45, 0.055);
+}
+
+.forecast-form {
+  margin: 0;
+  overflow: hidden;
+  border-radius: 13px;
+  background: transparent;
+}
+
+.forecast-form :deep(.van-cell) {
+  min-height: 56px;
+  align-items: center;
+  padding: 10px 14px;
+  background: transparent;
+}
+
+.forecast-form :deep(.van-field__label) {
+  width: 72px;
+  color: #111728;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.forecast-form :deep(.van-field__control) {
+  color: #202638;
+  font-size: 14px;
+  text-align: right;
+}
+
+.forecast-form :deep(.van-field__right-icon) {
+  min-width: 52px;
+  color: #7f8798;
+  font-size: 12px;
+  text-align: right;
+}
+
+.action-bar {
+  position: fixed;
+  right: max(13px, calc((100vw - 750px) / 2 + 13px));
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
+  left: max(13px, calc((100vw - 750px) / 2 + 13px));
+  z-index: 20;
+  display: grid;
+  grid-template-columns: 96px 1fr;
+  gap: 10px;
+}
+
+.cancel-btn,
+.submit-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 44px;
+  border-radius: 22px;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.cancel-btn {
+  border: 1px solid #e5e8ef;
+  color: #303747;
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.submit-btn {
+  color: #ffffff;
+  background: linear-gradient(135deg, #ff3340 0%, #ff1d34 100%);
+  box-shadow: 0 9px 18px rgba(255, 36, 52, 0.18);
+}
+
+.submit-btn:disabled {
+  opacity: 0.68;
+}
+
+.selector-panel {
+  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
+  background: #ffffff;
+}
+
+.selector-header {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr) 56px;
+  align-items: center;
+  height: 48px;
+  border-bottom: 1px solid #eef0f4;
+  padding: 0 12px;
+}
+
+.selector-header button {
+  color: #6f7788;
+  font-size: 14px;
+  text-align: left;
+}
+
+.selector-header strong {
+  color: #111728;
+  font-size: 15px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.selector-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 48px;
+  border-bottom: 1px solid #f1f3f6;
+  padding: 0 18px;
+  color: #151827;
+  font-size: 14px;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.selector-option .van-icon {
+  color: #f42b3a;
+  font-size: 18px;
+}
+
+@media (max-width: 340px) {
+  .forecast-form :deep(.van-field__label) {
+    width: 64px;
+  }
+
+  .action-bar {
+    grid-template-columns: 82px 1fr;
+  }
+}
+</style>