feat:支付宝、微信支付对接

src/components/order-confirm/orderConfirmModal.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { AlipayOutlined, WechatOutlined } from '@ant-design/icons-vue';
+
+const { t } = useI18n();
+
+interface Props {
+  visible: boolean;
+  orderInfo: {
+    orderId: string;
+    orderType: number; // 0: 购买套餐, 1: 余额充值
+    orderAmount: number;
+  };
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['update:visible', 'confirm', 'cancel']);
+
+const orderTypeMap = {
+  0: t('page.order.packagePurchase'),
+  1: t('page.order.balanceRecharge')
+} as const;
+
+const handleConfirm = (paymentMethod: 'alipay' | 'wxpay') => {
+  emit('confirm', paymentMethod);
+};
+
+const handleCancel = () => {
+  emit('update:visible', false);
+  emit('cancel');
+};
+</script>
+
+<template>
+  <a-modal
+    :visible="visible"
+    :title="t('page.order.confirmOrder')"
+    :footer="null"
+    @cancel="handleCancel"
+    width="460px"
+    :maskClosable="false"
+  >
+    <div class="order-info">
+      <div class="info-item">
+        <span class="label">{{ t('page.order.orderType') }}：</span>
+        <span class="value">{{ orderTypeMap[orderInfo.orderType] }}</span>
+      </div>
+      <div class="info-item">
+        <span class="label">{{ t('page.order.orderAmount') }}：</span>
+        <span class="value highlight">¥{{ orderInfo.orderAmount.toFixed(2) }}</span>
+      </div>
+      <div class="info-item">
+        <span class="label">{{ t('page.order.orderId') }}：</span>
+        <span class="value">{{ orderInfo.orderId }}</span>
+      </div>
+    </div>
+
+    <div class="payment-methods">
+      <h4>{{ t('page.order.selectPayment') }}</h4>
+      <div class="methods-container">
+        <div class="method-item" @click="handleConfirm('alipay')">
+          <AlipayOutlined class="payment-icon alipay-icon" />
+          <span>{{ t('page.order.alipay') }}</span>
+        </div>
+        <div class="method-item" @click="handleConfirm('wxpay')">
+          <WechatOutlined class="payment-icon wxpay-icon" />
+          <span>{{ t('page.order.wxpay') }}</span>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped>
+.order-info {
+  padding: 20px;
+  background: #f8f8f8;
+  border-radius: 8px;
+  margin-bottom: 24px;
+}
+
+.info-item {
+  display: flex;
+  margin-bottom: 16px;
+  line-height: 24px;
+  font-size: 14px;
+}
+
+.info-item:last-child {
+  margin-bottom: 0;
+}
+
+.label {
+  width: 84px;
+  color: #666;
+}
+
+.value {
+  flex: 1;
+  color: #333;
+}
+
+.value.highlight {
+  color: #ff4d4f;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.payment-methods {
+  padding: 0 4px;
+}
+
+.payment-methods h4 {
+  margin-bottom: 16px;
+  color: #333;
+  font-size: 14px;
+  font-weight: normal;
+}
+
+.methods-container {
+  display: flex;
+  gap: 12px;
+}
+
+.method-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.method-item:hover {
+  border-color: #1890ff;
+  background: #f0f5ff;
+}
+
+.payment-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.alipay-icon {
+  color: #1677ff;
+}
+
+.wxpay-icon {
+  color: #07c160;
+}
+</style>