From 09922f048ef682a99c2b468f9e7733e1e1f3f128 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Wed, 22 Jan 2025 12:03:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=94=AF=E4=BB=98=E5=AE=9D=E3=80=81?= =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E6=94=AF=E4=BB=98=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../order-confirm/orderConfirmModal.vue | 155 ++++++++++++++++++ src/locales/langs/en-us.ts | 11 ++ src/locales/langs/zh-cn.ts | 14 ++ src/typings/auto-imports.d.ts | 3 + src/typings/components.d.ts | 1 + src/views/recharge/balancerecharge/index.vue | 123 +++++++------- src/views/recharge/package/index.vue | 109 ++++++++++-- 7 files changed, 341 insertions(+), 75 deletions(-) create mode 100644 src/components/order-confirm/orderConfirmModal.vue diff --git a/src/components/order-confirm/orderConfirmModal.vue b/src/components/order-confirm/orderConfirmModal.vue new file mode 100644 index 0000000..b61073b --- /dev/null +++ b/src/components/order-confirm/orderConfirmModal.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts index 11c2132..13cccad 100644 --- a/src/locales/langs/en-us.ts +++ b/src/locales/langs/en-us.ts @@ -661,6 +661,17 @@ const local: any = { balanceRecharge:'Banlance Recharge', packageSubscription:'Package Subscription', }, + order:{ + confirmOrder:'Order Confirmation', + orderType:'Order type', + balanceRecharge:'Balance recharge', + packagePurchase:'Package processing', + orderAmount:'Amount', + orderId:'ID', + selectPayment:'Payment', + alipay:'Alipay', + wxpay:'WeChat Pay' + } }, form: { required: 'Cannot be empty', diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts index ce4fcb3..e96ecdf 100644 --- a/src/locales/langs/zh-cn.ts +++ b/src/locales/langs/zh-cn.ts @@ -663,6 +663,20 @@ const local:any = { balanceRecharge:'余额充值', packageSubscription:'套餐办理', }, + order:{ + confirmOrder:'订单确认', + orderType:'订单类型', + balanceRecharge:'余额充值', + packagePurchase:'套餐办理', + orderAmount:'订单金额', + orderId:'订单ID', + selectPayment:'支付方式', + alipay:'支付宝支付', + wxpay:'微信支付' + }, + package:{ + + } }, form: { required: '不能为空', diff --git a/src/typings/auto-imports.d.ts b/src/typings/auto-imports.d.ts index 8bc83f7..896f459 100644 --- a/src/typings/auto-imports.d.ts +++ b/src/typings/auto-imports.d.ts @@ -14,6 +14,7 @@ declare global { const afterAll: typeof import('vitest')['afterAll'] const afterEach: typeof import('vitest')['afterEach'] const aliPayPcPay: typeof import('../service/api/payment')['aliPayPcPay'] + const aliPayWapPay: typeof import('../service/api/payment')['aliPayWapPay'] const assert: typeof import('vitest')['assert'] const assign: typeof import('lodash-es')['assign'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] @@ -74,6 +75,7 @@ declare global { const doGetDictList: typeof import('../service/api/dict')['doGetDictList'] const doGetMenuDetail: typeof import('../service/api/menu')['doGetMenuDetail'] const doGetMenuList: typeof import('../service/api/menu')['doGetMenuList'] + const doGetOrderInfo: typeof import('../service/api/order')['doGetOrderInfo'] const doGetPostDetail: typeof import('../service/api/post')['doGetPostDetail'] const doGetPostList: typeof import('../service/api/post')['doGetPostList'] const doGetRoleList: typeof import('../service/api/role')['doGetRoleList'] @@ -433,6 +435,7 @@ declare global { const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable'] const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter'] const whenever: typeof import('@vueuse/core')['whenever'] + const wxPayScanCode: typeof import('../service/api/payment')['wxPayScanCode'] } // for type re-export declare global { diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts index 7838d49..ed7ff80 100644 --- a/src/typings/components.d.ts +++ b/src/typings/components.d.ts @@ -77,6 +77,7 @@ declare module 'vue' { LangSwitch: typeof import('./../components/common/lang-switch.vue')['default'] LookForward: typeof import('./../components/custom/look-forward.vue')['default'] MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default'] + OrderConfirmModal: typeof import('./../components/order-confirm/orderConfirmModal.vue')['default'] PinToggler: typeof import('./../components/common/pin-toggler.vue')['default'] ReloadButton: typeof import('./../components/common/reload-button.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/views/recharge/balancerecharge/index.vue b/src/views/recharge/balancerecharge/index.vue index d8c9f41..f525097 100644 --- a/src/views/recharge/balancerecharge/index.vue +++ b/src/views/recharge/balancerecharge/index.vue @@ -2,11 +2,12 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'; import { useI18n } from 'vue-i18n'; import { submitOrder } from '@/service/api/auth'; -import { aliPayPcPay, aliPayWapPay } from '@/service/api/payment'; +import { aliPayPcPay, aliPayWapPay, wxPayScanCode } from '@/service/api/payment'; import { message } from 'ant-design-vue'; import { useRouterPush } from '@/hooks/common/router'; -import { useAppStore } from '@/store/modules/app'; import type { Ref } from 'vue'; +import OrderConfirmModal from '@/components/order-confirm/orderConfirmModal.vue'; +import { useAppStore } from '@/store/modules/app'; defineOptions({ name: 'BalanceRecharge' @@ -82,6 +83,14 @@ onUnmounted(() => { document.removeEventListener('click', handleClickOutside); }); +// 添加订单确认弹窗相关状态 +const showOrderModal = ref(false); +const currentOrderInfo = ref({ + orderId: '', + orderType: 1, // 1 表示余额充值 + orderAmount: 0 +}); + // 修改充值处理方法 const handleRecharge = async () => { // 验证金额 @@ -90,55 +99,56 @@ const handleRecharge = async () => { return; } - try { - await submitOrder({ - type: 1, - orderAmount: paymentAmount.value - }); - message.success('充值订单提交成功！'); - } catch (error) { - message.error('充值失败，请重试！'); - console.error('Failed to submit recharge order:', error); - } -}; -// 测试：支付宝支付 -const handleAliPay = async () => { try { const orderRes = await submitOrder({ type: 1, orderAmount: paymentAmount.value }); - // 区分手机端和pc端支付 - let res; - if(appStore.isMobile) { - res = await aliPayWapPay({orderId: orderRes.data}); + + // 更新订单信息并显示弹窗 + currentOrderInfo.value = { + orderId: orderRes.data, + orderType: 1, + orderAmount: paymentAmount.value + }; + showOrderModal.value = true; + } catch (error) { + message.error('创建订单失败，请重试！'); + console.error('Failed to create order:', error); + } +}; + +// 修改支付处理方法 +const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay') => { + try { + 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(); } else { - res = await aliPayPcPay({orderId: orderRes.data}); + // 添加微信支付处理 + const res = await wxPayScanCode({ orderId: currentOrderInfo.value.orderId }); + routerPushByKey('billing_wxpay', { + query: { + url: res.data, + orderId: currentOrderInfo.value.orderId + } + }); } - console.log(res); - const div = document.createElement("div"); - div.innerHTML = res; // html code - document.body.appendChild(div); - document.forms['punchout_form'].submit(); - } catch (error) { - message.error('充值失败，请重试！'); - console.error('Failed to submit recharge order:', error); - } -}; -// 微信支付 -const handleWxPay = async () => { - try { - const orderRes = await submitOrder({ - type: 1, - orderAmount: paymentAmount.value - }); - const res = await wxPayScanCode({orderId: orderRes.data}); - routerPushByKey('billing_wxpay', { query: { url: res.data, orderId: orderRes.data } }) - - } catch (error) { - message.error('充值失败，请重试！'); - console.error('Failed to submit recharge order:', error); + message.error(t('page.order.paymentFailed')); + console.error('Payment failed:', error); + } finally { + showOrderModal.value = false; } }; @@ -193,27 +203,14 @@ const handleWxPay = async () => { > ¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }} - - - AliPay - - - - WxPay - + + + diff --git a/src/views/recharge/package/index.vue b/src/views/recharge/package/index.vue index 2f78c23..39fe073 100644 --- a/src/views/recharge/package/index.vue +++ b/src/views/recharge/package/index.vue @@ -3,12 +3,23 @@ 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,aliPayWapPay, wxPayScanCode } from '@/service/api/payment'; +import { useRouterPush } from '@/hooks/common/router'; +import { useAppStore } from '@/store/modules/app'; defineOptions({ name: 'PackageSubscription' }); const { t } = useI18n(); +interface RateLimit { + upLimitEnable: boolean; + downLimitEnable: boolean; + upLimit: number; + downLimit: number; +} + interface PackageOption { id: string; packageName: string; @@ -24,6 +35,8 @@ interface PackageOption { periodNum: number; periodType: number; validityPeriod: string; + rateLimitEnable: boolean; + rateLimits: RateLimit; } // 添加有效期类型枚举 @@ -80,10 +93,14 @@ const formatTraffic = (bytes: number): string => { return `${bytes.toFixed(2)}B`; }; -// 格式化流量有效期显示 -const formatTrafficValidity = (num: number, type: number): string => { - const unit = PERIOD_UNIT[type as keyof typeof PERIOD_UNIT] || '未知'; - 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([]); @@ -101,9 +118,30 @@ const selectedPackage = ref({ promotion: '', periodNum: 0, periodType: PERIOD_TYPE.MONTH, - validityPeriod: '0月' + 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 +}); + +// 添加 appStore 实例 +const appStore = useAppStore(); + const fetchPackages = async () => { try { const response = await fetchPackageList(); @@ -116,13 +154,22 @@ const fetchPackages = async () => { clientNumEnable: pkg.clientNumEnable, traffic: Number(pkg.traffic), trafficEnable: pkg.trafficEnable, - trafficDisplay: pkg.trafficEnable ? `${formatTraffic(Number(pkg.traffic))}，${formatTrafficValidity(Number(pkg.periodNum), Number(pkg.periodType))}内有效` : '无限制', - durationEnable: pkg.durationEnable, + trafficDisplay: pkg.trafficEnable ? formatTraffic(Number(pkg.traffic)) : '无限制', + durationEnable: Boolean(pkg.periodNum && pkg.periodType !== undefined), isRecommended: pkg.isRecommended || false, promotion: pkg.promotion || '', periodNum: Number(pkg.periodNum), periodType: Number(pkg.periodType), - validityPeriod: pkg.durationEnable ? formatValidityPeriod(Number(pkg.periodNum), 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 + } })); if (packageOptions.value.length > 0) { @@ -138,7 +185,7 @@ const selectPackage = (option: PackageOption) => { selectedPackage.value = option; }; -// 套餐办理方法 +// 修改套餐办理方法 const handleSubmitOrder = async () => { try { const orderRes = await submitOrder({ @@ -159,7 +206,7 @@ const handleSubmitOrder = async () => { } }; -// 处理支付方式选择 +// 修改支付处理方法 const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay') => { try { if (paymentMethod === 'alipay') { @@ -170,7 +217,8 @@ const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay') => { } else { res = await aliPayPcPay({ orderId: currentOrderInfo.value.orderId }); } - const div = document.createElement("div"); + + const div = document.createElement('div'); div.innerHTML = res; document.body.appendChild(div); document.forms['punchout_form'].submit(); @@ -260,7 +308,23 @@ onMounted(async () => {
有效期限
- {{ selectedPackage.durationEnable ? selectedPackage.validityPeriod : '无限制' }} + {{ selectedPackage.durationEnable ? selectedPackage.validityPeriod+'内有效' : '无限制' }} +
+
+
+
速率限制
+
+ +
@@ -274,6 +338,13 @@ onMounted(async () => {
+ + + @@ -440,4 +511,18 @@ 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; +}