Files
pad-nl-three-uni/pages/login/login.vue
2024-03-01 09:20:07 +08:00

251 lines
6.5 KiB
Vue

<template>
<view class="login-bg relative">
<view class="logo-wraper">
<img src="../../static/images/logo.png" alt="">
</view>
<view class="login_wrap">
<view class="login_w">
<view class="zd-row jcflexstart login_tab">
<view class="login_tab_item" :class="{'login_tab_active': drift === 0}" @tap="_tabChange(0)">登录</view>
<view class="login_tab_item" :class="{'login_tab_active': drift === 50}" @tap="_tabChange(50)">配置</view>
</view>
<view class="login_cnt drift" :style="{'left': '-'+drift*2+'%'}">
<view class="login_card">
<view class="card_wrap">
<view class="zd-row mgb40">
<view class="zd-col-4 login_label">账号</view>
<view class="zd-col-20">
<input type="text" placeholder="用户名" v-model="loginname" class="inputStyle">
</view>
</view>
<view class="zd-row mgb40">
<view class="zd-col-4 login_label">密码</view>
<view class="zd-col-20 relative">
<input :type="inputType" placeholder="密码" v-model="password" class="inputStyle">
<text class="iconfont login_icon" :class="eyeOpen ? 'eye_colse_icon' : 'eye_open_icon'" @click="passwordShow"></text>
</view>
</view>
</view>
<view class="zd-row mgt40 mgb40">
<button class="primary-button" :disabled="disabled" @click="toLogin">&nbsp;&nbsp;</button>
</view>
<view class="zd-row">
<!-- <view class="iconfont scan_icon"></view> -->
<!-- <text class="san_text">扫码登录</text> -->
<text class="zd-col-24 san_text" @tap="isUpdate">升级版本</text>
</view>
</view>
<view class="login_card">
<view class="card_wrap">
<view class="zd-row mgb40">
<view class="zd-col-4 login_label">域名</view>
<view class="zd-col-20">
<input type="text" placeholder="域名地址" v-model="baseUrl" class="inputStyle">
</view>
</view>
<view class="zd-row mgb40">
<view class="zd-col-6 login_label">刷新时间</view>
<view class="zd-col-18">
<input type="number" placeholder="刷新时间" v-model="setTime" class="inputStyle">
</view>
</view>
</view>
<view class="zd-row mgt40 mgb40">
<button class="primary-button" :disabled="disabled" @tap="toConfig">&nbsp;&nbsp;</button>
</view>
</view>
</view>
</view>
<view class="daoying_bg"></view>
</view>
<view v-if="version !== ''" class="version-name">v{{version}}</view>
<Up-grade v-if="grade === true" @closeUpdate="closeUpdate" :androidUrl="androidUrl"></up-grade>
</view>
</template>
<script>
import { RSAencrypt } from '@/utils/jsencrypt.js'
import {handLogin, pdaUpdate} from '@/utils/getData2.js'
import permision from "@/utils/permission.js"
import UpGrade from './upgrade.vue'
export default {
components: {
UpGrade
},
data() {
return {
loginname: '',
password: '',
baseUrl: this.$store.getters.baseUrl,
setTime: this.$store.getters.setTime / 1000,
inputType: 'password',
eyeOpen: true,
drift: 0,
disabled: false,
jobnum: '',
qrcode: '',
logintype: '',
version: '',
versionCode: '',
grade: false,
androidUrl: ''
};
},
methods: {
_tabChange (num) {
this.drift = num
},
passwordShow () {
this.eyeOpen = !this.eyeOpen
if (this.eyeOpen) {
this.inputType = 'password'
} else {
this.inputType = 'text'
}
},
toConfig () {
let obj = {
baseUrl: this.baseUrl,
setTime: this.setTime * 1000
}
this.$store.dispatch('setConfig', obj)
this._tabChange(0)
},
async toLogin() {
// uni.redirectTo({
// url: '/pages/home/home'
// })
this.disabled = true
if (this.loginname === '') {
uni.showToast({
title: '用户名不能为空',
icon: 'none'
})
this.disabled = false
return
}
if (this.password === '') {
uni.showToast({
title: '密码不能为空',
icon: 'none'
})
this.disabled = false
return
}
try {
let res = await handLogin(this.loginname, RSAencrypt(this.password))
this.$store.dispatch('saveUserInfo', JSON.stringify(res.user.user))
this.$store.dispatch('saveToken', res.token)
uni.redirectTo({
url: '/pages/home/home'
})
this.disabled = false
} catch (e) {
this.disabled = false
}
},
isUpdate () {
this._pdaUpdate()
},
async _pdaUpdate () {
let res = await pdaUpdate()
if (res.versionName === this.version) {
uni.showToast({
title: '当前为最新版本',
icon: 'none'
})
} else {
this.grade = true
this.androidUrl = res.url
}
},
closeUpdate () {
this.grade = false
}
}
}
</script>
<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.login-bg
_wh(100%, 100%)
_bis(#fff,'../../static/images/login_bg.jpg', 100%, 100%,bottom)
.logo-wraper
_wh(90%, auto)
margin 0 auto
text-align center
_bis(,'../../static/images/login_bg.png', 100%, 100%,bottom)
img
_wh(30%, auto)
.login_wrap
position fixed
left 50%
top 50%
width 50%
padding 5% 6%
transform translate3d(-50%, -50%, 0)
_bis(,'../../static/images/form_bg.png', 100%, 100%,bottom)
.login_w
_wh(100%, 100%)
overflow hidden
.login_tab
height 100rpx
padding 0 10rpx 50rpx 10%
margin-bottom 15px
_bis(,'../../static/images/login_tabs_bg.png', 100%, 100%,bottom)
.login_tab_item
cursor pointer
_font(50rpx,66rpx,#99B1DD,,center)
font-family: YouSheBiaoTiHei;
padding 0 50rpx 0 10rpx
.login_tab_active
color #fff
_bis(,'../../static/images/login_tab_active.png', 100%, 100%,bottom)
.login_cnt
position relative
width 200%
overflow hidden
.login_card
width 50%
float left
.card_wrap
overflow hidden
.login_label
_font(36rpx, 90rpx, #AFBED8,,)
.inputStyle
_font(36rpx, 90rpx, #fff,,)
_wh(100%, 90rpx)
background: rgba(45,88,184,0.1);
border: 2rpx solid #4980BD;
padding 0 22rpx
.inputStyle[focus]
background: rgba(45,88,184,0.25);
border: 2rpx solid #21D0F2;
line-height 90rpx
.login_icon
position absolute
top 0
right 10px
.primary-button
_wh(auto, 100rpx)
padding 0 100rpx
_font(50rpx,100rpx,#fff,,center)
_bis(,'../../static/images/button.png', 100%, 100%,bottom)
.san_text
_font(36rpx,36px,#fff,,center)
.drift
transition left .3s linear
.version-name
width 100%
position: absolute
bottom 3%
_font(30rpx, 60rpx, #fff,,center)
.daoying_bg
position: absolute
bottom -30%
left 0
_wh(100%, 30%)
_bis(,'../../static/images/daoy.png', 100%, 100%,bottom)
</style>