提交

package.json

@@ -8,8 +8,11 @@
 		"lint": "vue-cli-service lint"
 	},
 	"dependencies": {
+		"adal-angular": "^1.0.18",
 		"ant-design-vue": "^2.2.8",
 		"core-js": "^3.6.5",
+		"element": "^0.1.4",
+		"element-plus": "^1.2.0-beta.3",
 		"vue": "^3.0.0",
 		"vue-router": "^4.0.12"
 	},

src/App.vue

@@ -72,7 +72,9 @@
 		letter-spacing: 0;
 		line-height: 1.125rem;
 	}
-
+	#login .int {
+		position: relative;
+	}
 	#login .int input {
 		background: #FFFFFF;
 		border: 1px solid #D2D5CE;
@@ -81,6 +83,7 @@
 		width: 100%;
 		height: 2.5rem;
 		margin-bottom: 1.5rem;
+		padding-right: 70px;
 	}
 
 	#login .btn {
@@ -199,18 +202,18 @@
 		letter-spacing: 0;
 		width: 15.9375rem;
 		box-sizing: border-box;
-		padding: .625rem;
+		padding: 1.625rem 0.9375rem 0.9375rem 0.9375rem;
 		background-color: #fff;
 		line-height: 1.25rem;
 	}
 
 	.customerService .rit .text .gd>:nth-child(1) {
 		width: 100%;
-		height: 6.875rem;
+		height: auto;
 	}
 
 	.customerService .rit .text .gd>:nth-child(2) {
-		width: 14.6875rem;
+		width: 100%;
 		height: 2.5rem;
 		background: #00A3E0;
 		border-radius: .125rem;

src/assets/css/style.css

@@ -1,13 +1,23 @@
 a {
-  text-decoration: none;
+	text-decoration: none;
+	color: #292D2D;
+	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+	-webkit-user-select: none;
+	-moz-user-focus: none;
+	-moz-user-select: none;
 }
 /* 去掉router-link标签的下划线 */
 .router-link-active {
 	text-decoration: none;
 }
+.posr{
+	position: relative;
+}
 input,textarea{
 	outline: none;
 }
+ul{list-style: none;}
+.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
 .fun-box{
 	position:absolute;
 	top:2.375rem;
@@ -51,3 +61,123 @@ input,textarea{
 	color: #fff;
 	border-radius: 0.1875rem;
 }
+.switch-box{
+	box-sizing: border-box;
+	width: 44px;height: 22px;border-radius: 40px;background-color: #00A3E0;position: absolute;right: 10px;top: 9px;
+	line-height: 22px;
+	padding: 0 8px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+.backF2{
+	background-color: #dcdfe6;
+	justify-content:flex-end;
+}
+.switch-box span{
+	font-size: 12px;
+	color: #FFFFFF;
+}
+.switch-box div{
+	position: absolute;
+	right: 2px;
+	width: 18px;
+	height: 18px;
+	border-radius: 100%;
+	background-color: #FFFFFF;
+}
+.right-scroll{
+	left: 2px!important;
+}
+.clear-input{
+	position: absolute;right: 10px;top: 12px;
+}
+.gd .info-box>div:nth-child(1){
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-bottom: 11px;
+	font-size: 18px;
+	color: #100B0C;
+	font-weight: bold;
+}
+.gd .info-box>div:nth-child(1) div{
+	width: 42%;
+	flex-shrink: 0;
+	overflow: hidden;
+	
+}
+.gd .info-box>div:nth-child(1) div:last-child{
+	text-align: right;
+}
+.gd .info-box>div:nth-child(1) img{
+	flex-shrink: 0;
+}
+.gd .info-box>div:nth-child(2){
+	border-top: 1px solid #e8eae6;
+	border-bottom: 1px solid #e8eae6;
+	padding: 11px 0;
+}
+.gd .info-box>div:nth-child(2) p {
+	font-size: 18px;
+	font-weight: bold;
+	margin-right: 4px;
+}
+.gd .info-box>div:nth-child(2) div{
+	display: flex;
+	justify-content: center;
+	margin-bottom: 11px;
+}
+.gd .info-box>div:nth-child(2) div span{
+	margin-top: 4px;
+}
+.gd .info-box>div:nth-child(2) ul {
+	display: flex;
+	justify-content: space-between;
+	background-color: #f0f2f5;
+	max-width: 8.75rem;
+	margin: 0 auto;
+	border-radius: 4px;
+	padding: 2px;
+}
+.gd .info-box>div:nth-child(2) ul li {
+	width: 32%;
+}
+.gd .info-box>div:nth-child(2) ul li a{
+	font-size: 12px;
+	display: inline-block;
+	width: 100%;
+	text-align: center;
+}
+.activeTime {
+	color: #00A3E0;
+	background-color: #FFFFFF;
+	border-radius: 4px;
+}
+.gd .info-box>div:nth-child(3){
+	background-color: #f0f2f5;
+	max-width: 124px;
+	border-radius: 4px;
+	margin-top: 10px;
+	font-size: 12px;
+	text-align: center;
+	padding: 2px;
+}
+.gd .info-box>div:nth-child(3) span{
+	flex-shrink: 0;
+	padding: 2px 5px;
+}
+.activeCang{
+	color: #00A3E0;
+	background-color: #FFFFFF;
+	border-radius: 4px;
+}
+.gd .info-box>div:nth-child(4){
+	display: flex;
+	align-items: center;
+	font-size: 12px;
+	margin: 16px 0;
+}
+.gd .info-box>div:nth-child(4) input{
+	margin-right: 4px;
+}

src/components/dateTime.vue

@@ -0,0 +1,325 @@
+<template>
+	<div v-show="isShow" class="date-box">
+		<div class="date-con">
+			<div class="date-nav">
+				<img src="../assets/tittle_btn_close@2x.png" width="20" height="20">
+				<div class="date-title">选择出发日期</div>
+				<div class="date-clear">清除</div>
+			</div>
+			<div class="day-box">
+				<div v-for="(item,index) in dayArr" :class="item.finish?'':'active-day'" :key="index">{{item.title}}</div>
+			</div>
+			<div class="all-day">
+				<!-- 当月 -->
+				<div class="present-title">{{presentMonth}}</div>
+				<div class="present-box">
+					<template v-for="(item,index) in presentArr" :key="index">
+						<div @click="choosePresent(index)" :class="{'past-day':item.finish,'active-num':item.isChoose}">{{item.title}}</div>
+					</template>
+				</div>
+				<!-- 下月 -->
+				<div class="present-title">{{nextMonth}}</div>
+				<div class="present-box">
+					<template v-for="(item,index) in nextArr" :key="index">
+						<div @click="chooseNext(index)" :class="{'past-day':item.finish,'active-num':item.isChoose}">{{item.title}}</div>
+					</template>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			isShow: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				// 星期
+				dayArr: [{
+						title: '一',
+						finish: true
+					},
+					{
+						title: '二',
+						finish: true
+					},
+					{
+						title: '三',
+						finish: true
+					},
+					{
+						title: '四',
+						finish: true
+					},
+					{
+						title: '五',
+						finish: true
+					},
+					{
+						title: '六',
+						finish: false
+					},
+					{
+						title: '日',
+						finish: false
+					}
+				],
+				// 当月
+				presentMonth:'2021年01月',
+				presentTian:0,
+				presentArr: [],
+				// 选中的时间
+				presentZanTime: [],
+				// 缓冲区
+				bufferArr: [],
+				// 下月
+				nextMonth:'2021年02月',
+				nextArr:[],
+				nextZanTime:[],
+				bufferArrNext:[]
+			}
+		},
+		mounted() {
+			this.presentEv();
+		},
+		methods: {
+			presentEv() { //获取当前月份的日期
+				this.obtainDate(0);
+			},
+			obtainDate(index) { //获取日期
+				// 获取当月的天数
+				let date = new Date();
+				//获取当前日(1-31)
+				let presentDay = date.getDate();
+				let year = date.getFullYear();
+				let month = date.getMonth() + 1;
+				let d = new Date(year, month, 0);
+				this.presentMonth = `${year}年${month < 10 ? month = '0'+ month : month}月`;
+				this.nextMonth = `${year}年${month < 10 ? month = '0'+ month+1 : month+1}月`;
+				let week = new Date(`${year}/${month}/1`).getDay();//当月1号，星期几
+				for (let i = 1; i < week; i++) {
+					this.presentArr.push({title: '',finish: false,isChoose: false})
+				}
+				console.log(d.getDate()); //当前有多少天
+				// 获取当月的所有日期
+				let current_month_num = d.getDate();
+				this.presentTian = current_month_num;
+				for (let i = 1; i <= current_month_num; i++) {
+					// let day = date.setDate(i);//转时间戳
+					let fini1 = false;
+					for (let j = 1; j <= presentDay; j++) {
+						if (i == j) {
+							fini1 = true;
+						}
+					}
+					let num1 = i < 10 ? num1 = '0' + i : num1 = i;
+					let presentObj = {
+						title: num1,
+						finish: fini1,
+						isChoose: false
+					}
+					this.presentArr.push(presentObj);
+				}
+				// 获取下月所有日期
+				if(month+1>12){
+					year++;
+					month = 1;
+				} else {
+					month++;
+				}
+				let week2 = new Date(`${year}/${month}/1`).getDay();//当月1号，星期几
+				for (let i = 1; i < week2; i++) {
+					this.nextArr.push({title: '',finish: false,isChoose: false})
+				}
+				let n = new Date(year, month, 0);
+				let next_month_num = n.getDate();
+				for (let i = 1; i <= next_month_num; i++) {
+					let num1 = i < 10 ? num1 = '0' + i : num1 = i;
+					let presentObj = {
+						title: num1,
+						finish: false,
+						isChoose: false
+					}
+					this.nextArr.push(presentObj);
+				}
+			},
+			choosePresent(index) {
+				this.publicEv(this.presentArr,this.bufferArr,this.presentZanTime,index,1);
+			},
+			chooseNext(index){
+				this.publicEv(this.nextArr,this.bufferArrNext,this.nextZanTime,index,2);
+			},
+			publicEv(arr=[],zanarr=[],choosearr=[],index,who){
+				if (!arr[index].finish) { //今日至未来可点
+					let cunIndex1 = zanarr.indexOf(arr[index].title); //查找缓冲区有无当前选中的日期
+					if (cunIndex1 == -1) { //没有
+						arr[index].isChoose = true; //设置选中日期颜色
+						zanarr.push({
+							title: arr[index].title,
+							id: (index + 1)
+						}); //添加至缓冲区
+						if(zanarr[zanarr.length-1].title < zanarr[0].title){
+							zanarr.unshift(zanarr[zanarr.length-1]);
+							console.log(zanarr);
+							zanarr = zanarr.splice(zanarr.length-2,zanarr.length-1);
+						}
+						zanarr.splice(1,zanarr.length-2);//去除首尾之外的数据
+						zanarr = zanarr.sort(function(a, b) {//升序
+							return (a.title - b.title)
+						});
+						zanarr.forEach((item1, index1) => { //循环缓冲区的日期
+							arr.forEach((item2, index2) => { //循环当月日期
+								if (item1.title * 1 == item2.title * 1) { //如果缓冲区日期等于当月日期
+									for (let i = zanarr[0].id - 1; i < item1.id; i++) { //以缓冲区第一个-1为起始索引，以缓冲区最后一个为长度循环
+										arr[i].isChoose = true;
+									}
+								} else {
+									arr[index2].isChoose = false;
+								}
+							})
+						})
+						choosearr = [];
+						arr.forEach(item3 => {
+							if (item3.isChoose) {
+								choosearr.push(item3);
+							}
+						})
+					} else { // 有
+						zanarr.splice(cunIndex1, 1);
+					}
+					if(this.bufferArr.length!=0 && this.bufferArrNext.length!=0 && who==2){
+						for (let i = this.bufferArr[0].id - 1; i < this.presentArr.length; i++) { //以缓冲区第一个-1为起始索引，以缓冲区最后一个为长度循环
+							this.presentArr[i].isChoose = true;
+						}
+						this.presentArr.forEach(item => {
+							if (item.isChoose) {
+								this.presentZanTime.push(item);
+							}
+						})
+						let emptyDay = this.nextArr.filter(item=>item.title=='').length;
+						for (let i = emptyDay; i < this.bufferArrNext[0].id-1; i++) { //以缓冲区第一个-1为起始索引，以缓冲区最后一个为长度循环
+							this.nextArr[i].isChoose = true;
+						}
+						this.nextArr.forEach(item => {
+							if (item.isChoose) {
+								this.nextZanTime.push(item);
+							}
+						})
+					}
+					if(this.bufferArr.length!=0 && this.bufferArrNext.length!=0 && who==1){
+						for (let i = this.bufferArr[0].id - 1; i < this.presentArr[index].id; i++) { //以缓冲区第一个-1为起始索引，以缓冲区最后一个为长度循环
+							this.presentArr[i].isChoose = true;
+						}
+						this.presentArr.forEach(item => {
+							if (item.isChoose) {
+								this.presentZanTime.push(item);
+							}
+						})
+						for (let i = 0; i < this.nextArr.length; i++) { //以缓冲区第一个-1为起始索引，以缓冲区最后一个为长度循环
+							this.nextArr[i].isChoose = false;
+						}
+						this.nextZanTime = [];
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	.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: space-between;
+		padding: 0 15px;
+	}
+
+	.date-title {
+		font-size: 16px;
+		font-weight: bold;
+	}
+
+	.date-clear {
+		color: #00A3E0;
+	}
+
+	/* 星期 */
+	.day-box {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 10px;
+		margin-bottom: 6px;
+		color: #100B0C;
+		font-size: 12px;
+		padding: 0 24px;
+	}
+
+	.active-day {
+		color: #FF6555;
+	}
+	.all-day {
+		height: 440px;
+		overflow: hidden;
+		overflow-y: scroll;
+	}
+	/* 当月 */
+	.present-title {
+		font-size: 16px;
+		text-align: center;
+		font-weight: bold;
+		padding: 8px 0;
+		background-color: #f2f2f2;
+	}
+
+	.present-box {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.present-box div {
+		width: 14.26%;
+		height: 50px;
+		line-height: 50px;
+		text-align: center;
+		font-size: 14px;
+		font-weight: bold;
+	}
+	.present-box div div{
+		width: 100%;
+	}
+	.past-day {
+		color: #999F9F !important;
+		background-color: #FFFFFF !important;
+	}
+
+	.active-num {
+		background-color: #00A3E0;
+		color: #FFFFFF;
+	}
+</style>

src/main.js

@@ -1,11 +1,16 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import router from '@/router'//引入router
+import router from '@/router';//引入router
-import App from './App.vue'
+import ElementPlus from 'element-plus';//引入element-plus
+// import 'element-plus/lib/theme-chalk/index.css';
+
+import App from './App.vue';
 
 // 引入公共样式
-import '@/assets/css/style.css'
+import '@/assets/css/style.css';
-import '@/assets/css/animate.min.css'
+// 应用动画样式
+import '@/assets/css/animate.min.css';
 
-const app = createApp(App)
+const app = createApp(App);
 app.use(router);//挂载使用router
-app.mount('#app')
+app.use(ElementPlus);//挂载使用ElementPlus
+app.mount('#app');

src/view/login.vue

@@ -5,12 +5,21 @@
 		</div>
 		<form class="pdlr30" id="login">
 			<div class="int">
-				<p>账号</p>
+				<p>ADD号码</p>
-				<input type="text" v-model="accountNumber" placeholder="请输入账号">
+				<div class="posr">
+					<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>
 			<div class="int">
 				<p>密码</p>
-				<input type="password" v-model="passwordVal" placeholder="请输入密码">
+				<div class="posr">
+					<input :type="switchShow?'password':'text'" v-model="passwordVal" placeholder="请输入密码">
+					<div class="switch-box" :class="switchShow?'':'backF2'">
+						<span>{{switchShow?'显':'隐'}}</span>
+						<div @click="switchEv" :class="switchShow?'':'right-scroll'"></div>
+					</div>
+				</div>
 			</div>
 			<button @click="loginEv" class="btn" type="button">登录</button>
 		</form>
@@ -19,6 +28,8 @@
 	</div>
 </template>
 <script>
+	import AuthenticationContext from 'adal-angular';
+	// const authContext = new AuthenticationContext();
 	export default {
 		name: 'HelloWorld',
 		data() {
@@ -26,25 +37,42 @@
 				accountNumber: '',
 				passwordVal: '',
 				msg: '',
-				times:0
+				times: 0,
+				switchShow:true,
+				clearShow:false
 			}
 		},
 		methods: {
 			loginEv() {
-				if(this.times==0){
+				// this.$authContext.login();
+				// authContext.logOut()
+				if (this.times == 0) {
 					this.times++;
 					if (!this.accountNumber) {
-						this.msg = '请输入账号';
+						this.msg = '请输入ADD号码';
-					} else if(!this.passwordVal){
+					} else if (!this.passwordVal) {
 						this.msg = '请输入密码';
 					} else {
-						this.$router.push({path: '/session'})
+						// window.location.href = "https://u-dzai.51ima.com/vChat?token=77vANnUVBjMj&showChat=true&layout=true"
+						this.$router.push({
+							path: '/session'
+						})
 					}
-					setTimeout(()=>{
+					setTimeout(() => {
 						this.times = 0;
 						this.msg = '';
-					},2000)
+					}, 2000)
 				}
+			},
+			switchEv(){//密码显隐切换事件
+				this.switchShow = !this.switchShow;
+			},
+			inputEv(){//输入框监听事件
+				if(this.accountNumber!=''){this.clearShow = true;}
+			},
+			clearEv(){//清空输入框事件
+				this.clearShow = false;
+				this.accountNumber = '';
 			}
 		}
 	}

src/view/session.vue

@@ -38,9 +38,7 @@
 				<div class="left">
 					<p class="date"><span>今天</span><span>17:45:52</span></p>
 					<div class="text">
-						<p>
+						<p>在吗</p>
-							在吗
-						</p>
 					</div>
 				</div>
 				<div class="rit">
@@ -52,10 +50,7 @@
 					<p class="date"><span>今天</span><span>17:45:52</span></p>
 					<div class="text">
 						<img src="../assets/icon_play_w@3x.png" alt="">
-						<p>
+						<p>我要定11月11日，从成都到北京上午的机票。</p>
-
-							我要定11月11日，从成都到北京上午的机票。
-						</p>
 					</div>
 				</div>
 				<div class="rit">
@@ -70,7 +65,32 @@
 					<p class="date"><span>今天</span><span>17:45:52</span></p>
 					<div class="text">
 						<div class="gd">
-							<div></div>
+							<div class="info-box">
+								<div>
+									<div class="clips1">重庆</div>
+									<img src="../assets/icon_plane@3x.png" width="20" height="20">
+									<div class="clips1">上海浦东</div>
+								</div>
+								<div>
+									<div>
+										<p>10月21日</p>
+										<span>周四</span>
+									</div>
+									<ul>
+										<li @click="chooseTime(index)" v-for="(item,index) in timeDuan" :key="index"><a
+												:class="activeTime==index?'activeTime':''"
+												href="javascript:;">{{item}}</a></li>
+									</ul>
+								</div>
+								<div>
+									<span @click="chooseChang(index)" :class="activeChang==index?'activeCang':''"
+										v-for="(item,index) in changArr" :key="index">{{item}}</span>
+								</div>
+								<div>
+									<input @click="changeEv" type="radio" :checked="isChecked" id="radio" /><label
+										for="radio">机票+酒店</label>
+								</div>
+							</div>
 							<button type="button">生产工单</button>
 						</div>
 					</div>
@@ -80,9 +100,7 @@
 				<div class="left">
 					<p class="date"><span>今天</span><span>17:45:52</span></p>
 					<div class="text">
-						<p>
+						<p>转人工</p>
-							转人工
-						</p>
 					</div>
 				</div>
 				<div class="rit">
@@ -119,39 +137,65 @@
 				<p class="text">请用普通话描述您需求，如：我要定11月11日，从成都到北京上午的机票。</p>
 			</div>
 		</div>
+		<!-- 时间选择 -->
+		<dateTime></dateTime>
 	</div>
 </template>
 
 <script>
+	import dateTime from '@/components/dateTime.vue';
 	export default {
+		components: {
+			dateTime
+		},
 		data() {
 			return {
 				voice: false,
-				fade:'',
+				fade: '',
-				showFun:false,
+				showFun: false,
-				times:0,
+				times: 0,
+				activeTime: 0,
+				timeDuan: ['上午', '下午', '夜间'],
+				activeChang: 0,
+				changArr: ['头等/商务舱', '经济舱'],
+				isChecked: false
 			}
 		},
 		methods: {
 			voiceY() {
 				this.voice = !this.voice
 			},
-			funEv(){//右上角功能菜单
+			funEv() { //右上角功能菜单
 				this.times++;
-				this.times%2!=0 ? this.fade = 'fadeIn' : this.fade = 'fadeOut'
+				this.times % 2 != 0 ? this.fade = 'fadeIn' : this.fade = 'fadeOut'
-				if(!this.showFun) {
+				if (!this.showFun) {
 					this.showFun = true;
 				} else {
-					setTimeout(()=>{
+					setTimeout(() => {
 						this.showFun = !this.showFun;
-					},1000)
+					}, 1000)
 				}
 			},
-			checkOrder(){//查询订单
+			chooseTime(index) {
-				this.$router.push({path:'/qrderQuery',query:''})
+				this.activeTime = index;
 			},
-			goPerson(){//前往个人中心
+			chooseChang(index) {
-				this.$router.push({path:'/personalCenter',query:''})
+				this.activeChang = index;
+			},
+			changeEv() {
+				this.isChecked = !this.isChecked;
+			},
+			checkOrder() { //查询订单
+				this.$router.push({
+					path: '/qrderQuery',
+					query: ''
+				})
+			},
+			goPerson() { //前往个人中心
+				this.$router.push({
+					path: '/personalCenter',
+					query: ''
+				})
 			}
 		},
 	}