140 lines
3.8 KiB
Vue
140 lines
3.8 KiB
Vue
<script setup>
|
||
import { liveStore } from "~/stores/live/index.js";
|
||
import { createBuyOrder } from "~/api/goods/index.js";
|
||
import { goodStore } from "~/stores/goods/index.js";
|
||
import { showLoadingToast, closeToast } from "vant";
|
||
import { authStore } from "~/stores/auth/index.js";
|
||
import { message } from "~/components/x-message/useMessage.js";
|
||
import { createOrder, offlineQrcode } from "~/api-collect-code/goods/index.js";
|
||
import {abroadCreateOrder} from "~/api-collect-code/abroad/index.js"
|
||
import { codeAuthStore } from "~/stores-collect-code/auth/index.js";
|
||
import { useI18n } from "vue-i18n";
|
||
|
||
const amount = ref("");
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const type=route.query.type
|
||
const { t } = useI18n();
|
||
const { checkoutSessionUrl, qrUid, qrData, codePKey, codePayUid } =
|
||
codeAuthStore();
|
||
const payStatus = ref(0);
|
||
const state = reactive({
|
||
pageRequest: true,
|
||
});
|
||
definePageMeta({
|
||
i18n: "payment.title",
|
||
});
|
||
const getData = async () => {
|
||
state.pageRequest = true;
|
||
const res = await offlineQrcode({
|
||
qrUid: route.query.qrUid,
|
||
});
|
||
if (res.status === 0) {
|
||
qrData.value = res.data;
|
||
payStatus.value = res.data.payStatus;
|
||
if (qrData.value.payStatus === 2) {
|
||
state.pageRequest = false;
|
||
} else {
|
||
confirmPay();
|
||
}
|
||
}
|
||
};
|
||
// 获取二维码价格
|
||
// getData();
|
||
const confirmPay = async () => {
|
||
const res = await createOrder({
|
||
price: qrData.value.price,
|
||
currency: qrData.value.currency,
|
||
qrUid: route.query.qrUid,
|
||
testReturnHost: window.location.origin,
|
||
testReturnEndPoint: "/collectCode/payment/result",
|
||
});
|
||
if (res.status === 0) {
|
||
codePKey.value = res.data.checkoutSessionUrl;
|
||
codePayUid.value = res.data.payUid;
|
||
window.location.href = res.data.checkoutSessionUrl;
|
||
return;
|
||
router.push({
|
||
path: "/checkoutPage",
|
||
query: {
|
||
payUid: res.data.payUid,
|
||
returnUrl: "/collectCode/payment/result",
|
||
stripeKey: res.data.checkoutSessionUrl,
|
||
},
|
||
});
|
||
}
|
||
};
|
||
// 画家海外支付 扫码支付
|
||
const abroadPay=async ()=>{
|
||
if(!route.query.qrUid){
|
||
return
|
||
}
|
||
const res=await abroadCreateOrder({
|
||
QrUid:route.query.qrUid
|
||
});
|
||
|
||
if(res.status===0 && res.data){
|
||
console.log(res);
|
||
|
||
codePKey.value = res.data.checkoutSessionUrl;
|
||
codePayUid.value = res.data.payUid;
|
||
window.location.href = res.data.checkoutSessionUrl;
|
||
}else if(res.status===1 && res.data===null){
|
||
router.push({
|
||
path:"/overseasCode/payment/result",
|
||
query:{
|
||
qrUid:route.query.qrUid
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
// 根据是否有type选择执行支付方式，当type=abroad时，属于画家海外支付
|
||
const payment=async ()=>{
|
||
if(type==="abroad"){
|
||
await abroadPay()
|
||
}else{
|
||
await getData()
|
||
}
|
||
}
|
||
payment()
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover flex-grow-1 flex flex-col items-center pt-183px px-30px"
|
||
>
|
||
<div
|
||
v-if="state.pageRequest"
|
||
class="fixed left-0 top-0 w-full h-full bg-white/50 flex items-center justify-center z-50"
|
||
>
|
||
<van-loading color="#1989fa" size="36px" vertical
|
||
>跳转支付处理中...</van-loading
|
||
>
|
||
</div>
|
||
<div v-if="!state.pageRequest" class="mb-30px">
|
||
<img class="w-126px h-126px" src="@/static/images/dddf34@2x.png" alt="" />
|
||
</div>
|
||
<div
|
||
v-if="!state.pageRequest"
|
||
class="text-#999999 text-16px mb-24px font-bold"
|
||
>
|
||
{{ qrData.price + " " + qrData.currency }}
|
||
</div>
|
||
<div
|
||
v-if="!state.pageRequest"
|
||
class="text-#1A1A1A text-16px mb-25px font-bold"
|
||
>
|
||
你已完成全部支付！
|
||
</div>
|
||
|
||
<!-- <div class="w-full mt-auto mb-40px">
|
||
<van-button type="primary" block @click="confirmPay">
|
||
{{ $t("collectCode.payment.confirmPayment") }}
|
||
</van-button>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped></style>
|