xingyy/uni-ticket-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
db9bfe5fd4
uni-ticket-system/src/pages/ticket/index.vue

791 lines
20 KiB
Vue
Raw Normal View History

fix
2023-12-07 02:58:16 +00:00
<template>
submit
2023-12-18 07:50:44 +00:00
<div class="container">
<custom-title class="title-block" :title="info.ticketName">
</custom-title>
fix
2023-12-07 02:58:16 +00:00
<div class="main">
submit
2023-12-18 07:50:44 +00:00
<div class="content1">
<div class="wrap1">
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/47742fc2-6608-48da-b2f8-b47b36eaffbb.png"></image>
</div>
<div class="wrap2">
{{info.ticketName}}
</div>
</div>
<div class="content2">
<image :src="info.ticketImage"></image>
</div>
<div class="content3" >
<display-box :styleColor="{backgroundColor: '#B1292E'}">
<template #l1 >
<div class="box-left">
门票名称
</div>
</template>
<template #r1 >
<div class="box-right">
门票名称
</div>
</template>
<template #l2 >
<div class="box-left">
剩余数量
</div>
</template>
<template #r2 >
<div class="box-right">
1023/20000
fix
2023-12-07 02:58:16 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
</template>
</display-box>
</div>
<div class="content4"></div>
<div class="content5">
<display-box>
<template #l1 >
<div class="box-left">
预留手机号 <span style="font-size: 18rpx">(+86)</span>
</div>
</template>
<template #r1 >
fix
2023-12-07 02:58:16 +00:00
<div>
submit
2023-12-18 07:50:44 +00:00
<input type="text" placeholder="填写手机号" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
fix
2023-12-07 02:58:16 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
</template>
<template #l2 >
<div class="box-left">
验证码
</div>
</template>
<template #r2 >
<div style="position: relative;width: 100%">
<div >
<input type="text" placeholder="填写验证码" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
</div>
<div style="position: absolute;top: 50%;transform: translateY(-50%);right: 12rpx;color: #B1292E;font-size: 24rpx">获取验证码</div>
</div>
</template>
</display-box>
</div>
<div class="content6">
<display-box>
<template #l1>
<div class="box-left">
选择时间
</div>
</template>
<template #r1 >
<div class="r1">
<div class="r1_1">2023年12月16日</div>
<div class="r1_2" @click="showWin=true">
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2c4872f9-aee5-4b04-9494-94b08c282ed9.png"></image>
</div>
</div>
</template>
<template #l2 >
<div class="box-left">
选择人数
</div>
</template>
<template #r2 >
<div class="r2">
<div class="r2_1" >
*单次最多可预约10人
</div>
<div class="r2_2">
<div class="r2_2_1">
<image src="../../static/zu1149@3x.png"></image>
fix
2023-12-07 02:58:16 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
<div class="r2_2_2">
<input type="text">
</div>
<div class="r2_2_3">
<image src="../../static/zu1150@3x.png"></image>
</div>
</div>
</div>
</template>
</display-box>
</div>
<div class="content7">
*请填写所有参观人的身份证信息
</div>
<div class="content8">
<div class="wrap1"> <display-box>
<template #l1>
<div class="box-left">
真实姓名
</div>
</template>
<template #r1>
<div class="box-right">
<input type="text" placeholder="请填写您的真实姓名" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
</div>
</template>
<template #l2>
<div class="box-left">
身份证号码
</div>
</template>
<template #r2>
<div class="box-right">
<input type="text" placeholder="填写您的身份证号码" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
</div>
</template>
</display-box></div>
</div>
<div class="content9">
<div class="wrap1">*预约后信息不可更改，请仔细核对预约信息</div>
<div class="wrap2">预约</div>
</div>
<tm-drawer :height="1054" :round="8" hideHeader inContent ref="calendarView" :placement="'bottom'" v-model:show="showWin">
<div class="content10" >
<div class="wrap1">
<image src="../../static/Close@3x.png"></image>
</div>
<div class="wrap2">
请选择参观日期
</div>
<div class="wrap3"></div>
<div class="wrap4">
当前年月：2023年12月
fix
2023-12-07 02:58:16 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
<div class="wrap3"></div>
<div class="wrap5">
<div class="wrap5_1">
<div class="wrap5_1_1">
12月02日·周六
fix
2023-12-07 02:58:16 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
<div class="wrap5_1_2">
*不可预约
fix
2023-12-07 02:58:16 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
</div>
<div class="wrap5_2">
<div class="wrap5_2_1">
12月03日·周日
fix
2023-12-07 02:58:16 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
<div class="wrap5_2_2">
*可预约
fix
2023-12-07 02:58:16 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
<div class="wrap5_2_3">
今日
</div>
</div>
<div class="wrap5_3">
<div class="wrap5_3_1">
12月04日·周一
</div>
<div class="wrap5_3_2">
*可预约
</div>
<div class="wrap5_3_3">
明日
fix
2023-12-07 08:57:48 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
</div>
<div class="wrap5_4">
<div class="wrap5_4_1">更多</div>
<div class="wrap5_4_2">
<image src="../../static/lj781@3x.png"></image>
fix
2023-12-07 08:57:48 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
</div>
fix
2023-12-07 08:57:48 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
<div class="wrap3"></div>
<div class="wrap6">
请选择参观时间
</div>
<div class="wrap7">
<div class="wrap7_1">
<div class="wrap7_1_1">08:00入场</div>
<div class="wrap7_1_2">*不可选</div>
</div>
<div class="wrap7_2">
<div class="wrap7_2_1">10:00入场</div>
<div class="wrap7_2_2">*可选</div>
</div>
<div class="wrap7_3">
<div class="wrap7_3_1">12:00入场</div>
<div class="wrap7_3_2">*可选</div>
</div>
<div class="wrap7_2">
<div class="wrap7_2_1">10:00入场</div>
<div class="wrap7_2_2">*可选</div>
</div>
</div>
<div class="wrap3"></div>
<div class="wrap8">
*参观当日需要携带游客本人身份证件<br/>
*入馆时间：<br/>
工作日08:30-18:00、节假日/双休09:00-20:00（具体时间以景区为准）<br/>
</div>
<div class="wrap3" style="margin-bottom: 30rpx"></div>
<div class="wrap9">确定</div>
</div>
</tm-drawer>
fix
2023-12-07 02:58:16 +00:00
</div>
submit
2023-12-18 07:50:44 +00:00
</div>
fix
2023-12-07 02:58:16 +00:00
</template>
<script setup>
submit
2023-12-18 07:50:44 +00:00
import displayBox from '@/components/display-box/index.vue'
import {useMainStore} from "@/store"
import {ref} from 'vue'
const showWin=ref(true)
const store=useMainStore()
const info=ref(uni.getStorageSync('currentBooking'))
const rpxToPx=(rpx)=>{
const systemInfo = uni.getSystemInfoSync();
const screenWidth = systemInfo.windowWidth;
return rpx * screenWidth / 750;
}
</script>
<style lang="scss" scoped>
.content10{
position: relative;
padding: 64rpx 24rpx 108rpx 24rpx;
.wrap9{
margin: 0 auto;
fix
2023-12-07 08:57:48 +00:00
submit
2023-12-18 07:50:44 +00:00
width: 436rpx;
height: 60rpx;
background-color: #000;
color: #fff;
font-size: 28rpx;
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
.wrap8{
margin-bottom: 24rpx;
margin-top: 18rpx;
font-size: 20rpx;
color:#B29E92 ;
}
.wrap7{
margin-bottom: 70rpx;
margin-top: 20rpx;
display: flex;
justify-content: space-between;
.wrap7_3{
box-sizing: border-box;
border-radius: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 152rpx;
height: 98rpx;
background-color: #F7963B;
.wrap7_3_2{
font-size: 16rpx;
color: #fff;
}
.wrap7_3_1{
margin-bottom: 2rpx;
color: #fff;
font-size: 24rpx;
}
fix
2023-12-07 02:58:16 +00:00
}
submit
2023-12-18 07:50:44 +00:00
.wrap7_2{
border: 2rpx solid #F7963B;
box-sizing: border-box;
border-radius: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 152rpx;
height: 98rpx;
background-color: #fff;
.wrap7_2_2{
font-size: 16rpx;
color: #B29E92;
}
.wrap7_2_1{
margin-bottom: 2rpx;
color: #000;
font-size: 24rpx;
}
}
.wrap7_1{
border-radius: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 152rpx;
height: 98rpx;
background-color: #D8D8D8;
.wrap7_1_2{
font-size: 16rpx;
color: #868686;
}
.wrap7_1_1{
margin-bottom: 2rpx;
color: #000;
font-size: 24rpx;
}
}
}
.wrap6{
margin-top: 38rpx;
font-size: 32rpx;
color: #000;
}
.wrap5{
margin-bottom: 72rpx;
margin-top: 54rpx;
display: flex;
justify-content: space-between;
.wrap5_4{
width: 60rpx;
height: 98rpx;
border-radius: 30rpx;
background-color: #F7963B;
display: flex;
align-items: center;
justify-content: center;
.wrap5_4_1{
margin-right: 8rpx;
font-size: 20rpx;
color: #fff;
writing-mode: vertical-rl;
}
.wrap5_4_2{
image{
width: 11.77rpx;
height: 25.53rpx;
}
}
}
.wrap5_3{
position: relative;
width: 196rpx;
height: 98rpx;
background-color: #F7963B;
border-radius: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.wrap5_3_3{
left: 50%;
transform: translateX(-50%);
position: absolute;
bottom: -40rpx;
font-size: 24rpx;
color: #F7963B;
}
.wrap5_3_2{
color: #fff;
font-size: 16rpx;
}
.wrap5_3_1{
margin-bottom: 10rpx;
color: #fff;
font-size: 24rpx;
}
}
.wrap5_2{
border: 2rpx solid #F7963B;
box-sizing: border-box;
width: 196rpx;
height: 98rpx;
background-color: #fff;
border-radius: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.wrap5_2_3{
left: 50%;
transform: translateX(-50%);
position: absolute;
bottom: -40rpx;
font-size: 24rpx;
color: #F7963B;
}
.wrap5_2_2{
color: #B29E92;
font-size: 16rpx;
}
.wrap5_2_1{
margin-bottom: 10rpx;
color: #000;
font-size: 24rpx;
}
}
.wrap5_1{
width: 196rpx;
height: 98rpx;
background-color: #D8D8D8;
border-radius: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.wrap5_1_2{
color: #868686;
font-size: 16rpx;
}
.wrap5_1_1{
margin-bottom: 10rpx;
color: #000;
font-size: 24rpx;
}
}
}
.wrap4{
margin-bottom: 24rpx;
margin-top: 16rpx;
font-size: 24rpx;
color:#F7963B;
}
.wrap3{
background-color: #868686;
height: 1rpx;
width: 100%;
}
.wrap2{
margin-bottom: 44rpx;
font-weight: bold;
color: #000;
font-size: 32rpx;
}
.wrap1{
top: 52rpx;
right: 46rpx;
position: absolute;
width: 48rpx;
height: 48rpx;
image{
width: 100%;
height: 100%;
fix
2023-12-07 02:58:16 +00:00
}
submit
2023-12-18 07:50:44 +00:00
}
fix
2023-12-07 08:57:48 +00:00
}
submit
2023-12-18 07:50:44 +00:00
.container{
display: flex;
flex-direction: column;
height: 100vh;
.main{
overflow-y: auto;
box-sizing: border-box;
padding: 32rpx 42rpx 0 42rpx;
width: 100vw;
flex: 1;
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
background-size: 100%;
.content9{
margin-bottom: 78rpx;
margin-top: 80rpx;
display: flex;
flex-direction: column;
align-items: center;
.wrap2{
margin-top: 14rpx;
font-size: 28rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
border-radius: 30rpx;
width: 436rpx;
height: 60rpx;
}
.wrap1{
color: #B1292E;
font-size: 16rpx;
}
}
.content8{
margin-top: 12rpx;
.wrap1{
.box-left{
color: #000;
font-size: 24rpx;
fix
2023-12-07 08:57:48 +00:00
}
submit
2023-12-18 07:50:44 +00:00
}
fix
2023-12-07 08:57:48 +00:00
}
submit
2023-12-18 07:50:44 +00:00
.content7{
color: #F7963B;
margin-top: 20rpx;
font-size: 24rpx;
fix
2023-12-07 08:57:48 +00:00
}
submit
2023-12-18 07:50:44 +00:00
.content6{
margin-top:24rpx;
.r2{
position: relative;
.r2_2{
position: absolute;
top: 50%;
transform: translateY(-45%);
right: 0;
display: flex;
align-items: center;
.r2_2_3{
width: 31rpx;
height: 31rpx;
image{
height: 100%;
width: 100%;
}
}
.r2_2_1{
width: 31rpx;
height: 31rpx;
margin-right: 10rpx;
image{
height: 100%;
width: 100%;
}
}
.r2_2_2{
margin-right: 10rpx;
input{
text-align: center;
color: #000;
font-size: 24rpx;
width: 114rpx;
height: 54rpx;
background-color: #EFEFEF;
}
}
}
.r2_1{
color: #B29E92;
font-size: 16rpx;
}
}
.r1{
position: relative;
.r1_2{
top: 50%;
position: absolute;
transform: translateY(-50%);
right: 12rpx;
image{
width: 64rpx;
height: 32rpx;
}
}
}
.box-left{
display: flex;
align-items: center;
color: #000;
font-size: 24rpx;
}
}
.content5{
margin-top:40rpx ;
.r2{
position: relative;
.r2_2{
right: 42rpx;
top: 50%;
transform: translateY(-10%);
position: absolute;
color:#B1292E ;
font-size: 24rpx;
}
fix
2023-12-07 02:58:16 +00:00
submit
2023-12-18 07:50:44 +00:00
}
.box-left{
color: #000;
font-size: 24rpx;
}
fix
2023-12-07 08:57:48 +00:00
}
submit
2023-12-18 07:50:44 +00:00
.content4 {
margin-top: 30rpx;
height: 1rpx;
width: 100%;
background-image: url("../../static/zx303@3x.png");
background-size: 100%;
fix
2023-12-07 08:57:48 +00:00
}
submit
2023-12-18 07:50:44 +00:00
.content3{
margin-top: 20rpx;
.box-right{
color: #fff;
font-size: 24rpx;
}
.box-left{
color: #fff;
font-size: 24rpx;
}
}
.content2{
margin-top: 12rpx;
border-radius: 20rpx;
overflow: hidden;
image{
width: 664rpx;
height: 354rpx;
}
}
.content1{
box-sizing: border-box;
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/20a57e10-8b08-4694-b083-d09e345a58a4.png");
width: 100%;
height: 60rpx;
background-size: 100%;
display: flex;
align-items: center;
padding-left: 20rpx;
.wrap2{
font-size: 32rpx;
color: #fff;
}
.wrap1{
margin-right: 10rpx;
image{
width: 21.18rpx;
height: 29rpx;
}
}
}
}
fix
2023-12-07 08:57:48 +00:00
}
submit
2023-12-18 07:50:44 +00:00
/*.top{
height: 100vh;
display: flex;
flex-direction: column;
fix
2023-12-07 08:57:48 +00:00
}
fix
2023-12-07 02:58:16 +00:00
.main {
submit
2023-12-18 07:50:44 +00:00
overflow-y: auto;
flex-grow: 1;
fix
2023-12-07 02:58:16 +00:00
width: 100%;
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
background-size: 100%;
padding: 0 32rpx 38rpx 32rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
.container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 32rpx;
box-sizing: border-box;
overflow-y: auto;
.title {
width: 100%;
background: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/f4eff459-319c-4588-8efe-8638b5c66a4f.png") no-repeat;
background-size: cover;
height: 60rpx;
display: flex;
align-items: center;
padding: 10rpx 20rpx;
box-sizing: border-box;
color: #fff;
}
fix
2023-12-07 08:57:48 +00:00
.card {
margin-top: 20rpx;
width: 100%;
height: 190rpx;
background-color: #fff;
border-radius: 24rpx;
padding: 32rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
color: black;
.card-item {
display: flex;
align-items: center;
}
.name {
width: 200rpx;
border-right: 1rpx solid #BBC5E0;
}
}
fix
2023-12-07 02:58:16 +00:00
.title-detail {
margin-top: 20rpx;
width: 100%;
height: 190rpx;
background-color: #B1292E;
border-radius: 24rpx;
padding: 32rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
.item {
display: flex;
color: #fff;
align-items: center;
font-size: 28rpx;
.name {
width: 200rpx;
border-right: 1rpx solid #fff;
}
.code {
flex: 1;
margin-left: 20rpx;
color: #000000;
display: flex;
align-items: center;
justify-content: space-between;
.inputCode {
width: 250rpx;
}
}
.stepper {
flex: 1;
margin-left: 20rpx;
color: #000000;
display: flex;
align-items: center;
justify-content: space-between;
}
.time {
flex: 1;
width: 100%;
display: flex;
margin-left: 20rpx;
color: #000000;
align-items: center;
justify-content: space-between;
}
}
}
.line {
margin: 30rpx 0;
width: 100%;
border-bottom: 1rpx #BBC5E0 dashed;
}
}
:deep(.stepper--flex) {
width: 130rpx !important;
}
submit
2023-12-18 07:50:44 +00:00
}*/
submit
2023-12-08 07:55:35 +00:00
</style>
Reference in New Issue Copy Permalink