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>
|