2
0

fix:支付方式对接

This commit is contained in:
zhongzm
2025-01-22 10:27:05 +08:00
parent 96d19e323f
commit 70f281974b
7 changed files with 70 additions and 329 deletions

View File

@@ -3,22 +3,12 @@ import { useI18n } from 'vue-i18n';
import { ref, onMounted } 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, wxPayScanCode } from '@/service/api/payment';
import { useRouterPush } from '@/hooks/common/router';
defineOptions({
name: 'PackageSubscription'
});
const { t } = useI18n();
interface RateLimit {
upLimitEnable: boolean;
downLimitEnable: boolean;
upLimit: number;
downLimit: number;
}
interface PackageOption {
id: string;
packageName: string;
@@ -34,8 +24,6 @@ interface PackageOption {
periodNum: number;
periodType: number;
validityPeriod: string;
rateLimitEnable: boolean;
rateLimits: RateLimit;
}
// 添加有效期类型枚举
@@ -98,16 +86,6 @@ const formatTrafficValidity = (num: number, type: number): string => {
return `${num}${unit}`;
};
// 添加速率格式化函数
const formatSpeed = (speed: number): string => {
if (speed >= 1000000) {
return `${(speed / 1000000).toFixed(1)}Gbps`;
} else if (speed >= 1000) {
return `${(speed / 1000).toFixed(1)}Mbps`;
}
return `${speed}Kbps`;
};
const packageOptions = ref<PackageOption[]>([]);
const selectedPackage = ref<PackageOption>({
id: '1',
@@ -123,25 +101,7 @@ const selectedPackage = ref<PackageOption>({
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: '',
orderType: 0, // 0 表示购买套餐
orderAmount: 0
validityPeriod: '0月'
});
const fetchPackages = async () => {
@@ -156,22 +116,13 @@ const fetchPackages = async () => {
clientNumEnable: pkg.clientNumEnable,
traffic: Number(pkg.traffic),
trafficEnable: pkg.trafficEnable,
trafficDisplay: pkg.trafficEnable ? formatTraffic(Number(pkg.traffic)) : '无限制',
durationEnable: Boolean(pkg.periodNum && pkg.periodType !== undefined),
trafficDisplay: pkg.trafficEnable ? `${formatTraffic(Number(pkg.traffic))}${formatTrafficValidity(Number(pkg.periodNum), Number(pkg.periodType))}内有效` : '无限制',
durationEnable: pkg.durationEnable,
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))+'内有效'
: '无限制',
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
}
validityPeriod: pkg.durationEnable ? formatValidityPeriod(Number(pkg.periodNum), Number(pkg.periodType)) : '无限制'
}));
if (packageOptions.value.length > 0) {
@@ -187,7 +138,7 @@ const selectPackage = (option: PackageOption) => {
selectedPackage.value = option;
};
// 修改套餐办理方法
// 套餐办理方法
const handleSubmitOrder = async () => {
try {
const orderRes = await submitOrder({
@@ -212,7 +163,13 @@ const handleSubmitOrder = async () => {
const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay') => {
try {
if (paymentMethod === 'alipay') {
const res = await aliPayPcPay({ orderId: currentOrderInfo.value.orderId });
// 区分手机端和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);
@@ -306,22 +263,6 @@ onMounted(async () => {
{{ selectedPackage.durationEnable ? selectedPackage.validityPeriod : '无限制' }}
</div>
</div>
<div class="detail-item">
<div class="label">速率限制</div>
<div class="value">
<template v-if="!selectedPackage.rateLimitEnable">
不限速
</template>
<template v-else>
<div>
上行{{ selectedPackage.rateLimits.upLimitEnable ? formatSpeed(selectedPackage.rateLimits.upLimit) : '-' }}
</div>
<div>
下行{{ selectedPackage.rateLimits.downLimitEnable ? formatSpeed(selectedPackage.rateLimits.downLimit) : '-' }}
</div>
</template>
</div>
</div>
<div class="bottom-bar">
<button
class="btn-primary"
@@ -333,13 +274,6 @@ onMounted(async () => {
</div>
</div>
</div>
<!-- 订单确认弹窗 -->
<OrderConfirmModal
v-model:visible="showOrderModal"
:order-info="currentOrderInfo"
@confirm="handlePaymentConfirm"
/>
</div>
</template>
@@ -506,18 +440,4 @@ onMounted(async () => {
color: #666;
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>