优化了支付选择界面 ui

2026-06-18 23:19:15 +08:00
parent 550db63d4d
commit ae28858318
7 changed files with 543 additions and 93 deletions
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { PaymentPayWay } from '@/features/orders/api/orders'
+
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  choose: [payWay: PaymentPayWay]
+  closed: []
+}>()
+</script>
+
+<template>
+  <van-popup
+    :show="show"
+    position="bottom"
+    round
+    class="mobile-payway-popup"
+    @update:show="emit('update:show', $event)"
+    @closed="emit('closed')"
+  >
+    <header class="payway-header">
+      <span>选择支付方式</span>
+      <button type="button" aria-label="关闭" @click="emit('update:show', false)">
+        <van-icon name="cross" :size="20" />
+      </button>
+    </header>
+    <p class="payway-tip">选择渠道后将生成对应的支付二维码</p>
+    <div class="payway-options">
+      <button type="button" class="payway-option wechat" @click="emit('choose', 'WXZF')">
+        <span class="payway-icon">
+          <van-icon name="wechat-pay" :size="28" />
+        </span>
+        <span class="payway-text">
+          <strong>微信支付</strong>
+          <small>使用微信扫码完成支付</small>
+        </span>
+        <van-icon name="arrow" class="payway-arrow" :size="16" />
+      </button>
+      <button type="button" class="payway-option alipay" @click="emit('choose', 'ZFBZF')">
+        <span class="payway-icon">
+          <van-icon name="alipay" :size="28" />
+        </span>
+        <span class="payway-text">
+          <strong>支付宝支付</strong>
+          <small>使用支付宝扫码完成支付</small>
+        </span>
+        <van-icon name="arrow" class="payway-arrow" :size="16" />
+      </button>
+    </div>
+  </van-popup>
+</template>
+
+<style scoped>
+.mobile-payway-popup {
+  overflow: hidden;
+  padding-bottom: calc(20px + env(safe-area-inset-bottom));
+  background: #fff;
+}
+
+.payway-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 18px 8px;
+}
+
+.payway-header span {
+  color: #111827;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.payway-header button {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: 0;
+  border-radius: 18px;
+  background: #f8fafc;
+  color: #64748b;
+}
+
+.payway-tip {
+  margin: 0 18px 14px;
+  color: #94a3b8;
+  font-size: 13px;
+}
+
+.payway-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 18px;
+}
+
+.payway-option {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  background: #fff;
+  border: 2px solid #eef0f3;
+  border-radius: 14px;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.18s ease;
+}
+
+.payway-option:active {
+  background: #f9fafb;
+}
+
+.payway-option.wechat:active {
+  border-color: #07c160;
+}
+
+.payway-option.alipay:active {
+  border-color: #1677ff;
+}
+
+.payway-icon {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.payway-option.wechat .payway-icon {
+  background: #07c160;
+}
+
+.payway-option.alipay .payway-icon {
+  background: #1677ff;
+}
+
+.payway-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1;
+}
+
+.payway-text strong {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.payway-text small {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.payway-arrow {
+  color: #cbd5e1;
+}
+</style>