Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
47440f2a by zhangmeng
Options

票务

1 parent cf591983
Inline Side-by-side
Showing 8 changed files with 1332 additions and 30 deletions
src/apiPc/booking.js
......@@ -410,3 +410,56 @@ export function ppOtaReceipt(query) {
params:query
})
}
// 获取票务信息
export function getTicketInfoByActivityId(params) {
return request({
url: `/ota/activityTicket/getTicketInfoByActivityId`,
method: 'get',
params
})
}
// 根据赛事ID获取票档
export function getTicketListApi(params) {
return request({
url: `/ota/activityTicket/getTicketList`,
method: 'get',
params
})
}
// 根据赛事ID获取票档
export function listApi(params) {
return request({
url: `/ota/activityType/list`,
method: 'get',
params
})
}
// 获取当前用户的观影人列表
export function customerListApi(params) {
return request({
url: `/ota/customer/list`,
method: 'get',
params
})
}
// 新增观影人
export function aadCustomer(data) {
return request({
url: `/ota/customer`,
method: 'post',
data
})
}
// 删除观影人
export function delCustomer(id) {
return request({
url: `/ota/customer/${id}`,
method: 'delete',
})
}
......
src/routerPc/en.js
......@@ -344,12 +344,24 @@ export const constantRoutes = [
redirect: '/booking',
children: [
{
path: 'ticket/:cptId',
component: () => import('@/viewsPc/booking/ticket'),
path: 'ticket/:activeId',
component: () => import('@/viewsPc/booking/ticket/index.vue'),
name: 'ticket',
meta: { title: 'Ticket Booking' }
},
{
path: 'ticket/:activeId/:latId',
component: () => import('@/viewsPc/booking/ticket/confirmOrder.vue'),
name: 'confirmOrder',
meta: { title: 'confirmOrder' }
},
{
path: 'ticket/peopleManage',
component: () => import('@/viewsPc/booking/ticket/peopleManage.vue'),
name: 'peopleManage',
meta: { title: 'peopleManage' }
},
{
path: 'hotel/:cptId',
component: () => import('@/viewsPc/booking/hotel'),
name: 'hotel',
......
src/viewsPc/booking/ticket.vue deleted 100644 → 0
<template>
<div>
<div class="box">
<el-card class="mt30">
票务预订
</el-card>
</div>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>
src/viewsPc/booking/ticket/confirmOrder.vue 0 → 100644
<template>
<el-card class="container" >
<div v-loading="loading" >
<div class="title">
{{ languageFormat(language, "订单确认", "Order confirmation") }}
</div>
<div class="content pd20">
<el-row gutter="20">
<el-col :lg="16" class="left">
<div class="info">
<div class="name">{{ order.activityName }}</div>
<div class="address">{{ order.placeName }}</div>
</div>
<div class="ticket_info mb20">
<div class="tit_box">
<div class="line"></div>
<div class="txt">
{{ languageFormat(language, "订票信息", "Ticket Info") }}
</div>
</div>
<div class="form">
<el-form label-width="100px">
<el-form-item
:label="language == 0 ? '联系人电话' : 'contact phone'"
>
<el-input
v-model="form.phone"
:placeholder=" language == 0 ? '请输入联系电话' : 'Please enter the contact phone number'" style="width: 320px"
/>
</el-form-item>
<el-form-item :label="language == 0 ? '观看人' : 'Viewer'">
<div class="p_box">
<div class="people">
<el-checkbox-group
v-model="form.viewers"
:max="order.length"
>
<div
v-for="(it, index) in cousList"
:key="index"
class="prople_item"
>
<div>
<div class="name">{{ it.name }}</div>
<div class="idcard">{{ it.idCard }}</div>
</div>
<el-checkbox :value="it.id" />
</div>
</el-checkbox-group>
</div>
<!-- button -->
<div
class="btn"
@click="$router.push({ path: '/booking/ticket/peopleManage' })"
>
{{ languageFormat(language, "新增", "Add") }}
</div>
</div>
</el-form-item>
</el-form>
</div>
</div>
</el-col>
<el-col :lg="8" class="right">
<div class="tit_box">
<div class="line"></div>
<div class="txt">
{{ languageFormat(language, "订单明细", "Order summary") }}
</div>
</div>
<div class="detail">
<div class="detail_top">
<div class="time">
{{ order.data?.dateStr }}
<span v-if="order.data?.ticketType == 1" class="tag_t">
{{ languageFormat(language, "套票", "Package ticket") }}
</span>
</div>
<div class="ticket">
{{ order?.singlePrice }}<span v-if="language == 0">元</span
>{{ languageFormat(language, "票档", "Ticket file") }} x{{
order?.seatInfo?.length
}}{{ languageFormat(language, "张", "tickets") }}
</div>
</div>
<div class="detail_center">
<div
v-for="(it, index) in order.seatInfo"
:key="index"
class="ticket"
>
<span v-if="it.venueId == 1"
>{{ it.area }}{{ languageFormat(language, "区", "Zones") }}
</span>
{{ it.pai }}{{ languageFormat(language, "排", "Row") }} {{
it.no
}}{{ languageFormat(language, "座", "Seat") }} ({{
it.venueId == 1 ? "B6" : "B4"
}}{{ languageFormat(language, "馆", "Venue") }})
</div>
</div>
<div class="detail_b">
<div class="sum_txt">
{{ languageFormat(language, "共计", "Total") }}
</div>
<div class="price_num">
<span>{{ language == 0 ? "¥" : "€" }}</span>
{{ order?.paymentAmount }}
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="footer">
<div>
<span class="label">
{{ languageFormat(language, "共计金额", "Subtotal") }}：
</span>
<span class="value">
<span>{{ language == 0 ? "¥" : "€" }}</span>
{{ order.data?.paymentAmount }}
</span>
</div>
<div class="pay" @click="payment.paymentHandle()">
{{ languageFormat(language, "立即支付", "Pay Now") }}
</div>
</div>
<el-dialog
v-model="payment.showCodeDialog"
title="支付"
width="300"
@closed="payment.handleCloce()"
>
<div>
<img alt :src="payment.qrCodeData" class="qrcode"/>
</div>
</el-dialog>
</div>
</el-card>
</template>
<script setup>
import {ref} from 'vue'
import {customerListApi} from'@/apiPc/booking'
import {confirmOrder} from "@/viewsPc/seat/api/index.js";
import {ElMessage} from "element-plus";
import {payOrder, viewPeopleList, checkPaySuccess} from "@/viewsPc/seat/api/index.js";
// import qrCodeDialog from "./components/qrCodeDialog.vue";
import qrcode from "qrcode";
import {languageFormat} from "@/viewsPc/seat/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 order = ref({
data:{}
})
const audience = ref({})
const payment = ref({})
const props = defineProps({
activityId: [String, Number],
});
const form = ref({})
const cousList = ref([])
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;
// });
// },
// });
// audience.fetchData();
// order.fetchData();
customerList()
async function customerList(){
const res =await customerListApi()
cousList.value=res.rows
}
</script>
<style lang="scss" scoped>
div {
box-sizing: border-box;
}
.qrcode {
width: 200px;
height: 200px;
margin: 0 auto;
}
.container {
//padding: 20px 0;
width: 1200px;
margin: 20px auto;
.tag_t {
padding: 1px 10px;
font-weight: 400;
font-size: 12px;
color: #493ceb;
border-radius: 6px;
border: 1px solid #453dea;
margin-left: 5px;
}
.title {
padding: 11px;
text-align: center;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
font-size: 18px;
color: #ffffff;
}
.content {
background-color: #fff;
}
.line {
width: 4px;
height: 18px;
background: linear-gradient(180deg, #493ceb 0%, #8623fc 100%);
border-radius: 4px;
}
.left {
.info {
background: rgba(69, 61, 234, 0.04);
border-radius: 8px;
border: 1px solid #d3d1f6;
padding: 20px 0 28px 33px;
margin-bottom: 20px;
.name {
font-weight: 500;
font-size: 18px;
color: #000000;
margin-bottom: 20px;
}
.address {
font-weight: 400;
font-size: 14px;
color: #929aa0;
}
}
.ticket_info {
.tit_box {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
.txt {
font-weight: bold;
font-size: 16px;
color: #493ceb;
}
}
.form {
min-height: 464px;
padding: 20px 60px;
border-radius: 5px;
border: 1px solid #dcdfe6;
.p_box {
display: flex;
width: 100%;
gap: 10px;
max-width: 400px;
.people {
width: 100%;
background: #fbfcfd;
border-radius: 2px;
border: 1px solid #dcdfe6;
padding: 0 14px;
.prople_item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid #dcdfe6;
&:last-child {
border: none;
}
.name {
font-size: 16px;
color: #929aa0;
margin-bottom: 20px;
}
.idcard {
font-size: 10px;
color: #929aa0;
}
}
}
.btn {
width: 90px;
height: 40px;
background: #fbfcfd;
border-radius: 20px;
border: 1px solid #493ceb;
margin-top: 10px;
font-size: 14px;
color: #493ceb;
line-height: 40px;
text-align: center;
cursor: pointer;
user-select: none;
}
}
}
}
}
.right {
.tit_box {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
.txt {
font-weight: bold;
font-size: 16px;
color: #493ceb;
}
}
.detail {
padding: 15px 26px;
border-radius: 5px;
border: 1px solid #dcdfe6;
.detail_top {
padding-bottom: 13px;
border-bottom: 1px solid #dcdfe6;
.time {
font-weight: 500;
font-size: 18px;
color: #2d373f;
line-height: 25px;
margin-bottom: 8px;
}
.ticket {
font-size: 16px;
color: #2d373f;
}
}
.detail_center {
margin-top: 14px;
display: flex;
flex-direction: column;
padding-bottom: 13px;
border-bottom: 1px solid #dcdfe6;
gap: 8px;
.ticket {
font-size: 16px;
color: #2d373f;
}
}
.detail_b {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
.sum_txt {
font-weight: 600;
font-size: 18px;
color: #2d373f;
line-height: 25px;
}
.price_num {
font-weight: 600;
font-size: 36px;
color: #ff8124;
line-height: 50px;
}
}
}
}
.footer {
display: flex;
justify-content: space-between;
height: 70px;
align-items: center;
background: #ffffff;
box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
margin-top: 9px;
padding: 0 30px;
.label {
font-size: 16px;
color: #7b7f83;
line-height: 22px;
}
.value {
font-size: 22px;
color: #ff8124;
line-height: 30px;
font-weight: 600;
}
.pay {
width: 200px;
height: 40px;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
border-radius: 20px;
font-weight: 500;
font-size: 16px;
color: #ffffff;
line-height: 40px;
text-align: center;
cursor: pointer;
user-select: none;
}
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
</style>
src/viewsPc/booking/ticket/index.vue 0 → 100644
<template>
<div>
<!-- top -->
<div class="container top">
<img :src="fillImgUrl(matchForm.ticketImg)" class="cover_img"/>
<div class="info">
<div class="title">{{ matchForm.name }}</div>
<div class="time">
{{ languageFormat(language, "时间", "Event Date & Time") }}：{{
matchForm.ticketStart
? dayjs(matchForm.ticketStart).format("YYYY.MM.DD")
: ""
}}
{{
matchForm.ticketStart
? getDayName(
new Date(matchForm.ticketStart),
language == 1 ? "en-US" : "zh-CN"
)
: ""
}}
—
{{
matchForm.ticketEnd
? dayjs(matchForm.ticketEnd).format("YYYY.MM.DD")
: ""
}}
{{
matchForm.ticketEnd
? getDayName(
new Date(matchForm.ticketEnd),
language == 1 ? "en-US" : "zh-CN"
)
: ""
}}
</div>
<div class="address">
{{ languageFormat(language, "地址", "Location") }}：{{
matchForm.address
}}
</div>
<!-- 时间 -->
<div class="select_item_box">
<div class="label">
{{ languageFormat(language, "票档", "Tickets") }}
</div>
<div class="select_item">
<div
v-for="(it, index) in tickClass"
:key="index"
:class="[
it.id == selectForm.latId ? 'tagActive' : 'tag',
]"
@click="select(it)"
>
{{ it.name }}
</div>
</div>
</div>
<!-- 时间 -->
<div class="select_item_box">
<div class="label">
{{ languageFormat(language, "时间", "Event Date & Time") }}
</div>
<div class="select_item">
<div
v-for="(it, index) in tickList"
:key="index"
:class="[
it.id == selectForm.id ? 'tagActive' : 'tag',
]"
@click="selectTick(it)"
>
{{ it.name }}
</div>
</div>
</div>
<!-- button -->
<div class="btn forPc" @click="toSelectSeat()">
{{ languageFormat(language, "添加观影人", "Add Moviegoers") }}
</div>
</div>
</div>
<div class="container bottom">
<div class="rich_content" v-html="matchForm.ticketDes"></div>
</div>
</div>
</template>
<script setup>
import {ref, reactive, onMounted, watch} from "vue";
import {listApi, getTicketInfoByActivityId, getTicketListApi} from '@/apiPc/booking'
import {dayjs} from "element-plus";
import useUserStore from "@/store/modules/user";
import {ElMessageBox, ElMessage} from "element-plus";
import {languageFormat, getDayName} from "@/viewsPc/seat/utils/language";
import {fillImgUrl} from "/@/utils/ruoyi";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const activeId = ref(route.params.activeId)
const props = defineProps({
activityId: [String, Number],
});
const matchForm = ref({})
const tickClass = ref([])
const selectForm = ref({
latId: null,
id: null
})
const tickList = ref([])
// 获取票务信息
getDetail()
async function getDetail() {
const res = await getTicketInfoByActivityId({activityId: activeId.value})
matchForm.value = res.data
}
// 根据赛事ID获取票档
getTicketList()
async function getTicketList() {
const res = await getTicketListApi({activityId: activeId.value})
tickClass.value = res.rows
selectForm.value.latId = tickClass.value?.[0]?.id
await getTicketListType()
}
// 根据票档获取场次
async function getTicketListType() {
const res = await listApi({latId: selectForm.value.latId})
tickList.value = res.rows
}
function select(v) {
selectForm.value.latId = v.id
getTicketListType()
}
function selectTick(v) {
selectForm.value.id = v.id
}
function toSelectSeat() {
if (!selectForm.value.latId) return ElMessage.error("请选择票档")
if (!selectForm.value.id) return ElMessage.error("请选择时间")
router.push({
name:'confirmOrder',
params: {
activeId: activeId.value,
latId: selectForm.value.latId,
id: selectForm.value.id
}
})
}
</script>
<style lang="scss" scoped>
.forWei {
display: none
}
.container {
width: 1200px;
margin: 0 auto;
background-color: #fff;
box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
border-radius: 8px;
box-sizing: border-box;
font-family: SourceHanSansCN, SourceHanSansCN;
padding-bottom: 20px;
}
.top {
display: flex;
padding: 19px;
margin-top: 26px;
.cover_img {
width: 390px;
height: 517px;
object-fit: fill;
margin-right: 36px;
}
.info {
padding-top: 12px;
.title {
font-weight: bold;
font-size: 28px;
color: #000000;
line-height: 42px;
margin-bottom: 34px;
}
.time {
font-weight: 500;
font-size: 16px;
color: #4a4a4a;
line-height: 24px;
margin-bottom: 16px;
}
.address {
font-weight: 500;
font-size: 16px;
color: #4a4a4a;
line-height: 24px;
margin-bottom: 33px;
}
.select_item_box {
display: flex;
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
.label {
font-weight: 600;
font-size: 16px;
color: #000;
line-height: 24px;
margin-right: 12px;
flex-shrink: 0;
}
.select_item {
display: flex;
flex-wrap: wrap;
gap: 10px;
user-select: none;
.tag_t {
padding: 1px 15px;
font-weight: 400;
font-size: 14px;
color: #493ceb;
border-radius: 6px;
border: 1px solid #453dea;
margin-left: 5px;
}
.tag {
display: flex;
padding: 12px 18px;
background: #eeeeee;
border-radius: 4px;
border: 1px solid #29343c;
font-size: 14px;
color: #4a4a4a;
cursor: pointer;
}
.tagActive {
display: flex;
padding: 12px 18px;
background: #fff;
border-radius: 4px;
border: 1px solid #493ceb;
font-size: 14px;
color: #493ceb;
cursor: pointer;
}
.tagDisabled {
padding: 12px 18px;
background: #878787;
border-radius: 4px;
border: 1px solid #29343c;
font-size: 14px;
color: #4a4a4a;
cursor: no-drop;
}
}
}
.btn {
width: 175px;
height: 40px;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
border-radius: 20px;
line-height: 40px;
text-align: center;
font-weight: 500;
font-size: 16px;
color: #ffffff;
cursor: pointer;
}
}
}
.bottom {
padding: 50px;
margin-top: 30px;
margin-bottom: 30px;
.title {
padding: 20px 30px;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
font-weight: bold;
font-size: 20px;
color: #ffffff;
line-height: 30px;
margin-bottom: 30px;
}
.rich_content {
margin-top: 30px;
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.forWei {
display: block
}
.top {
//transform: scale(0.5);transform-origin: left top;
.cover_img {
width: 120px;
height: 160px;
margin-right: 15px;
}
.info {
.title {
font-size: 14px;
}
.time, .address, .label, .tip {
font-size: 12px;
}
.title, .time, .address, .tip, .select_item_box {
margin-bottom: 3px;
}
.select_item_box {
.label {
font-size: 12px;
}
.select_item .tag {
padding: 2px 10px;
font-size: 12px;
}
.select_item .tagActive {
padding: 2px 10px;
font-size: 12px;
}
.select_item .tagDisabled {
padding: 2px 10px;
font-size: 12px;
}
}
}
}
.bottom {
padding: 0
}
}
</style>
src/viewsPc/booking/ticket/peopleManage.vue 0 → 100644
<template>
<el-card class="container">
<div class="title">
<div
class="add_btn"
@click="addPeople"
>
{{ languageFormat(language, "新增", "Add") }}
</div>
{{ languageFormat(language, "观影人管理", "Viewers") }}
</div>
<div class="content">
<div class="people_box">
<div
v-for="(it, index) in cousList"
:key="index"
class="people_item"
>
<div class="name">{{ it.name }}</div>
<div class="idcard">
{{ languageFormat(language, "证件号", "Identity Card") }}：{{
it.idCard
}}
</div>
<div class="btn" @click="deletePeople(it.id)">
{{ languageFormat(language, "删除", "delete") }}
</div>
</div>
</div>
</div>
<el-dialog
v-model="show"
center
title="新增观影人"
width="700"
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px" size="large" style="margin: 80px">
<el-form-item label="姓名" required prop="name">
<el-input v-model="form.name" size=""></el-input>
</el-form-item>
<el-form-item label="证件号" required prop="idCard">
<el-input v-model="form.idCard"></el-input>
</el-form-item>
</el-form>
<br>
<br>
<span slot="footer" class="dialog-footer">
<div style="text-align: center">
<el-button class="can_pay" @click="show = false">取 消</el-button>
<el-button class="pay" type="primary" @click="submit">确 定</el-button>
</div>
</span>
<br>
<br>
<br>
</el-dialog>
</el-card>
</template>
<script setup>
import {reactive, ref} from "vue";
import {customerListApi,aadCustomer,delCustomer} from '@/apiPc/booking'
import {deleteViewPeople, viewPeopleList} from "@/viewsPc/seat/api/index.js";
import {ElMessageBox, ElMessage} from "element-plus";
import {languageFormat} from "@/viewsPc/seat/utils/language.js";
import {useStorage} from "@vueuse/core/index";
const language = useStorage("language", 0);
const audience = reactive({
data: [],
fetchData() {
viewPeopleList().then((res) => {
audience.data = res.data;
});
},
deletePeople(id) {
ElMessageBox.confirm(
languageFormat(
language.value,
"确认删除该观看人吗？",
"Are you sure to delete this viewer?"
),
languageFormat(language.value, "提示", "Reminder"),
{
confirmButtonText: languageFormat(language.value, "确认", "confirm"),
cancelButtonText: languageFormat(language.value, "取消", "cancel"),
type: "warning",
draggable: true,
}
)
.then(() => {
deleteViewPeople({id}).then(() => {
audience.fetchData();
ElMessage({
type: "success",
message: languageFormat(
language.value,
"操作成功",
"Operate successfully"
),
});
});
})
.catch(() => {
});
},
});
const cousList = ref([])
const show = ref(false)
const form = ref({})
const formRef = ref(null)
const rules = ref({
name: [
{required: true, message: "请输入姓名", trigger: "blur"},
],
idCard: [
{required: true, message: "请输入证件号", trigger: "blur"},
],
})
customerList()
async function customerList() {
const res = await customerListApi()
// cousList.value = res.rows
cousList.value = [{},{}]
}
function addPeople() {
show.value = true
formRef.value?.resetFields()
}
function submit() {
formRef.value.validate((valid) => {
if (valid) {
console.log(form.value);
aadCustomer(form.value).then(res=>{
show.value = false
customerList()
ElMessage.success('添加成功')
})
} else {
return ElMessage.waiting('请完善信息')
}
})
}
async function deletePeople(v){
const res =await delCustomer(v.id)
if(res.code===200){
ElMessage.success('删除成功')
await customerList()
}
}
</script>
<style lang="scss" scoped>
div {
box-sizing: border-box;
}
:deep(.el-dialog) {
padding: 0;
.el-dialog__header {
height: 50px;
line-height: 50px;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
.el-dialog__title {
color: #fff;
}
}
}
.pay {
width: 200px;
height: 40px;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
border-radius: 20px;
font-weight: 500;
font-size: 16px;
color: #ffffff;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.can_pay {
width: 200px;
height: 40px;
background: #f6f6f6;
border-radius: 20px;
font-weight: 500;
font-size: 16px;
color: #999;
line-height: 40px;
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
.container {
//padding: 20px 0;
//:deep(.el-card__body){
// padding: 0;
//}
width: 1200px;
margin: 20px auto;
.title {
position: relative;
padding: 11px;
text-align: center;
background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
font-size: 18px;
color: #ffffff;
.add_btn {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 68px;
height: 24px;
border-radius: 12px;
border: 1px solid #ffffff;
font-weight: 400;
font-size: 12px;
color: #ffffff;
text-align: center;
line-height: 24px;
box-sizing: border-box;
user-select: none;
cursor: pointer;
}
}
.content {
min-height: 590px;
background-color: #fff;
box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
padding: 20px;
.people_box {
display: flex;
flex-wrap: wrap;
gap: 20px;
.people_item {
width: 275px;
height: 137px;
background: #ffffff;
border: 1px solid #dcdfe6;
padding: 16px;
.name {
font-weight: 600;
font-size: 16px;
color: #2d373f;
line-height: 22px;
}
.idcard {
font-size: 16px;
color: #95a1a6;
line-height: 22px;
margin-top: 12px;
margin-bottom: 17px;
}
.btn {
width: 69px;
height: 32px;
background: #e7e6ff;
font-weight: 400;
font-size: 16px;
color: #493ceb;
line-height: 32px;
text-align: center;
cursor: pointer;
user-select: none;
}
}
}
}
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
</style>
src/viewsPc/components/homeQuick.vue
......@@ -119,7 +119,7 @@ function popRemark(type) {
|| (form.value.isFoodView == 0 && type == '3')
|| (form.value.isMealView == 0 && type == '4')
|| (form.value.isPhotoView == 0 && type == '5')
// || (type == '0')
|| (form.value.isTicket==0&&type == '0')
) {
building()
return
......@@ -138,9 +138,9 @@ function goBooking(n) {
case 0:
// 票务
router.push({
path: `/seat/detail`,
params: {id: 1},
query: {id: 1}
path: `/booking/ticket/${props.matchId}`,
// params: {id:props.matchId},
// query: {id: props.matchId}
})
break;
case 1:
......
src/viewsPc/match/components/quick-row.vue
......@@ -135,8 +135,8 @@ function popRemark(type) {
|| (form.value.isCarView == 0 && type == '2')
|| (form.value.isFoodView == 0 && type == '3')
|| (form.value.isMealView == 0 && type == '4')
|| (type == '5' && form.value.isPhotoView == 0)
|| (type == '0')
|| (form.value.isPhotoView == 0&&type == '5')
|| (form.value.isTicket==0 &type == '0')
)
{
building()
......@@ -157,11 +157,8 @@ function goBooking(n) {
switch (n) {
case 0:
// 票务
// 票务
router.push({
path: `/seat/detail`,
params: {id: 1},
query: {id: 1}
path: `/booking/ticket/${props.matchId}`,
})
break;
case 1:
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!