diff --git a/src/apis/pay.js b/src/apis/pay.js index 04922ce..b7d79f1 100644 --- a/src/apis/pay.js +++ b/src/apis/pay.js @@ -24,4 +24,16 @@ export function createPayApi(data) { method: 'post', data }) -} \ No newline at end of file +} + +/** +* @description:获取订单支付状态 +* @param orderNumber +* @return: data payStatus 查询支付状态 0:待支付,2:支付中,3:已支付 +*/ +export function getOrderStatusApi(orderNumber, payVendor) { + return request({ + url: `api/productOrder/findStatus?orderNumber=${orderNumber}&payVendor=${payVendor}`, + method: 'get' + }) +} diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 713f9b5..3ec7dc5 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -18,10 +18,13 @@ declare module '@vue/runtime-core' { ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] + ElForm: typeof import('element-plus/es')['ElForm'] + ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElOption: typeof import('element-plus/es')['ElOption'] + ElPagination: typeof import('element-plus/es')['ElPagination'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] @@ -29,13 +32,19 @@ declare module '@vue/runtime-core' { GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] + IEpCloseBold: typeof import('~icons/ep/close-bold')['default'] + IEpDelete: typeof import('~icons/ep/delete')['default'] IEpDocumentAdd: typeof import('~icons/ep/document-add')['default'] + IEpDownload: typeof import('~icons/ep/download')['default'] IEpEdit: typeof import('~icons/ep/edit')['default'] IEpGoods: typeof import('~icons/ep/goods')['default'] + IEpLoading: typeof import('~icons/ep/loading')['default'] IEpLock: typeof import('~icons/ep/lock')['default'] IEpMenu: typeof import('~icons/ep/menu')['default'] IEpPhone: typeof import('~icons/ep/phone')['default'] + IEpSearch: typeof import('~icons/ep/search')['default'] IEpUser: typeof import('~icons/ep/user')['default'] + IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] MyLoading: typeof import('./../components/myLoading.vue')['default'] diff --git a/src/views/myAPI/index.vue b/src/views/myAPI/index.vue index b2669dc..419861f 100644 --- a/src/views/myAPI/index.vue +++ b/src/views/myAPI/index.vue @@ -25,6 +25,7 @@ overflow: hidden; overflow-y: scroll; background-color: #f5f5f5; + border-radius: 25px 0 0 0; min-height: calc(100vh - 80px); // text-align: center; .title { diff --git a/src/views/myStore/index.vue b/src/views/myStore/index.vue index ddcf8b9..96c5ada 100644 --- a/src/views/myStore/index.vue +++ b/src/views/myStore/index.vue @@ -309,20 +309,34 @@ append-to-body destroy-on-close @closed="clearCode" + :close-on-click-modal="false" >
- - + + + + +
+
+ {{ + lanChange == "zh-cn" + ? `扫描二维码进行付款` + : `Scan the QR code for payment` + }}
-
扫描二维码进行付款
-
刷新二维码
+
+ {{ lanChange == "zh-cn" ? `刷新二维码` : `Refresh QR code` }} +
@@ -343,7 +357,7 @@ import { getCurrentInstance, ref, onMounted } from "vue"; import { useI18n } from "vue-i18n"; import talkUs from "@/components/talkUs.vue"; import { useRoute, useRouter } from "vue-router"; -import { createOrderApi, createPayApi } from "@/apis/pay"; +import { createOrderApi, createPayApi, getOrderStatusApi } from "@/apis/pay"; import vueQr from "vue-qr/src/packages/vue-qr.vue"; const route = useRoute(); @@ -633,6 +647,7 @@ function payErrorHandle() { ); } // 获取订单 +const myOrderNumber = ref(null); //订单号 async function createOrderFunc() { const data = { productId: 30, @@ -640,6 +655,7 @@ async function createOrderFunc() { try { const res = await createOrderApi(data); if (res.code == 200) { + myOrderNumber.value = res.data; createPayFunc(res.data); } else { payErrorHandle(); @@ -649,6 +665,8 @@ async function createOrderFunc() { } } // 获取订单详情 +let iframeBody = ref(null); +const iframeDom = ref(null); async function createPayFunc(orderNumber) { const data = { orderNumber, @@ -657,7 +675,18 @@ async function createPayFunc(orderNumber) { try { const res = await createPayApi(data); if (res.code == 200) { - payCodeUrl.value = res.data.codeUrl; + // 支付宝获取iframe内容 + if (res.data.body) { + iframeBody.value = res.data.body; + iframeDom.value = document.getElementById("myIframe"); + console.log(iframeDom.value); + iframeDom.value.srcdoc = iframeBody.value; + } + // 直接获取二维码 + if (res.data.codeUrl) { + payCodeUrl.value = res.data.codeUrl; + } + await getStatusOfOrderFunc(orderNumber); } else { payErrorHandle(); } @@ -665,14 +694,56 @@ async function createPayFunc(orderNumber) { payErrorHandle(); } } -// 生成二维码 -function qrcode() { - return; +// 获取订单支付状态 payStatus 查询支付状态 0:待支付,2:支付中,3:已支付 +async function getStatusOfOrderFunc(orderNumber) { + if ( + route.path != "/myStore" || + orderCodeDialogShow.value == false || + orderNumber != myOrderNumber.value + ) { + return; + } + try { + let payVendor = myPayVendor.value; + const res = await getOrderStatusApi(orderNumber, payVendor); + if (res.code == 200) { + if (res.data.payStatus == 3) { + return; + } else { + setTimeout(() => { + getStatusOfOrderFunc(orderNumber); + }, 3000); + } + } else { + setTimeout(() => { + getStatusOfOrderFunc(orderNumber); + }, 3000); + } + } catch (error) { + console.log(error, "error"); + ElMessage.error( + lanChange.value == "zh-cn" + ? `获取订单失败,请重试` + : `Failed to get the order, please try again` + ); + } } +// 生成二维码 +// function qrcode() { +// return; +// } + // 关闭二维码弹窗 -function clearCode(params) { +function clearCode() { myPayVendor.value = null; // 2微信 4支付宝 payCodeUrl.value = null; + iframeBody.value = null; +} +// 刷新二维码 +function RefreshQR() { + payCodeUrl.value = null; + iframeBody.value = null; + createOrderFunc(); } //#endregion ------------------------------------ @@ -964,8 +1035,8 @@ function clearCode(params) { margin: auto; justify-content: space-evenly; align-items: center; - width: 300px; - height: 300px; + width: 350px; + height: 350px; border: 1px solid #ccc; border-radius: 15px; overflow: hidden;