|
@@ -309,20 +309,34 @@ |
|
|
append-to-body |
|
|
append-to-body |
|
|
destroy-on-close |
|
|
destroy-on-close |
|
|
@closed="clearCode" |
|
|
@closed="clearCode" |
|
|
|
|
|
:close-on-click-modal="false" |
|
|
> |
|
|
> |
|
|
<div class="orderCodeDialog"> |
|
|
<div class="orderCodeDialog"> |
|
|
<div class="codeImg"> |
|
|
<div class="codeImg"> |
|
|
<my-Loading-Icon2 v-if="!payCodeUrl"></my-Loading-Icon2> |
|
|
|
|
|
<vue-qr |
|
|
|
|
|
v-if="payCodeUrl" |
|
|
|
|
|
:text="payCodeUrl" |
|
|
|
|
|
:size="280" |
|
|
|
|
|
:callback="qrcode" |
|
|
|
|
|
></vue-qr> |
|
|
|
|
|
|
|
|
<my-Loading-Icon2 |
|
|
|
|
|
v-if="!payCodeUrl && !iframeBody" |
|
|
|
|
|
></my-Loading-Icon2> |
|
|
|
|
|
<!-- :callback="qrcode" --> |
|
|
|
|
|
<vue-qr v-if="payCodeUrl" :text="payCodeUrl" :size="280"></vue-qr> |
|
|
|
|
|
<iframe |
|
|
|
|
|
v-show="iframeBody" |
|
|
|
|
|
id="myIframe" |
|
|
|
|
|
width="305px" |
|
|
|
|
|
height="305px" |
|
|
|
|
|
frameborder="0" |
|
|
|
|
|
></iframe> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="tips"> |
|
|
|
|
|
{{ |
|
|
|
|
|
lanChange == "zh-cn" |
|
|
|
|
|
? `扫描二维码进行付款` |
|
|
|
|
|
: `Scan the QR code for payment` |
|
|
|
|
|
}} |
|
|
</div> |
|
|
</div> |
|
|
<div class="tips">扫描二维码进行付款</div> |
|
|
|
|
|
<div class="btnBox"> |
|
|
<div class="btnBox"> |
|
|
<div>刷新二维码</div> |
|
|
|
|
|
|
|
|
<div @click="RefreshQR"> |
|
|
|
|
|
{{ lanChange == "zh-cn" ? `刷新二维码` : `Refresh QR code` }} |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
@@ -343,7 +357,7 @@ import { getCurrentInstance, ref, onMounted } from "vue"; |
|
|
import { useI18n } from "vue-i18n"; |
|
|
import { useI18n } from "vue-i18n"; |
|
|
import talkUs from "@/components/talkUs.vue"; |
|
|
import talkUs from "@/components/talkUs.vue"; |
|
|
import { useRoute, useRouter } from "vue-router"; |
|
|
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"; |
|
|
import vueQr from "vue-qr/src/packages/vue-qr.vue"; |
|
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
const route = useRoute(); |
|
@@ -633,6 +647,7 @@ function payErrorHandle() { |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
// 获取订单 |
|
|
// 获取订单 |
|
|
|
|
|
const myOrderNumber = ref(null); //订单号 |
|
|
async function createOrderFunc() { |
|
|
async function createOrderFunc() { |
|
|
const data = { |
|
|
const data = { |
|
|
productId: 30, |
|
|
productId: 30, |
|
@@ -640,6 +655,7 @@ async function createOrderFunc() { |
|
|
try { |
|
|
try { |
|
|
const res = await createOrderApi(data); |
|
|
const res = await createOrderApi(data); |
|
|
if (res.code == 200) { |
|
|
if (res.code == 200) { |
|
|
|
|
|
myOrderNumber.value = res.data; |
|
|
createPayFunc(res.data); |
|
|
createPayFunc(res.data); |
|
|
} else { |
|
|
} else { |
|
|
payErrorHandle(); |
|
|
payErrorHandle(); |
|
@@ -649,6 +665,8 @@ async function createOrderFunc() { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
// 获取订单详情 |
|
|
// 获取订单详情 |
|
|
|
|
|
let iframeBody = ref(null); |
|
|
|
|
|
const iframeDom = ref(null); |
|
|
async function createPayFunc(orderNumber) { |
|
|
async function createPayFunc(orderNumber) { |
|
|
const data = { |
|
|
const data = { |
|
|
orderNumber, |
|
|
orderNumber, |
|
@@ -657,7 +675,18 @@ async function createPayFunc(orderNumber) { |
|
|
try { |
|
|
try { |
|
|
const res = await createPayApi(data); |
|
|
const res = await createPayApi(data); |
|
|
if (res.code == 200) { |
|
|
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 { |
|
|
} else { |
|
|
payErrorHandle(); |
|
|
payErrorHandle(); |
|
|
} |
|
|
} |
|
@@ -665,14 +694,56 @@ async function createPayFunc(orderNumber) { |
|
|
payErrorHandle(); |
|
|
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支付宝 |
|
|
myPayVendor.value = null; // 2微信 4支付宝 |
|
|
payCodeUrl.value = null; |
|
|
payCodeUrl.value = null; |
|
|
|
|
|
iframeBody.value = null; |
|
|
|
|
|
} |
|
|
|
|
|
// 刷新二维码 |
|
|
|
|
|
function RefreshQR() { |
|
|
|
|
|
payCodeUrl.value = null; |
|
|
|
|
|
iframeBody.value = null; |
|
|
|
|
|
createOrderFunc(); |
|
|
} |
|
|
} |
|
|
//#endregion ------------------------------------ |
|
|
//#endregion ------------------------------------ |
|
|
|
|
|
|
|
@@ -964,8 +1035,8 @@ function clearCode(params) { |
|
|
margin: auto; |
|
|
margin: auto; |
|
|
justify-content: space-evenly; |
|
|
justify-content: space-evenly; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
width: 300px; |
|
|
|
|
|
height: 300px; |
|
|
|
|
|
|
|
|
width: 350px; |
|
|
|
|
|
height: 350px; |
|
|
border: 1px solid #ccc; |
|
|
border: 1px solid #ccc; |
|
|
border-radius: 15px; |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|