统一摸大红PC支付方式选择为带图标弹窗

抽取PayWaySelectDialog，与租号端一致展示微信/支付宝图标。
2026-07-16 21:01:46 +08:00
parent 183351a297
commit 8b637cf499
4 changed files with 155 additions and 145 deletions
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { PaymentPayWay } from '@/features/orders/api/orders'
+
+defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  choose: [payWay: PaymentPayWay]
+  closed: []
+}>()
+
+function choose(payWay: PaymentPayWay) {
+  emit('choose', payWay)
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="选择支付方式"
+    width="420px"
+    append-to-body
+    :z-index="4000"
+    class="pay-way-dialog"
+    @update:model-value="emit('update:modelValue', $event)"
+    @closed="emit('closed')"
+  >
+    <p class="pay-way-tip">选择渠道后将生成对应的支付二维码</p>
+    <div class="pay-way-options">
+      <button type="button" class="pay-way-option wechat" @click="choose('WXZF')">
+        <span class="pay-way-icon">
+          <van-icon name="wechat-pay" :size="30" />
+        </span>
+        <span class="pay-way-text">
+          <strong>微信支付</strong>
+          <small>使用微信扫码完成支付</small>
+        </span>
+      </button>
+      <button type="button" class="pay-way-option alipay" @click="choose('ZFBZF')">
+        <span class="pay-way-icon">
+          <van-icon name="alipay" :size="30" />
+        </span>
+        <span class="pay-way-text">
+          <strong>支付宝支付</strong>
+          <small>使用支付宝扫码完成支付</small>
+        </span>
+      </button>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.pay-way-tip {
+  margin: 0 0 16px;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.pay-way-options {
+  display: grid;
+  gap: 12px;
+}
+
+.pay-way-option {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 18px;
+  background: #fff;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.18s ease;
+}
+
+.pay-way-option:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+}
+
+.pay-way-icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.pay-way-option.wechat:hover {
+  border-color: #07c160;
+}
+
+.pay-way-option.wechat .pay-way-icon {
+  background: #07c160;
+}
+
+.pay-way-option.alipay:hover {
+  border-color: #1677ff;
+}
+
+.pay-way-option.alipay .pay-way-icon {
+  background: #1677ff;
+}
+
+.pay-way-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.pay-way-text strong {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.pay-way-text small {
+  font-size: 13px;
+  color: #94a3b8;
+}
+</style>
+
+<style>
+.pay-way-dialog {
+  border-radius: 16px;
+}
+
+.pay-way-dialog .el-dialog__header {
+  padding: 20px 24px 0;
+}
+
+.pay-way-dialog .el-dialog__body {
+  padding: 16px 24px 24px;
+}
+</style>