281 lines
10 KiB
Vue
281 lines
10 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="header">
|
||
<image src="@/static/logo.png" mode="aspectFit"></image>
|
||
<text v-if="userinfo.mobile" class="tip">您当前已登陆账号：{{userinfo.username}}</text>
|
||
</view>
|
||
<uni-notice-bar text="在这里,您可以通过邮箱或手机号进行登陆。" />
|
||
<view class="uni-common-mt uni-form">
|
||
<form @submit="formSubmit" @reset="formReset">
|
||
<view class="uni-form-item ">
|
||
<view class="title">账号</view>
|
||
<input class="uni-input" name="username" v-model="FormData.username" placeholder="您的手机号或用户名" />
|
||
</view>
|
||
|
||
<view class="uni-form-item ">
|
||
<view class="title">密码</view>
|
||
<input class="uni-input" name="passwd" v-model="FormData.passwd" type="password" placeholder="" />
|
||
</view>
|
||
|
||
<view class="uni-form-item ">
|
||
<view class="title">持久登陆</view>
|
||
<view>
|
||
<switch name="isLong" :checked="isLong==1?true:false" />
|
||
</view>
|
||
</view>
|
||
<view class="uni-form-item">
|
||
<view class="help-block">
|
||
启用后，只有您主动点击退出按钮后，你的登陆状态才会被取消。
|
||
</view>
|
||
</view>
|
||
|
||
<view class="uni-button-group">
|
||
<uni-row class="demo-uni-row" width="100%">
|
||
<uni-col :span="12">
|
||
<button class="btn btn-success" form-type="submit">登陆</button>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<button class="btn btn-default" type="default" form-type="reset">重置</button>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<view class="uni-button-group">
|
||
<button class="btn btn-info" type="default" @click="goToSms">使用验证码登陆</button>
|
||
<button class="btn btn-info" type="warn" @click="logout">注销</button>
|
||
<button :hidden="true" class="btn btn-success" type="primary" @click="authApp">一键授权</button>
|
||
<button class="btn btn-primary" type="primary" @click="goToReg">注册</button>
|
||
<button class="btn btn-info" type="default" @click="callMe">技术支持</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
|
||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||
|
||
<view class="footer" v-if="FormData.username">
|
||
您好，您刚填写的用户名是：{{FormData.username}}。如果您在登陆过程中遇到任何问题，请联系技术部门或您的直属管理人员解决。
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import graceChecker from "@/common/graceChecker.js";
|
||
import config from "@/config/ctms.config.js";
|
||
import utils from "@/utils/common.js";
|
||
import ctms from '@/apis/ctms/index.js';
|
||
import hi from '@/common/util.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
userinfo: {},
|
||
FormData: {
|
||
username: '',
|
||
passwd: ''
|
||
},
|
||
isLong: 1,
|
||
uniIdRedirectUrl: '',
|
||
|
||
//悬浮按钮
|
||
fabs: {
|
||
horizontal: 'left',
|
||
vertical: 'bottom',
|
||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||
pattern: {
|
||
color: '#7A7E83',
|
||
backgroundColor: '#fff',
|
||
selectedColor: '#007AFF',
|
||
buttonColor: '#fff',
|
||
iconColor: '#aaa'
|
||
},
|
||
content: [{
|
||
iconPath: '/static/fab/home.png',
|
||
selectedIconPath: '/static/fab/homeactive.png',
|
||
text: '首页',
|
||
active: false,
|
||
diyfn: 'home'
|
||
},
|
||
{
|
||
iconPath: '/static/fab/guanzhu.png',
|
||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||
text: '关注',
|
||
active: false,
|
||
diyfn: 'news'
|
||
},
|
||
{
|
||
iconPath: '/static/fab/me.png',
|
||
selectedIconPath: '/static/fab/meactive.png',
|
||
text: '用户',
|
||
active: false,
|
||
diyfn: 'user'
|
||
},
|
||
|
||
{
|
||
iconPath: '/static/fab/news.png',
|
||
selectedIconPath: '/static/fab/newsactive.png',
|
||
text: '公告',
|
||
active: false,
|
||
diyfn: 'notice'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
async authApp() {
|
||
//TODO 主包内单独设计一个授权页面，子项目则调用并确认，后端接收用户数据并自动注册绑定到子项目。
|
||
var res = await ctms.user.oneKeyAuth();
|
||
if (res) {
|
||
this.userinfo = res;
|
||
utils.toast('授权完成！');
|
||
uni.navigateBack()
|
||
}
|
||
},
|
||
formSubmit: function(e) {
|
||
var _that = this;
|
||
//定义表单规则
|
||
var rule = [{
|
||
name: "username",
|
||
checkType: "notnull",
|
||
checkRule: "",
|
||
errorMsg: "用户名不能为空"
|
||
},
|
||
{
|
||
name: "passwd",
|
||
checkType: "string",
|
||
checkRule: "8,32",
|
||
errorMsg: "密码不对"
|
||
}
|
||
];
|
||
//进行表单检查
|
||
var formData = e.detail.value;
|
||
var checkRes = graceChecker.check(formData, rule);
|
||
if (!checkRes) {
|
||
uni.showToast({
|
||
title: graceChecker.error,
|
||
icon: "error"
|
||
});
|
||
return false;
|
||
}
|
||
|
||
//请求封装
|
||
ctms.user.login(formData).then((res) => {
|
||
if (res) {
|
||
uni.showToast({
|
||
title: "登陆成功!",
|
||
icon: "success"
|
||
});
|
||
if (this.uniIdRedirectUrl) {
|
||
uni.redirectTo({
|
||
url: this.uniIdRedirectUrl
|
||
})
|
||
} else {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
});
|
||
},
|
||
formReset: function(e) {
|
||
// utils.debug('清空登陆表单数据')
|
||
},
|
||
async logout() {
|
||
var res = await ctms.user.logout();
|
||
if (res) {
|
||
uni.reLaunch({
|
||
url: '../tabbar/index/index'
|
||
})
|
||
}
|
||
this.userinfo = {};
|
||
},
|
||
goToReg() {
|
||
uni.navigateTo({
|
||
url: './reg'
|
||
})
|
||
},
|
||
goToSms() {
|
||
uni.navigateTo({
|
||
url: './loginSms?uniIdRedirectUrl=' + encodeURIComponent(this.uniIdRedirectUrl)
|
||
})
|
||
},
|
||
callMe: function(e) {
|
||
var phone = config.kfPhone;
|
||
// hi.tel(phone);
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
},
|
||
|
||
//浮窗按钮相关操作
|
||
fabClick(e) {
|
||
// utils.debug('点击了悬浮按钮')
|
||
},
|
||
fabTrigger(e) {
|
||
var eindex = e.index;
|
||
this.fabs.content[e.index].active = !e.item.active;
|
||
|
||
if (!e.item.diyfn) {
|
||
//未设置这个difyfn字段的，无操作
|
||
return false;
|
||
}
|
||
var diyfn = e.item.diyfn,
|
||
dir = config.pageDir,
|
||
page;
|
||
switch (diyfn) {
|
||
case 'home':
|
||
page = 'tabbar/index/index';
|
||
return uni.reLaunch({
|
||
url: dir + page
|
||
})
|
||
break;
|
||
case 'news':
|
||
page = 'news/list/list';
|
||
break;
|
||
case 'user':
|
||
page = 'me/index';
|
||
break;
|
||
case 'notice':
|
||
page = 'tabbar/notice/index';
|
||
return uni.reLaunch({
|
||
url: dir + page
|
||
})
|
||
break;
|
||
}
|
||
return uni.navigateTo({
|
||
url: dir + page
|
||
})
|
||
}
|
||
},
|
||
|
||
onShow: function() {
|
||
|
||
},
|
||
onLoad: function(o) {
|
||
var user = ctms.user.checkLogin();
|
||
this.userinfo = user;
|
||
// 自动跳转到登录页面时会携带uniIdRedirectUrl参数
|
||
if (o.uniIdRedirectUrl) {
|
||
this.uniIdRedirectUrl = decodeURIComponent(o.uniIdRedirectUrl)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("login.css");
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tip {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.desc {
|
||
margin-top: 30rpx;
|
||
display: block;
|
||
}
|
||
</style> |