279 lines
7.4 KiB
Vue
279 lines
7.4 KiB
Vue
<template>
|
|
<view class="wrap">
|
|
<view class="logo">若依移动APP</view>
|
|
<div v-if="loginType === 'currentPhone'">
|
|
<u-tabs :list="list" :is-scroll="false" :current="current" @change="onClickItem"></u-tabs>
|
|
<view v-if="current === 0">
|
|
<view class="list">
|
|
<view class="list-call">
|
|
<view class="iconfont icon-avatar" style="font-size: 22px;color:#5473e8;"></view>
|
|
<input class="u-input" type="text" v-model="username" maxlength="32" :placeholder="$t('login.placeholderAccount')" value="admin"/>
|
|
|
|
</view>
|
|
<view class="list-call">
|
|
<view class="iconfont icon-key" style="font-size: 22px;color:#5473e8;"></view>
|
|
<input class="u-input" type="text" v-model="password" maxlength="32" :placeholder="$t('login.placeholderPassword')" :password="!showPassword" value="admin123" />
|
|
<image class="u-icon-right" :src="'/static/aidex/login/eye_' + (showPassword ? 'open' : 'close') + '.png'" @click="showPass()"></image>
|
|
</view>
|
|
<div style="padding:15rpx 0 0;">
|
|
<view class="register">
|
|
<navigator class="register-link" url="forget" open-type="navigate">{{$t('login.forget')}}</navigator>
|
|
<!-- <navigator class="register-link" url="reg" open-type="navigate">{{$t('login.reg')}}</navigator> -->
|
|
</view>
|
|
<u-checkbox v-model="remember" active-color="#5473e8">{{$t('login.autoLogin')}}</u-checkbox>
|
|
</div>
|
|
</view>
|
|
<view class="button" @click="submit('1')"><text>登录</text></view>
|
|
<view class="login-bottom-box">
|
|
<u-divider> 更多登录方式 </u-divider>
|
|
<view class="oauth2">
|
|
<u-icon class="u-icon" size="100" color="#36c956" name="weixin-circle-fill" @click="wxLogin"></u-icon>
|
|
<u-icon class="u-icon" size="100" color="#23a0f0" name="qq-circle-fill" @click="qqLogin"></u-icon>
|
|
</view>
|
|
<view class="copyright">
|
|
登录即代表您已阅读并同意<u-link href="#">用户协议</u-link> 与 <u-link href="#">隐私政策</u-link>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="current === 1">
|
|
<view class="list">
|
|
<view class="list-call" >
|
|
<view class="iconfont icon-shouji" style="font-size: 22px;color:#5473e8;"></view>
|
|
<u-field
|
|
v-model="phoneNo"
|
|
label="+86"
|
|
placeholder="请填写手机号"
|
|
style="width: 100%;"
|
|
:border-bottom="false"
|
|
>
|
|
</u-field>
|
|
</view>
|
|
<div style="padding:25rpx 0 0;">
|
|
还没有账号？<navigator class="reg-link" url="reg" open-type="navigate">{{$t('login.reg')}}</navigator>
|
|
</div>
|
|
|
|
</view>
|
|
<view class="button" @click="nextStep()"><text>下一步</text></view>
|
|
<view class="login-bottom-box">
|
|
<u-divider> 更多登录方式 </u-divider>
|
|
<view class="oauth2">
|
|
<u-icon class="u-icon" size="100" color="#36c956" name="weixin-circle-fill" @click="wxLogin"></u-icon>
|
|
<u-icon class="u-icon" size="100" color="#23a0f0" name="qq-circle-fill" @click="qqLogin"></u-icon>
|
|
</view>
|
|
<view class="copyright">
|
|
登录即代表您已阅读并同意<u-link href="#">用户协议</u-link> 与 <u-link href="#">隐私政策</u-link>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</div>
|
|
|
|
<div v-if="loginType !== 'currentPhone'">
|
|
<view class="currentPhone-box">
|
|
<view class="number-text">183****1005</view>
|
|
<view class="other-text">认证服务由中国移动提供。</view>
|
|
<u-button type="primary" @click="submit('3')">本机号码一键登录</u-button>
|
|
<u-button @click="qiehuanLogin()">其他登录方式</u-button>
|
|
</view>
|
|
<view class="login-bottom-box">
|
|
<view class="copyright">
|
|
登录即代表您已阅读并同意<u-link href="#">用户协议</u-link> 与 <u-link href="#">隐私政策</u-link>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
/**
|
|
* Copyright (c) 2013-Now http://aidex.vip All rights reserved.
|
|
*/
|
|
import base64 from '@/common/base64.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
phoneNo:'',
|
|
username: 'admin',
|
|
password: 'admin123',
|
|
loginType: 'currentPhone',
|
|
showPassword: false,
|
|
remember: true,
|
|
isValidCodeLogin: false,
|
|
validCode: '',
|
|
imgValidCodeSrc: null,
|
|
list: [{name: '用户名'}, {name: '手机号'}],
|
|
current: 0,
|
|
activeColor: '#007aff',
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.$u.api.index({loginCheck: true}).then(res => {
|
|
if (res.code == '200'){
|
|
uni.reLaunch({
|
|
url: '/pages/sys/msg/index'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
showPass() {
|
|
this.showPassword = !this.showPassword;
|
|
},
|
|
qiehuanLogin(){
|
|
this.loginType = 'other'
|
|
},
|
|
onClickItem(index) {
|
|
this.current = index;
|
|
},
|
|
refreshImgValidCode(e) {
|
|
if (this.vuex_token == '') {
|
|
this.$u.api.index().then(res => {
|
|
this.imgValidCodeSrc = this.vuex_config.baseUrl + '/validCode?__sid='
|
|
+ res.sessionid + '&t=' + new Date().getTime();
|
|
});
|
|
} else {
|
|
this.imgValidCodeSrc = this.vuex_config.baseUrl + '/validCode?__sid='
|
|
+ this.vuex_token + '&t=' + new Date().getTime();
|
|
}
|
|
this.validCode = '';
|
|
},
|
|
nextStep(){
|
|
//验证码登录下一步
|
|
uni.showLoading({
|
|
title: '正在获取验证码',
|
|
mask: true
|
|
})
|
|
this.$u.api.sendCode({
|
|
phoneNo: this.phoneNo,
|
|
validCodeType:'2'
|
|
})
|
|
.then(res => {
|
|
if (res.code == '200') {
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/sys/login/code?phoneNo='+this.phoneNo
|
|
});
|
|
}, 500);
|
|
}else{
|
|
this.$u.toast(res.msg);
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/sys/login/code?phoneNo='+this.phoneNo
|
|
});
|
|
}, 500);
|
|
}
|
|
});
|
|
},
|
|
async submit(loginType) {
|
|
if (this.username.length == 0) {
|
|
this.$u.toast('请输入账号');
|
|
return;
|
|
}
|
|
if (this.password.length == 0) {
|
|
this.$u.toast('请输入密码');
|
|
return;
|
|
}
|
|
// this.$u.api.login(
|
|
// {
|
|
// "tenantId": '000000',
|
|
// "username": this.username,
|
|
// "password": this.password,
|
|
// "grantType": "password",
|
|
// "uuid": "7cb3ea4fe2ae4f08bbd561c94ef0191b",
|
|
// "clientId": "dab457a1ea14411787c240db05bb0832"
|
|
// }
|
|
// )
|
|
let res=await this.$u.api.login({
|
|
"tenantId": "000000", // 把单引号换成双引号
|
|
"username": this.username,
|
|
"password": this.password,
|
|
"grantType": "password",
|
|
"uuid": "7cb3ea4fe2ae4f08bbd561c94ef0191b",
|
|
"clientId": "dab457a1ea14411787c240db05bb0832"
|
|
});
|
|
console.log(res)
|
|
if (res.code=="200"){
|
|
this.$u.toast("登录成功")
|
|
this.$u.access_token=res.data.access_token
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url: '/pages/sys/msg/index'
|
|
});
|
|
}, 500);
|
|
}
|
|
},
|
|
wxLogin(res) {
|
|
this.$u.toast('微信登录');
|
|
},
|
|
qqLogin() {
|
|
this.$u.toast('QQ 登录');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
@import 'index.scss';
|
|
|
|
.logo {
|
|
width: 80%;
|
|
font-size:64rpx;
|
|
color: #5473e8;
|
|
margin: 80rpx auto 80rpx auto;
|
|
}
|
|
.list-call-icon{
|
|
color: #ff0000;
|
|
}
|
|
.currentPhone-box{
|
|
text-align: center;
|
|
padding: 40rpx 80rpx;
|
|
.number-text{
|
|
color: #000000;
|
|
font-size: 60rpx;
|
|
}
|
|
.other-text{
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
.u-btn{
|
|
margin: 30rpx auto;
|
|
}
|
|
.u-hairline-border{
|
|
border: 1px solid #fff;
|
|
}
|
|
}
|
|
|
|
.register {
|
|
display:inline-block;
|
|
color: #5473e8;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
float:right;
|
|
margin-top: 6rpx;
|
|
}
|
|
.register-link{
|
|
float: right;
|
|
padding: 0 16rpx;
|
|
}
|
|
.reg-link{
|
|
display: inline-block;
|
|
color: #5473e8;
|
|
}
|
|
.oauth2 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
margin: 0rpx 100rpx 30rpx;
|
|
|
|
image {
|
|
height: 80rpx;
|
|
width: 80rpx;
|
|
}
|
|
}
|
|
.u-tabs{
|
|
padding: 0 70rpx;
|
|
}
|
|
|
|
</style>
|