fix:支付方式对接
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user