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"
},
"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"
},

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

View File

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

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 {
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;
@ -50,4 +60,124 @@ input,textarea{
background: rgba(0,0,0,.5);
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;
}

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 router from '@/router'//引入router
import App from './App.vue'
import { createApp } from 'vue';
import router from '@/router';//引入router
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/animate.min.css'
import '@/assets/css/style.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');

View File

@ -1,71 +1,99 @@
<template>
<div class="main">
<div class="login-con-hed">
<img class="img" src="../assets/login_02.gif" alt="">
</div>
<form class="pdlr30" id="login">
<div class="int">
<p>账号</p>
<input type="text" v-model="accountNumber" placeholder="请输入账号">
</div>
<div class="int">
<p>密码</p>
<input type="password" v-model="passwordVal" placeholder="请输入密码">
</div>
<button @click="loginEv" class="btn" type="button">登录</button>
</form>
<p class="copyright">版权信息</p>
<div v-if="msg!=''" class="tank">{{msg}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
accountNumber: '',
passwordVal: '',
msg: '',
times:0
}
},
methods: {
loginEv() {
if(this.times==0){
this.times++;
if (!this.accountNumber) {
this.msg = '请输入账号';
} else if(!this.passwordVal){
this.msg = '请输入密码';
} else {
this.$router.push({path: '/session'})
}
setTimeout(()=>{
this.times = 0;
this.msg = '';
},2000)
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
<template>
<div class="main">
<div class="login-con-hed">
<img class="img" src="../assets/login_02.gif" alt="">
</div>
<form class="pdlr30" id="login">
<div class="int">
<p>ADD号码</p>
<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>
<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>
<p class="copyright">版权信息</p>
<div v-if="msg!=''" class="tank">{{msg}}</div>
</div>
</template>
<script>
import AuthenticationContext from 'adal-angular';
// const authContext = new AuthenticationContext();
export default {
name: 'HelloWorld',
data() {
return {
accountNumber: '',
passwordVal: '',
msg: '',
times: 0,
switchShow:true,
clearShow:false
}
},
methods: {
loginEv() {
// this.$authContext.login();
// authContext.logOut()
if (this.times == 0) {
this.times++;
if (!this.accountNumber) {
this.msg = '请输入ADD号码';
} else if (!this.passwordVal) {
this.msg = '请输入密码';
} else {
// window.location.href = "https://u-dzai.51ima.com/vChat?token=77vANnUVBjMj&showChat=true&layout=true"
this.$router.push({
path: '/session'
})
}
setTimeout(() => {
this.times = 0;
this.msg = '';
}, 2000)
}
},
switchEv(){//
this.switchShow = !this.switchShow;
},
inputEv(){//
if(this.accountNumber!=''){this.clearShow = true;}
},
clearEv(){//
this.clearShow = false;
this.accountNumber = '';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

View File

@ -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>
我要定11月11日从成都到北京上午的机票
</p>
<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:'',
showFun:false,
times:0,
fade: '',
showFun: false,
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'
if(!this.showFun) {
this.times % 2 != 0 ? this.fade = 'fadeIn' : this.fade = 'fadeOut'
if (!this.showFun) {
this.showFun = true;
} else {
setTimeout(()=>{
setTimeout(() => {
this.showFun = !this.showFun;
},1000)
}, 1000)
}
},
checkOrder(){//
this.$router.push({path:'/qrderQuery',query:''})
chooseTime(index) {
this.activeTime = index;
},
goPerson(){//
this.$router.push({path:'/personalCenter',query:''})
chooseChang(index) {
this.activeChang = index;
},
changeEv() {
this.isChecked = !this.isChecked;
},
checkOrder() { //
this.$router.push({
path: '/qrderQuery',
query: ''
})
},
goPerson() { //
this.$router.push({
path: '/personalCenter',
query: ''
})
}
},
}