增加造数的页面
This commit is contained in:
qiaoxinjiu
60
src/components/User/EditPassword.vue
Normal file
60
src/components/User/EditPassword.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="password-edit">
|
||||
<div class="username">
|
||||
<span>学生证号：{{username}}</span>
|
||||
</div>
|
||||
<div class="password">
|
||||
<span>新密码：</span>
|
||||
<el-input v-model="password"></el-input>
|
||||
<el-button type="primary" @click.native.prevent="confirmPassword">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {editPassword} from '@/api/Userapi'
|
||||
export default {
|
||||
name: "EditPassword",
|
||||
props: ['username','userid'],
|
||||
data(){
|
||||
return {
|
||||
password:''
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
confirmPassword(){
|
||||
if(this.password!==undefined &&this.password!==''){
|
||||
let data = {userId:this.userid,new_password:this.password,sure_password:this.password};
|
||||
editPassword(data).then(data=>{
|
||||
if(data.code===200){
|
||||
this.password='';
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: data.message
|
||||
});
|
||||
}else {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message:data.message
|
||||
});
|
||||
}
|
||||
})
|
||||
}else {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: "请输入密码"
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-input{
|
||||
width: 200px;
|
||||
}
|
||||
.username{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
232
src/components/User/Login.vue
Normal file
232
src/components/User/Login.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div id="backgroud">
|
||||
<div class="content_right">
|
||||
<div class="login-body-title">
|
||||
<h2>登录</h2>
|
||||
</div>
|
||||
<div class="messge">
|
||||
<span>{{ msg }}</span>
|
||||
</div>
|
||||
<div class="cr_top">
|
||||
<div class="ct_input" style="height: 60px;width: 254px">
|
||||
<span class="ct-img-yhm"> </span>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="username"
|
||||
class="input_text"
|
||||
tabindex="1"
|
||||
accesskey="n"
|
||||
type="text"
|
||||
size="25"
|
||||
autocomplete="off"
|
||||
placeholder="学号">
|
||||
</div>
|
||||
<div class="ct_input" style="height:60px;width: 254px">
|
||||
<span class="ct_img_mm"> </span>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
name="password"
|
||||
class="input_text"
|
||||
tabindex="2"
|
||||
accesskey="p"
|
||||
type="password"
|
||||
size="25"
|
||||
autocomplete="off"
|
||||
placeholder="密码">
|
||||
</div>
|
||||
<input class="btn_login" value="登录" @click="handleLogin">
|
||||
</div>
|
||||
<div class="account-oprate clearfix">
|
||||
<router-link :to="{ name: 'register' }">
|
||||
<a class="regist-btn">注册</a>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Login } from '@/api/Userapi'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
msg: ' ',
|
||||
username: null,
|
||||
password: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLogin() {
|
||||
Login({
|
||||
studentId: this.username,
|
||||
password: this.password
|
||||
}).then(data => {
|
||||
if (data.code === 200 && data.success === 'true') {
|
||||
localStorage.setItem('userinfo', JSON.stringify(data.data.userinfo))
|
||||
localStorage.setItem('Token', data.data.token)
|
||||
this.$store.commit('SetRole', data.data.userinfo.userStatus)
|
||||
this.$router.push({ path: '/effekt' })
|
||||
} else {
|
||||
this.msg = data.message
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../../assets/css/Form.css";
|
||||
|
||||
.content_right {
|
||||
padding: 20px 0;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
border-color: rgba(250, 255, 251, .8);
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, .1), 0 0 8px rgba(140, 141, 140, .6);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
outline: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cr_top .ct_input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.account-oprate .regist-btn {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.messge {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 24px;
|
||||
color: #D60909;
|
||||
}
|
||||
|
||||
.content_right .cr_top {
|
||||
position: relative;
|
||||
margin: 0 23px 0;
|
||||
}
|
||||
|
||||
.content_right .input_text {
|
||||
margin-bottom: 18px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.account-oprate {
|
||||
width: 252px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.ct_img_mm,
|
||||
.ct-img-yhm {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("https://t4.chei.com.cn/passport/images/login2014/icon_input.png");
|
||||
}
|
||||
|
||||
.ct-img-yhm {
|
||||
background-position: -16px 0;
|
||||
}
|
||||
|
||||
.input_text {
|
||||
display: inline-block;
|
||||
width: 224px;
|
||||
height: 24px;
|
||||
padding: 8px 0 8px 28px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.input_text:hover {
|
||||
border-color: rgba(82, 168, 236, .8);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 8px rgba(82, 168, 236, .6);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn_login:hover {
|
||||
background-color: #3e82dc;
|
||||
}
|
||||
|
||||
.btn_login {
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
width: 254px;
|
||||
height: 37px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
border: 1px solid #4591f5;
|
||||
background-color: #4591f5;
|
||||
margin-bottom: 14px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
option,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
body,
|
||||
button,
|
||||
code,
|
||||
dd,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
fieldset,
|
||||
form,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
input,
|
||||
legend,
|
||||
li,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
td,
|
||||
textarea,
|
||||
th,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
143
src/components/User/Register.vue
Normal file
143
src/components/User/Register.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div id="backgroud">
|
||||
<div class="register-head" style="padding-top: 20px"></div>
|
||||
<div class="model">
|
||||
<div class="location-title"><h1>注册</h1></div>
|
||||
|
||||
<el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="学号" prop="studentId">
|
||||
<el-input v-model="ruleForm.studentId" type="text" placeholder="学号" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="ruleForm.password" type="password" placeholder="密码" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input v-model="ruleForm.checkPass" type="password" placeholder="确认密码" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="姓名" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-input v-model="ruleForm.gender" placeholder="性别" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学院" prop="faculty">
|
||||
<el-input v-model="ruleForm.faculty" type="text" placeholder="学院" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="年级" prop="grade">
|
||||
<el-input v-model="ruleForm.grade" type="text" placeholder="年级" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="enter-btn" type="primary" :disabled="!select" @click="submitForm('ruleForm')">
|
||||
立即注册
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Register } from '@/api/Userapi'
|
||||
|
||||
export default {
|
||||
name: 'Register',
|
||||
data() {
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'))
|
||||
return
|
||||
}
|
||||
if (this.ruleForm.password !== '') {
|
||||
this.$refs.ruleForm.validateField('checkPass')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
const validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'))
|
||||
} else if (value !== this.ruleForm.password) {
|
||||
callback(new Error('两次输入密码不一致!'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validateStudentId = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入学号'))
|
||||
return
|
||||
}
|
||||
callback()
|
||||
}
|
||||
|
||||
return {
|
||||
select: true,
|
||||
ruleForm: {
|
||||
studentId: '',
|
||||
password: '',
|
||||
checkPass: '',
|
||||
name: '',
|
||||
gender: '',
|
||||
faculty: '',
|
||||
grade: ''
|
||||
},
|
||||
rules: {
|
||||
studentId: [{ required: true, validator: validateStudentId, trigger: 'blur' }],
|
||||
password: [{ required: true, validator: validatePass, trigger: 'blur' }],
|
||||
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
gender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
|
||||
faculty: [{ required: true, message: '请输入学院', trigger: 'blur' }],
|
||||
grade: [{ required: true, message: '请输入年级', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(message) {
|
||||
this.$alert(message, '提示', {
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
},
|
||||
handleRegister() {
|
||||
Register({
|
||||
studentId: this.ruleForm.studentId,
|
||||
password: this.ruleForm.password,
|
||||
name: this.ruleForm.name,
|
||||
gender: this.ruleForm.gender,
|
||||
faculty: this.ruleForm.faculty,
|
||||
grade: this.ruleForm.grade
|
||||
}).then(data => {
|
||||
if (data.code === 200 && data.success === 'true') {
|
||||
this.open('注册成功')
|
||||
this.$router.push({ name: 'login' })
|
||||
} else {
|
||||
this.open(data.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.handleRegister()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "../../assets/css/Form.css";
|
||||
|
||||
.location-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-head {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
float: left;
|
||||
width: 80%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user