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 284 additions and 152 deletions
src/routerPc/en.js
...@@ -576,6 +576,18 @@ export const constantRoutes = [ ...@@ -576,6 +576,18 @@ export const constantRoutes = [
576 component: () => import('@/viewsPc/seat/people-manage'), 576 component: () => import('@/viewsPc/seat/people-manage'),
577 meta: { title: '观影人管理' } 577 meta: { title: '观影人管理' }
578 }, 578 },
579 {
580 path: 'payTicketOk',
581 component: () => import('@/viewsPc/seat/payticketOk.vue'),
582 name: 'payTicketOk',
583 meta: { title: '支付成功'}
584 },
585 {
586 path: 'payTicketLoser',
587 component: () => import('@/viewsPc/seat/payticketLoser.vue'),
588 name: 'payTicketLoser',
589 meta: { title: '支付失败'}
590 },
579 ] 591 ]
580 } 592 }
581 ] 593 ]
...@@ -595,6 +607,7 @@ export const constantRoutes = [ ...@@ -595,6 +607,7 @@ export const constantRoutes = [
595 name: 'payOk', 607 name: 'payOk',
596 meta: { title: '支付成功'} 608 meta: { title: '支付成功'}
597 }, 609 },
610
598 { 611 {
599 path: 'commitDone/:orderId', 612 path: 'commitDone/:orderId',
600 component: () => import('@/viewsPc/match/commitDone'), 613 component: () => import('@/viewsPc/match/commitDone'),
......
src/viewsPc/seat/api/index.js
...@@ -49,3 +49,6 @@ export const getOrderDetail = (data) => ...@@ -49,3 +49,6 @@ export const getOrderDetail = (data) =>
49 /** 检查是否支付成功 */ 49 /** 检查是否支付成功 */
50 export const checkPaySuccess = (data) => 50 export const checkPaySuccess = (data) =>
51 request("POST", `/api/order/checkOrderIsPay/${data.orderSn}`, data); 51 request("POST", `/api/order/checkOrderIsPay/${data.orderSn}`, data);
52 /** 检查是否支付成功 */
53 export const payCallback = (data) =>
54 request("POST", `/api/order/palPayTicket/callback/`, data);
......
src/viewsPc/seat/confirm-order.vue
1 <script setup>
2 import { confirmOrder } from "./api/index.js";
3 import { ElMessage } from "element-plus";
4 import { payOrder, viewPeopleList, checkPaySuccess } from "./api/index.js";
5 import qrCodeDialog from "./components/qrCodeDialog.vue";
6 import qrcode from "qrcode";
7 import { languageFormat } from "./utils/language.js";
8 import { useStorage } from "@vueuse/core/index";
9 const language = useStorage("language", 0);
10
11 const route = useRoute();
12 const router = useRouter();
13
14 const props = defineProps({
15 activityId: [String, Number],
16 });
17
18 let timer = null;
19 const startCheckSuccessListener = (orderSn, actId) => {
20 timer = setInterval(() => {
21 checkPaySuccess({ orderSn }).then((res) => {
22 if (res.data) {
23 clearInterval(timer);
24 timer = null;
25 // 支付成功
26 payment.showCodeDialog = false;
27 ElMessage({
28 type: "success",
29 message: languageFormat(
30 language.value,
31 "支付成功",
32 "Payment succeeded"
33 ),
34 });
35 router.replace({
36 path: "/seat/order",
37 });
38 } else {
39 return false;
40 }
41 });
42 }, 3000);
43 };
44
45 const payment = reactive({
46 showCodeDialog: false,
47 btn_loading: false,
48 form: {
49 viewers: [],
50 phone: "",
51 },
52 qrInfo: {},
53 qrCodeData: "",
54 paymentHandle() {
55 if (payment.form.viewers.length != order.data?.seatInfo?.length)
56 return ElMessage({
57 type: "warning",
58 message: languageFormat(
59 language.value,
60 "观看人与购买票数不符",
61 "The number of viewers does not match the number of tickets purchased."
62 ),
63 });
64 if (!payment.form.phone)
65 return ElMessage({
66 type: "warning",
67 message: languageFormat(
68 language.value,
69 "请输入联系电话",
70 "Please enter the contact phone number."
71 ),
72 });
73 if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(payment.form.phone)) {
74 return ElMessage({
75 type: "warning",
76 message: languageFormat(
77 language.value,
78 "联系电话格式不正确",
79 "The format of the contact phone is incorrect."
80 ),
81 });
82 }
83 payOrder({
84 contactPhone: payment.form.phone,
85 customerIds: payment.form.viewers,
86 orderToken: order.data?.orderToken,
87 payType: language.value == 0 ? 1 : 2,
88 paymentAmount: order.data?.paymentAmount,
89 }).then((res) => {
90 if (res.data.language == "zh-cn") {
91 payment.qrInfo = res.data;
92 qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
93 if (url) {
94 payment.qrCodeData = url;
95 }
96 });
97 payment.showCodeDialog = true;
98 startCheckSuccessListener(res.data.orderSn, props.activityId);
99 } else {
100 // TODO：这里是英文环境支付
101 }
102 });
103 },
104 handleCloce() {
105 payment.showCodeDialog = false;
106 payment.qrCodeData = "";
107 clearInterval(timer);
108 timer = null;
109 router.replace({
110 path: "/seat/order",
111 });
112 },
113 });
114
115 const order = reactive({
116 data: null,
117 fetchData() {
118 confirmOrder({
119 actId: props.activityId,
120 openType: route.query.openType,
121 sessionId: route.query.sessionId,
122 sitePlace: route.query.sitePlace,
123 ticketType: route.query.ticketType,
124 seatIds: route.query.seatIds.split(","),
125 }).then((res) => {
126 this.data = res.data;
127 });
128 },
129 });
130
131 const audience = reactive({
132 data: [],
133 fetchData() {
134 viewPeopleList().then((res) => {
135 audience.data = res.data;
136 });
137 },
138 });
139
140 onUnmounted(() => {
141 clearInterval(timer);
142 });
143
144 audience.fetchData();
145 order.fetchData();
146 </script>
147
148 <template> 1 <template>
149 <div class="container"> 2 <div class="container" v-loading="loading">
150 <div class="title"> 3 <div class="title">
151 {{ languageFormat(language, "订单确认", "Order confirmation") }} 4 {{ languageFormat(language, "订单确认", "Order confirmation") }}
152 </div> 5 </div>
...@@ -232,7 +85,7 @@ order.fetchData(); ...@@ -232,7 +85,7 @@ order.fetchData();
232 </div> 85 </div>
233 <div class="ticket"> 86 <div class="ticket">
234 {{ order.data?.singlePrice }}<span v-if="language == 0">元</span 87 {{ order.data?.singlePrice }}<span v-if="language == 0">元</span
235 >{{ languageFormat(language, "票档", "Ticket file") }} x{{ 88 >{{ languageFormat(language, "票档", "Ticket file") }} x{{
236 order.data?.seatInfo?.length 89 order.data?.seatInfo?.length
237 }}{{ languageFormat(language, "张", "tickets") }} 90 }}{{ languageFormat(language, "张", "tickets") }}
238 </div> 91 </div>
...@@ -244,7 +97,7 @@ order.fetchData(); ...@@ -244,7 +97,7 @@ order.fetchData();
244 class="ticket" 97 class="ticket"
245 > 98 >
246 <span v-if="it.venueId == 1" 99 <span v-if="it.venueId == 1"
247 >{{ it.area }}{{ languageFormat(language, "区", "Zones") }} 100 >{{ it.area }}{{ languageFormat(language, "区", "Zones") }}
248 </span> 101 </span>
249 {{ it.pai }}{{ languageFormat(language, "排", "Row") }} {{ it.no 102 {{ it.pai }}{{ languageFormat(language, "排", "Row") }} {{ it.no
250 }}{{ languageFormat(language, "座", "Seat") }} ({{ 103 }}{{ languageFormat(language, "座", "Seat") }} ({{
...@@ -292,6 +145,160 @@ order.fetchData(); ...@@ -292,6 +145,160 @@ order.fetchData();
292 </div> 145 </div>
293 </template> 146 </template>
294 147
148 <script setup>
149 import {ref} from 'vue'
150 import { confirmOrder } from "./api/index.js";
151 import { ElMessage } from "element-plus";
152 import { payOrder, viewPeopleList, checkPaySuccess } from "./api/index.js";
153 import qrCodeDialog from "./components/qrCodeDialog.vue";
154 import qrcode from "qrcode";
155 import { languageFormat } from "./utils/language.js";
156 import { useStorage } from "@vueuse/core/index";
157 const language = useStorage("language", 0);
158 const loading = ref(false);
159 const route = useRoute();
160 const router = useRouter();
161
162 const props = defineProps({
163 activityId: [String, Number],
164 });
165
166 let timer = null;
167 const startCheckSuccessListener = (orderSn, actId) => {
168 timer = setInterval(() => {
169 checkPaySuccess({ orderSn }).then((res) => {
170 if (res.data) {
171 clearInterval(timer);
172 timer = null;
173 // 支付成功
174 payment.showCodeDialog = false;
175 ElMessage({
176 type: "success",
177 message: languageFormat(
178 language.value,
179 "支付成功",
180 "Payment succeeded"
181 ),
182 });
183 router.replace({
184 path: "/seat/order",
185 });
186 } else {
187 return false;
188 }
189 });
190 }, 3000);
191 };
192
193 const payment = reactive({
194 showCodeDialog: false,
195 btn_loading: false,
196 form: {
197 viewers: [],
198 phone: "",
199 },
200 qrInfo: {},
201 qrCodeData: "",
202 paymentHandle() {
203 if (payment.form.viewers.length != order.data?.seatInfo?.length)
204 return ElMessage({
205 type: "warning",
206 message: languageFormat(
207 language.value,
208 "观看人与购买票数不符",
209 "The number of viewers does not match the number of tickets purchased."
210 ),
211 });
212 if (!payment.form.phone)
213 return ElMessage({
214 type: "warning",
215 message: languageFormat(
216 language.value,
217 "请输入联系电话",
218 "Please enter the contact phone number."
219 ),
220 });
221 // if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(payment.form.phone)) {
222 // return ElMessage({
223 // type: "warning",
224 // message: languageFormat(
225 // language.value,
226 // "联系电话格式不正确",
227 // "The format of the contact phone is incorrect."
228 // ),
229 // });
230 // }
231 loading.value=true
232 payOrder({
233 contactPhone: payment.form.phone,
234 customerIds: payment.form.viewers,
235 orderToken: order.data?.orderToken,
236 payType: language.value == 0 ? 1 : 2,
237 paymentAmount: order.data?.paymentAmount,
238 }).then((res) => {
239 if (res.data.language == "zh-cn") {
240 payment.qrInfo = res.data;
241 qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
242 if (url) {
243 payment.qrCodeData = url;
244 }
245 });
246 payment.showCodeDialog = true;
247 startCheckSuccessListener(res.data.orderSn, props.activityId);
248 } else {
249 // TODO：这里是英文环境支付
250 location.href = res.data.scanCodeUrl
251 }
252 }).finally(()=>{
253 loading.value=false
254 });
255 },
256 handleCloce() {
257 payment.showCodeDialog = false;
258 payment.qrCodeData = "";
259 clearInterval(timer);
260 timer = null;
261 router.replace({
262 path: "/seat/order",
263 });
264 },
265 });
266
267 const order = reactive({
268 data: null,
269 fetchData() {
270 confirmOrder({
271 actId: props.activityId,
272 openType: route.query.openType,
273 sessionId: route.query.sessionId,
274 sitePlace: route.query.sitePlace,
275 ticketType: route.query.ticketType,
276 seatIds: route.query.seatIds.split(","),
277 }).then((res) => {
278 this.data = res.data;
279 });
280 },
281 });
282
283 const audience = reactive({
284 data: [],
285 fetchData() {
286 viewPeopleList().then((res) => {
287 audience.data = res.data;
288 });
289 },
290 });
291
292 onUnmounted(() => {
293 clearInterval(timer);
294 });
295
296 audience.fetchData();
297 order.fetchData();
298 </script>
299
300
301
295 <style scoped lang="scss"> 302 <style scoped lang="scss">
296 div { 303 div {
297 box-sizing: border-box; 304 box-sizing: border-box;
......
src/viewsPc/seat/order-detail.vue
...@@ -151,6 +151,7 @@ const detail = reactive({ ...@@ -151,6 +151,7 @@ const detail = reactive({
151 startCheckSuccessListener(detail.data.orderSn); 151 startCheckSuccessListener(detail.data.orderSn);
152 } else { 152 } else {
153 // TODO：这里是英文环境支付 153 // TODO：这里是英文环境支付
154 location.href = res.data.scanCodeUrl
154 } 155 }
155 }) 156 })
156 .finally(() => (detail.pay_loading = false)); 157 .finally(() => (detail.pay_loading = false));
...@@ -242,7 +243,7 @@ detail.fetchData(); ...@@ -242,7 +243,7 @@ detail.fetchData();
242 </script> 243 </script>
243 244
244 <template> 245 <template>
245 <div class="container"> 246 <div class="container" v-loading="detail.pay_loading">
246 <div class="left"> 247 <div class="left">
247 <!-- 票务信息 --> 248 <!-- 票务信息 -->
248 <div class="ticket"> 249 <div class="ticket">
......
src/viewsPc/seat/payticketLoser.vue 0 → 100644
1 <template>
2 <div>
3 <div class="box">
4 <el-card class="mb60 mt30" v-loading="loading">
5 <div class="text-center mt30">
6 <el-icon color="#e46962" size="80">
7 <CircleCloseFilled />
8 </el-icon>
9 <p class="text-success mb20">{{ language == 0 ? '支付失败' : 'Payment Failure!' }}</p>
10
11 <el-button type="primary" class="btn-lineG mb60" @click="goBillDetail" round>
12 {{ language == 0 ? '返回订单详情' : 'Return order details' }}
13 </el-button>
14 </div>
15 </el-card>
16 </div>
17 </div>
18 </template>
19
20 <script setup>
21 import {ref} from "vue";
22 import {useRoute, useRouter} from "vue-router";
23 import {onMounted} from "@vue/runtime-core";
24 import {callbackPalPay} from "/@/apiPc/booking";
25 import {useStorage} from "@vueuse/core/index";
26 import {payCallback} from '@/viewsPc/seat/api/index'
27
28
29 const route = useRoute()
30 const router = useRouter()
31 const language= useStorage('language',0)
32 const orderId = ref(route.query.orderId)
33 const form = ref({})
34 const loading = ref(false)
35
36 onMounted(() => {
37 const code = decodeURIComponent(orderId.value)
38 loading.value = false
39 // payCallback({tradeNo:code}).then(res => {
40 // loading.value = false
41 // form.value = res.data.orderType
42 // })
43 })
44
45 function goBillDetail() {
46 router.push({
47 path: '/seat/order_detail',
48 query: { orderSn: orderId.value, id: 1 },
49 })
50 }
51 </script>
52
53 <style scoped lang="scss">
54
55 </style>
src/viewsPc/seat/payticketOk.vue 0 → 100644
1 <template>
2 <div>
3 <div class="box">
4 <el-card class="mb60 mt30" v-loading="loading">
5 <div class="text-center mt30">
6 <el-icon color="#32B16C" size="80">
7 <SuccessFilled/>
8 </el-icon>
9 <p class="text-success mb20">{{ language == 0 ? '支付成功' : 'successfully!' }}</p>
10
11 <el-button type="primary" class="btn-lineG mb60" @click="goBillDetail" round>
12 {{ language == 0 ? '返回订单详情' : 'Return order details' }}
13 </el-button>
14 </div>
15 </el-card>
16 </div>
17 </div>
18 </template>
19
20 <script setup>
21 import {ref} from "vue";
22 import {useRoute, useRouter} from "vue-router";
23 import {onMounted} from "@vue/runtime-core";
24 import {useStorage} from "@vueuse/core/index";
25 import {payCallback} from '@/viewsPc/seat/api/index'
26
27 const route = useRoute()
28 const router = useRouter()
29 const language= useStorage('language',0)
30 const orderId = ref(route.query.orderId)
31 const form = ref()
32 const loading = ref(false)
33
34 onMounted(() => {
35 const code = decodeURIComponent(orderId.value)
36 loading.value = true
37 payCallback({tradeNo:code}).then(res => {
38 loading.value = false
39 form.value = res.data
40 })
41 })
42
43 function goBillDetail() {
44 router.push({
45 path: '/seat/order_detail',
46 query: { orderSn: form.value.orderSn, id: form.value.actId },
47 })
48 }
49 </script>
50
51 <style scoped lang="scss">
52
53 </style>
src/viewsPc/seat/utils/request.js
...@@ -12,7 +12,7 @@ const baseURL = import.meta.env.VITE_TICKET_BASE_API ...@@ -12,7 +12,7 @@ const baseURL = import.meta.env.VITE_TICKET_BASE_API
12 12
13 // const baseURL = "ticket"; //"http://book.xiaojinyu.games"; // 这里填入你的基础 API URL 13 // const baseURL = "ticket"; //"http://book.xiaojinyu.games"; // 这里填入你的基础 API URL
14 14
15 const timeout = 15000; // 请求超时时间 15 const timeout = 150000; // 请求超时时间
16 16
17 const http = axios.create({ 17 const http = axios.create({
18 baseURL, 18 baseURL,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!