120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<template>
|
||
|
||
<view class="content">
|
||
<view class="logo">
|
||
<image style="width: 150rpx; height: 150rpx; " src="/static/images/logo.png" alt="" /></image>
|
||
</view>
|
||
<view class="login">
|
||
<u-form :model="form" ref="uForm" :error-type="['toast']">
|
||
|
||
<u-form-item label="帐号:" prop="phone">
|
||
<u-input v-model="form.phone" placeholder="请输入登陆账号" />
|
||
</u-form-item>
|
||
<u-form-item label="密码:" prop="password">
|
||
<u-input type="password" v-model="form.password" placeholder="请输入密码"/>
|
||
</u-form-item>
|
||
</u-form>
|
||
<u-button @click="submit" style="margin-top: 30rpx;" type="primary">登录</u-button>
|
||
<view class="forgetPassword" @click="forgetPassWord">忘记密码</view>
|
||
<view class="reg" @click="register">没有帐号？注册</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {toast, clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
phone: '',
|
||
password: '',
|
||
},
|
||
rules: {
|
||
|
||
phone: [
|
||
{
|
||
required: true,
|
||
message: '请输入帐号',
|
||
// 可以单个或者同时写两个触发验证方式
|
||
trigger: ['change','blur'],
|
||
}
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
message: '请输入密码',
|
||
// 可以单个或者同时写两个触发验证方式
|
||
trigger: ['change','blur'],
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
methods: {
|
||
submit() {
|
||
this.$refs.uForm.validate(valid => {
|
||
if (valid) {
|
||
const data = {
|
||
login_code: this.form.login_code,
|
||
phone: this.form.phone,
|
||
password: this.form.password,
|
||
}
|
||
|
||
this.$api.login(data).then(res => {
|
||
console.log(res)
|
||
if (res.code !== 0) {
|
||
toast(res.msg)
|
||
} else {
|
||
toast('登录成功')
|
||
setStorageSync('token' ,res.data.token )
|
||
useRouter('/pages/index/index',{} ,'switchTab')
|
||
}
|
||
})
|
||
} else {
|
||
console.log('验证失败');
|
||
}
|
||
});
|
||
},
|
||
register(){
|
||
useRouter('/pages/public/register')
|
||
},
|
||
forgetPassWord(){
|
||
useRouter('/pages/public/forget_password')
|
||
}
|
||
},
|
||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules);
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding: 0 10rpx;
|
||
width:100%;
|
||
background-image: url('/static/images/login_bg.png') ;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-position: left top;
|
||
}
|
||
.logo{
|
||
width:150rpx;
|
||
margin:0 auto;
|
||
padding-top:140rpx;
|
||
}
|
||
.login{
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
margin-top: 260rpx;
|
||
}
|
||
.title {
|
||
text-align: center;
|
||
margin: 80rpx 0 0 0;
|
||
}
|
||
.reg{float: right;padding:30rpx 0 30rpx 0;color:#2979ff;}
|
||
|
||
.forgetPassword{float: left;padding:30rpx 0 30rpx 0;color:#2979ff;}
|
||
</style> |