630 lines
16 KiB
Vue
630 lines
16 KiB
Vue
<script setup lang="ts">
|
||
import { useI18n } from 'vue-i18n';
|
||
import { ref, onMounted, computed } from 'vue';
|
||
import { fetchPackageList, submitOrder } from '@/service/api/auth';
|
||
import { message } from 'ant-design-vue';
|
||
import OrderConfirmModal from '@/components/order-confirm/orderConfirmModal.vue';
|
||
import { aliPayPcPay,aliPayWapPay, wxPayScanCode, payBalance } from '@/service/api/payment';
|
||
import { useRouterPush } from '@/hooks/common/router';
|
||
import { useAppStore } from '@/store/modules/app';
|
||
import { useAuthStore} from '@/store/modules/auth';
|
||
|
||
defineOptions({
|
||
name: 'PackageSubscription'
|
||
});
|
||
const { t } = useI18n();
|
||
const authStore = useAuthStore();
|
||
interface RateLimit {
|
||
upLimitEnable: boolean;
|
||
downLimitEnable: boolean;
|
||
upLimit: number;
|
||
downLimit: number;
|
||
}
|
||
|
||
interface PackageOption {
|
||
id: string;
|
||
packageName: string;
|
||
price: number;
|
||
clientNum: number;
|
||
clientNumEnable: boolean;
|
||
traffic: number;
|
||
trafficEnable: boolean;
|
||
trafficDisplay: string;
|
||
durationEnable: boolean;
|
||
isRecommended?: boolean;
|
||
promotion?: string;
|
||
periodNum: number;
|
||
periodType: number;
|
||
validityPeriod: string;
|
||
rateLimitEnable: boolean;
|
||
rateLimits: RateLimit;
|
||
}
|
||
|
||
// 添加有效期类型枚举
|
||
const PERIOD_TYPE = {
|
||
HOUR: 0,
|
||
DAY: 1,
|
||
MONTH: 2,
|
||
YEAR: 3
|
||
} as const;
|
||
|
||
// 添加有效期单位映射
|
||
const PERIOD_UNIT = {
|
||
0: t('page.setmeal.hour'),
|
||
1: t('page.setmeal.day'),
|
||
2: t('page.setmeal.month'),
|
||
3: t('page.setmeal.year')
|
||
} as const;
|
||
|
||
// 格式化有效期显示
|
||
const formatValidityPeriod = (num: number, type: number): string => {
|
||
const unit = PERIOD_UNIT[type as keyof typeof PERIOD_UNIT] || t('page.setmeal.unknow');
|
||
return `${num}${unit}`;
|
||
};
|
||
|
||
// 流量单位转换函数
|
||
const formatTraffic = (bytes: number): string => {
|
||
// 处理 0 值、undefined 或 null 的情况
|
||
if (!bytes || bytes === 0) {
|
||
return '0B';
|
||
}
|
||
|
||
const B_TO_KB = 1024;
|
||
const B_TO_MB = 1024 * 1024;
|
||
const B_TO_GB = 1024 * 1024 * 1024;
|
||
const B_TO_TB = 1024 * 1024 * 1024 * 1024;
|
||
|
||
if (bytes >= B_TO_TB) {
|
||
// B -> TB
|
||
return `${(bytes / B_TO_TB).toFixed(2)}TB`;
|
||
}
|
||
if (bytes >= B_TO_GB) {
|
||
// B -> GB
|
||
return `${(bytes / B_TO_GB).toFixed(2)}GB`;
|
||
}
|
||
if (bytes >= B_TO_MB) {
|
||
// B -> MB
|
||
return `${(bytes / B_TO_MB).toFixed(2)}MB`;
|
||
}
|
||
if (bytes >= B_TO_KB) {
|
||
// B -> KB
|
||
return `${(bytes / B_TO_KB).toFixed(2)}KB`;
|
||
}
|
||
// 小于1KB的情况，保持B单位
|
||
return `${bytes.toFixed(2)}B`;
|
||
};
|
||
|
||
// 添加速率格式化函数
|
||
const formatSpeed = (speed: number): string => {
|
||
if (speed >= 1048576) {
|
||
return `${(speed / 1048576).toFixed(1)}Gbps`;
|
||
} else if (speed >= 1024) {
|
||
return `${(speed / 1024).toFixed(1)}Mbps`;
|
||
}
|
||
return `${speed}Kbps`;
|
||
};
|
||
|
||
const packageOptions = ref<PackageOption[]>([]);
|
||
const selectedPackage = ref<PackageOption>({
|
||
id: '1',
|
||
packageName: '',
|
||
price: 0,
|
||
clientNum: 0,
|
||
clientNumEnable: false,
|
||
traffic: 0,
|
||
trafficEnable: false,
|
||
trafficDisplay: '0GB',
|
||
durationEnable: false,
|
||
isRecommended: false,
|
||
promotion: '',
|
||
periodNum: 0,
|
||
periodType: PERIOD_TYPE.MONTH,
|
||
validityPeriod: '0月',
|
||
rateLimitEnable: false,
|
||
rateLimits: {
|
||
upLimitEnable: false,
|
||
downLimitEnable: false,
|
||
upLimit: 0,
|
||
downLimit: 0
|
||
}
|
||
});
|
||
|
||
// 添加路由跳转方法
|
||
const { routerPushByKey } = useRouterPush();
|
||
|
||
// 添加订单确认弹窗相关状态
|
||
const showOrderModal = ref(false);
|
||
const currentOrderInfo = ref<{
|
||
orderId: string;
|
||
orderType: number;
|
||
orderAmount: number;
|
||
}>({
|
||
orderId: '',
|
||
orderType: 0,
|
||
orderAmount: 0
|
||
});
|
||
|
||
// 添加 appStore 实例
|
||
const appStore = useAppStore();
|
||
|
||
// 添加加载状态和数据状态的响应式引用
|
||
const isLoading = ref(false);
|
||
const hasPackages = computed(() => packageOptions.value.length > 0);
|
||
|
||
// 添加用户余额状态
|
||
const userBalance = ref(0);
|
||
|
||
// 添加检查余额是否足够的计算属性
|
||
const canUseBalancePay = computed(() => {
|
||
// 添加日志来调试
|
||
console.log('Current balance:', userBalance.value);
|
||
console.log('Package price:', selectedPackage.value?.price);
|
||
console.log('Can use balance pay:', userBalance.value >= (selectedPackage.value?.price || 0));
|
||
return userBalance.value >= (selectedPackage.value?.price || 0);
|
||
});
|
||
|
||
// 添加 loading 状态
|
||
const paymentLoading = ref(false);
|
||
|
||
const fetchPackages = async () => {
|
||
isLoading.value = true;
|
||
try {
|
||
const response = await fetchPackageList();
|
||
if (response.data && Array.isArray(response.data)) {
|
||
packageOptions.value = response.data.map(pkg => ({
|
||
id: pkg.id,
|
||
packageName: pkg.packageName,
|
||
price: parseFloat(pkg.price),
|
||
clientNum: Number(pkg.clientNum),
|
||
clientNumEnable: pkg.clientNumEnable,
|
||
traffic: Number(pkg.traffic),
|
||
trafficEnable: pkg.trafficEnable,
|
||
trafficDisplay: pkg.trafficEnable ? formatTraffic(Number(pkg.traffic)) : t('page.setmeal.unlimit'),
|
||
durationEnable: Boolean(pkg.periodNum && pkg.periodType !== undefined),
|
||
isRecommended: pkg.isRecommended || false,
|
||
promotion: pkg.promotion || '',
|
||
periodNum: Number(pkg.periodNum),
|
||
periodType: Number(pkg.periodType),
|
||
validityPeriod: pkg.periodNum && pkg.periodType !== undefined
|
||
? formatValidityPeriod(Number(pkg.periodNum), Number(pkg.periodType))
|
||
: t('page.setmeal.unlimit'),
|
||
rateLimitEnable: pkg.rateLimitEnable,
|
||
rateLimits: {
|
||
upLimitEnable: pkg.rateLimits?.upLimitEnable || false,
|
||
downLimitEnable: pkg.rateLimits?.downLimitEnable || false,
|
||
upLimit: Number(pkg.rateLimits?.upLimit) || 0,
|
||
downLimit: Number(pkg.rateLimits?.downLimit) || 0
|
||
}
|
||
}));
|
||
|
||
if (packageOptions.value.length > 0) {
|
||
selectedPackage.value = packageOptions.value[0];
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch packages:', error);
|
||
message.error(t('page.setmeal.fetchFailed'));
|
||
} finally {
|
||
isLoading.value = false;
|
||
}
|
||
};
|
||
|
||
const selectPackage = (option: PackageOption) => {
|
||
selectedPackage.value = option;
|
||
console.log('Selected package price:', option.price);
|
||
console.log('Can use balance pay after selection:', canUseBalancePay.value);
|
||
};
|
||
|
||
// 修改套餐办理方法，添加日志跟踪订单ID
|
||
const handleSubmitOrder = async () => {
|
||
try {
|
||
const orderRes = await submitOrder({
|
||
type: 0,
|
||
packageId: selectedPackage.value.id
|
||
});
|
||
|
||
// 添加日志
|
||
console.log('Created order ID:', orderRes.data);
|
||
|
||
// 重新获取最新余额
|
||
await fetchUserBalance();
|
||
|
||
// 更新订单信息并显示弹窗
|
||
currentOrderInfo.value = {
|
||
orderId: String(orderRes.data), // 确保转换为字符串
|
||
orderType: 0,
|
||
orderAmount: selectedPackage.value.price
|
||
};
|
||
|
||
// 添加日志
|
||
console.log('Current order info after creation:', currentOrderInfo.value);
|
||
|
||
showOrderModal.value = true;
|
||
} catch (error) {
|
||
message.error(t('page.order.createOrderFailed'));
|
||
console.error('Failed to create order:', error);
|
||
}
|
||
};
|
||
|
||
// 修改支付处理方法
|
||
const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay' | 'balance') => {
|
||
try {
|
||
console.log('Payment confirmation for order:', currentOrderInfo.value);
|
||
|
||
if (!currentOrderInfo.value.orderId) {
|
||
throw new Error('Order ID is missing');
|
||
}
|
||
|
||
if (paymentMethod === 'balance') {
|
||
// 设置 loading 状态
|
||
paymentLoading.value = true;
|
||
|
||
console.log('Attempting balance payment for order:', currentOrderInfo.value.orderId);
|
||
|
||
const result = await payBalance({
|
||
orderId: currentOrderInfo.value.orderId
|
||
});
|
||
|
||
console.log('Balance payment response:', result);
|
||
|
||
if (result.error) {
|
||
throw new Error(result.error.message || 'Payment failed');
|
||
}
|
||
|
||
message.success(t('page.order.paymentSuccess'));
|
||
|
||
// 延迟一下再关闭弹窗和刷新页面
|
||
setTimeout(() => {
|
||
showOrderModal.value = false;
|
||
window.location.reload();
|
||
}, 1000);
|
||
|
||
return;
|
||
} else if (paymentMethod === 'alipay') {
|
||
// 区分手机端和pc端支付
|
||
let res;
|
||
if (appStore.isMobile) {
|
||
res = await aliPayWapPay({ orderId: currentOrderInfo.value.orderId });
|
||
} else {
|
||
res = await aliPayPcPay({ orderId: currentOrderInfo.value.orderId });
|
||
}
|
||
|
||
const div = document.createElement('div');
|
||
div.innerHTML = res;
|
||
document.body.appendChild(div);
|
||
document.forms['punchout_form'].submit();
|
||
div.remove();
|
||
} else {
|
||
const res = await wxPayScanCode({ orderId: currentOrderInfo.value.orderId });
|
||
routerPushByKey('billing_wxpay', {
|
||
query: {
|
||
url: res.data,
|
||
orderId: currentOrderInfo.value.orderId
|
||
}
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('Payment failed with error:', error);
|
||
message.error(error instanceof Error ? error.message : t('page.order.paymentFailed'));
|
||
} finally {
|
||
// 清除 loading 状态
|
||
paymentLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 修改获取用户余额的方法，添加日志
|
||
const fetchUserBalance = async () => {
|
||
try {
|
||
const response = await authStore.getDashboardData();
|
||
if (response && !response.error) {
|
||
userBalance.value = Number(response.balance) || 0;
|
||
console.log('Fetched balance:', userBalance.value);
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch user balance:', error);
|
||
}
|
||
};
|
||
|
||
onMounted(async () => {
|
||
await fetchPackages();
|
||
await fetchUserBalance();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="package-container">
|
||
<!-- 顶部价格展示 -->
|
||
<div class="price-header">
|
||
<div class="price">
|
||
<span class="currency">¥</span>
|
||
<span class="amount">{{ selectedPackage.price }}</span>
|
||
</div>
|
||
<div class="subtitle">{{ selectedPackage.packageName }}</div>
|
||
</div>
|
||
|
||
<!-- 套餐选择 -->
|
||
<div class="package-options">
|
||
<h3 class="section-title">{{ t('page.setmeal.changablelevel') }}</h3>
|
||
<div class="options-grid">
|
||
<div
|
||
v-for="option in packageOptions"
|
||
:key="option.id"
|
||
:class="[
|
||
'option-card',
|
||
{
|
||
recommended: option.isRecommended,
|
||
selected: selectedPackage.id === option.id
|
||
}
|
||
]"
|
||
@click="selectPackage(option)"
|
||
>
|
||
<div v-if="option.isRecommended" class="recommended-tag">
|
||
{{ t('page.setmeal.highlyrecommended') }}
|
||
</div>
|
||
<div class="package-name">{{ option.packageName }}</div>
|
||
<div class="price">¥{{ option.price }}</div>
|
||
<div class="traffic">{{ option.trafficEnable ? option.trafficDisplay : t('page.setmeal.unlimit') }}</div>
|
||
<div class="device-count">
|
||
{{ option.clientNumEnable ? `${option.clientNum} ${t('page.setmeal.device')}` : t('page.setmeal.unlimit') }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 套餐详情 -->
|
||
<a-card>
|
||
<h3 class="section-title">{{ t('page.setmeal.mealdetail') }}</h3>
|
||
<div class="details-list">
|
||
<div class="detail-item">
|
||
<div class="label">{{ t('page.setmeal.packagename') }}</div>
|
||
<div class="value">{{ selectedPackage.packageName }}</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<div class="label">{{ t('page.setmeal.GeneralPurposeTraffic') }}</div>
|
||
<div class="value">
|
||
{{ selectedPackage.trafficEnable ? selectedPackage.trafficDisplay : t('page.setmeal.unlimit') }}
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<div class="label">{{ t('page.setmeal.client') }}</div>
|
||
<div class="value">
|
||
{{ selectedPackage.clientNumEnable ? `${t('page.setmeal.upto')} ${selectedPackage.clientNum} ${t('page.setmeal.canbe')}` : t('page.setmeal.unlimit') }}
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<div class="label">{{ t('page.setmeal.Expirationdate') }}</div>
|
||
<div class="value">
|
||
{{ selectedPackage.durationEnable ? selectedPackage.validityPeriod+t('page.setmeal.useful') : t('page.setmeal.unlimit') }}
|
||
</div>
|
||
</div>
|
||
<div class="detail-item">
|
||
<div class="label">{{ t('page.setmeal.rate') }}</div>
|
||
<div class="value">
|
||
<template v-if="!selectedPackage.rateLimitEnable">
|
||
{{ t('page.setmeal.unlimit') }}
|
||
</template>
|
||
<template v-else>
|
||
<div>
|
||
{{ t('page.setmeal.uplimit') }}：{{ selectedPackage.rateLimits.upLimitEnable ? formatSpeed(selectedPackage.rateLimits.upLimit) : '-' }}
|
||
</div>
|
||
<div>
|
||
{{ t('page.setmeal.downlimit') }}：{{ selectedPackage.rateLimits.downLimitEnable ? formatSpeed(selectedPackage.rateLimits.downLimit) : '-' }}
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-bar">
|
||
<button
|
||
class="btn-primary"
|
||
@click="handleSubmitOrder"
|
||
:disabled="isLoading || !hasPackages"
|
||
>
|
||
{{ isLoading ? t('page.common.loading') :
|
||
!hasPackages ? t('page.setmeal.noPackages') :
|
||
t('page.setmeal.Applynow')
|
||
}}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
|
||
<!-- 订单确认弹窗 -->
|
||
<OrderConfirmModal
|
||
v-model:visible="showOrderModal"
|
||
:order-info="currentOrderInfo"
|
||
:enable-balance-pay="canUseBalancePay"
|
||
:user-balance="userBalance"
|
||
:loading="paymentLoading"
|
||
@confirm="handlePaymentConfirm"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.package-container {
|
||
min-height: 100vh;
|
||
padding: 16px 16px 80px;
|
||
}
|
||
|
||
.price-header {
|
||
border-color: #ff4d4f;
|
||
background: rgba(218, 7, 7, 0.1);
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.price {
|
||
color: #ff4d4f;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.currency {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.period {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 14px;
|
||
color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
margin-bottom: 16px;
|
||
color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
|
||
position: relative;
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.section-title::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 4px;
|
||
height: 16px;
|
||
background: #1890ff;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.options-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.option-card {
|
||
background: var(--primary-color, var(--ant-primary-color));
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
position: relative;
|
||
border: 1px solid #e8e8e8;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.option-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.option-card.selected {
|
||
border-color: #ff4d4f;
|
||
background: rgba(218, 7, 7, 0.1);
|
||
|
||
}
|
||
|
||
.recommended-tag {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background: #ff4d4f;
|
||
color: white;
|
||
font-size: 12px;
|
||
padding: 2px 8px;
|
||
border-radius: 0 0 8px 0;
|
||
}
|
||
|
||
.package-details {
|
||
background: white;
|
||
padding: 16px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.detail-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.label {
|
||
width: 80px;
|
||
color: var(--primary-color, var(--ant-primary-color));
|
||
}
|
||
|
||
.value {
|
||
flex: 1;
|
||
color: var(--primary-color, var(--ant-primary-color));
|
||
}
|
||
|
||
.value.highlight {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.bottom-bar {
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 60px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #ff4d4f;
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 32px;
|
||
border-radius: 24px;
|
||
font-size: 16px;
|
||
width: 90%;
|
||
max-width: 400px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
background: #ccc;
|
||
cursor: not-allowed;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.package-name {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
margin-bottom: 8px;
|
||
color: var(--primary-color, var(--ant-primary-color));
|
||
}
|
||
|
||
.traffic {
|
||
font-size: 14px;
|
||
color: var(--primary-color, var(--ant-primary-color));
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.device-count {
|
||
font-size: 14px;
|
||
color: var(--primary-color, var(--ant-primary-color));
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.speed-limit {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.value > div {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.value > div:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
</style>
|