xingyy/uni-ticket-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: xingyy:master
Branches Tags
xingyy:master
xingyy:xingyy
...
pull from: xingyy:xingyy
Branches Tags
xingyy:master
xingyy:xingyy

3 Commits
master ... xingyy

Author SHA1 Message Date
xingyy
203de2a6ab Merge branch 'master' into xingyy 2023-12-07 16:59:00 +08:00
xingyy
ab374c5baa submit 2023-12-07 14:13:46 +08:00
xingyy
99c9716c76 submit 2023-12-07 13:43:24 +08:00
3 changed files with 245 additions and 24 deletions
Show Stats Expand all files Collapse all files

19
src/components/dashed-line/index.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="content3">
</div>
</template>
<script setup>
</script>
<style scoped>
.content3{
height: 1rpx;
width: 100%;
background-image: url("../../static/zx303@3x (1).png");
background-size: 100%;
}
</style>

1
src/components/display-box/index.vue
View File

@ -31,7 +31,6 @@ const result = ref(groupObjectsByNumberKeys(slots))
<style scoped lang="scss"> <style scoped lang="scss">
.content2{ .content2{
margin-top: 38rpx;
background-color: #fff; background-color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
padding-left: 18rpx; padding-left: 18rpx;

249
src/pages/ticket-details/index.vue
View File

@ -10,33 +10,130 @@
<image <image
src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2ec9fcae-55af-4ccd-8e92-6848282101bb.png"></image> src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2ec9fcae-55af-4ccd-8e92-6848282101bb.png"></image>
</div> </div>
<display-box> <div class="content3">
<template #l1> <display-box>
<div class="box-left"> <template #l1>
门票名称 <div class="box-left">
</div> 门票名称
</template> </div>
<template #r1> </template>
<div class="box-right"> <template #r1>
首都博物馆门票 <div class="box-right">
</div> 首都博物馆门票
</template> </div>
<template #l2> </template>
<div class="box-left"> <template #l2>
预留手机号(+86) <div class="box-left">
</div> 预留手机号 <span style="font-size: 18rpx">(+86)</span>
</template> </div>
<template #r2> </template>
<div class="box-right"> <template #r2>
192119280121 <div class="box-right">
</div> 192119280121
</template> </div>
</display-box> </template>
<template #l3>
<div class="box-left">
预约时间
</div>
</template>
<template #r3>
<div class="box-right">
2023年12月16日
</div>
</template>
<template #l4>
<div class="box-left">
预约人数
</div>
</template>
<template #r4>
<div class="box-right">
2
</div>
</template>
</display-box>
</div>
<div class="content4">
<dashed-line></dashed-line>
</div>
<div class="content5">*参观人的身份证信息</div>
<div class="content6">
<display-box>
<template #l1>
<div class="box-left">
姓名
</div>
</template>
<template #r1>
<div class="box-right">
陈x
</div>
</template>
<template #l2>
<div class="box-left">
身份证号
</div>
</template>
<template #r2>
<div class="box-right">
192119280121
</div>
</template>
</display-box>
</div>
<div class="content7">
<display-box>
<template #l1>
<div class="box-left">
姓名
</div>
</template>
<template #r1>
<div class="box-right">
陈x
</div>
</template>
<template #l2>
<div class="box-left">
身份证号
</div>
</template>
<template #r2>
<div class="box-right">
192119280121
</div>
</template>
</display-box>
</div>
<div class="content8" @click="returnTicket">
退票
</div>
<div class="content9" v-if="dialog">
<div class="wrap1">
<div class="wrap1_1">是否进行退票?</div>
<div class="wrap1_2">2人：某某、某某某</div>
<div class="wrap1_3">预约日期：2023年12月16日</div>
<div class="wrap1_4">
<div class="wrap1_4_1" @click="cancel">取消</div>
<div class="wrap1_4_2">确定</div>
</div>
<div class="wrap1_5">*确认后将不再出现在票库</div>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import {ref} from 'vue'
import displayBox from '../../components/display-box/index.vue' import displayBox from '../../components/display-box/index.vue'
const list = [{}] import dashedLine from '../../components/dashed-line/index.vue'
const dialog=ref(false)
const cancel=()=>{
dialog.value=false
}
const returnTicket=()=>{
dialog.value=true
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.box-left{ .box-left{
@ -52,7 +149,113 @@ const list = [{}]
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png'); background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
background-size: 100%; background-size: 100%;
padding: 32rpx 42rpx 0 42rpx; padding: 32rpx 42rpx 0 42rpx;
.content9{
display: flex;
justify-content: center;
padding-top: 400rpx;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
.wrap1{
width: 510rpx;
height: 352rpx;
background-color: #fff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
.wrap1_5{
margin-top: 12rpx;
box-sizing: border-box;
text-align: right;
padding-right: 48rpx;
width: 100%;
font-size: 16rpx;
color:#FF5C62;
}
.wrap1_4{
margin-top: 62rpx;
box-sizing: border-box;
display: flex;
width: 100%;
justify-content: space-between;
padding-left: 34rpx;
padding-right: 34rpx;
.wrap1_4_2{
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #F7963B;
color: #fff;
width: 210rpx;
height: 60rpx;
}
.wrap1_4_1{
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
color: #fff;
width: 210rpx;
height: 60rpx;
}
}
.wrap1_3{
font-size: 24rpx;
color: #B29E92;
}
.wrap1_2{
margin-bottom: 16rpx;
font-size: 24rpx;
color: #B29E92;
}
.wrap1_1{
margin-top: 48rpx;
margin-bottom: 16rpx;
font-size: 28rpx;
color: #FF5C62;
}
}
}
.content8{
margin: 0 auto;
border-radius: 30rpx;
font-size: 28rpx;
color: #fff;
width: 436rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #FF5C62;
}
.content7{
margin-bottom: 72rpx;
}
.content6{
margin-bottom: 20rpx;
}
.content5{
margin-bottom: 20rpx;
font-size: 24rpx;
color: #F7963B;
text-align: left;
}
.content3{
margin-top: 42rpx;
margin-bottom: 42rpx;
}
.content4{
margin-bottom: 24rpx;
}
.content2 { .content2 {
margin-top: 12rpx; margin-top: 12rpx;
width: 100%; width: 100%;