Compare commits
2 Commits
23a2438a88
...
2822b072e9
| Author | SHA1 | Date | |
|---|---|---|---|
| 2822b072e9 | |||
| 8ad6af6611 |
1666
package-lock.json
generated
1666
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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
142
src/pages.json
@ -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": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
<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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
.header {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
background: #AB2F23;
|
||||
height: 70rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
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>
|
||||
|
||||
@ -80,7 +80,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25">预约</tm-button>
|
||||
<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>
|
||||
@ -161,7 +162,6 @@ const reservation = () => {
|
||||
}
|
||||
const showHandle = () => {
|
||||
show.value = true
|
||||
console.log(show.value,'show.value')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,11 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<tm-drawer placement="bottom" okText='确认' :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, defineEmits } from 'vue'
|
||||
import { defineProps, ref, defineEmits, watch, onMounted, computed } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
@ -13,9 +83,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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user