liveh5-nuxt/app/pages/collectCode/payment/index.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){

    codePKey.value = res.data.checkoutSessionUrl;
    codePayUid.value = res.data.payUid;
    window.location.href = res.data.checkoutSessionUrl;
  }

}
// 根据是否有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>