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

页面完成

Browse Source
master
Aiden 10 months ago
parent dddfeb947c
commit 8ad6af6611
6 changed files with 554 additions and 1649 deletions
Show Stats Download Patch File Download Diff File

1678
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
Unescape Escape View File

@ -49,8 +49,8 @@
"@dcloudio/uni-mp-xhs": "3.0.0-3090820231124001",
"@dcloudio/uni-quickapp-webview": "3.0.0-3090820231124001",
"@xingyy/uni-fetch": "^1.0.2",
"dayjs": "^1.11.10",
"echarts": "5.4.2",
"node-sass": "^9.0.0",
"pinia": " 2.0.33",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",

142
src/pages.json
Unescape Escape View File

@ -1,74 +1,88 @@
{
"easycom": {
"autoscan": true,
"custom": {
"^tm-(.*)": "@/tmui/components/tm-$1/tm-$1.vue"
}
},
"pages": [{
"path": "pages/index/index",
"easycom": {
"autoscan": true,
"custom": {
"^tm-(.*)": "@/tmui/components/tm-$1/tm-$1.vue"
}
},
"pages": [
{
"path": "pages/home/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/ticket/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/setup/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/view-venues/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF"
},
"condition": {
"current": 0,
"list": [{
"name": "",
"path": "",
"query": ""
}]
}
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/ticket/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/setup/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
},
{
"path": "pages/view-venues/index",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false // 禁用原生导航
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF"
},
"condition": {
"current": 0,
"list": [
{
"name": "",
"path": "",
"query": ""
}
]
}
}

162
src/pages/home/index.vue
Unescape Escape View File

@ -1,23 +1,85 @@
<template>
<div class="main">
<div class="header">
<div>门票名称</div>
<div>剩余数量</div>
</div>
<div class="container">
<div class="item">
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
<div class="detail">
<div style="width: 140rpx;">首都博物馆门票</div>
<div>1023/20000</div>
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
</div>
<title class="title-block" title="首都博物馆东馆" :isBack="false">
</title>
<div :style="{ height }" class="box">
<div class="header">
<div>门票名称</div>
<div>剩余数量</div>
</div>
<div class="container">
<div class="item">
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
<div class="detail">
<div style="width: 140rpx;">首都博物馆门票</div>
<div>1023/20000</div>
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
</div>
</div>
<div class="item">
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
<div class="detail">
<div style="width: 140rpx;">首都博物馆门票</div>
<div>1023/20000</div>
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
</div>
</div>
<div class="item">
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
<div class="detail">
<div style="width: 140rpx;">首都博物馆门票</div>
<div>1023/20000</div>
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
</div>
</div>
<div class="item">
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
<div class="detail">
<div style="width: 140rpx;">首都博物馆门票</div>
<div>1023/20000</div>
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
</div>
</div>
<div class="item">
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
<div class="detail">
<div style="width: 140rpx;">首都博物馆门票</div>
<div>1023/20000</div>
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
</div>
</div>
<div class="item">
<image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
<div class="detail">
<div style="width: 140rpx;">首都博物馆门票</div>
<div>1023/20000</div>
<tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
</div>
</div>
</div>
<div class="attention" v-if="isShow">
<div>
注：港澳台游客请至现场办理门票业务！
</div>
<tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
let height = ref('')
let isShow = ref(true)
onMounted(() => {
uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
let res = uni.getSystemInfoSync();
height.value = res.windowHeight - data.bottom + 'px';
}).exec()
})
const handleTips = () => {
isShow.value = false
}
</script>
<style scoped lang="scss">
.main {
@ -25,47 +87,73 @@
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: 38rpx 32rpx;
padding: 0 32rpx 38rpx 32rpx;
display: flex;
flex-direction: column;
box-sizing: border-box;
.header {
.box {
width: 100%;
background: #AB2F23;
height: 70rpx;
border-radius: 20rpx;
display: flex;
justify-content: space-around;
align-items: center;
color: #FFFFFF;
font-size: 28rpx;
}
.container {
box-sizing: border-box;
flex: 1;
overflow-y: auto;
margin-top: 20rpx;
display: flex;
flex-direction: column;
padding-bottom: 2rpx;
box-sizing: border-box;
.item {
.header {
margin-top: 20rpx;
width: 100%;
background: #AB2F23;
height: 70rpx;
border-radius: 20rpx;
display: flex;
justify-content: space-around;
align-items: center;
background: #FFFFFF;
border-radius: 20rpx;
color: #FFFFFF;
font-size: 28rpx;
}
.container {
overflow-y: auto;
height: 100%;
box-sizing: border-box;
margin-top: 20rpx;
flex: 1;
display: flex;
flex-direction: column;
padding-bottom: 2rpx;
margin-bottom: 20rpx;
.detail {
flex: 1;
margin-left: 18rpx;
.item {
display: flex;
align-items: center;
justify-content: space-around;
background: #FFFFFF;
border-radius: 20rpx;
margin-bottom: 20rpx;
.detail {
flex: 1;
margin-left: 18rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
}
}
.attention {
width: 664rpx;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
background: #761C1F;
height: 68rpx;
color: #FFFFFF;
bottom: 20rpx;
padding: 16rpx 40rpx;
box-sizing: border-box;
border-radius: 24rpx;
font-size: 28rpx;
}
}
}
</style>

7
src/pages/ticket/index.vue
Unescape Escape View File

@ -80,8 +80,9 @@
</div>
</div>
</div>
<tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25">预约</tm-button>
<select-day :show.sync="show"></select-day>
<tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25"
style="margin-top: 20rpx !important;">预约</tm-button>
<select-day v-model:show="show"></select-day>
</div>
</div>
</template>
@ -160,7 +161,7 @@ const reservation = () => {
}
}
const showHandle = () => {
show.value = false
show.value = true
}
</script>

212
src/pages/ticket/select-day/index.vue
Unescape Escape View File

@ -1,12 +1,82 @@
<template>
<div>
<tm-drawer placement="bottom" okText='确认' v-model:show="show" @close="close">
<tm-drawer placement="bottom" okText='确认' :show="show" :height="1054" :hideHeader=true>
<div class="container">
<tm-icon name="tmicon-times-circle" color="#ccc" class="icon-close" @click="close"></tm-icon>
<div class="title">请选择参观日期</div>
<tm-divider color="#868686"></tm-divider>
<div>当前年月日：{{ currentDate }}</div>
<tm-divider color="#868686"></tm-divider>
<div class="date-box">
<div class="date-box-item" v-for="(item, index) in dateList" :key="index">
<div :class="[index === currentIndex ? 'active' : '', 'date-box-item-day']"
@click="chooseDatehandle($event, item.date, index)">
<div :style="{ fontSize: '30rpx', fontWeight: '600' }">{{ item.date }}日·周{{
dayChineseMap[item.week] }}
</div>
<div style="font-size: 22rpx;">*可预约</div>
</div>
<div style="font-size: 30rpx;color:#F7963B ;">{{ dayjs().format('MM-DD') + '日' == item.date
? '今日' : '明天' }}</div>
</div>
<div class="more-date" @click="changeMoreDate">
<div style="font-size: 30rpx;width: 100rpx;">选择更多日期</div>
<div>
<tm-icon name="tmicon-angle-right" :fontSize="26" color="#fff"></tm-icon>
</div>
</div>
</div>
<tm-divider color="#868686"></tm-divider>
<div class="title">请选择参观日期</div>
<div class="time-box">
<div class="time-box-item">
<div :style="{ fontWeight: '600' }">08:00入场</div>
<div :style="{ fontSize: '22rpx', }">*不可选</div>
</div>
<div class="time-box-item">
<div :style="{ fontWeight: '600' }">08:00入场</div>
<div :style="{ fontSize: '22rpx', }">*不可选</div>
</div>
<div class="time-box-item">
<div :style="{ fontWeight: '600' }">08:00入场</div>
<div :style="{ fontSize: '22rpx', }">*不可选</div>
</div>
<div class="time-box-item">
<div :style="{ fontWeight: '600' }">08:00入场</div>
<div :style="{ fontSize: '22rpx', }">*不可选</div>
</div>
<div class="time-box-item">
<div :style="{ fontWeight: '600' }">08:00入场</div>
<div :style="{ fontSize: '22rpx', }">*不可选</div>
</div>
<div class="time-box-item">
<div :style="{ fontWeight: '600' }">08:00入场</div>
<div :style="{ fontSize: '22rpx', }">*不可选</div>
</div>
</div>
<tm-divider color="#868686"></tm-divider>
<div class="tips">
<div>*参观当日需要携带游客本人身份证件</div>
<div> *入馆时间：</div>
<div>
工作日08:30-18:00、节假日/双休09:00-20:00（具体时间以景区为准）
</div>
</div>
<tm-divider color="#868686"></tm-divider>
<div style="margin: auto;">
<tm-button color="#000000" :width="436" :height="60" :round="25">确定</tm-button>
</div>
<tm-calendar format="YYYY-MM-DD" @confirm="comfirmCal" color="#F7963B" v-model:show="isMoreDate" update:show
:start="[dayjs()]" :end="[endDate]"></tm-calendar>
</div>
</tm-drawer>
</div>
</template>
<script setup>
import { defineProps, onMounted, defineEmits, watch } from 'vue'
import { defineProps, ref, defineEmits, watch, onMounted, computed } from 'vue'
import dayjs from 'dayjs'
const props = defineProps({
show: {
type: Boolean,
@ -15,11 +85,143 @@ const props = defineProps({
})
const emits = defineEmits(["update:show"]);
let currentIndex = ref(-1)
let currentDate = ref('')
let isMoreDate = ref(false)
const dayChineseMap = ['日', '一', '二', '三', '四', '五', '六'];
let dateList = ref([
{
date: dayjs().format('MM-DD'),
week: dayjs().day(),
},
{
date: dayjs().add(1, 'day').format('MM-DD'),
week: dayjs().add(1, 'day').day(),
}
])
const chooseDatehandle = (e, date, index) => {
currentDate.value = dayjs().year() + '-' + date
currentIndex.value = index
}
const close = () => {
emits("update:show", false);
}
const changeMoreDate = () => {
isMoreDate.value = true
}
const endDate = computed(() => {
const lastDayOfMonth = dayjs().endOf('month');
const year = lastDayOfMonth.year();
const month = lastDayOfMonth.month() + 1;
const date = lastDayOfMonth.date();
return dayjs(year + '-' + month + '-' + date).add(2, 'month');
});
const comfirmCal = (date) => {
currentDate.value = date[0].split('/').join('-')
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
padding: 30rpx 32rpx;
box-sizing: border-box;
.icon-close {
position: absolute;
right: 20rpx;
top: 20rpx;
}
.title {
font-size: 36rpx;
}
.date-box {
width: 100%;
display: flex;
margin: 20rpx 0;
.date-box-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.date-box-item-day {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 20rpx;
height: 100rpx;
border-radius: 32rpx;
border: 1px solid #F7963B;
padding: 20rpx 18rpx;
box-sizing: border-box;
width: 240rpx;
}
.active {
background: #F7963B;
color: #fff;
}
}
.more-date {
display: flex;
padding: 20rpx 18rpx;
align-items: center;
justify-content: start;
height: 100rpx;
box-sizing: border-box;
border-radius: 32rpx;
color: #fff;
background-color: #F7963B;
}
}
.time-box::-webkit-scrollbar {
display: none;
/* 对于Webkit浏览器 */
}
.time-box {
width: 100%;
display: flex;
overflow-x: auto;
margin-top: 20rpx;
box-sizing: border-box;
-ms-overflow-style: none;
/* 对于IE和Edge */
scrollbar-width: none;
margin-bottom: 20rpx;
/* 对于Firefox */
.time-box-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 30rpx;
padding: 20rpx;
margin-right: 20rpx;
border-radius: 32rpx;
border: 1rpx solid #F7963B;
width: 188rpx;
height: 114rpx;
box-sizing: border-box;
}
}
.tips {
display: flex;
flex-direction: column;
color: #B29E92;
font-size: 26rpx;
}
}
</style>
Write Preview
Loading…
Cancel
Save