126 lines
4.0 KiB
Vue
126 lines
4.0 KiB
Vue
<template>
|
||
<div class="profile-info common-mobile-view">
|
||
<el-form ref="ruleFormRef"
|
||
:model="userStore.userInfo"
|
||
:rules="rules" label-width="auto">
|
||
<el-form-item label="姓名" prop="username">
|
||
<el-input v-model="userStore.userInfo.username"
|
||
:maxlength="10" show-word-limit
|
||
clearable/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="头像">
|
||
<upload-image v-model="userStore.userInfo.avatar"
|
||
:image-limit="1"
|
||
:service-url="fileServiceUrl"
|
||
:service-file-root-path="serviceFileRootPath"
|
||
:image-path="userStore.imagePath"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="性别">
|
||
<el-radio-group v-model="userStore.userInfo.gender">
|
||
<el-radio :value="1">男</el-radio>
|
||
<el-radio :value="0">女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="生日">
|
||
<el-date-picker v-model="userStore.userInfo.birthDate"
|
||
type="date" :editable="false" value-format="YYYY-MM-DD"
|
||
placeholder="请选择日期"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="地区">
|
||
<el-cascader v-model="userStore.userInfo.area"
|
||
placeholder="请选择地区" :options="pcTextArr">
|
||
</el-cascader>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="手机号">
|
||
<el-input v-model="userStore.userInfo.phoneNumber"
|
||
:maxlength="11" show-word-limit clearable
|
||
placeholder="请输入手机号"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="邮箱">
|
||
<el-input v-model="userStore.userInfo.email"
|
||
:maxlength="20" show-word-limit clearable
|
||
placeholder="请输入邮箱"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="地址">
|
||
<el-input v-model="userStore.userInfo.address"
|
||
:maxlength="20" show-word-limit clearable
|
||
placeholder="请输入地址"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="职业">
|
||
<el-input v-model="userStore.userInfo.job"
|
||
:maxlength="10" show-word-limit clearable
|
||
placeholder="请输入职业"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="标签">
|
||
<el-input-tag v-model="userStore.userInfo.tags"
|
||
:max="3" placeholder="请输入标签（最多3个）" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="描述">
|
||
<el-input v-model="userStore.userInfo.description"
|
||
:maxlength="20" show-word-limit clearable
|
||
placeholder="用一句话描述自己"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<div class="button-container">
|
||
<el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
|
||
<el-button @click="cancelClick">取消</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { UploadImage } from 'vue3-common'
|
||
import { pcTextArr } from 'element-china-area-data'
|
||
import { useUserStore } from '@/store/user.ts'
|
||
import { reactive, ref } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import type { FormInstance, FormRules } from 'element-plus'
|
||
import { profileInfoRules } from '@/utils/element/elRules.ts'
|
||
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
|
||
|
||
const userStore = useUserStore()
|
||
const ruleFormRef = ref<FormInstance>()
|
||
const rules = reactive<FormRules>(profileInfoRules)
|
||
|
||
const cancelClick = () => {
|
||
history.back()
|
||
}
|
||
|
||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return
|
||
await formEl.validate(async (valid, fields) => {
|
||
if (valid) {
|
||
await userStore.updateUser()
|
||
await userStore.queryUser(userStore.userInfo.id)
|
||
ElMessage.success('更改信息成功')
|
||
history.back()
|
||
} else {
|
||
ElMessage.error('请先填写信息')
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.profile-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
|
||
.button-container {
|
||
align-self: center;
|
||
}
|
||
}
|
||
</style>
|