Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
d9f91d5e by zhangmeng
Options

paypal

1 parent c12af2e4
Inline Side-by-side
Showing 7 changed files with 282 additions and 150 deletions
src/routerPc/en.js
......@@ -576,6 +576,18 @@ export const constantRoutes = [
component: () => import('@/viewsPc/seat/people-manage'),
meta: { title: '观影人管理' }
},
{
path: 'payTicketOk',
component: () => import('@/viewsPc/seat/payticketOk.vue'),
name: 'payTicketOk',
meta: { title: '支付成功'}
},
{
path: 'payTicketLoser',
component: () => import('@/viewsPc/seat/payticketLoser.vue'),
name: 'payTicketLoser',
meta: { title: '支付失败'}
},
]
}
]
......@@ -595,6 +607,7 @@ export const constantRoutes = [
name: 'payOk',
meta: { title: '支付成功'}
},
{
path: 'commitDone/:orderId',
component: () => import('@/viewsPc/match/commitDone'),
......
src/viewsPc/seat/api/index.js
......@@ -49,3 +49,6 @@ export const getOrderDetail = (data) =>
/** 检查是否支付成功 */
export const checkPaySuccess = (data) =>
request("POST", `/api/order/checkOrderIsPay/${data.orderSn}`, data);
/** 检查是否支付成功 */
export const payCallback = (data) =>
request("POST", `/api/order/palPayTicket/callback/`, data);
......
src/viewsPc/seat/confirm-order.vue
<script setup>
import { confirmOrder } from "./api/index.js";
import { ElMessage } from "element-plus";
import { payOrder, viewPeopleList, checkPaySuccess } from "./api/index.js";
import qrCodeDialog from "./components/qrCodeDialog.vue";
import qrcode from "qrcode";
import { languageFormat } from "./utils/language.js";
import { useStorage } from "@vueuse/core/index";
const language = useStorage("language", 0);
const route = useRoute();
const router = useRouter();
const props = defineProps({
activityId: [String, Number],
});
let timer = null;
const startCheckSuccessListener = (orderSn, actId) => {
timer = setInterval(() => {
checkPaySuccess({ orderSn }).then((res) => {
if (res.data) {
clearInterval(timer);
timer = null;
// 支付成功
payment.showCodeDialog = false;
ElMessage({
type: "success",
message: languageFormat(
language.value,
"支付成功",
"Payment succeeded"
),
});
router.replace({
path: "/seat/order",
});
} else {
return false;
}
});
}, 3000);
};
const payment = reactive({
showCodeDialog: false,
btn_loading: false,
form: {
viewers: [],
phone: "",
},
qrInfo: {},
qrCodeData: "",
paymentHandle() {
if (payment.form.viewers.length != order.data?.seatInfo?.length)
return ElMessage({
type: "warning",
message: languageFormat(
language.value,
"观看人与购买票数不符",
"The number of viewers does not match the number of tickets purchased."
),
});
if (!payment.form.phone)
return ElMessage({
type: "warning",
message: languageFormat(
language.value,
"请输入联系电话",
"Please enter the contact phone number."
),
});
if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(payment.form.phone)) {
return ElMessage({
type: "warning",
message: languageFormat(
language.value,
"联系电话格式不正确",
"The format of the contact phone is incorrect."
),
});
}
payOrder({
contactPhone: payment.form.phone,
customerIds: payment.form.viewers,
orderToken: order.data?.orderToken,
payType: language.value == 0 ? 1 : 2,
paymentAmount: order.data?.paymentAmount,
}).then((res) => {
if (res.data.language == "zh-cn") {
payment.qrInfo = res.data;
qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
if (url) {
payment.qrCodeData = url;
}
});
payment.showCodeDialog = true;
startCheckSuccessListener(res.data.orderSn, props.activityId);
} else {
// TODO：这里是英文环境支付
}
});
},
handleCloce() {
payment.showCodeDialog = false;
payment.qrCodeData = "";
clearInterval(timer);
timer = null;
router.replace({
path: "/seat/order",
});
},
});
const order = reactive({
data: null,
fetchData() {
confirmOrder({
actId: props.activityId,
openType: route.query.openType,
sessionId: route.query.sessionId,
sitePlace: route.query.sitePlace,
ticketType: route.query.ticketType,
seatIds: route.query.seatIds.split(","),
}).then((res) => {
this.data = res.data;
});
},
});
const audience = reactive({
data: [],
fetchData() {
viewPeopleList().then((res) => {
audience.data = res.data;
});
},
});
onUnmounted(() => {
clearInterval(timer);
});
audience.fetchData();
order.fetchData();
</script>
<template>
<div class="container">
<div class="container" v-loading="loading">
<div class="title">
{{ languageFormat(language, "订单确认", "Order confirmation") }}
</div>
......@@ -292,6 +145,160 @@ order.fetchData();
</div>
</template>
<script setup>
import {ref} from 'vue'
import { confirmOrder } from "./api/index.js";
import { ElMessage } from "element-plus";
import { payOrder, viewPeopleList, checkPaySuccess } from "./api/index.js";
import qrCodeDialog from "./components/qrCodeDialog.vue";
import qrcode from "qrcode";
import { languageFormat } from "./utils/language.js";
import { useStorage } from "@vueuse/core/index";
const language = useStorage("language", 0);
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const props = defineProps({
activityId: [String, Number],
});
let timer = null;
const startCheckSuccessListener = (orderSn, actId) => {
timer = setInterval(() => {
checkPaySuccess({ orderSn }).then((res) => {
if (res.data) {
clearInterval(timer);
timer = null;
// 支付成功
payment.showCodeDialog = false;
ElMessage({
type: "success",
message: languageFormat(
language.value,
"支付成功",
"Payment succeeded"
),
});
router.replace({
path: "/seat/order",
});
} else {
return false;
}
});
}, 3000);
};
const payment = reactive({
showCodeDialog: false,
btn_loading: false,
form: {
viewers: [],
phone: "",
},
qrInfo: {},
qrCodeData: "",
paymentHandle() {
if (payment.form.viewers.length != order.data?.seatInfo?.length)
return ElMessage({
type: "warning",
message: languageFormat(
language.value,
"观看人与购买票数不符",
"The number of viewers does not match the number of tickets purchased."
),
});
if (!payment.form.phone)
return ElMessage({
type: "warning",
message: languageFormat(
language.value,
"请输入联系电话",
"Please enter the contact phone number."
),
});
// if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(payment.form.phone)) {
// return ElMessage({
// type: "warning",
// message: languageFormat(
// language.value,
// "联系电话格式不正确",
// "The format of the contact phone is incorrect."
// ),
// });
// }
loading.value=true
payOrder({
contactPhone: payment.form.phone,
customerIds: payment.form.viewers,
orderToken: order.data?.orderToken,
payType: language.value == 0 ? 1 : 2,
paymentAmount: order.data?.paymentAmount,
}).then((res) => {
if (res.data.language == "zh-cn") {
payment.qrInfo = res.data;
qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
if (url) {
payment.qrCodeData = url;
}
});
payment.showCodeDialog = true;
startCheckSuccessListener(res.data.orderSn, props.activityId);
} else {
// TODO：这里是英文环境支付
location.href = res.data.scanCodeUrl
}
}).finally(()=>{
loading.value=false
});
},
handleCloce() {
payment.showCodeDialog = false;
payment.qrCodeData = "";
clearInterval(timer);
timer = null;
router.replace({
path: "/seat/order",
});
},
});
const order = reactive({
data: null,
fetchData() {
confirmOrder({
actId: props.activityId,
openType: route.query.openType,
sessionId: route.query.sessionId,
sitePlace: route.query.sitePlace,
ticketType: route.query.ticketType,
seatIds: route.query.seatIds.split(","),
}).then((res) => {
this.data = res.data;
});
},
});
const audience = reactive({
data: [],
fetchData() {
viewPeopleList().then((res) => {
audience.data = res.data;
});
},
});
onUnmounted(() => {
clearInterval(timer);
});
audience.fetchData();
order.fetchData();
</script>
<style scoped lang="scss">
div {
box-sizing: border-box;
......
src/viewsPc/seat/order-detail.vue
......@@ -151,6 +151,7 @@ const detail = reactive({
startCheckSuccessListener(detail.data.orderSn);
} else {
// TODO：这里是英文环境支付
location.href = res.data.scanCodeUrl
}
})
.finally(() => (detail.pay_loading = false));
......@@ -242,7 +243,7 @@ detail.fetchData();
</script>
<template>
<div class="container">
<div class="container" v-loading="detail.pay_loading">
<div class="left">
<!-- 票务信息 -->
<div class="ticket">
......
src/viewsPc/seat/payticketLoser.vue 0 → 100644
<template>
<div>
<div class="box">
<el-card class="mb60 mt30" v-loading="loading">
<div class="text-center mt30">
<el-icon color="#e46962" size="80">
<CircleCloseFilled />
</el-icon>
<p class="text-success mb20">{{ language == 0 ? '支付失败' : 'Payment Failure!' }}</p>
<el-button type="primary" class="btn-lineG mb60" @click="goBillDetail" round>
{{ language == 0 ? '返回订单详情' : 'Return order details' }}
</el-button>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {onMounted} from "@vue/runtime-core";
import {callbackPalPay} from "/@/apiPc/booking";
import {useStorage} from "@vueuse/core/index";
import {payCallback} from '@/viewsPc/seat/api/index'
const route = useRoute()
const router = useRouter()
const language= useStorage('language',0)
const orderId = ref(route.query.orderId)
const form = ref({})
const loading = ref(false)
onMounted(() => {
const code = decodeURIComponent(orderId.value)
loading.value = false
// payCallback({tradeNo:code}).then(res => {
// loading.value = false
// form.value = res.data.orderType
// })
})
function goBillDetail() {
router.push({
path: '/seat/order_detail',
query: { orderSn: orderId.value, id: 1 },
})
}
</script>
<style scoped lang="scss">
</style>
src/viewsPc/seat/payticketOk.vue 0 → 100644
<template>
<div>
<div class="box">
<el-card class="mb60 mt30" v-loading="loading">
<div class="text-center mt30">
<el-icon color="#32B16C" size="80">
<SuccessFilled/>
</el-icon>
<p class="text-success mb20">{{ language == 0 ? '支付成功' : 'successfully!' }}</p>
<el-button type="primary" class="btn-lineG mb60" @click="goBillDetail" round>
{{ language == 0 ? '返回订单详情' : 'Return order details' }}
</el-button>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {onMounted} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";
import {payCallback} from '@/viewsPc/seat/api/index'
const route = useRoute()
const router = useRouter()
const language= useStorage('language',0)
const orderId = ref(route.query.orderId)
const form = ref()
const loading = ref(false)
onMounted(() => {
const code = decodeURIComponent(orderId.value)
loading.value = true
payCallback({tradeNo:code}).then(res => {
loading.value = false
form.value = res.data
})
})
function goBillDetail() {
router.push({
path: '/seat/order_detail',
query: { orderSn: form.value.orderSn, id: form.value.actId },
})
}
</script>
<style scoped lang="scss">
</style>
src/viewsPc/seat/utils/request.js
......@@ -12,7 +12,7 @@ const baseURL = import.meta.env.VITE_TICKET_BASE_API
// const baseURL = "ticket"; //"http://book.xiaojinyu.games"; // 这里填入你的基础 API URL
const timeout = 15000; // 请求超时时间
const timeout = 150000; // 请求超时时间
const http = axios.create({
baseURL,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!