You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
323 lines
7.6 KiB
323 lines
7.6 KiB
<template>
|
|
<view class="loginBack">
|
|
<view class="loginForm">
|
|
<view class="welcomeLogin">欢迎登录</view>
|
|
<view class="tip">舾装-工装托盘管理</view>
|
|
<view class="formregion">
|
|
<!-- <view class="logo"><image :src="define" class="define" mode="scaleToFill"></image></view> -->
|
|
<u-form :model="form" ref="uForm">
|
|
<u-form-item prop="lxdh" label-position="top">
|
|
<u-input type="text" placeholder="请输入手机号码" v-model="form.lxdh" @blur="handleBlur" />
|
|
</u-form-item>
|
|
<u-form-item prop="msgCode" label-position="top">
|
|
<u-input type="number" v-model.trim="form.msgCode" placeholder="请输入验证码" />
|
|
<u-button v-if="!showCode" type="primary" class="codebtn" @click="getcode">获取验证码</u-button>
|
|
<u-count-down v-if="showCode" ref="uCountDown" :start="59" :timestamp="299" @end="codeEnd" color="#257deb" style="width: 50rpx; border-radius: 30rpx;"
|
|
bg-color="#fff" border-color="#fff" height="45" font-size="30" :show-border="false"
|
|
:show-days="false" :show-hours="false" :show-minutes="true" :autoplay="true"></u-count-down>
|
|
<view v-if="showCode" class="timetxt"></view>
|
|
</u-form-item>
|
|
<!-- <view v-if="!showCode" type="primary" class="loginno">登 录</view>
|
|
<u-button v-if="showCode" type="primary" class="logincla" @click="login">登 录</u-button> -->
|
|
<u-button type="primary" class="logincla" @click="login">登 录</u-button>
|
|
</u-form>
|
|
</view>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
//#ifdef APP-PLUS
|
|
// const jpushModule = uni.requireNativePlugin('JG-JPush');
|
|
//#endif
|
|
export default {
|
|
name: "login",
|
|
data() {
|
|
return {
|
|
define: require("@/static/images/logotip.png"),
|
|
show: false,
|
|
form: {
|
|
lxdh:"",
|
|
msgCode:""
|
|
},
|
|
showCode: false,
|
|
rules: {
|
|
lxdh: [{
|
|
required: true,
|
|
message: '输入手机号码',
|
|
trigger: ['blur'],
|
|
}],
|
|
// msgCode: [{
|
|
// required: true,
|
|
// message: '请输入验证码',
|
|
// trigger: 'change'
|
|
// }]
|
|
}
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs.uForm.setRules(this.rules);
|
|
},
|
|
onShow(){
|
|
this.showCode=false;
|
|
this.form= {
|
|
lxdh:"",
|
|
msgCode:""
|
|
}
|
|
},
|
|
methods: {
|
|
handleBlur(e){
|
|
console.log("handleBlur");
|
|
// 判断手机号码是否合法
|
|
if(!this.$u.test.mobile(e)){
|
|
this.$refs.uToast.show({
|
|
title: '手机号码输入错误，请核实！',
|
|
type: 'warning',
|
|
duration: 2000
|
|
});
|
|
}
|
|
},
|
|
async getcode(){
|
|
var _this=this;
|
|
// 获取验证码
|
|
if(!_this.form.lxdh){
|
|
_this.$refs.uToast.show({
|
|
title: '请输入手机号码！',
|
|
type: 'warning',
|
|
duration: 2000
|
|
});
|
|
}
|
|
else{ // if(_this.$u.test.mobile(_this.form.lxdh))
|
|
// 输入正确手机号码
|
|
uni.removeStorageSync('token');
|
|
uni.removeStorageSync('user');
|
|
uni.removeStorageSync('expires');
|
|
|
|
// 调接口推送验证码
|
|
// Query Params 传参
|
|
uni.showLoading({
|
|
title: '发送验证码...'
|
|
});
|
|
const {data: res} = await uni.$http.post("/api/sendSms?phoneNumber="+_this.form.lxdh);
|
|
if(res&&res.success){
|
|
// 倒计时
|
|
_this.showCode=true;
|
|
_this.form.msgCode=res.data;
|
|
_this.$refs.uToast.show({
|
|
title: res.message? res.message:"验证码已发送手机，请查收！",
|
|
type: 'success',
|
|
duration: 2000
|
|
});
|
|
}
|
|
else{
|
|
_this.$refs.uToast.show({
|
|
title: res.message? res.message:"验证码发送失败！请重试！",
|
|
type: 'warning',
|
|
duration: 2000
|
|
});
|
|
}
|
|
|
|
}
|
|
// else{
|
|
// _this.$refs.uToast.show({
|
|
// title: '手机号码输入错误，请核实！',
|
|
// type: 'warning',
|
|
// duration: 2000
|
|
// });
|
|
// }
|
|
},
|
|
codeEnd(e){
|
|
// 倒计时结束 重新获取验证码
|
|
console.log(e);
|
|
this.showCode=false;
|
|
},
|
|
login() {
|
|
|
|
// this.$refs.uToast.show({
|
|
// title: '登录成功',
|
|
// type: 'success',
|
|
// isTab: true,
|
|
// duration: 1000,
|
|
// url: '/pages/index/index'
|
|
// });
|
|
|
|
this.$refs.uForm.validate(valid => {
|
|
if (valid) {
|
|
// 登录
|
|
this.loginDo();
|
|
} else {
|
|
console.log('验证失败');
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
async loginDo(){
|
|
uni.showLoading({
|
|
title: '正在登录...'
|
|
});
|
|
var _this=this;
|
|
const {data: res} = await uni.$http.post('/api/login?lxdh='+this.form.lxdh+"&msgCode="+this.form.msgCode);
|
|
if(res.success){
|
|
if(res.data){
|
|
console.log(res.data)
|
|
uni.setStorageSync('expires', res.data.expires);
|
|
uni.setStorageSync('token', res.data.token);
|
|
uni.setStorageSync('user', JSON.stringify(res.data.user));
|
|
uni.setStorageSync('menu', JSON.stringify(res.data.btns));
|
|
|
|
// //#ifdef APP-PLUS
|
|
// //设置别名
|
|
// jpushModule.setAlias({
|
|
// 'alias': res.data.user.yhdm,
|
|
// 'sequence': 1
|
|
// });
|
|
// //#endif
|
|
|
|
this.getdept();
|
|
console.log('login success');
|
|
this.$refs.uToast.show({
|
|
title: '登录成功',
|
|
type: 'success',
|
|
duration: 1000,
|
|
url: '/pages/index/index'
|
|
});
|
|
}
|
|
else{
|
|
this.$refs.uToast.show({
|
|
title: "此手机号码登录失败！请重试！",
|
|
type: 'error',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}
|
|
else{
|
|
this.$refs.uToast.show({
|
|
title: res.message? res.message:"此手机号码登录失败！请重试！",
|
|
type: 'error',
|
|
duration: 2000
|
|
});
|
|
}
|
|
},
|
|
|
|
async getdept(){
|
|
var user= JSON.parse(uni.getStorageSync("user"));
|
|
var bmbm=user.bmbm?user.bmbm:"";
|
|
const {data: res} = await uni.$http.get('/getCommonData');
|
|
if(res.success){
|
|
if(res.data){
|
|
// 缓存部门
|
|
uni.setStorageSync('commondata', JSON.stringify(res.data));
|
|
if(res.data.depts){
|
|
res.data.depts.forEach((item, ii) => {
|
|
if(item.departCode==bmbm){
|
|
uni.setStorageSync('bmmc', item.departName);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style>
|
|
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
|
|
::v-deep .u-checkbox__label{
|
|
color:#bdbfc1
|
|
}
|
|
.fontColor{
|
|
color:#bdbfc1
|
|
}
|
|
.timetxt{
|
|
font-size: 36rpx;
|
|
color:#257deb;
|
|
line-height: 38rpx;
|
|
height: 45rpx;
|
|
margin-left: 50rpx;
|
|
}
|
|
.codebtn{
|
|
display: block;
|
|
background-color:#257deb;
|
|
height: 60rpx;
|
|
width: 160rpx;
|
|
line-height: 60rpx;
|
|
font-size: 26rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
.loginno{
|
|
display: block;
|
|
background-color:#a4ceff;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
width: 550rpx;
|
|
margin-top: 30rpx;
|
|
border-radius:12rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
box-sizing:border-box;
|
|
}
|
|
.logincla{
|
|
display: block;
|
|
background-color:#257deb;
|
|
height: 80rpx;
|
|
width: 550rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
.loginBack {
|
|
color: #fff;
|
|
height: 100vh;
|
|
padding:60rpx 50rpx 200rpx 50rpx;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background-size: 100% 100%;
|
|
background-image: url('../../static/images/welcome.jpg');
|
|
.inpuIcon {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
.formregion {
|
|
width: 650rpx;
|
|
padding: 33px 50rpx;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
margin-top: 60rpx;
|
|
position: relative;
|
|
display: block;
|
|
.logo{
|
|
position: absolute;
|
|
top: -50rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.define {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
}
|
|
.welcomeLogin {
|
|
font-size: 24rpx;
|
|
letter-spacing: 2rpx;
|
|
padding: 60rpx 0 30rpx;
|
|
}
|
|
.tip{
|
|
font-weight: 600;
|
|
font-size: 42rpx;
|
|
letter-spacing: 4rpx;
|
|
padding: 0 0 40rpx 0;
|
|
|
|
}
|
|
</style>
|