修复支付宝支付
This commit is contained in:
Vendored
-29
@@ -14,72 +14,43 @@ declare module 'vue' {
|
||||
CommonAside: typeof import('./src/components/CommonAside.vue')['default']
|
||||
CommonHeader: typeof import('./src/components/CommonHeader.vue')['default']
|
||||
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||
ElAside: typeof import('element-plus/es')['ElAside']
|
||||
ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElBacktop: typeof import('element-plus/es')['ElBacktop']
|
||||
ElBadge: typeof import('element-plus/es')['ElBadge']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElCollapse: typeof import('element-plus/es')['ElCollapse']
|
||||
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
|
||||
ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
|
||||
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElContainer: typeof import('element-plus/es')['ElContainer']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
|
||||
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElDrawer: typeof import('element-plus/es')['ElDrawer']
|
||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||
ElLink: typeof import('element-plus/es')['ElLink']
|
||||
ElMain: typeof import('element-plus/es')['ElMain']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElPopover: typeof import('element-plus/es')['ElPopover']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
|
||||
ElStep: typeof import('element-plus/es')['ElStep']
|
||||
ElSteps: typeof import('element-plus/es')['ElSteps']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
||||
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
||||
ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTree: typeof import('element-plus/es')['ElTree']
|
||||
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
MessageDetailDialog: typeof import('./src/components/MessageDetailDialog.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
|
||||
@@ -230,6 +230,7 @@ import {
|
||||
} from "@element-plus/icons-vue";
|
||||
|
||||
import { getTenantList } from "@/api/modules";
|
||||
import { getProductOrderStatus } from "@/api/product";
|
||||
import { getCurrentUserProfile, logout } from "@/api/login";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useMenuStore } from "@/stores/menu";
|
||||
@@ -437,9 +438,45 @@ async function loadModules() {
|
||||
}
|
||||
}
|
||||
|
||||
// 支付宝同步回跳会把交易参数附在地址查询串中（out_trade_no 为支付单号）。
|
||||
// 拿到支付单号后立即清理地址栏（保留 #/home 等路由 hash），避免用户停留在带支付
|
||||
// 签名参数的 URL 上；随后在后台重试同步订单（异步通知可能晚于回跳到达），
|
||||
// 开通完成后自动刷新模块，避免首页继续显示“请购买后使用”。
|
||||
async function syncReturnedPayment() {
|
||||
const payNo = new URLSearchParams(window.location.search).get("out_trade_no")?.trim();
|
||||
if (!payNo || !authStore.token) return;
|
||||
|
||||
// 参数已解析：从地址栏移除支付宝交易参数，恢复为干净的 /#/home
|
||||
window.history.replaceState({}, document.title, window.location.pathname + window.location.hash);
|
||||
|
||||
// 异步通知通常数秒内到达；最多等待约 15 秒
|
||||
const MAX_ATTEMPTS = 10;
|
||||
for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
|
||||
let status = "";
|
||||
try {
|
||||
const res = await getProductOrderStatus(payNo);
|
||||
if (res?.code !== 200) return; // 非本租户订单，无需继续
|
||||
status = res.data?.status || "";
|
||||
} catch {
|
||||
// 回跳地址也可能来自其他业务订单；查询不到时直接忽略
|
||||
return;
|
||||
}
|
||||
if (status === "activated") {
|
||||
// 订单已开通：重新拉取模块与菜单，解锁「请购买后使用」的卡片
|
||||
await Promise.all([loadModules(), menuStore.refreshMenus()]);
|
||||
ElMessage.success("支付成功，功能已开通");
|
||||
return;
|
||||
}
|
||||
if (status === "closed") return;
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时加载模块列表
|
||||
onMounted(() => {
|
||||
// 先按当前状态渲染首页；支付回跳的订单同步在后台完成，成功后自动刷新模块
|
||||
loadModules();
|
||||
syncReturnedPayment();
|
||||
initTheme();
|
||||
// 拉取当前登录用户的角色 / 部门 / 职位，用于右上角展示
|
||||
if (authStore.token) {
|
||||
|
||||
@@ -114,14 +114,32 @@
|
||||
<el-table-column prop="create_time" label="下单时间" width="170" align="center" />
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 支付弹窗 -->
|
||||
<el-dialog v-model="payVisible" title="扫码支付" width="420px" :close-on-click-modal="false">
|
||||
<div v-if="payParams?.code_url" class="pay-body">
|
||||
<canvas ref="qrRef" class="pay-qr"></canvas>
|
||||
<p class="pay-tip">请使用{{ currentChannelName }}扫码支付</p>
|
||||
<p class="pay-amount">¥{{ Number(payAmount || 0).toFixed(2) }}</p>
|
||||
</div>
|
||||
<div v-else-if="payParams?.redirect_url" class="pay-body">
|
||||
<p class="pay-tip">正在跳转{{ currentChannelName }}收银台…</p>
|
||||
<el-button type="primary" @click="openPayUrl(payParams.redirect_url)">重新打开支付页</el-button>
|
||||
</div>
|
||||
<p class="pay-status">{{ payStatusText }}</p>
|
||||
<template #footer>
|
||||
<el-button @click="handleCancelPay">取消支付</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { computed, nextTick, onMounted, ref, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ArrowLeft, OfficeBuilding, Box, User, InfoFilled } from "@element-plus/icons-vue";
|
||||
import QRCode from "qrcode";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import {
|
||||
getPackageList,
|
||||
@@ -138,6 +156,13 @@ const loading = ref(false);
|
||||
const packages = ref<any[]>([]);
|
||||
const buyingIds = ref<Record<string, boolean>>({});
|
||||
|
||||
const payVisible = ref(false);
|
||||
const payParams = ref<any>(null);
|
||||
const payStatusText = ref("");
|
||||
const payAmount = ref(0);
|
||||
const currentChannelName = ref("");
|
||||
const qrRef = ref<HTMLCanvasElement | null>(null);
|
||||
|
||||
const ordersVisible = ref(false);
|
||||
const myOrders = ref<any[]>([]);
|
||||
const ordersLoading = ref(false);
|
||||
@@ -183,6 +208,21 @@ const loadMyOrders = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const openPayUrl = (url: string) => {
|
||||
if (url) window.open(url, "_blank", "noopener,noreferrer");
|
||||
};
|
||||
|
||||
const renderQR = async () => {
|
||||
if (!payParams.value?.code_url) return;
|
||||
await nextTick();
|
||||
if (!qrRef.value) return;
|
||||
try {
|
||||
await QRCode.toCanvas(qrRef.value, payParams.value.code_url, { width: 200, margin: 1 });
|
||||
} catch (e) {
|
||||
console.error("二维码生成失败:", e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBuy = async (pkg: any) => {
|
||||
buyingIds.value[pkg.id] = true;
|
||||
try {
|
||||
@@ -195,13 +235,15 @@ const handleBuy = async (pkg: any) => {
|
||||
package_code: pkg.code,
|
||||
channel,
|
||||
pay_type: "",
|
||||
// 支付宝同步回跳地址：必须是完整 http(s) 地址，且不能带 # 和自定义参数，
|
||||
// 否则支付成功后收银台倒计时结束无处可跳、页面卡住，故取站点根路径
|
||||
return_url: window.location.origin + window.location.pathname,
|
||||
});
|
||||
if (res.code !== 200) {
|
||||
ElMessage.error(res.msg || "下单失败");
|
||||
return;
|
||||
}
|
||||
const orderNo = res.data?.order_no || "";
|
||||
const payParams = res.data?.pay_params || null;
|
||||
const offline = res.data?.offline === true;
|
||||
|
||||
if (offline) {
|
||||
@@ -210,10 +252,14 @@ const handleBuy = async (pkg: any) => {
|
||||
return;
|
||||
}
|
||||
|
||||
// 在线支付：复用产品购买的支付弹窗逻辑
|
||||
// 这里简单跳转到产品购买页的支付流程，或直接展示支付二维码
|
||||
// 为简化，直接用 orderNo 轮询状态
|
||||
ElMessage.success("下单成功，请完成支付");
|
||||
// 在线支付：展示扫码二维码或跳转收银台，并轮询订单状态
|
||||
payParams.value = res.data?.pay_params || null;
|
||||
payAmount.value = Number(res.data?.amount || pkg.price || 0);
|
||||
currentChannelName.value = channels.find((x: any) => x.channel === channel)?.name || channel;
|
||||
payStatusText.value = "请在有效期内完成支付，支付成功后由平台开通功能";
|
||||
payVisible.value = true;
|
||||
await renderQR();
|
||||
if (payParams.value?.redirect_url) openPayUrl(payParams.value.redirect_url);
|
||||
startPolling(orderNo);
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.message || "下单失败");
|
||||
@@ -247,11 +293,12 @@ const checkOrder = async (orderNo: string, silent = false) => {
|
||||
if (status === "activated") {
|
||||
stopPolling();
|
||||
ElMessage.success("购买成功，套餐已开通");
|
||||
payVisible.value = false;
|
||||
loadMyOrders();
|
||||
return;
|
||||
}
|
||||
if (status === "paid") {
|
||||
if (!silent) ElMessage.info("已支付，等待平台开通…");
|
||||
payStatusText.value = "已支付，等待平台开通…";
|
||||
return;
|
||||
}
|
||||
if (!silent) ElMessage.info("尚未检测到支付成功，请确认已完成支付");
|
||||
@@ -261,15 +308,23 @@ const checkOrder = async (orderNo: string, silent = false) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelPay = () => {
|
||||
stopPolling();
|
||||
payVisible.value = false;
|
||||
ElMessage.info("已取消，订单仍可在「我的订单」中查看");
|
||||
};
|
||||
|
||||
watch(ordersVisible, (v) => {
|
||||
if (v) loadMyOrders();
|
||||
});
|
||||
|
||||
watch(payVisible, (v) => {
|
||||
if (!v) stopPolling();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadPackages();
|
||||
});
|
||||
|
||||
import { watch } from "vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@@ -443,6 +498,34 @@ import { watch } from "vue";
|
||||
}
|
||||
}
|
||||
|
||||
.pay-body {
|
||||
text-align: center;
|
||||
|
||||
.pay-qr {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.pay-tip {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 12px 0 4px;
|
||||
}
|
||||
|
||||
.pay-amount {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #f56c6c;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-status {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
|
||||
@@ -263,6 +263,9 @@ const handleBuy = async () => {
|
||||
product_code: product.value.code,
|
||||
channel: channels.value.length > 0 ? channel.value : "",
|
||||
pay_type: "",
|
||||
// 支付宝同步回跳地址：必须是完整 http(s) 地址，且不能带 # 和自定义参数，
|
||||
// 否则支付成功后收银台倒计时结束无处可跳、页面卡住，故取站点根路径
|
||||
return_url: window.location.origin + window.location.pathname,
|
||||
});
|
||||
if (res.code !== 200) {
|
||||
ElMessage.error(res.msg || "下单失败");
|
||||
|
||||
Reference in New Issue
Block a user