<template>
|
<view class="login-box">
|
<u-transition :show="true" mode="slide-down">
|
<view class="transition text-center">
|
<image class="login-logo" mode='aspectFit' src="/static/image/jk.jpeg"></image>
|
<view class="login-title">{{title}}</view>
|
</view>
|
</u-transition>
|
<u-transition :show="true" mode="slide-down">
|
<view class="box">
|
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
|
<u-form-item label="账户" prop="username" borderBottom ref="item1">
|
<u--input v-model="form.username" placeholder="请输入账户" border="none"></u--input>
|
</u-form-item>
|
<u-form-item label="密码" prop="password" borderBottom ref="item1">
|
<u--input
|
:type="passwordType"
|
v-model="form.password"
|
placeholder="请输入密码"
|
clearable
|
:focus="noFocus"
|
border="none"
|
shape="circle"
|
ref="passwordInput"
|
></u--input>
|
<u-icon
|
slot="right"
|
size="30"
|
color="#999"
|
:name="passwordIcon"
|
@click="togglePasswordVisibility"
|
style="margin-right: 10px; cursor: pointer;"
|
></u-icon>
|
</u-form-item>
|
|
</u--form>
|
|
<view style="margin-top: 20px;">
|
<u-checkbox-group v-model="rememberPassword">
|
<u-checkbox label="记住密码" name="remember"></u-checkbox>
|
</u-checkbox-group>
|
</view>
|
|
<view class="login-btn">
|
<u-button shape="circle" @click="loginSubmit" type="primary" text="登录"></u-button>
|
</view>
|
</view>
|
</u-transition>
|
</view>
|
</template>
|
|
<script>
|
import { loginPda } from "@/common/api";
|
import {encryptSm4} from "@/common/Sm4Utils"
|
import config from '@/config'
|
|
export default {
|
name: "index",
|
|
data() {
|
return {
|
version: '',
|
title: config.title,
|
noFocus:false,
|
form: {
|
username: '',
|
password: ''
|
},
|
rules: {
|
'username': {
|
type: 'string',
|
required: true,
|
message: '请填写账户',
|
trigger: ['blur', 'change']
|
},
|
'password': {
|
type: 'string',
|
required: true,
|
message: '请填写密码',
|
trigger: ['blur', 'change']
|
},
|
},
|
passwordType: 'password', // 密码显示类型
|
passwordIcon: 'eye-off', // 密码显示图标
|
rememberPassword: [] // 初始不选中 // 记住密码状态
|
}
|
},
|
onShow() {
|
// 读取记住的密码
|
let _this = this;
|
const savedUsername = uni.getStorageSync('username');
|
const savedPassword = uni.getStorageSync('password');
|
if (savedUsername && savedPassword) {
|
_this.form.username = savedUsername;
|
_this.form.password = savedPassword;
|
_this.rememberPassword = ['remember'];
|
} else {
|
_this.rememberPassword = [];
|
}
|
},
|
methods: {
|
getSubMsg() {
|
let _this = this;
|
uni.requestSubscribeMessage({
|
tmplIds: ['C7ybfYRejH-nUxoCZV3p7dXeTc3C1MeCz8RaICQifd8'],
|
success(res) {
|
_this.goToURL()
|
}, fail(err) {
|
_this.goToURL()
|
}
|
})
|
},
|
goToURL(){
|
setTimeout(function () {
|
uni.$u.route('/pages/beReferred/index');
|
}, 1000)
|
|
},
|
loginSubmit() {
|
let _this = this;
|
this.$refs.uForm.validate().then(res => {
|
if (res) {
|
loginPda({ username: this.form.username, password: encryptSm4(this.form.password),openId:_this.car_open_id }).then(response => {
|
|
if (response.code == 200) {
|
_this.$u.vuex('sso_user_token', 'Bearer ' + response.token);
|
uni.$u.toast('登录成功！')
|
if (_this.rememberPassword.length > 0) {
|
uni.setStorageSync('username', _this.form.username);
|
uni.setStorageSync('password', _this.form.password);
|
this.goToURL()
|
} else {
|
uni.removeStorageSync('username');
|
uni.removeStorageSync('password');
|
this.goToURL()
|
}
|
// _this.getSubMsg();
|
}
|
})
|
}
|
})
|
},
|
togglePasswordVisibility() {
|
if (this.passwordType === 'password') {
|
this.passwordType = 'text';
|
this.noFocus = true;
|
this.passwordIcon = 'eye';
|
} else {
|
this.passwordType = 'password';
|
this.noFocus = false;
|
this.passwordIcon = 'eye-off';
|
}
|
}
|
},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules)
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.login-box {
|
width: 80%;
|
margin: 0 auto;
|
|
.login-logo {
|
margin-top: 60px;
|
height: 150px;
|
text-align: center;
|
}
|
|
.login-title {
|
font-size: 22px;
|
color: #000000;
|
font-weight: bold;
|
text-align: center;
|
}
|
|
.box {
|
padding-top: 20px;
|
|
.login-btn {
|
margin-top: 50px;
|
}
|
}
|
|
.version {
|
position: absolute;
|
bottom: 50px;
|
left: 50%;
|
transform: translateX(-50%);
|
color: #999999;
|
font-size: 14px;
|
}
|
}
|
</style>
|
