275 lines
6.2 KiB
Vue
275 lines
6.2 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 返回 -->
|
|
<tm-nav-bar left-icon="arrow-left" title="登陆账号" @clickLeft="back" />
|
|
<view class="login flx flx_jc">
|
|
<view class="flx flx_jc flx_ac" style="width:100%; height: 100vh;">
|
|
<view class="content" style="height: 50vh">
|
|
<view style="margin-bottom: 60rpx" class="flx flx_jc">
|
|
<uqrcode v-if="qrCode" ref="uqrcode" canvas-id="qrcode" :value="qrCode" :options="{ margin: 10 }"></uqrcode>
|
|
<view class="flx flx_ac" v-else style="width: 200px;height: 200px;border: 2rpx #000 dashed;border-radius: 10rpx;">
|
|
<view class="" style="text-align: center; width: 100%;">
|
|
{{qrCodeMsg}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<wButton
|
|
class="wbutton"
|
|
text="刷新二维码"
|
|
:rotate="isRotate"
|
|
@click="getLoginCode"
|
|
></wButton>
|
|
</view>
|
|
<!-- <view class="footer">
|
|
<view class="" @click="doLoginType(1)">
|
|
密码登录{{sn}}
|
|
</view>
|
|
<text>|</text>
|
|
<navigator url="register" open-type="navigate">注册账号</navigator>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flx flx_jc flx_ac" style="width:100%; height: 100vh">
|
|
<view class="content" style="height: 50vh">
|
|
<!-- 头部logo -->
|
|
<view class="header">
|
|
<image src="../../static/a-ziyuan85.png"></image>
|
|
</view>
|
|
<!-- 主体表单 -->
|
|
<view class="main">
|
|
<wInput
|
|
v-model="phoneData"
|
|
type="text"
|
|
maxlength="11"
|
|
placeholder="用户名/电话"
|
|
:focus="isFocus"
|
|
></wInput>
|
|
<wInput
|
|
v-model="passData"
|
|
type="password"
|
|
maxlength="9999"
|
|
placeholder="密码"
|
|
></wInput>
|
|
</view>
|
|
<wButton
|
|
class="wbutton"
|
|
text="登 录"
|
|
:rotate="isRotate"
|
|
@click="startLogin"
|
|
></wButton>
|
|
|
|
<!-- 底部信息 -->
|
|
<view class="footer">
|
|
<navigator url="forget" open-type="navigate">找回密码</navigator>
|
|
<text>|</text>
|
|
<navigator url="register" open-type="navigate">注册账号</navigator>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="" style="text-align: center;position: absolute;bottom: 40rpx;width: 100%;color: #f1f1f1;">
|
|
{{ version }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let _this;
|
|
import store from "@/store/index.js";
|
|
import wInput from '../../components/watch-login/watch-input.vue' //input
|
|
import wButton from '../../components/watch-login/watch-button.vue' //button
|
|
export default {
|
|
data() {
|
|
return {
|
|
sn:'',
|
|
version:'',
|
|
qrCodeMsg:'加载中...',
|
|
qrCode:'',
|
|
qrCodeVal:'',
|
|
login_type:0,
|
|
phoneData:'', //用户/电话
|
|
passData:'', //密码
|
|
isRotate: false, //是否加载旋转
|
|
isFocus: true // 是否聚焦
|
|
};
|
|
},
|
|
onLoad() {
|
|
let token = this.$store.getters['api/getApiToken']
|
|
if(token){
|
|
uni.navigateTo({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
if(this.login_type == 0){
|
|
this.getLoginCode()
|
|
}
|
|
this.version = this.$utils.getVersion()
|
|
// this.doFunc()
|
|
},
|
|
|
|
components:{
|
|
wInput,
|
|
wButton,
|
|
},
|
|
mounted() {
|
|
_this= this;
|
|
},
|
|
methods: {
|
|
back() {
|
|
uni.navigateTo({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
getLoginCode(){
|
|
// 验证一下token是否有值
|
|
let token = this.$store.getters['api/getApiToken']
|
|
if(!token){
|
|
console.log('无token')
|
|
this.$store.dispatch('api/getLoginCode').then(res => {
|
|
this.qrCode = 'https://ai.agrimedia.cn/qrcodeLogin/index?qrcode=' + res.key
|
|
this.qrCodeVal = res.key
|
|
setTimeout(() => {
|
|
this.qrCode = '';
|
|
this.qrCodeMsg = '二维码已过期'
|
|
},55000)
|
|
this.checkQrCode()
|
|
})
|
|
}
|
|
},
|
|
checkQrCode(){
|
|
if(this.qrCode){
|
|
setTimeout(() => {
|
|
this.$store.dispatch('api/checkLoginCode',{
|
|
key:this.qrCodeVal
|
|
}).then(res => {
|
|
if(res.status == 0){
|
|
this.checkQrCode()
|
|
}
|
|
if(res.status == 1){
|
|
this.$store.commit('api/setApiToken',res.token)
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
})
|
|
},1000)
|
|
}
|
|
},
|
|
startLogin(e){
|
|
//登录
|
|
if(this.isRotate){
|
|
//判断是否加载中，避免重复点击请求
|
|
return false;
|
|
}
|
|
if (this.phoneData == "") {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
position: 'bottom',
|
|
title: '账号不能为空'
|
|
});
|
|
return;
|
|
}
|
|
if (this.passData == "") {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
position: 'bottom',
|
|
title: '密码不能为空'
|
|
});
|
|
return;
|
|
}
|
|
|
|
|
|
uni.showLoading({
|
|
title: '登录中'
|
|
});
|
|
this.$store.dispatch('api/dologin', { mobile: this.phoneData, password: this.passData }).then(res => {
|
|
if (res.token) {
|
|
this.$store.commit('api/setApiToken',res.token)
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import url("../../components/watch-login/css/icon.css");
|
|
|
|
.login {
|
|
width: 70%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content:center;
|
|
/* margin-top: 128rpx; */
|
|
}
|
|
|
|
/* 头部 logo */
|
|
.header {
|
|
width:161rpx;
|
|
height:161rpx;
|
|
box-shadow:0rpx 0rpx 60rpx 0rpx rgba(0,0,0,0.1);
|
|
border-radius:50%;
|
|
background-color: #000000;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
.header image{
|
|
width:161rpx;
|
|
height:161rpx;
|
|
border-radius:50%;
|
|
}
|
|
|
|
/* 主体 */
|
|
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.tips {
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
margin-top: 64rpx;
|
|
margin-left: 48rpx;
|
|
}
|
|
|
|
/* 登录按钮 */
|
|
.wbutton{
|
|
margin-top: 96rpx;
|
|
}
|
|
|
|
/* 底部 */
|
|
.footer{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
margin-top: 64rpx;
|
|
color: rgba(0,0,0,0.7);
|
|
text-align: center;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
.footer text{
|
|
font-size: 24rpx;
|
|
margin-left: 15rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.back {
|
|
position: fixed;
|
|
top: 50rpx;
|
|
left: 50rpx;
|
|
}
|
|
</style>
|