mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
perf: 优化扫一扫登录功能
This commit is contained in:
kuaifan
parent
fe4cba61e2
commit
fc65d56977
@ -1,27 +1,10 @@
|
||||
<template>
|
||||
<div class="mobile-tabbar">
|
||||
<NetworkException v-if="windowPortrait" type="alert"/>
|
||||
<transition name="mobile-fade">
|
||||
<div v-if="isMore" class="more-mask" @click="toggleRoute('more')"></div>
|
||||
</transition>
|
||||
<transition name="mobile-slide">
|
||||
<div v-if="isMore" class="more-box">
|
||||
<div class="tabbar-more-title">{{$L('更多')}}</div>
|
||||
<ul v-for="list in navMore">
|
||||
<li v-for="item in list" @click="toggleRoute(item.name)" :class="{active: activeName === item.name}">
|
||||
<div class="more-item">
|
||||
<i class="taskfont" v-html="item.icon"></i>
|
||||
<div class="tabbar-title">{{$L(item.label)}}</div>
|
||||
<Badge v-if="item.name === 'workReport'" class="tabbar-badge" :overflow-count="999" :count="reportUnreadNumber + approveUnreadNumber"/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
<ul class="tabbar-box">
|
||||
<li v-for="item in navList" @click="toggleRoute(item.name)" :class="{active: activeName === item.name}">
|
||||
<i class="taskfont" v-html="item.icon"></i>
|
||||
<div class="tabbar-title">{{$L(item.label)}}</div>
|
||||
<div class="tabbar-title">{{ $L(item.label) }}</div>
|
||||
<template v-if="item.name === 'dashboard'">
|
||||
<Badge v-if="dashboardTask.overdue_count > 0" class="tabbar-badge" type="error" :overflow-count="999" :count="dashboardTask.overdue_count"/>
|
||||
<Badge v-else-if="dashboardTask.today_count > 0" class="tabbar-badge" type="info" :overflow-count="999" :count="dashboardTask.today_count"/>
|
||||
@ -33,30 +16,14 @@
|
||||
<template v-else-if="item.name === 'application'">
|
||||
<Badge class="tabbar-badge" :overflow-count="999" :count="reportUnreadNumber + approveUnreadNumber"/>
|
||||
</template>
|
||||
<template v-else-if="item.name === 'more'">
|
||||
<Badge class="tabbar-badge" :overflow-count="999" :count="reportUnreadNumber + approveUnreadNumber"/>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<Modal
|
||||
v-model="scanLoginShow"
|
||||
:title="$L('扫码登录')"
|
||||
:mask-closable="false">
|
||||
<div class="mobile-scan-login-box">
|
||||
<div class="mobile-scan-login-title">{{$L(`你好，扫码确认登录`)}}</div>
|
||||
<div class="mobile-scan-login-subtitle">「{{$L('为确保帐号安全，请确认是本人操作')}}」</div>
|
||||
</div>
|
||||
<div slot="footer" class="adaption">
|
||||
<Button type="default" @click="scanLoginShow=false">{{$L('取消登录')}}</Button>
|
||||
<Button type="primary" :loading="scanLoginLoad" @click="scanLoginSubmit">{{$L('确认登录')}}</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, mapState} from "vuex";
|
||||
import {Store} from "le5le-store";
|
||||
import {mapGetters, mapState} from "vuex";
|
||||
import NetworkException from "../NetworkException";
|
||||
|
||||
export default {
|
||||
@ -64,61 +31,18 @@ export default {
|
||||
components: {NetworkException},
|
||||
data() {
|
||||
return {
|
||||
isMore: false,
|
||||
|
||||
navList: [
|
||||
{icon: '', name: 'dashboard', label: '仪表盘'},
|
||||
{icon: '', name: 'project', label: '项目'},
|
||||
{icon: '', name: 'dialog', label: '消息'},
|
||||
{icon: '', name: 'contacts', label: '通讯录'},
|
||||
{icon: '', name: 'application', label: '应用'},
|
||||
// {icon: '', name: 'more', label: '更多'},
|
||||
],
|
||||
navMore: [
|
||||
[
|
||||
{icon: '', name: 'calendar', label: '日历'},
|
||||
{icon: '', name: 'file', label: '文件'},
|
||||
{icon: '', name: 'setting', label: '设置'},
|
||||
],
|
||||
[
|
||||
{icon: '', name: 'addProject', label: '创建项目'},
|
||||
{icon: '', name: 'addTask', label: '添加任务'},
|
||||
{icon: '', name: 'createMeeting', label: '新会议'},
|
||||
{icon: '', name: 'joinMeeting', label: '加入会议'},
|
||||
],
|
||||
[
|
||||
{icon: '', name: 'workReport', label: '工作报告'},
|
||||
{icon: '', name: 'approve', label: '审批中心'},
|
||||
{icon: '', name: 'okrManage', label: 'OKR管理'},
|
||||
]
|
||||
],
|
||||
|
||||
scanLoginShow: false,
|
||||
scanLoginLoad: false,
|
||||
scanLoginCode: '',
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
if ($A.isEEUiApp) {
|
||||
this.navMore[0].splice(2, 0, {icon: '', name: 'scan', label: '扫一扫'})
|
||||
}
|
||||
if (this.userIsAdmin) {
|
||||
this.navMore[2].splice(0, 0, {icon: '', name: 'allUser', label: '团队管理'})
|
||||
this.navMore[2].push({icon: '', name: 'okrAnalyze', label: 'OKR结果分析'})
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['userIsAdmin', 'cacheDialogs', 'reportUnreadNumber', 'approveUnreadNumber']),
|
||||
...mapState(['cacheDialogs', 'reportUnreadNumber', 'approveUnreadNumber']),
|
||||
...mapGetters(['dashboardTask']),
|
||||
|
||||
routeName() {
|
||||
@ -206,8 +130,7 @@ export default {
|
||||
},
|
||||
|
||||
activeName() {
|
||||
if (this.isMore || ['manage-calendar', 'manage-file', 'manage-setting', 'manage-application', 'manage-approve', 'manage-apps'].includes(this.routeName)) {
|
||||
// return 'more';
|
||||
if (['manage-calendar', 'manage-file', 'manage-setting', 'manage-application', 'manage-approve', 'manage-apps'].includes(this.routeName)) {
|
||||
return 'application';
|
||||
}
|
||||
|
||||
@ -231,55 +154,22 @@ export default {
|
||||
|
||||
watch: {
|
||||
windowActive(active) {
|
||||
if (!active) {
|
||||
if (active) {
|
||||
return
|
||||
}
|
||||
$A.eeuiAppSendMessage({
|
||||
action: 'setBdageNotify',
|
||||
bdage: this.unreadAndOverdue,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleRoute(path) {
|
||||
this.$emit("on-click", path)
|
||||
if (path != 'more') {
|
||||
this.isMore = false
|
||||
}
|
||||
//
|
||||
let location;
|
||||
switch (path) {
|
||||
case 'more':
|
||||
this.isMore = !this.isMore;
|
||||
return;
|
||||
|
||||
case 'scan':
|
||||
$A.eeuiAppScan(this.scanResult);
|
||||
return;
|
||||
|
||||
case 'addTask':
|
||||
case 'addProject':
|
||||
case 'allUser':
|
||||
case 'workReport':
|
||||
return;
|
||||
|
||||
case 'createMeeting':
|
||||
Store.set('addMeeting', {
|
||||
type: 'create',
|
||||
userids: [this.userId],
|
||||
});
|
||||
break;
|
||||
|
||||
case 'joinMeeting':
|
||||
Store.set('addMeeting', {
|
||||
type: 'join',
|
||||
});
|
||||
break;
|
||||
|
||||
case 'project':
|
||||
location = {name: 'manage-project', params: {projectId: 'all'}};
|
||||
break;
|
||||
|
||||
case 'dialog':
|
||||
location = {name: 'manage-messenger', params: {dialogAction: 'dialog'}};
|
||||
if (this.routeName === 'manage-messenger') {
|
||||
@ -291,67 +181,12 @@ export default {
|
||||
location = {name: 'manage-messenger', params: {dialogAction: 'contacts'}};
|
||||
break;
|
||||
|
||||
case 'okrManage':
|
||||
case 'okrAnalyze':
|
||||
this.goForward({
|
||||
path:'/manage/apps/' + ( path == 'okrManage' ? '/#/list' : '/#/analysis') ,
|
||||
query: {
|
||||
baseUrl: this.okrUrl
|
||||
}
|
||||
});
|
||||
return;
|
||||
|
||||
default:
|
||||
location = {name: 'manage-' + path};
|
||||
break;
|
||||
}
|
||||
this.goForward(location);
|
||||
},
|
||||
|
||||
scanResult(text) {
|
||||
const arr = (text + "").match(/^https*:\/\/(.*?)\/login\?qrcode=(.*?)$/)
|
||||
if (arr) {
|
||||
// 扫码登录
|
||||
this.scanLoginCode = arr[2];
|
||||
this.scanLoginShow = true;
|
||||
return
|
||||
}
|
||||
if (/^https*:\/\//i.test(text)) {
|
||||
// 打开链接
|
||||
$A.eeuiAppOpenPage({
|
||||
pageType: 'app',
|
||||
pageTitle: ' ',
|
||||
url: 'web.js',
|
||||
params: {
|
||||
url: text,
|
||||
browser: true,
|
||||
showProgress: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
scanLoginSubmit() {
|
||||
if (this.scanLoginLoad === true) {
|
||||
return
|
||||
}
|
||||
this.scanLoginLoad = true
|
||||
//
|
||||
this.$store.dispatch("call", {
|
||||
url: "users/login/qrcode",
|
||||
data: {
|
||||
type: "login",
|
||||
code: this.scanLoginCode,
|
||||
}
|
||||
}).then(({msg}) => {
|
||||
this.scanLoginShow = false
|
||||
$A.messageSuccess(msg)
|
||||
}).catch(({msg}) => {
|
||||
$A.messageError(msg)
|
||||
}).finally(_ => {
|
||||
this.scanLoginLoad = false
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -467,6 +467,17 @@ export default {
|
||||
const arr = (text + "").match(/^https*:\/\/(.*?)\/login\?qrcode=(.*?)$/)
|
||||
if (arr) {
|
||||
// 扫码登录
|
||||
if ($A.getDomain(text) != $A.getDomain($A.apiUrl('../'))) {
|
||||
let content = this.$L('请确认扫码的服务器与当前服务器一致')
|
||||
content += `<br/>${this.$L('二维码服务器')}: ${$A.getDomain(text)}`
|
||||
content += `<br/>${this.$L('当前服务器')}: ${$A.getDomain($A.apiUrl('../'))}`
|
||||
$A.modalWarning({
|
||||
language: false,
|
||||
title: this.$L('扫码登录'),
|
||||
content
|
||||
})
|
||||
return
|
||||
}
|
||||
this.scanLoginCode = arr[2];
|
||||
this.scanLoginShow = true;
|
||||
return
|
||||
|
||||
@ -210,7 +210,7 @@ export default {
|
||||
content += `<br/>${this.$L('客户端版本')}: v${this.version}`
|
||||
$A.modalInfo({
|
||||
language: false,
|
||||
title: '版本信息',
|
||||
title: this.$L('版本信息'),
|
||||
content
|
||||
})
|
||||
}
|
||||
|
||||
84
resources/assets/sass/components/mobile.scss
vendored
84
resources/assets/sass/components/mobile.scss
vendored
@ -83,80 +83,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.more-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
margin-bottom: -2px;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding-bottom: 16px;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
|
||||
.tabbar-more-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
padding: 16px 16px 36px;
|
||||
}
|
||||
|
||||
> ul {
|
||||
padding: 0 12px;
|
||||
|
||||
> li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin-bottom: 28px;
|
||||
|
||||
.more-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.taskfont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
font-size: 25px;
|
||||
color: $primary-color;
|
||||
background-color: rgba($primary-color, 0.08);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.tabbar-title {
|
||||
padding-top: 6px;
|
||||
font-size: 13px;
|
||||
max-width: 92%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tabbar-badge {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 50%;
|
||||
transform: translateX(36px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-back {
|
||||
@ -230,16 +156,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-scan-login-box {
|
||||
margin: 2px 0 12px;
|
||||
.mobile-scan-login-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.mobile-scan-login-subtitle {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 渐见
|
||||
.mobile-fade-enter-active {
|
||||
animation: mobile-fade-enter-animation 0.2s forwards;
|
||||
|
||||
9
resources/assets/sass/pages/page-apply.scss
vendored
9
resources/assets/sass/pages/page-apply.scss
vendored
@ -388,6 +388,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-scan-login-box {
|
||||
margin: 2px 0 12px;
|
||||
.mobile-scan-login-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.mobile-scan-login-subtitle {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
body.window-portrait {
|
||||
.page-apply {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user