<!-- 顶部蓝色 -->
|
<template>
|
<view class="contaier">
|
<view class="top-bg">
|
<view class="text-white text-bold text-xxxl">智能中草药干燥设备配套系统</view>
|
<view class="margin-top-xs text-white">欢迎使用，请先登录</view>
|
</view>
|
<u-form labelPosition="left" :model="model" ref="form">
|
<view class="input-box padding-lr userinfo-box">
|
|
<u-form-item label="账号" prop="username" borderBottom ref="item1">
|
<u-input v-model="model.username" placeholder="请输入账号" border="none" clearable></u-input>
|
</u-form-item>
|
|
<u-form-item label="密码" prop="password" borderBottom ref="item1">
|
<u-input type="password" v-model="model.password" placeholder="请输入密码" border="none" clearable>
|
</u-input>
|
</u-form-item>
|
|
</view>
|
|
<view class="padding margin-top-xs">
|
<button @click="submit" class="cu-btn block round bg-login-zl margin-tb-sm lg">立即登录</button>
|
<view class="text-gray flex justify-between padding-lr-sm">
|
<text>注册账号</text>
|
<text>忘记密码</text>
|
</view>
|
</view>
|
</u-form>
|
</view>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
model: {
|
username: "",
|
password: ""
|
},
|
rules: {
|
'username': {
|
type: 'string',
|
required: true,
|
message: '请输入账号',
|
trigger: ['blur', 'change']
|
},
|
'password': {
|
type: 'string',
|
required: true,
|
message: '请输入密码',
|
trigger: ['blur', 'change']
|
},
|
},
|
|
};
|
},
|
onLoad() {
|
const account = uni.getStorageSync('account');
|
if (account) {
|
this.model = account
|
}
|
|
},
|
|
methods: {
|
forget() {
|
uni.navigateTo({
|
url: "/pages/tabBar/demo"
|
})
|
},
|
submit() {
|
|
this.$refs.form.validate().then(res => {
|
this.login()
|
|
}).catch(errors => {
|
uni.$u.toast('校验失败')
|
})
|
},
|
login() {
|
this.$api.login(this.model).then((res) => {
|
if (res.success) {
|
|
console.log('request success', res)
|
uni.showToast({
|
title: '登录成功',
|
icon: 'success',
|
mask: true
|
});
|
|
uni.setStorageSync('account', this.model);
|
uni.setStorageSync('userinfo', res.result.userInfo);
|
uni.setStorageSync('token', res.result.token);
|
|
uni.switchTab({
|
url: '/pages/tabBar/general'
|
})
|
}
|
|
|
|
|
}).catch((err) => {
|
|
console.log('request fail', err);
|
})
|
},
|
onReset(e) {
|
console.log(e)
|
}
|
},
|
onReady() {
|
//onReady 为uni-app支持的生命周期之一
|
this.$refs.form.setRules(this.rules)
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.contaier {
|
height: 100vh;
|
background-color: #ffffff;
|
}
|
|
.top-bg {
|
width: 750rpx;
|
background-image: url(https://cdn.zhoukaiwen.com/head-bg.png);
|
height: 480rpx;
|
background-size: 100%;
|
background-repeat: no-repeat;
|
text-align: center;
|
padding-top: 170rpx;
|
}
|
|
.bg-login-zl {
|
background-image: linear-gradient(45deg, #727CFB, #46D0ED);
|
color: #ffffff;
|
}
|
|
.userinfo-box {
|
padding: 40rpx 40rpx;
|
}
|
</style>
|
