264 lines
9.5 KiB
Vue
264 lines
9.5 KiB
Vue
<template>
|
||
<Cn-page :loading="loading">
|
||
<view slot="body">
|
||
<view class="login">
|
||
<view class="login-title">登录</view>
|
||
<view class="login-des">灿能物联</view>
|
||
<view class="login-box">
|
||
<!-- <image class="login-box-logo" mode="widthFix" src="/static/logo.png"></image> -->
|
||
<image class="login-box-logo" mode="widthFix" src="/static/logo.png"></image>
|
||
<template v-if="loginType == 'yzm'">
|
||
<view class="login-box-input mt100">
|
||
<input class="login-box-input-main" maxlength="11" v-model="yzmForm.phone" placeholder="请输入手机号" />
|
||
</view>
|
||
<!-- <view class="login-box-input mt40">
|
||
<input class="login-box-input-main" v-model="yzmForm.imgCode" placeholder="图形验证码" />
|
||
<view class="login-box-input-img"></view>
|
||
</view> -->
|
||
<view class="login-box-input mt40">
|
||
<input class="login-box-input-main" v-model="yzmForm.code" placeholder="手机验证码" />
|
||
<view
|
||
class="ml40"
|
||
style="font-size: 28rpx; color: #666; width: 200rpx; text-align: center"
|
||
v-if="waitTime > 0"
|
||
>{{ waitTime + 's后重新获取' }}</view
|
||
>
|
||
<button class="login-box-input-btn" v-else @click="getCode" size="mini">获取验证码</button>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="login-box-input mt100">
|
||
<input class="login-box-input-main" v-model="pwdForm.phone" placeholder="请输入账号" />
|
||
</view>
|
||
<view class="login-box-input mt40">
|
||
<input type="password" class="login-box-input-main" v-model="pwdForm.pwd" placeholder="请输入密码" />
|
||
</view>
|
||
<!-- <view class="login-box-input mt40">
|
||
<view class="login-box-input-icon"></view>
|
||
<input class="login-box-input-main" v-model="pwdForm.imgCode" placeholder="图形验证码" />
|
||
<view class="login-box-input-img"></view>
|
||
</view> -->
|
||
</template>
|
||
<view class="login-box-btn" @click="login"> 登录 </view>
|
||
<view class="login-box-footer">
|
||
<view @click="loginType = 'pwd'" v-if="loginType == 'yzm'">账号密码登录</view>
|
||
<view @click="loginType = 'yzm'" v-else>短信验证码登录</view>
|
||
<view style="flex: 1"></view>
|
||
<navigator url="/pages/user/forget" hover-class="none">忘记密码</navigator>
|
||
<view style="margin: 0 10px; color: #999">|</view>
|
||
<navigator url="/pages/user/register" hover-class="none">快速注册</navigator>
|
||
</view>
|
||
<view class="login-box-tips">
|
||
<view style="color: #999">点击登录即表示同意</view>
|
||
<navigator url="/pages/mine/agreement" hover-class="none">《用户协议》</navigator>
|
||
<navigator url="/pages/mine/policy" hover-class="none">《个人信息保护政策》</navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</Cn-page>
|
||
</template>
|
||
<script>
|
||
import { apiGetYms, apiLogin, apiYsmLogin } from '@/common/api/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
loginType: 'pwd',
|
||
pwdForm: {
|
||
phone: '',
|
||
pwd: '',
|
||
imgCode: '',
|
||
},
|
||
yzmForm: {
|
||
phone: '',
|
||
code: '',
|
||
imgCode: '',
|
||
},
|
||
waitTime: 0,
|
||
tenantId: '',
|
||
companyName: '',
|
||
}
|
||
},
|
||
components: {},
|
||
methods: {
|
||
getCode() {
|
||
if (!this.yzmForm.phone) {
|
||
return this.$util.toast('请输入手机号！')
|
||
}
|
||
uni.showLoading({
|
||
title: '请稍等',
|
||
})
|
||
apiGetYms({
|
||
phone: this.yzmForm.phone,
|
||
type: 0,
|
||
})
|
||
.then((res) => {
|
||
uni.hideLoading()
|
||
console.log(res)
|
||
this.waitTime = 60
|
||
this.inter = setInterval(() => {
|
||
if (this.waitTime == 0) {
|
||
clearInterval(this.inter)
|
||
} else {
|
||
this.waitTime--
|
||
}
|
||
}, 1000)
|
||
})
|
||
.catch((err) => {
|
||
uni.hideLoading()
|
||
console.log(err)
|
||
})
|
||
},
|
||
login() {
|
||
console.log(this.loginType)
|
||
if (this.loginType == 'pwd') {
|
||
this.pwdLogin()
|
||
} else {
|
||
this.yzmLogin()
|
||
}
|
||
},
|
||
pwdLogin() {
|
||
if (!this.pwdForm.phone && !this.pwdForm.pwd) {
|
||
return this.$util.toast('请填写登录信息！')
|
||
}
|
||
apiLogin({
|
||
phone: this.pwdForm.phone,
|
||
key: this.pwdForm.pwd,
|
||
type: 1,
|
||
}).then((res) => {
|
||
console.log(res)
|
||
uni.setStorageSync('userInfo', res.data)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index',
|
||
})
|
||
})
|
||
},
|
||
yzmLogin() {
|
||
if (!this.yzmForm.phone && !this.yzmForm.code) {
|
||
return this.$util.toast('请填写登录信息！')
|
||
}
|
||
apiYsmLogin({
|
||
phone: this.yzmForm.phone,
|
||
smsCode: this.yzmForm.code,
|
||
}).then((res) => {
|
||
console.log(res)
|
||
uni.setStorageSync('access_token', res.data.token_type + ' ' + res.data.access_token)
|
||
uni.setStorageSync('refresh_token', res.data.refresh_token)
|
||
let strings = res.data.access_token.split('.') //截取token，获取载体
|
||
var userInfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, '+').replace(/_/g, '/')))))
|
||
userInfo.authorities = userInfo.authorities[0]
|
||
uni.setStorageSync('userInfo', userInfo)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index',
|
||
})
|
||
})
|
||
},
|
||
},
|
||
onLoad(o) {},
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.login {
|
||
.login-title {
|
||
padding-left: 64rpx;
|
||
padding-top: 48rpx;
|
||
font-size: 56rpx;
|
||
font-weight: 600;
|
||
color: #111;
|
||
}
|
||
|
||
.login-des {
|
||
padding-left: 64rpx;
|
||
margin-top: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.login-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 60rpx auto 0;
|
||
box-sizing: border-box;
|
||
width: 680rpx;
|
||
padding: 100rpx 40rpx;
|
||
border-radius: 40rpx;
|
||
background: $uni-theme-white;
|
||
overflow: hidden;
|
||
|
||
.login-box-logo {
|
||
background: $uni-theme-blue;
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.login-box-input {
|
||
height: 110rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.login-box-input-icon {
|
||
width: 40rpx;
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
.login-box-input-main {
|
||
font-size: 28rpx;
|
||
flex: 1;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
}
|
||
|
||
.login-box-input-btn {
|
||
width: 200rpx;
|
||
margin-left: 40rpx;
|
||
background: $uni-theme-blue;
|
||
color: #fff;
|
||
}
|
||
|
||
.login-box-input-img {
|
||
margin-left: 40rpx;
|
||
background: skyblue;
|
||
height: 80rpx;
|
||
width: 200rpx;
|
||
}
|
||
}
|
||
|
||
.login-box-switch {
|
||
margin-top: 60rpx;
|
||
color: $uni-theme-blue;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.login-box-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 80rpx;
|
||
width: 100%;
|
||
background: $uni-theme-blue;
|
||
color: #fff;
|
||
height: 80rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.login-box-footer {
|
||
display: flex;
|
||
margin-top: 40rpx;
|
||
font-size: 28rpx;
|
||
color: $uni-theme-blue;
|
||
}
|
||
|
||
.login-box-tips {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|