浏览代码

1

dev_czc
congzc 1年前
父节点
当前提交
3ea71a8495
共有 4 个文件被更改,包括 111 次插入18 次删除
  1. +13
    -1
      src/apis/pay.js
  2. +9
    -0
      src/types/components.d.ts
  3. +1
    -0
      src/views/myAPI/index.vue
  4. +88
    -17
      src/views/myStore/index.vue

+ 13
- 1
src/apis/pay.js 查看文件

@@ -24,4 +24,16 @@ export function createPayApi(data) {
method: 'post', method: 'post',
data data
}) })
}
}

/**
* @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'
})
}

+ 9
- 0
src/types/components.d.ts 查看文件

@@ -18,10 +18,13 @@ declare module '@vue/runtime-core' {
ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] 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'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import('element-plus/es')['ElTooltip']
@@ -29,13 +32,19 @@ declare module '@vue/runtime-core' {
GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default']
Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
IconSelect: typeof import('./../components/IconSelect/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'] IEpDocumentAdd: typeof import('~icons/ep/document-add')['default']
IEpDownload: typeof import('~icons/ep/download')['default']
IEpEdit: typeof import('~icons/ep/edit')['default'] IEpEdit: typeof import('~icons/ep/edit')['default']
IEpGoods: typeof import('~icons/ep/goods')['default'] IEpGoods: typeof import('~icons/ep/goods')['default']
IEpLoading: typeof import('~icons/ep/loading')['default']
IEpLock: typeof import('~icons/ep/lock')['default'] IEpLock: typeof import('~icons/ep/lock')['default']
IEpMenu: typeof import('~icons/ep/menu')['default'] IEpMenu: typeof import('~icons/ep/menu')['default']
IEpPhone: typeof import('~icons/ep/phone')['default'] IEpPhone: typeof import('~icons/ep/phone')['default']
IEpSearch: typeof import('~icons/ep/search')['default']
IEpUser: typeof import('~icons/ep/user')['default'] IEpUser: typeof import('~icons/ep/user')['default']
IEpVideoPlay: typeof import('~icons/ep/video-play')['default']
LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
MyLoading: typeof import('./../components/myLoading.vue')['default'] MyLoading: typeof import('./../components/myLoading.vue')['default']


+ 1
- 0
src/views/myAPI/index.vue 查看文件

@@ -25,6 +25,7 @@
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 25px 0 0 0;
min-height: calc(100vh - 80px); min-height: calc(100vh - 80px);
// text-align: center; // text-align: center;
.title { .title {


+ 88
- 17
src/views/myStore/index.vue 查看文件

@@ -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;


正在加载...
取消
保存