156 lines
3.1 KiB
Vue
156 lines
3.1 KiB
Vue
<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>
|