master
chen 2021-11-22 08:45:29 +08:00
parent d1f4e17d27
commit 871a142b55
12 changed files with 28806 additions and 27899 deletions

55957
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 355 B

After

Width:  |  Height:  |  Size: 362 B

BIN
src/assets/clear-input.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,13 +1,23 @@
a { 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标签的下划线 */
.router-link-active { .router-link-active {
text-decoration: none; text-decoration: none;
} }
.posr{
position: relative;
}
input,textarea{ input,textarea{
outline: none; 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{ .fun-box{
position:absolute; position:absolute;
top:2.375rem; top:2.375rem;
@ -51,3 +61,123 @@ input,textarea{
color: #fff; color: #fff;
border-radius: 0.1875rem; 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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

325
src/components/dateTime.vue Normal file
View File

@ -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>

View File

@ -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.use(router);//挂载使用router
app.mount('#app') app.use(ElementPlus);//挂载使用ElementPlus
app.mount('#app');

View File

@ -5,12 +5,21 @@
</div> </div>
<form class="pdlr30" id="login"> <form class="pdlr30" id="login">
<div class="int"> <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>
<div class="int"> <div class="int">
<p>密码</p> <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> </div>
<button @click="loginEv" class="btn" type="button">登录</button> <button @click="loginEv" class="btn" type="button">登录</button>
</form> </form>
@ -19,6 +28,8 @@
</div> </div>
</template> </template>
<script> <script>
import AuthenticationContext from 'adal-angular';
// const authContext = new AuthenticationContext();
export default { export default {
name: 'HelloWorld', name: 'HelloWorld',
data() { data() {
@ -26,25 +37,42 @@
accountNumber: '', accountNumber: '',
passwordVal: '', passwordVal: '',
msg: '', msg: '',
times:0 times: 0,
switchShow:true,
clearShow:false
} }
}, },
methods: { methods: {
loginEv() { loginEv() {
if(this.times==0){ // this.$authContext.login();
// authContext.logOut()
if (this.times == 0) {
this.times++; this.times++;
if (!this.accountNumber) { if (!this.accountNumber) {
this.msg = '请输入账号'; this.msg = '请输入ADD号码';
} else if(!this.passwordVal){ } else if (!this.passwordVal) {
this.msg = '请输入密码'; this.msg = '请输入密码';
} else { } 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.times = 0;
this.msg = ''; this.msg = '';
},2000) }, 2000)
} }
},
switchEv(){//
this.switchShow = !this.switchShow;
},
inputEv(){//
if(this.accountNumber!=''){this.clearShow = true;}
},
clearEv(){//
this.clearShow = false;
this.accountNumber = '';
} }
} }
} }

View File

@ -38,9 +38,7 @@
<div class="left"> <div class="left">
<p class="date"><span>今天</span><span>17:45:52</span></p> <p class="date"><span>今天</span><span>17:45:52</span></p>
<div class="text"> <div class="text">
<p> <p>在吗</p>
在吗
</p>
</div> </div>
</div> </div>
<div class="rit"> <div class="rit">
@ -52,10 +50,7 @@
<p class="date"><span>今天</span><span>17:45:52</span></p> <p class="date"><span>今天</span><span>17:45:52</span></p>
<div class="text"> <div class="text">
<img src="../assets/icon_play_w@3x.png" alt=""> <img src="../assets/icon_play_w@3x.png" alt="">
<p> <p>我要定11月11日从成都到北京上午的机票</p>
我要定11月11日从成都到北京上午的机票
</p>
</div> </div>
</div> </div>
<div class="rit"> <div class="rit">
@ -70,7 +65,32 @@
<p class="date"><span>今天</span><span>17:45:52</span></p> <p class="date"><span>今天</span><span>17:45:52</span></p>
<div class="text"> <div class="text">
<div class="gd"> <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> <button type="button">生产工单</button>
</div> </div>
</div> </div>
@ -80,9 +100,7 @@
<div class="left"> <div class="left">
<p class="date"><span>今天</span><span>17:45:52</span></p> <p class="date"><span>今天</span><span>17:45:52</span></p>
<div class="text"> <div class="text">
<p> <p>转人工</p>
转人工
</p>
</div> </div>
</div> </div>
<div class="rit"> <div class="rit">
@ -119,39 +137,65 @@
<p class="text">请用普通话描述您需求我要定11月11日从成都到北京上午的机票</p> <p class="text">请用普通话描述您需求我要定11月11日从成都到北京上午的机票</p>
</div> </div>
</div> </div>
<!-- 时间选择 -->
<dateTime></dateTime>
</div> </div>
</template> </template>
<script> <script>
import dateTime from '@/components/dateTime.vue';
export default { export default {
components: {
dateTime
},
data() { data() {
return { return {
voice: false, voice: false,
fade:'', fade: '',
showFun:false, showFun: false,
times:0, times: 0,
activeTime: 0,
timeDuan: ['上午', '下午', '夜间'],
activeChang: 0,
changArr: ['头等/商务舱', '经济舱'],
isChecked: false
} }
}, },
methods: { methods: {
voiceY() { voiceY() {
this.voice = !this.voice this.voice = !this.voice
}, },
funEv(){// funEv() { //
this.times++; 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; this.showFun = true;
} else { } else {
setTimeout(()=>{ setTimeout(() => {
this.showFun = !this.showFun; 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: ''
})
} }
}, },
} }