<template>
|
<div style="margin-top: 10px" class="app-contain">
|
<el-row :gutter="50">
|
<el-col :span="7">
|
<el-card>
|
<div slot="header" class="clearfix">
|
<span>个人信息</span>
|
</div>
|
<el-row style="text-align: center">
|
<el-upload action="/api/student/upload/file" :data="{folder:'image'}" accept=".jpg,.png" :show-file-list="false" :on-success="uploadSuccess">
|
<el-avatar class="el-dropdown-avatar" :size="100" :src="form.imagePath === null ? require('@/assets/avatar.png') : form.imagePath"></el-avatar>
|
</el-upload>
|
</el-row>
|
<el-row class="user-info-userName">
|
<label>{{form.userName}}</label>
|
</el-row>
|
<el-divider/>
|
<el-row class="user-info-fullInfo">
|
<label>姓名：{{form.realName}}</label><br/>
|
<label>年级：{{levelFormatter(form.userLevel)}}</label><br/>
|
<label>班级：{{form.classes}}</label> <el-button style="margin-left: 20px;" type="primary" icon="el-icon-plus" size="mini" @click="joinTeam" circle></el-button><br/>
|
<label>注册时间：{{form.createTime}}</label><br/>
|
</el-row>
|
</el-card>
|
</el-col>
|
<el-col :span="17">
|
<el-card shadow="hover">
|
<el-tabs active-name="event" type="card">
|
<el-tab-pane label="用户动态" name="event">
|
<div class="block">
|
<el-timeline>
|
<el-timeline-item :timestamp="item.createTime" placement="top" :key="item.id" v-for="item in event">
|
<el-card>
|
<p>{{item.content}}</p>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="个人资料修改" name="update">
|
<el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
|
<el-form-item label="真实姓名：" prop="realName" required>
|
<el-input v-model="form.realName"></el-input>
|
</el-form-item>
|
<el-form-item label="年龄：">
|
<el-input v-model="form.age"></el-input>
|
</el-form-item>
|
<el-form-item label="性别：">
|
<el-select v-model="form.sex" placeholder="性别" clearable>
|
<el-option v-for="item in sexEnum" :key="item.key" :value="item.key"
|
:label="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="出生日期：">
|
<el-date-picker v-model="form.birthDay" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"/>
|
</el-form-item>
|
<el-form-item label="手机：">
|
<el-input v-model="form.phone"></el-input>
|
</el-form-item>
|
<el-form-item label="年级：" prop="userLevel" required>
|
<el-select v-model="form.userLevel" placeholder="年级">
|
<el-option v-for="item in levelEnum" :key="item.key" :value="item.key"
|
:label="item.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm">更新</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-dialog :visible.sync="joinTeamDialog" :close-on-click-modal="false">
|
<el-form label-width="70px" :model="team" ref="team" :rules="classRules">
|
<el-form-item label="口令：" prop="uid" required>
|
<el-input v-model="team.uid" ></el-input>
|
</el-form-item>
|
<el-form-item style="text-align: center;margin-left: -70px">
|
<el-button type="primary" style="width: 150px" @click="teamSubmit">确定</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import userApi from '@/api/user'
|
import { mapGetters, mapState, mapMutations } from 'vuex'
|
|
export default {
|
data () {
|
return {
|
event: [],
|
form: {
|
userName: '',
|
realName: '',
|
age: '',
|
sex: '',
|
birthDay: null,
|
phone: null,
|
userLevel: null,
|
createTime: null,
|
imagePath: null
|
},
|
formLoading: false,
|
rules: {
|
realName: [
|
{ required: true, message: '请输入真实姓名', trigger: 'blur' }
|
],
|
userLevel: [
|
{ required: true, message: '请选择年级', trigger: 'change' }
|
]
|
},
|
team: {
|
uid: null
|
},
|
joinTeamDialog: false,
|
classRules: {
|
uid: [{ required: true, message: '请输入班级口令', trigger: 'blur' },
|
{ pattern: /^\w{8}(-\w{4}){3}-\w{12}$/, message: '口令格式错误' }]
|
}
|
}
|
},
|
created () {
|
this.infoLoad()
|
},
|
methods: {
|
infoLoad () {
|
let _this = this
|
userApi.getUserEvent().then(re => {
|
_this.event = re.response
|
})
|
userApi.getCurrentUser().then(re => {
|
_this.form = re.response
|
})
|
},
|
teamSubmit () {
|
let _this = this
|
this.$refs.team.validate((valid) => {
|
if (valid) {
|
userApi.joinTeam({ classUid: this.team.uid }).then(data => {
|
if (data.code === 1) {
|
_this.joinTeamDialog = false
|
this.infoLoad()
|
_this.$refs['team'].resetFields()
|
_this.$message.success(data.message)
|
} else {
|
_this.$message.error(data.message)
|
}
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
joinTeam () {
|
this.joinTeamDialog = true
|
},
|
uploadSuccess (re, file) {
|
if (re.code === 1) {
|
this.form.imagePath = re.response
|
this.setImagePath(re.response)
|
} else {
|
this.$message.error(re.message)
|
}
|
},
|
submitForm () {
|
let _this = this
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.formLoading = true
|
userApi.update(this.form).then(data => {
|
if (data.code === 1) {
|
_this.$message.success(data.message)
|
} else {
|
_this.$message.error(data.message)
|
}
|
_this.formLoading = false
|
}).catch(e => {
|
_this.formLoading = false
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
levelFormatter (level) {
|
return this.enumFormat(this.levelEnum, level)
|
},
|
...mapMutations('user', ['setImagePath'])
|
},
|
computed: {
|
...mapGetters('enumItem', [
|
'enumFormat'
|
]),
|
...mapState('enumItem', {
|
sexEnum: state => state.user.sexEnum,
|
levelEnum: state => state.user.levelEnum
|
})
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|
