新增时间选择，地区选择，机票

src/components/cAddress.vue

@@ -0,0 +1,281 @@
+<template>
+	<div v-show="isShow" class="date-box">
+		<div class="date-con">
+			<div class="date-nav">
+				<img @click="closepopu" src="../assets/tittle_btn_close@2x.png" width="20" height="20">
+				<div class="date-title">选择目的地</div>
+			</div>
+			<div class="address-input-box">
+				<img src="../assets/icon_sear@3x.png" alt="" width="18" height="18">
+				<input @keyup.enter="searchEv(addressVal)" type="text" v-model="addressVal" placeholder="搜索城市" />
+			</div>
+			<div class="location-box">
+				<img src="../assets/location.png" width="20" height="20" >
+				<div>上海浦东</div>
+				<span>GPS定位</span>
+			</div>
+			<div class="re-city-box">
+				<span>热门城市</span>
+				<div class="re-city">
+					<div @click="chooseRe(index)" v-for="(item,index) in reArr" :key="index">
+						<span :class="reIndex==index?'active-city':''">{{item}}</span>
+					</div>
+				</div>
+			</div>
+			<div style="position: relative;">
+				<div class="address-list-all">
+					<div class="address-list-box" v-for="(item,index) in allArr" :key="index">
+						<div class="address-title" :id="index">{{item.title}}</div>
+						<div class="address-item" v-for="(item2,index2) in item.childrenArr" :key="index2">{{item2.title}}</div>
+					</div>
+				</div>
+				<div class="address-biao">
+					<div @click="chooseBiao(index)" v-for="(item,index) in biaoArr" :key="index"><a :href="`#${index}`">{{item}}</a></div>
+				</div>
+				<div v-show="isVal" class="val-popu" :class="isVal?'valActive':''">{{chooseVal}}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			isShow: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				addressVal:'',
+				reArr:['北京','上海','广州','成都','重庆','西安','武汉','深圳','杭州','昆明','厦门','长沙'],
+				reIndex:0,
+				allArr:[
+					{
+						title:'A',
+						childrenArr:[
+							{title:'安顺',},
+							{title:'安康',},
+							{title:'鞍山',},
+							{title:'阿尔山',},
+							{title:'阿尔山',},
+							{title:'阿尔山',},
+							{title:'阿尔山',},
+							{title:'阿尔山',},
+							{title:'阿尔山',},
+							{title:'阿尔山',},
+							{title:'阿尔山',},
+							{title:'阿尔山',},
+						]
+					},
+					{
+						title:'B',
+						childrenArr:[
+							{title:'B1',},
+							{title:'B2',},
+							{title:'B3',},
+							{title:'B4',},
+							{title:'B5',},
+							{title:'B6',},
+							{title:'B7',},
+							{title:'B8',},
+							{title:'B9',},
+							{title:'B10',},
+							{title:'B11',},
+						]
+					}
+				],
+				biaoArr:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
+				chooseVal:'',
+				isVal:false,
+				timer:null
+			}
+		},
+		mounted() {
+			
+		},
+		methods: {
+			closepopu(){//关闭选择目的地
+				this.$emit('tunepopu',1);
+			},
+			chooseRe(index){//选择热门城市
+				this.reIndex = index;
+			},
+			chooseBiao(index){//选择右边字母事件
+				this.chooseVal = this.biaoArr[index];
+				this.isVal = true;
+				clearTimeout(this.timer);
+				this.timer = setTimeout(()=>{
+					this.isVal = false;
+				},2000)
+			},
+			searchEv(val){//输入框提交事件
+				console.log(val);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.date-box {
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background: rgba(0, 0, 0, .7);
+		font-size: 14px;
+	}
+
+	.date-con {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: #FFFFFF;
+		border-radius: 14px 14px 0 0;
+		padding: 20px 0px;
+		max-height: 85%;
+	}
+
+	/* 标头 */
+	.date-nav {
+		display: flex;
+		justify-content: center;
+		padding: 0 15px;
+		align-items: center;
+	}
+	.date-nav img {
+		position: absolute;
+		left: 15px;
+	}
+	.date-title {
+		font-size: 16px;
+		font-weight: bold;
+	}
+	.address-input-box {
+		position: relative;
+		margin: 0 15px;
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		margin-top: 18px;
+	}
+	.address-input-box img{
+		position: absolute;
+		left: 10px;
+	}
+	.address-input-box input {
+		width: 100%;
+		background-color: #F2F2F2;
+		border: none;
+		padding: 10px 10px 10px 36px;
+		border-radius: 16px;
+		height: 32px;
+	}
+	.location-box {
+		display: flex;
+		align-items: center;
+		height: 40px;
+		line-height: 40px;
+		margin-top: 10px;
+		margin: 10px 15px 0 15px;
+		border-bottom: 1px solid #e8eae6;
+	}
+	.location-box div{
+		font-size: 14px;
+		color: #100B0C;
+		font-weight: bold;
+		margin-right: 8px;
+	}
+	.location-box span{
+		font-size: 12px;
+		color: #999F9F;
+	}
+	.re-city-box {
+		margin-top: 16px;
+		margin-bottom: 20px;
+		padding: 0 15px;
+	}
+	.re-city-box span {
+		font-size: 12px;
+		color: #999F9F;
+	}
+	.re-city {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	.re-city div span {
+		display: inline-block;
+		width: 80px;
+		height: 32px;
+		line-height: 32px;
+		margin-top: 10px;
+		text-align: center;
+		background-color: #F2F2F2;
+		color: #100B0C;
+	}
+	.active-city {
+		background-color: #E5F5FB!important;
+		color: #00A3E0!important;
+	}
+	.address-list-all {
+		height: 260px;
+		overflow: hidden;
+		overflow-y: scroll;
+		position: relative;
+	}
+	.address-list-box {
+		
+	}
+	.address-list-box .address-title {
+		width: 100%;
+		height: 32px;
+		line-height: 32px;
+		background: #F2F2F2;
+		color: #999F9F;
+		padding: 0 15px;
+	}
+	.address-list-box .address-item{
+		height: 40px;
+		line-height: 40px;
+		margin: 0 15px;
+		border-bottom: 1px solid #e8eae6;
+	}
+	.address-list-box .address-item:last-child {
+		border-bottom: none;
+	}
+	.address-biao {
+		position: absolute;
+		right: 0;
+		top: 0;
+		height: 260px;
+		width: 20px;
+		font-size: 12px;
+		background-color: #ffffff;
+		text-align: center;
+		overflow: hidden;
+		overflow-y: scroll;
+	}
+	.address-biao a {
+		color: #00A3E0;
+	}
+	.val-popu {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		width: 50px;
+		height: 50px;
+		line-height: 50px;
+		font-size: 32px;
+		font-weight: bold;
+		text-align: center;
+		background-color: rgba(0,0,0,.5);
+		border-radius: 6px;
+		color: #FFFFFF;
+	}
+</style>

src/components/dateTime.vue

@@ -1,10 +1,10 @@
 <template>
-	<div v-show="isShow" class="date-box">
+	<div v-show="isShow" @click="closePopu" class="date-box">
 		<div class="date-con">
 			<div class="date-nav">
-				<img src="../assets/tittle_btn_close@2x.png" width="20" height="20">
+				<img @click="closepopu" src="../assets/tittle_btn_close@2x.png" width="20" height="20">
 				<div class="date-title">选择出发日期</div>
-				<div class="date-clear">清除</div>
+				<div class="date-clear" @click="closepopu">清除</div>
 			</div>
 			<div class="day-box">
 				<div v-for="(item,index) in dayArr" :class="item.finish?'':'active-day'" :key="index">{{item.title}}</div>
@@ -88,6 +88,9 @@
 			this.presentEv();
 		},
 		methods: {
+			closepopu(){
+				this.$emit('tunepopu',0);
+			},
 			presentEv() { //获取当前月份的日期
 				this.obtainDate(0);
 			},
@@ -231,7 +234,7 @@
 	}
 </script>
 
-<style>
+<style scoped>
 	.date-box {
 		position: fixed;
 		top: 0;

src/router/index.js

@@ -10,6 +10,7 @@ import costInformation from '../view/costInformation.vue'
 import personalCenter from '../view/personalCenter.vue'
 import qrderQuery from '../view/qrderQuery.vue'
 import session from '../view/session.vue'
+import planeTicket from '../view/planeTicket.vue'
 //配置路由
 const router = createRouter({
 	history: createWebHistory(),
@@ -37,6 +38,10 @@ const router = createRouter({
 		path: '/session', //对话框页
 		name: 'session',
 		component: session
+	}, {
+		path: '/planeTicket', //机票页
+		name: 'planeTicket',
+		component: planeTicket
 	}]
 })
 // 导出router

src/view/login.vue

@@ -5,9 +5,9 @@
 		</div>
 		<form class="pdlr30" id="login">
 			<div class="int">
-				<p>ADD号码</p>
+				<p>登录名</p>
 				<div class="posr">
-					<input type="number" @input="inputEv" v-model="accountNumber" placeholder="请输入账号">
+					<input type="number" @input="inputEv" v-model="accountNumber" placeholder="请输入登录名">
 					<img v-show="clearShow" @click="clearEv" class="clear-input" src="../assets/clear-input.png" width="16" alt="清空文本信息" >
 				</div>
 			</div>

src/view/planeTicket.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="plane">
+		<!-- 头部 -->
+		<div>
+			<div class="header-box">
+				<div class="left-box">
+					<img src="../assets/tittle_btn_back_w@2x.png" width="20" height="20" alt="">
+					<div class="address-text">{{startAddress}}</div>
+				</div>
+				<div class="center-box">
+					<img src="../assets/icon_plane_w@3x.png" width="20" height="20" alt="">
+					<span>{{direction}}</span>
+				</div>
+				<div class="address-text">{{endAddress}}</div>
+			</div>
+			<div class="time-box">
+				<div>
+					<div v-for="(item,index) in timeArr" :key="index">
+						<span>{{item.time}}</span>
+						<span>{{item.title}}</span>
+					</div>
+				</div>
+				<div>
+					<img src="../assets/icon_time@3x.png" width="14" height="14" alt="">
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		name: 'planeTicket',
+		data() {
+			return {
+				startAddress:'重庆',
+				endAddress:'上海浦东',
+				direction:'去程',
+				timeArr:[
+					{title:'周三',time:'10-20'},
+					{title:'周三',time:'10-20'},
+					{title:'周三',time:'10-20'},
+					{title:'周三',time:'10-20'},
+					{title:'周三',time:'10-20'},
+					{title:'周三',time:'10-20'},
+					{title:'周三',time:'10-20'},
+				],
+				activeTime:0
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+<style scoped>
+	.plane {
+		font-size: 14px;
+	}
+	.header-box {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 6px 15px;
+		background-color: #00A3E0;
+		color: #FFFFFF;
+	}
+	.left-box {
+		display: flex;
+		align-items: center;
+	}
+	.center-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.center-box span {
+		font-size: 12px;
+		opacity: .8;
+	}
+	.address-text {
+		font-size: 16px;
+		font-weight: bold;
+	}
+	.time-box {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #FFFFFF;
+		padding: 3px 9px;
+	}
+	.time-box>div:first-child{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		overflow: hidden;
+		overflow-x: scroll;
+	}
+	.time-box>div:first-child div{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-right: 18px;
+		flex-shrink: 0;
+	}
+	.time-box>div:first-child div span{
+		font-size: 12px;
+		color: #292D2D;
+	}
+	.time-box>div:last-child {
+		width: 51px;
+		height: 34px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-shrink: 0;
+	}
+</style>

src/view/session.vue

@@ -67,12 +67,12 @@
 						<div class="gd">
 							<div class="info-box">
 								<div>
-									<div class="clips1">重庆</div>
+									<div @click="tuneUpAddress(0)" class="clips1">重庆</div>
 									<img src="../assets/icon_plane@3x.png" width="20" height="20">
-									<div class="clips1">上海浦东</div>
+									<div @click="tuneUpAddress(1)" class="clips1">上海浦东</div>
 								</div>
 								<div>
-									<div>
+									<div @click="tuneUp">
 										<p>10月21日</p>
 										<span>周四</span>
 									</div>
@@ -91,7 +91,7 @@
 										for="radio">机票+酒店</label>
 								</div>
 							</div>
-							<button type="button">生产工单</button>
+							<button @click="goPlane" type="button">生产工单</button>
 						</div>
 					</div>
 				</div>
@@ -138,15 +138,18 @@
 			</div>
 		</div>
 		<!-- 时间选择 -->
-		<dateTime></dateTime>
+		<dateTime :isShow="timePopu" @tunepopu="closepopu"></dateTime>
+		<cAddress :isShow="addressPopu" @tunepopu="closepopu"></cAddress>
 	</div>
 </template>
 
 <script>
 	import dateTime from '@/components/dateTime.vue';
+	import cAddress from '@/components/cAddress.vue';
 	export default {
 		components: {
-			dateTime
+			dateTime,
+			cAddress
 		},
 		data() {
 			return {
@@ -158,10 +161,21 @@
 				timeDuan: ['上午', '下午', '夜间'],
 				activeChang: 0,
 				changArr: ['头等/商务舱', '经济舱'],
-				isChecked: false
+				isChecked: false,
+				timePopu:false,
+				addressPopu:false
 			}
 		},
 		methods: {
+			tuneUp(){//调起时间弹框
+				this.timePopu = true;
+			},
+			tuneUpAddress(){
+				this.addressPopu = true;
+			},
+			closepopu(e){
+				e==0 ? this.timePopu = false : this.addressPopu = false;
+			},
 			voiceY() {
 				this.voice = !this.voice
 			},
@@ -196,6 +210,12 @@
 					path: '/personalCenter',
 					query: ''
 				})
+			},
+			goPlane(){//前往机票列表页
+				this.$router.push({
+					path: '/planeTicket',
+					query: ''
+				})
 			}
 		},
 	}