aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source 
first commit
This commit is contained in:
zhouchengrong
2023-07-26 15:54:34 +08:00
parent 8372f4485f
commit 913b100ac9
22 changed files with 3287 additions and 1377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

513
src/component/HomePage/Header.vue
View File

@@ -1,32 +1,75 @@
<template>
<div>
<header class="header_component">
<img class="header_logo" @click="turnToNewPage('https://www.aidlab.hk/en/')" src="@/assets/images/loginPage/aida_logo.png" />
<nav class="header_nav_content">
<div :class="['nav_item', $route.name === 'home'?'select_nav':'']" @click="turnToPage('home')">HOME</div>
<div :class="['nav_item', $route.name === 'library'?'select_nav':'']" @click="turnToPage('library')">LIBRARY</div>
<div :class="['nav_item', $route.name === 'history'?'select_nav':'']" @click="turnToPage('history')">HISTORY</div>
</nav>
<div class="header_right_content">
<div class="header_icon icon iconfont icon-touxiang3"></div>
<div class="header_user_content">
<div class="username">{{userInfo?.userName}}</div>
<div :class="['icon','iconfont', 'icon-xiala', isShowOperate?'icon_rotate':'']" @click.stop="changeShowOperateContent()"></div>
<div class="username">{{ userInfo?.userName }}</div>
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
isShowOperate ? 'icon_rotate' : '',
]"
@click.stop="changeShowOperateContent()"
></div>
<nav class="select_block" v-show="isShowOperate">
<!-- <div class="select_item" @click="showBindEmailModal()">
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
</div> -->
<div class="select_item" @click="logout()">
<span class="icon iconfont icon-tuichu"></span><span class="select_item_des">log off</span>
<span class="icon iconfont icon-tuichu"></span
><span class="select_item_des">log off</span>
</div>
</nav>
</div>
</div>
<nav class="header_nav_content">
<div
:class="[
'nav_item',
$route.name === 'home' ? 'select_nav' : '',
]"
@click="turnToPage('home')"
>
HOME
</div>
<div
:class="[
'nav_item',
$route.name === 'library' ? 'select_nav' : '',
]"
@click="turnToPage('library')"
>
LIBRARY
</div>
<div
:class="[
'nav_item',
$route.name === 'history' ? 'select_nav' : '',
]"
@click="turnToPage('history')"
>
HISTORY
</div>
</nav>
<div class="header_right">
<img
class="header_logo"
@click="turnToNewPage('https://www.aidlab.hk/en/')"
src="@/assets/images/loginPage/aida_logo.png"
/>
<Habit></Habit>
</div>
</header>
<a-modal class="modal_component"
v-model:visible="bindEmailVisible"
:footer="null"
<a-modal
class="modal_component"
v-model:visible="bindEmailVisible"
:footer="null"
title="Mailbox binding"
width="56rem"
:maskClosable="false"
@@ -37,284 +80,323 @@
</template>
<div class="bind_email_content" v-if="isHaveBindEmail">
<div class="bind_email_tip">you have binded email</div>
<div class="bind_email">{{userInfo.email}}</div>
<div class="bind_email">{{ userInfo.email }}</div>
</div>
<div class="bind_email_content" v-else>
<div class="bind_email_content" v-else>
<!-- 绑定邮箱第一步 start -->
<div v-show="bindEmailStep === 1">
<div class="bind_email_form_content">
<div class="bind_email_form_title">Email</div>
<input class="bind_email_form_input" placeholder="Enter a new email" v-model="email" @keydown.enter="emailNextStepFun()">
<input
class="bind_email_form_input"
placeholder="Enter a new email"
v-model="email"
@keydown.enter="emailNextStepFun()"
/>
</div>
<div
class="bind_email_submit_button"
@click="emailNextStepFun()"
>
Next step
</div>
<div class="bind_email_submit_button" @click="emailNextStepFun()">Next step</div>
</div>
<!-- 绑定邮箱第一步 end -->
<!-- 绑定邮箱第二步 start -->
<div v-show="bindEmailStep === 2">
<div @click="emailLastStepFun()">
<span class="icon iconfont icon--shangyibu"></span><span class="email_last_step_content">Enter verification code</span>
<span class="icon iconfont icon--shangyibu"></span
><span class="email_last_step_content"
>Enter verification code</span
>
</div>
<div class="email_last_step_des">
<div class="sent_email_content">Sent to {{email}}</div>
<div class="sent_email_content">
Sent to {{ email }}
</div>
<div class="tip_content">
<span v-show="time">{{time}}s</span>
<span v-show="!time" @click="emailNextStepFun()">Resend</span>
<span v-show="time">{{ time }}s</span>
<span v-show="!time" @click="emailNextStepFun()"
>Resend</span
>
</div>
</div>
<VerificationCodeInput :ct="emailCode" @sendCaptcha="submitBindEmail($event)"></VerificationCodeInput>
<VerificationCodeInput
:ct="emailCode"
@sendCaptcha="submitBindEmail($event)"
></VerificationCodeInput>
</div>
<!-- 绑定邮箱第一步 end -->
</div>
</a-modal>
</div>
</template>
<script >
import { defineComponent ,createVNode} from 'vue'
import {isEmail} from '@/tool/util'
import {setCookie, getCookie, WriteCookie} from '@/tool/cookie'
import VerificationCodeInput from '@/component/LoginPage/verificationCodeInput.vue'
import { defineComponent, createVNode } from "vue";
import { isEmail } from "@/tool/util";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import Habit from "@/component/Detail/habit.vue";
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
export default defineComponent({
components:{
VerificationCodeInput,
},
data(){
return{
isShowOperate:false,
bindEmailVisible:false,
isHaveBindEmail:false,
bindEmailStep:1,
email:'',
emailCode:['','','','','',''],//邮箱验证码
time:60,//60秒倒计时
components: {
VerificationCodeInput,
Habit,
},
data() {
return {
isShowOperate: false,
bindEmailVisible: false,
isHaveBindEmail: false,
bindEmailStep: 1,
email: "",
emailCode: ["", "", "", "", "", ""], //邮箱验证码
time: 60, //60秒倒计时
timer: 0,
userInfo:{},
timerOperate:null,
numTime:30,
timerSec:null,
modalWarning:null
}
userInfo: {},
timerOperate: null,
numTime: 30,
timerSec: null,
modalWarning: null,
};
},
mounted(){
this.userInfo = JSON.parse(getCookie('userInfo'))
if(!this.userInfo){
this.$router.replace('/login')
}else{
this.accountIsLogin(this.userInfo)
mounted() {
this.userInfo = JSON.parse(getCookie("userInfo"));
if (!this.userInfo) {
this.$router.replace("/login");
} else {
this.accountIsLogin(this.userInfo);
}
this.isHaveBindEmail = this.userInfo?.email ? true : false
this.isHaveBindEmail = this.userInfo?.email ? true : false;
this.operateClick()
document.addEventListener('click',this.operateClick)
this.operateClick();
document.addEventListener("click", this.operateClick);
},
methods:{
turnToNewPage(url){
window.open(url)
methods: {
turnToNewPage(url) {
window.open(url);
},
turnToPage(name){
let noRefresh = name === 'home' ? true :false
this.$router.push({name:name,params: {noRefresh:noRefresh}})
turnToPage(name) {
let noRefresh = name === "home" ? true : false;
this.$router.push({ name: name, params: { noRefresh: noRefresh } });
},
//点击下拉图标出现操作
changeShowOperateContent(){
this.isShowOperate = !this.isShowOperate
document.addEventListener('click',this.closeShowOperateContent,false)
changeShowOperateContent() {
this.isShowOperate = !this.isShowOperate;
document.addEventListener(
"click",
this.closeShowOperateContent,
false
);
},
//关闭下拉图标
closeShowOperateContent(){
this.isShowOperate = false
document.removeEventListener('click',this.closeShowOperateContent)
closeShowOperateContent() {
this.isShowOperate = false;
document.removeEventListener("click", this.closeShowOperateContent);
},
//打开绑定邮箱弹窗
showBindEmailModal(){
this.bindEmailVisible = true
showBindEmailModal() {
this.bindEmailVisible = true;
},
emailNextStepFun(){
if(!isEmail(this.email)){
message.error('The email format is incorrect');
return
emailNextStepFun() {
if (!isEmail(this.email)) {
message.error("The email format is incorrect");
return;
}
let data = {
email:this.email,
email: this.email,
operationType: "BIND_MAILBOX",
}
const hide = message.loading('loading', 0);
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv) =>{
if(rv){
this.bindEmailStep = 2
this.emailCode = ['','','','','',''],
this.createTimer()
hide()
message.success('Succeeded in binding the mailbox.')
}
}).catch(res=>{
hide()
})
};
const hide = message.loading("loading", 0);
Https.axiosPost(Https.httpUrls.accountSendEmail, data)
.then((rv) => {
if (rv) {
this.bindEmailStep = 2;
(this.emailCode = ["", "", "", "", "", ""]),
this.createTimer();
hide();
message.success("Succeeded in binding the mailbox.");
}
})
.catch((res) => {
hide();
});
},
//绑定邮箱的上一步
emailLastStepFun(){
this.bindEmailStep = 1
this.email = ''
this.emailCode = ['','','','','',''],
this.clearTimer()
emailLastStepFun() {
this.bindEmailStep = 1;
this.email = "";
(this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
},
//创建定时器
createTimer(){
this.timer = setInterval(()=>{
this.time--
if(!this.time){
clearInterval(this.timer)
createTimer() {
this.timer = setInterval(() => {
this.time--;
if (!this.time) {
clearInterval(this.timer);
}
},1000)
}, 1000);
},
//清除定时器
clearTimer(){
this.time = 60
if(this.timer){
clearInterval(this.timer)
clearTimer() {
this.time = 60;
if (this.timer) {
clearInterval(this.timer);
}
},
//登出
logout(){
logout() {
let data = {
userId:this.userInfo.userId
}
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) =>{
this.$router.replace('/login')
WriteCookie('token')
})
userId: this.userInfo.userId,
};
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
this.$router.replace("/login");
WriteCookie("token");
});
},
//绑定邮箱
submitBindEmail(emailVerifyCode){
let data = {
userEmail:this.email,
submitBindEmail(emailVerifyCode) {
let data = {
userEmail: this.email,
userId: this.userInfo.userId,
emailVerifyCode:emailVerifyCode
}
Https.axiosPost(Https.httpUrls.accountBindEmail, data).then((rv) =>{
if(rv){
this.userInfo.email = this.email
setCookie('userInfo',JSON.stringify(this.userInfo))
this.bindEmailVisible = false,
this.bindEmailStep = 1
this.clearTimer()
this.emailCode = ['','','','','','']
emailVerifyCode: emailVerifyCode,
};
Https.axiosPost(Https.httpUrls.accountBindEmail, data).then(
(rv) => {
if (rv) {
this.userInfo.email = this.email;
setCookie("userInfo", JSON.stringify(this.userInfo));
(this.bindEmailVisible = false),
(this.bindEmailStep = 1);
this.clearTimer();
this.emailCode = ["", "", "", "", "", ""];
}
}
})
);
},
//判断是否登录
accountIsLogin(userInfo){
let data ={
userId:userInfo.userId
}
Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) =>{
if(!rv){
this.$router.replace('/login')
accountIsLogin(userInfo) {
let data = {
userId: userInfo.userId,
};
Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) => {
if (!rv) {
this.$router.replace("/login");
}
})
});
},
//点击重置判断是否长时间五操作
operateClick(){
if(this.timer){
clearTimeout(this.timer)
operateClick() {
if (this.timer) {
clearTimeout(this.timer);
}
let _this = this
let timeNum = 1000 * 60 *120
this.timer = setTimeout(()=>{
this.modalWarning = Modal.warning ({
title: () => `You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
let _this = this;
let timeNum = 1000 * 60 * 120;
this.timer = setTimeout(() => {
this.modalWarning = Modal.warning({
title: () =>
`You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
icon: createVNode(ExclamationCircleOutlined),
okText: 'Ok',
okText: "Ok",
onOk() {
_this.numTime = 30
clearInterval(_this.timerSec)
}
_this.numTime = 30;
clearInterval(_this.timerSec);
},
});
_this.numCounter()
},timeNum)
_this.numCounter();
}, timeNum);
},
numCounter(){
this.timerSec = setInterval(()=>{
if(this.numTime > 0){
this.numTime = this.numTime - 1
}else{
clearTimeout(this.timer)
clearInterval(this.timerSec)
this.logout()
this.modalWarning.destroy()
numCounter() {
this.timerSec = setInterval(() => {
if (this.numTime > 0) {
this.numTime = this.numTime - 1;
} else {
clearTimeout(this.timer);
clearInterval(this.timerSec);
this.logout();
this.modalWarning.destroy();
}
},1000)
}
}
})
}, 1000);
},
},
});
</script>
<style lang="less" scoped>
.header_component{
.header_component {
display: flex;
justify-content: space-between;
padding: 0 30px;
width: 100%;
height: 7rem;
background: rgba(255, 255, 255, 0.2);
border-bottom: 0.1rem solid rgba(3,3,3,0.1);
border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
position: relative;
.header_logo{
align-items: center;
.header_right{
display: flex;
align-items: center;
}
.header_logo {
width: 14.4rem;
height: 3.2rem;
margin: 2.1rem 0 0 2.8rem;
margin: 2.1rem 2.8rem 0 ;
// position: absolute;
margin-top: 0;
}
.header_nav_content{
.header_nav_content {
display: flex;
margin-left: 28.9rem;
// margin-left: 28.9rem;
// margin-left: 46.2rem;
align-items: center;
.nav_item{
.nav_item {
padding: 1.1rem 1rem;
border-bottom: 0.1rem solid transparent;
margin-right: 3.4rem;
font-size: 1.6rem;
line-height: 1.3rem;
color: #333333;
// color: #333333;
color: #000;
cursor: pointer;
font-weight: 500;
font-weight: 900;
&.select_nav{
background: #E6E6F6;
&.select_nav {
background: #e6e6f6;
}
}
}
.header_right_content{
position: absolute;
.header_right_content {
// position: absolute;
top: 0;
right: 3.2rem;
// right: 3.2rem;
left: 0;
display: flex;
.header_icon{
width: 33%;
.header_icon {
font-size: 3.6rem;
position: relative;
top: 0.3rem;
}
.header_user_content{
.header_user_content {
margin-left: 1rem;
display: flex;
align-items: center;
@@ -322,53 +404,53 @@ export default defineComponent({
top: 1.2rem;
height: 3.7rem;
.username{
.username {
font-size: 1.6rem;
color: #1A1A1A;
color: #1a1a1a;
margin-right: 0.8rem;
}
.icon-xiala{
.icon-xiala {
font-size: 1.4rem;
cursor: pointer;
}
.icon_rotate{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
.icon_rotate {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.select_block{
.select_block {
position: absolute;
right: -1.5rem;
top: 3.7rem;
width: 11.4rem;
background: #FFFFFF;
box-shadow: 0px 0.4rem 0.4rem 0px rgba(0,0,0,0.1);
background: #ffffff;
box-shadow: 0px 0.4rem 0.4rem 0px rgba(0, 0, 0, 0.1);
z-index: 9;
overflow: hidden;
border: 1px solid #000000;
.select_item{
.select_item {
padding-left: 1.5rem;
height: 4.1rem;
color: #4D4D4D;
color: #4d4d4d;
display: flex;
align-items: center;
cursor: pointer;
user-select:none;
user-select: none;
&:hover{
background: #F7F7F7;
&:hover {
background: #f7f7f7;
}
.iconfont{
.iconfont {
font-size: 1.4rem;
}
.select_item_des{
.select_item_des {
font-size: 1.3rem;
margin-left: 0.8rem;
}
@@ -376,32 +458,32 @@ export default defineComponent({
}
}
}
}
.modal_component{
.skip_content{
.modal_component {
.skip_content {
width: 6rem;
height: 3rem;
line-height: 2.8rem;
border: 0.1rem solid #343579;
font-size: 1.4rem;
color: #343579;
color: #343579;
position: absolute;
top: 1.8rem;
right: 1.8rem;
cursor: pointer;
}
.bind_email_content{
.bind_email_content {
padding: 4.8rem 9.2rem 6rem;
.bind_email_tip{
.bind_email_tip {
font-size: 1.8rem;
color: #A5B0C2;
color: #a5b0c2;
line-height: 1.9rem;
text-align: center;
}
.bind_email{
.bind_email {
margin-top: 2rem;
font-size: 2.2rem;
font-weight: 400;
@@ -409,51 +491,50 @@ export default defineComponent({
text-align: center;
}
.bind_email_form_content{
.bind_email_form_title{
.bind_email_form_content {
.bind_email_form_title {
font-size: 2.2rem;
font-weight: bold;
color: #030303;
line-height: 2.4rem;
}
.bind_email_form_input{
.bind_email_form_input {
width: 100%;
height: 4.6rem;
margin-top: 1rem;
border: 0.1rem solid #B4BED7;
border: 0.1rem solid #b4bed7;
padding-left: 2.1rem;
line-height: 4.6rem;
font-size: 1.8rem;
box-sizing: border-box;
&::placeholder {
color:#A5B0C2,
color: #a5b0c2;
}
}
}
.bind_email_submit_button{
.bind_email_submit_button {
height: 4.6rem;
line-height: 4.6rem;
background: #343579;
font-size: 1.6rem;
font-weight: 500;
color: #FFFFFF;
color: #ffffff;
width: 12.8rem;
text-align: center;
cursor: pointer;
margin: 3rem auto 0;
}
.icon--shangyibu{
.icon--shangyibu {
font-size: 2.5rem;
font-weight: bold;
color: #030303;
}
.email_last_step_content{
.email_last_step_content {
margin-left: 1rem;
font-size: 2.2rem;
font-family: PingFang SC;
@@ -461,24 +542,24 @@ export default defineComponent({
color: #030303;
}
.tip_content{
.tip_content {
font-size: 1.3rem;
font-weight: bold;
color: #343579;
cursor: pointer;
}
.email_last_step_des{
.email_last_step_des {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2.5rem;
margin-bottom: 1.5rem;
.sent_email_content{
.sent_email_content {
font-size: 1.8rem;
font-weight: bold;
color: #A5B0C2;
color: #a5b0c2;
}
}
}