Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
c3fb61cf by 杨炀
Options

no message

1 parent d793ca6b
Inline Side-by-side
Showing 6 changed files with 311 additions and 137 deletions
src/viewsPc/booking/pay.vue
......@@ -714,6 +714,10 @@ function getremark(){
})
}
function submitSJ() {
if(!lpName.value){
ElMessage.warning(language.value == 0 ? '请填写开票人' : 'Please fill in the invoice recipient')
return
}
loading.value = true
ElMessageBox.confirm(language.value == 0 ? '提交后无法修改开票人，确认提交吗？' : 'Confirm to submit ?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
......
src/viewsPc/match/pay.vue
......@@ -663,6 +663,10 @@ function getremark() {
}
function submitSJ() {
if(!lpName.value){
ElMessage.warning(language.value == 0 ? '请填写开票人' : 'Please fill in the invoice recipient')
return
}
loading.value = true
ElMessageBox.confirm(language.value == 0 ? '提交后无法修改开票人，确认提交吗？' : 'Confirm to submit ?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
......
src/viewsPc/seat/api/index.js
......@@ -54,4 +54,3 @@ export const payCallback = (data) =>
request("POST", `/api/order/palPayTicket/callback/`, data);
export const getCanInvoiceTicket = (data) =>
request("GET", `/api/order/getOrderInvoiceList`, data);
......
src/viewsPc/seat/order-detail.vue
<script setup>
import { onBeforeUnmount, reactive } from "vue";
import {getCurrentInstance, onBeforeUnmount, reactive} from "vue";
import {
cancelOrder,
getOrderDetail,
......@@ -7,11 +7,14 @@ import {
cancelPay,
checkPaySuccess,
} from "./api/index.js";
import {download} from './utils/request'
import qrCodeDialog from "./components/qrCodeDialog.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {ElMessageBox, ElMessage} from "element-plus";
import qrcode from "qrcode";
import { languageFormat } from "./utils/language.js";
import { useStorage } from "@vueuse/core/index";
import {languageFormat} from "./utils/language.js";
import {useStorage} from "@vueuse/core/index";
import {getBaseInfoByActiveId} from "@/apiPc/booking";
const language = useStorage("language", 0);
const route = useRoute();
......@@ -63,23 +66,23 @@ const props = defineProps({
let timer = null;
const startCheckSuccessListener = (orderSn, actId) => {
timer = setInterval(() => {
checkPaySuccess({ orderSn })
.then((res) => {
if (res.data) {
checkPaySuccess({orderSn})
.then((res) => {
if (res.data) {
clearInterval(timer);
timer = null;
// 支付成功
detail.showCodeDialog = false;
detail.fetchData();
ElMessage({type: "success", message: "支付成功"});
} else {
return false;
}
})
.catch((e) => {
clearInterval(timer);
timer = null;
// 支付成功
detail.showCodeDialog = false;
detail.fetchData();
ElMessage({ type: "success", message: "支付成功" });
} else {
return false;
}
})
.catch((e) => {
clearInterval(timer);
timer = null;
});
});
}, 1500);
};
......@@ -95,7 +98,7 @@ const detail = reactive({
minutes: 0,
seconds: 0,
fetchData() {
getOrderDetail({ orderSn: route.query.orderSn }).then((res) => {
getOrderDetail({orderSn: route.query.orderSn}).then((res) => {
detail.data = res.data;
detail.countDown(detail.data?.payEndTime);
});
......@@ -113,14 +116,14 @@ const detail = reactive({
if (totalTime >= 0) {
//获取分钟数
let minutes = Math.floor(
(((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60
(((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60
);
//获取秒数
let seconds = Math.floor(
(((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) % 60
(((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) % 60
)
.toString()
.padStart(2, "0");
.toString()
.padStart(2, "0");
detail.minutes = minutes;
detail.seconds = seconds;
......@@ -138,23 +141,23 @@ const detail = reactive({
if (detail.pay_loading) return;
detail.pay_loading = true;
// 中文支付
immediatePay({ orderSn: detail.data.orderSn, payType:detail.data?.language=='zh-cn'? 1:2 })
.then((res) => {
if (res.data.language == "zh-cn") {
detail.qrInfo = res.data;
qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
if (url) {
detail.qrCodeData = url;
}
});
detail.showCodeDialog = true;
startCheckSuccessListener(detail.data.orderSn);
} else {
// TODO：这里是英文环境支付
location.href = res.data.scanCodeUrl
}
})
.finally(() => (detail.pay_loading = false));
immediatePay({orderSn: detail.data.orderSn, payType: detail.data?.language == 'zh-cn' ? 1 : 2})
.then((res) => {
if (res.data.language == "zh-cn") {
detail.qrInfo = res.data;
qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
if (url) {
detail.qrCodeData = url;
}
});
detail.showCodeDialog = true;
startCheckSuccessListener(detail.data.orderSn);
} else {
// TODO：这里是英文环境支付
location.href = res.data.scanCodeUrl
}
})
.finally(() => (detail.pay_loading = false));
},
handleClose() {
detail.showCodeDialog = false;
......@@ -165,64 +168,66 @@ const detail = reactive({
// 取消支付
cancelPay() {
ElMessageBox.confirm(
languageFormat(
language.value,
"确认取消支付吗？",
"Are you sure to cancel?"
),
languageFormat(language.value, "提示", "tip"),
{
confirmButtonText: languageFormat(language.value, "确认", "confirm"),
cancelButtonText: languageFormat(language.value, "取消", "cancel"),
type: "warning",
draggable: true,
}
languageFormat(
language.value,
"确认取消支付吗？",
"Are you sure to cancel?"
),
languageFormat(language.value, "提示", "tip"),
{
confirmButtonText: languageFormat(language.value, "确认", "confirm"),
cancelButtonText: languageFormat(language.value, "取消", "cancel"),
type: "warning",
draggable: true,
}
)
.then(() => {
cancelPay({ orderSn: detail.data.orderSn }).then(() => {
detail.fetchData();
ElMessage({
type: "success",
message: languageFormat(
language.value,
"操作成功",
"Operate successfully"
),
.then(() => {
cancelPay({orderSn: detail.data.orderSn}).then(() => {
detail.fetchData();
ElMessage({
type: "success",
message: languageFormat(
language.value,
"操作成功",
"Operate successfully"
),
});
});
})
.catch(() => {
});
})
.catch(() => {});
},
// 取消购票
cancelOrder() {
ElMessageBox.confirm(
languageFormat(
language.value,
"确认取消购票吗？",
"Are you sure to cancel?"
),
languageFormat(language.value, "提示", "tip"),
{
confirmButtonText: languageFormat(language.value, "确认", "confirm"),
cancelButtonText: languageFormat(language.value, "取消", "cancel"),
type: "warning",
draggable: true,
}
languageFormat(
language.value,
"确认取消购票吗？",
"Are you sure to cancel?"
),
languageFormat(language.value, "提示", "tip"),
{
confirmButtonText: languageFormat(language.value, "确认", "confirm"),
cancelButtonText: languageFormat(language.value, "取消", "cancel"),
type: "warning",
draggable: true,
}
)
.then(() => {
cancelOrder({ orderSn: detail.data.orderSn }).then((res) => {
detail.fetchData();
ElMessage({
type: "success",
message: languageFormat(
language.value,
"操作成功",
"Operate successfully"
),
.then(() => {
cancelOrder({orderSn: detail.data.orderSn}).then((res) => {
detail.fetchData();
ElMessage({
type: "success",
message: languageFormat(
language.value,
"操作成功",
"Operate successfully"
),
});
});
})
.catch(() => {
});
})
.catch(() => {});
},
comeBack() {
router.push({
......@@ -240,6 +245,58 @@ onBeforeUnmount(() => {
});
detail.fetchData();
const {proxy} = getCurrentInstance()
const showSJDialog = ref(false)
const lpName = ref('')
const remark = ref('')
function downInvoice() {
getremark()
if (detail.data.receiptFlag == '0') {
showSJDialog.value = true
} else {
showSJ()
}
}
function getremark() {
getBaseInfoByActiveId('1778253367748993026').then(res => {
if (res.data) {
remark.value = res.data.remarks
}
})
}
function submitSJ() {
if(!lpName.value){
ElMessage.warning(language.value == 0 ? '请填写开票人' : 'Please fill in the invoice recipient')
return
}
ElMessageBox.confirm(language.value == 0 ? '提交后无法修改开票人，确认提交吗？' : 'Confirm to submit ?', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
type: 'warning'
}).then(() => {
showSJ()
})
}
const showSJ = () => {
// 查看电子收据预览信息
var obj = {
orderId: detail.data.orderSn,
type: 1
}
if (detail.data.receiptFlag == '0') {
obj.receiptInfo = lpName.value
}
// 报名
download(`/api/order/getReceipt/${obj.orderId}`, {
...obj
}, `Receipt_${new Date().getTime()}.pdf`)
showSJDialog.value = false
detail.fetchData()
}
</script>
<template>
......@@ -269,14 +326,14 @@ detail.fetchData();
<div style="width: 33%" class="td">{{ detail.data?.name }}</div>
<div style="width: 25%" class="td">{{ detail.data?.placeName }}</div>
<div style="width: 20%" class="td">
<span>{{ detail.data?.language=='zh-cn'? "¥" : "€" }}</span>
<span>{{ detail.data?.language == 'zh-cn' ? "¥" : "€" }}</span>
{{ detail.data?.singlePrice }}
</div>
<div style="width: 10%" class="td">
x{{ detail.data?.seatList?.length }}
</div>
<div style="width: 12%; text-align: right" class="td">
<span>{{ detail.data?.language=='zh-cn'? "¥" : "€" }}</span>
<span>{{ detail.data?.language == 'zh-cn' ? "¥" : "€" }}</span>
{{ detail.data?.payAmount }}
</div>
</div>
......@@ -305,15 +362,17 @@ detail.fetchData();
<div>
{{
detail.data?.openType == 0
? languageFormat(language, "日场", "Day session")
: languageFormat(language, "夜场", "Night session")
? languageFormat(language, "日场", "Day session")
: languageFormat(language, "夜场", "Night session")
}}
</div>
<div v-for="(it, index) in detail.data?.seatList" :key="index">
<span v-if="it.venueId == 1"
>{{ it.area
>{{
it.area
}}{{ languageFormat(language, "区", "Zones") }}</span
>{{ it.pai }}{{ languageFormat(language, "排", "Row") }}{{ it.no
>{{ it.pai }}{{ languageFormat(language, "排", "Row") }}{{
it.no
}}{{ languageFormat(language, "座", "Seat") }} ({{
it.venueId == 1 ? "B6" : "B4"
}}{{ languageFormat(language, "馆", "Venue") }})
......@@ -324,27 +383,27 @@ detail.fetchData();
{{ languageFormat(language, "订单编号", "Order No") }}：{{ detail.data?.orderSn }}
</div>
<div>
{{ languageFormat(language, "创建时间", "Order Time") }}：{{detail.data?.orderTime }}
{{ languageFormat(language, "创建时间", "Order Time") }}：{{ detail.data?.orderTime }}
</div>
</div>
<div style="width: 33%" class="td flex-col">
<div>
{{ languageFormat(language, "联系电话", "Telephone") }}：{{ detail.data?.contactPhone }}
<div>&nbsp;</div>
<!-- <br>-->
<!-- <br>-->
</div>
<div>
{{languageFormat(language,'支付方式','Form of payments')}}：{{detail.data?.language=='en-us'?'PayPal':'微信'}}
{{ languageFormat(language, '支付方式', 'Form of payments') }}：{{ detail.data?.language == 'en-us' ? 'PayPal' : '微信' }}
</div>
</div>
<!-- <div style="width: 20%" class="td ">-->
<!-- <div>-->
<!--&lt;!&ndash; {{ languageFormat(language, "联系电话", "Telephone") }}：{{ detail.data?.contactPhone }}&ndash;&gt;-->
<!-- 微信-->
<!-- </div>-->
<!-- <div style="width: 20%" class="td ">-->
<!-- <div>-->
<!--&lt;!&ndash; {{ languageFormat(language, "联系电话", "Telephone") }}：{{ detail.data?.contactPhone }}&ndash;&gt;-->
<!-- 微信-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<!-- 购票人 -->
......@@ -354,9 +413,9 @@ detail.fetchData();
</div>
<div class="people">
<div
v-for="(it, index) in detail.data?.customerList"
:key="index"
class="p_info"
v-for="(it, index) in detail.data?.customerList"
:key="index"
class="p_info"
>
<div>{{ it.name }}</div>
<div class="idcard">
......@@ -377,13 +436,13 @@ detail.fetchData();
{{ languageFormat(language, "订单状态", "Order Status") }}
</div>
<div
class="value"
:style="{ color: status[detail.data?.state]?.color }"
class="value"
:style="{ color: status[detail.data?.state]?.color }"
>
{{
language == 0
? status[detail.data?.state]?.txt
: status[detail.data?.state]?.text_en
? status[detail.data?.state]?.txt
: status[detail.data?.state]?.text_en
}}
</div>
</div>
......@@ -392,10 +451,10 @@ detail.fetchData();
{{ languageFormat(language, "订单金额", "Order amount") }}
</div>
<div
class="value"
:style="{ color: status[detail.data?.state]?.color }"
class="value"
:style="{ color: status[detail.data?.state]?.color }"
>
<span>{{ detail.data?.language=='zh-cn'? "¥" : "€" }}</span>
<span>{{ detail.data?.language == 'zh-cn' ? "¥" : "€" }}</span>
{{ detail.data?.payAmount }}
</div>
</div>
......@@ -410,16 +469,13 @@ detail.fetchData();
</div>
<div v-else>
<!-- v-if="detail.data?.state == 1 && detail.data?.isRefund" -->
<div
v-if="detail.data?.state == 1 && detail.data?.isRefund"
class="btn_box"
>
<div v-if="detail.data?.state == 1 && detail.data?.isRefund" class="btn_box">
<div class="can_pay" @click="detail.cancelOrder()">
{{
languageFormat(
language,
"取消购票",
"Cancel the ticket purchase"
language,
"取消购票",
"Cancel the ticket purchase"
)
}}
</div>
......@@ -432,23 +488,33 @@ detail.fetchData();
<div class="pay_dis">
{{
languageFormat(
language,
"请联系工作人员",
"Please contact the staff"
language,
"请联系工作人员",
"Please contact the staff"
)
}}
</div>
</div>
<div class="btn_box" v-if="detail.data?.state == 1">
<el-button round class="btn-lineG w100" size="large" type="primary"
@click="downInvoice">
<el-icon>
<Download/>
</el-icon>
{{ languageFormat(language, "下载收据", "DownLoad Invoice") }}
</el-button>
</div>
</div>
</div>
<div v-if="detail.data?.state == 0" class="tip">
<span v-if="language == 0"
>请尽快完成支付，还剩{{ detail.minutes }}分{{
>请尽快完成支付，还剩{{ detail.minutes }}分{{
detail.seconds
}}秒</span
>
<span v-if="language == 1"
>Time left {{ detail.minutes }}:{{ detail.seconds }}</span
>Time left {{ detail.minutes }}:{{ detail.seconds }}</span
>
</div>
</div>
......@@ -459,15 +525,34 @@ detail.fetchData();
/> -->
<el-dialog
v-model="detail.showCodeDialog"
title="支付"
width="300"
@closed="detail.handleClose()"
v-model="detail.showCodeDialog"
title="支付"
width="300"
@closed="detail.handleClose()"
>
<div>
<img class="qrcode" :src="detail.qrCodeData" />
<img class="qrcode" :src="detail.qrCodeData"/>
</div>
</el-dialog>
<el-dialog :title="language==0?'开收据':'Issue a receipt'" v-model="showSJDialog" width="460px"
:close-on-click-modal="false" :close-on-press-escape="false">
<div class="flex">
<el-form-item :label="language==0?'开票人':'Name'">
<div class="flex">
<el-input v-model="lpName" :placeholder="language==0?'请输入开票人':'Please enter your name'"></el-input>
<el-button type="primary" @click="submitSJ">{{ language == 0 ? '提交并下载' : 'Submit' }}</el-button>
</div>
</el-form-item>
</div>
<div class="tip mt20" v-if="remark">
<label>{{ language == 0 ? '开电子收据须知' : 'Receipt notice' }}:</label>
<div class="pd10">
{{ remark }}
</div>
</div>
</el-dialog>
</div>
</template>
......@@ -477,22 +562,26 @@ detail.fetchData();
height: 200px;
margin: 0 auto;
}
.container {
width: 1200px;
margin: 0 auto;
padding: 20px 0;
display: flex;
gap: 20px;
.left {
width: 780px;
// 票务信息
.ticket {
background-color: #fff;
padding: 0 20px;
.th {
display: flex;
justify-content: space-between;
padding: 20px 0;
.td {
font-weight: bold;
font-size: 16px;
......@@ -500,15 +589,18 @@ detail.fetchData();
line-height: 24px;
}
}
.line {
width: 740px;
height: 1px;
background: #eee;
}
.tr {
display: flex;
justify-content: space-between;
padding: 20px 0;
.td {
font-weight: 400;
font-size: 16px;
......@@ -517,15 +609,18 @@ detail.fetchData();
}
}
}
// 座位
.seat_box {
background-color: #fff;
padding: 0 20px;
margin-top: 20px;
.th {
display: flex;
justify-content: space-between;
padding: 20px 0;
.td {
font-weight: bold;
font-size: 16px;
......@@ -533,21 +628,25 @@ detail.fetchData();
line-height: 24px;
}
}
.tr {
display: flex;
justify-content: space-between;
padding: 20px 0;
.td {
font-weight: 400;
font-size: 16px;
color: #333333;
line-height: 24px;
}
.flex-col {
display: flex;
flex-direction: column;
gap: 16px;
}
.tag_t {
padding: 1px 10px;
font-weight: 400;
......@@ -559,27 +658,32 @@ detail.fetchData();
}
}
}
// 购票人
.pay_ticket {
background-color: #fff;
padding: 20px;
margin-top: 20px;
.title {
font-weight: bold;
font-size: 16px;
color: #333333;
margin-bottom: 28px;
}
.people {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px 50px;
.p_info {
font-weight: 400;
font-size: 16px;
color: #333333;
line-height: 24px;
.idcard {
color: #999999;
}
......@@ -587,11 +691,14 @@ detail.fetchData();
}
}
}
.right {
width: 400px;
.balance {
background-color: #fff;
padding: 20px;
.title {
font-weight: bold;
font-size: 20px;
......@@ -599,31 +706,37 @@ detail.fetchData();
line-height: 30px;
margin-bottom: 28px;
}
.cell {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
&:last-child {
margin: 0;
}
.label {
font-weight: 400;
font-size: 16px;
color: #333333;
}
.value {
font-weight: 400;
font-size: 16px;
color: #ff8124;
}
}
.btn_box {
border-top: 1px solid #eee;
padding-top: 20px;
display: flex;
gap: 20px;
user-select: none;
.pay_dis {
width: 360px;
height: 40px;
......@@ -636,6 +749,7 @@ detail.fetchData();
text-align: center;
cursor: pointer;
}
.pay {
width: 170px;
height: 40px;
......@@ -648,6 +762,7 @@ detail.fetchData();
text-align: center;
cursor: pointer;
}
.can_pay {
width: 170px;
height: 40px;
......@@ -663,6 +778,7 @@ detail.fetchData();
}
}
}
.tip {
font-weight: 400;
font-size: 16px;
......@@ -673,6 +789,7 @@ detail.fetchData();
}
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
......
src/viewsPc/seat/utils/request.js
......@@ -3,9 +3,11 @@
// import axios from "axios";
import axios from "axios/dist/axios";
import { getToken } from "./local-store";
import { ElMessage } from "element-plus";
import {ElLoading, ElMessage} from "element-plus";
import { saveAs } from 'file-saver'
import { useStorage } from "@vueuse/core/index";
import {blobValidate, tansParams} from "@/utils/ruoyi";
import errorCode from "@/utils/errorCode";
const language = useStorage("language", 0);
const baseURL = import.meta.env.VITE_TICKET_BASE_API
// const baseURL = VITE_TICKET_BASE_API; //"http://book.xiaojinyu.games"; // 这里填入你的基础 API URL
......@@ -44,6 +46,13 @@ http.interceptors.request.use(
http.interceptors.response.use(
(response) => {
// 判断是否有异常
if (
response.request.responseType === 'blob' ||
response.request.responseType === 'arraybuffer'
) {
return response
}
let error = null; // 若无异常此值为null
if (response.status !== 200) {
error = Error(`Request failed with statuCode ${response.status}`);
......@@ -54,6 +63,7 @@ http.interceptors.response.use(
return Promise.reject(response.data);
}
return response.data;
},
(error) => {
......@@ -62,13 +72,53 @@ http.interceptors.response.use(
}
);
export function download(url, params, filename, config) {
return http.post( url,params, {
transformRequest: [
(params) => {
return tansParams(params)
}
],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
...config
})
.then(async(res) => {
const data = res.data
console.log(blobValidate(data))
const isBlob = blobValidate(data)
if (isBlob) {
let hz = ''
if (res.headers['content-disposition'].indexOf('zip') > -1 || res.headers['content-type'].indexOf('pdf') > -1) {
// if (res.headers['content-type'].indexOf('zip') > -1) {
// hz = '.zip'
// } else if (res.headers['content-type'].indexOf('pdf') > -1) {
// hz = '.pdf'
// }
const index = res.headers['content-disposition'].indexOf('=')
hz = res.headers['content-disposition'].substr(index + 1, res.headers['content-disposition'].length)
}
const blob = new Blob([data])
saveAs(blob, hz ? filename = decodeURIComponent(hz) : filename)
} else {
const resText = await data.text()
const rspObj = JSON.parse(resText)
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
ElMessage.error(errMsg)
}
}).catch((r) => {
console.error(url,r)
ElMessage.error('下载文件出现错误，请联系管理员！')
})
}
// 封装请求函数
const request = (method, url, data = null) => {
function request(method, url, data = null){
return http({
method,
url,
data,
});
};
}
export default request;
......
vite.config.js
......@@ -90,7 +90,7 @@ export default defineConfig(({ mode, command }) => {
rewrite: (p) => p.replace(/^\/dev-api/, '')
},
'/ticket': {
target: 'http://192.168.1.131:8081/',
target: 'http://192.168.1.131:8098/',
// target: 'http://192.168.1.131:8081/',
// target: 'https://jijin.wtwuxicenter.com/h5',
// target: 'https://ticketh5.wdsfwuxicenter.com/h5/stage-api',
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!