432 lines
9.9 KiB
Vue
432 lines
9.9 KiB
Vue
<style lang="scss" scoped>
|
||
.login-ctn{
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 500rpx;
|
||
background: #fff;
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.login-bg{
|
||
width: 100%;
|
||
height: 515rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.login-header{
|
||
// text-align: center;
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 10;
|
||
height: 500rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// justify-content: center;
|
||
align-items: center;
|
||
.login-header-img-box{
|
||
margin-top: 132rpx;
|
||
margin-left: 2rpx;
|
||
border-radius: 50%;
|
||
background: #FFFFFF;
|
||
}
|
||
&-img{
|
||
display: block;
|
||
// width: 502rpx;
|
||
// height: 226rpx;
|
||
width: 198rpx;
|
||
height: 198rpx;
|
||
// border-radius: 50%;
|
||
// margin-top: 40rpx;
|
||
}
|
||
&-text{
|
||
font-size: 40rpx;
|
||
line-height: 40rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.login-form-ctn{
|
||
// padding: 0rpx 60rpx;
|
||
// margin-top: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
.login-form{
|
||
// box-shadow: $box-shadow;
|
||
background-color: #fff;
|
||
// border-radius: 20rpx;
|
||
margin-top: 120rpx;
|
||
padding: 20rpx 60rpx;
|
||
&-title{
|
||
text-align: center;
|
||
font-size: 40rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 800;
|
||
color: #262626;
|
||
}
|
||
}
|
||
}
|
||
.login-button-ctn{
|
||
// padding: 0rpx 0;
|
||
margin-top: 20rpx;
|
||
}
|
||
.register-box{
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
color: #848484;
|
||
font-weight: 500;
|
||
}
|
||
.login-function-ctn{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 30rpx 0rpx;
|
||
}
|
||
.login-version-info{
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 40rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: $uni-font-size-sm;
|
||
color: #aaa;
|
||
}
|
||
.protocol-box{
|
||
padding: 20rpx 0;
|
||
color: #f5f5f5;
|
||
font-size: 26rpx;
|
||
text{
|
||
color: #0066cc;
|
||
}
|
||
}
|
||
.other-login-box{
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.other-login-item{
|
||
.other-login-bg{
|
||
width:100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
background: #0066cc;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.other-login-name{
|
||
color: #7d7d7d;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<template>
|
||
<view class="login-ctn">
|
||
<view class="login-bg">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/login-header.png" mode=""></image>
|
||
</view>
|
||
<view class="login-header">
|
||
<view class="login-header-img-box">
|
||
<!-- #ifdef APP-PLUS -->
|
||
<image class="login-header-img" :src="appConfig.logo" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-PLUS -->
|
||
<image class="login-header-img" :src="appConfig.logo" mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="login-header-text">{{appConfig.name}}</view>
|
||
</view>
|
||
<view class="login-form-ctn">
|
||
<view class="login-form" v-if="checkLoading" style="display: flex;justify-content: center;padding-top: 20px;align-items: center;">
|
||
<u-loading mode="flower" size="50"></u-loading>
|
||
<text>加载中</text>
|
||
</view>
|
||
<view class="login-form" v-else>
|
||
<u-button v-if="loginToken" type="primary" shape="circle" :custom-style="{ background: 'linear-gradient(270deg, #0066CC 8%, #1890FF 100%)',height:'100rpx' }" @click="wxLogin()">一键登录</u-button>
|
||
<u-button v-else type="primary" shape="circle" :custom-style="{ background: 'linear-gradient(270deg, #0066CC 8%, #1890FF 100%)',height:'100rpx' }" open-type="getPhoneNumber" @getphonenumber="wxPhoneLogin">一键手机号注册</u-button>
|
||
<view class="protocol-box">
|
||
<u-checkbox v-model="protocolStatus">阅读并同意以下协议<text @click.stop="goPolicy">《用户协议》</text></u-checkbox>
|
||
</view>
|
||
</view>
|
||
<view class="other-login-box">
|
||
<view class="other-login-item" @click="goPasswordLogin">
|
||
<view class="other-login-bg">
|
||
<u-icon name="lock-fill" color="#fff" size="56"></u-icon>
|
||
</view>
|
||
<text class="other-login-name">密码登录</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="login-version-info">
|
||
<view>Copyright 2022-2024 {{appConfig.companyName}} Powered By DSservice</view>
|
||
<view>{{appConfig.contractRecordNumber || ''}}</view>
|
||
</view>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let userToken = '';
|
||
import config from "@/common/api/config.js"
|
||
export default{
|
||
data(){
|
||
return {
|
||
protocolStatus:false,
|
||
usetTypeValue: '企业用户',
|
||
list: [
|
||
{
|
||
name: '普通用户',
|
||
},
|
||
{
|
||
name: '企业用户',
|
||
}
|
||
],
|
||
captchaData:null,
|
||
current: 0,
|
||
form:{
|
||
username:"",
|
||
password:"",
|
||
code:""
|
||
},
|
||
rules: {
|
||
// 字段名称
|
||
username: [
|
||
{
|
||
required: true,
|
||
message: '请输入手机号/账号',
|
||
trigger: ['change','blur'],
|
||
},
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
message: '请输入密码',
|
||
trigger: ['change','blur'],
|
||
}
|
||
],
|
||
code: [
|
||
{
|
||
required: true,
|
||
message: '请输入验证码',
|
||
trigger: ['change','blur'],
|
||
}
|
||
]
|
||
},
|
||
// 用户openid
|
||
wxOpenid:'',
|
||
// 后端是否有该用户
|
||
IsUser:false,
|
||
loginToken:'',
|
||
checkLoading:true,
|
||
isInit:true,
|
||
}
|
||
},
|
||
computed:{
|
||
appConfig() {
|
||
return this.$store.state.app.appConfig
|
||
},
|
||
},
|
||
onLoad(e) {
|
||
userToken = uni.getStorageSync('userToken');
|
||
console.log("userToken",userToken)
|
||
if(userToken){
|
||
uni.switchTab({
|
||
url:"../tabBar/project"
|
||
})
|
||
}
|
||
console.log("logo",this.$store.state.app.appConfig)
|
||
this.usetTypeValue = e.userType=="user"?"普通用户":"企业用户";
|
||
|
||
},
|
||
onShow() {
|
||
// #ifdef MP-WEIXIN
|
||
if(!userToken){
|
||
this.getWxCode();
|
||
}
|
||
// #endif
|
||
},
|
||
methods:{
|
||
// 跳转密码登录页
|
||
goPasswordLogin(){
|
||
uni.reLaunch({
|
||
url: './passwordLogin'
|
||
});
|
||
},
|
||
goPolicy(){
|
||
uni.navigateTo({
|
||
url:'/pages/tabBar/my/userPolicy'
|
||
})
|
||
},
|
||
getWxCode(){
|
||
this.loginToken = '';
|
||
uni.login({
|
||
provider: 'weixin', //使用微信登录
|
||
success: (loginRes) => {
|
||
console.log("loginCode",loginRes.code);
|
||
this.wxOpenid = loginRes.code;
|
||
this.checkWxUserStatus(loginRes.code)
|
||
}
|
||
});
|
||
},
|
||
// 这里向后端获取用户注册状态
|
||
checkWxUserStatus(code){
|
||
this.$post('/checkWxRegister',{loginCode:code}).then(res=>{
|
||
console.log("用户注册状态",res)
|
||
if(res.code == 200){
|
||
// 有token直接登录
|
||
if(res.token){
|
||
this.loginToken = res.token;
|
||
}else{
|
||
this.loginToken = '';
|
||
if(this.isInit){
|
||
uni.navigateTo({
|
||
url:'/pages/auth/defalut'
|
||
})
|
||
}
|
||
}
|
||
|
||
}else{
|
||
this.loginToken = '';
|
||
if(this.isInit){
|
||
uni.navigateTo({
|
||
url:'/pages/auth/defalut'
|
||
})
|
||
}
|
||
}
|
||
this.isInit = false;
|
||
this.checkLoading = false;
|
||
}).catch(err=>{
|
||
this.loginToken = '';
|
||
this.checkLoading = false;
|
||
if(this.isInit){
|
||
uni.navigateTo({
|
||
url:'/pages/auth/defalut'
|
||
})
|
||
}
|
||
this.isInit = false;
|
||
})
|
||
},
|
||
// 微信登录，使用token直接登录
|
||
wxLogin(){
|
||
if(!this.protocolStatus){
|
||
this.$refs.uToast.show({
|
||
title: '请先阅读并同意用户协议',
|
||
})
|
||
}else if(this.loginToken){
|
||
this.$tui.toast('登录成功', 3000, true);
|
||
this.$store.dispatch('setLogin', this.loginToken);
|
||
uni.setStorage({
|
||
key:'userType',
|
||
data: this.loginToken,
|
||
}).then(res => {
|
||
if (this.usetTypeValue=="普通用户") {
|
||
uni.reLaunch({
|
||
url:"../oneselfUser/index"
|
||
})
|
||
} else{
|
||
uni.switchTab({
|
||
url:"../tabBar/project"
|
||
})
|
||
}
|
||
})
|
||
}else{
|
||
this.$refs.uToast.show({
|
||
title: '登录失败请再次尝试',
|
||
type: 'error',
|
||
})
|
||
this.wxLogin();
|
||
}
|
||
},
|
||
// 微信获取手机号登录，openid + 手机号code
|
||
wxPhoneLogin(e){
|
||
const { errMsg = '', errno = '', code = '' } = e.detail;
|
||
console.log("phonecode",code);
|
||
if (errMsg === 'getPhoneNumber:ok') { // 用户同意授权
|
||
if(!this.protocolStatus){
|
||
this.$refs.uToast.show({
|
||
title: '请先阅读并同意用户协议',
|
||
})
|
||
}else{
|
||
uni.login({
|
||
provider: 'weixin', //使用微信登录
|
||
success: (loginRes) => {
|
||
console.log("loginCode",loginRes.code);
|
||
this.$post('/wxLogin',{loginCode:loginRes.code,phoneCode:code}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200 && res.token){
|
||
this.$refs.uToast.show({
|
||
title: '登录成功',
|
||
type: 'success',
|
||
})
|
||
this.$store.dispatch('setLogin', res.token);
|
||
uni.setStorage({
|
||
key:'userType',
|
||
data: this.loginToken,
|
||
}).then(res => {
|
||
if (this.usetTypeValue=="普通用户") {
|
||
uni.reLaunch({
|
||
url:"../oneselfUser/index"
|
||
})
|
||
} else{
|
||
uni.switchTab({
|
||
url:"../tabBar/project"
|
||
})
|
||
}
|
||
})
|
||
}else if(!res.token){
|
||
this.$refs.uToast.show({
|
||
title: '获取token失败',
|
||
type: 'error',
|
||
})
|
||
}else{
|
||
this.$refs.uToast.show({
|
||
title: res.msg,
|
||
type: 'error',
|
||
})
|
||
}
|
||
|
||
}).catch(error=>{
|
||
this.$refs.uToast.show({
|
||
title: error.msg,
|
||
type: 'error',
|
||
})
|
||
})
|
||
}
|
||
});
|
||
}
|
||
|
||
} else {
|
||
if (errno === 1400001) { // 手机号授权购买次数不足跳转账密登录页面
|
||
this.triggerEvent('cancel')
|
||
this.$refs.uToast.show({
|
||
icon: false,
|
||
title: '手机号授权次数不足，请更换登录方式或联系管理员充值',
|
||
type: 'error',
|
||
duration: 3500
|
||
})
|
||
} else { // 用户取消授权
|
||
this.$refs.uToast.show({
|
||
title: '您取消了授权',
|
||
type: 'error',
|
||
})
|
||
}
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|