94 lines
1.7 KiB
Vue
94 lines
1.7 KiB
Vue
<!--用户详情-->
|
|
<template>
|
|
<el-form
|
|
ref="formRef"
|
|
style="max-width: 600px"
|
|
:model="state.userInfo"
|
|
label-width="auto"
|
|
label-position="top"
|
|
>
|
|
<el-form-item
|
|
prop="username"
|
|
label="用户名"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
message: '用户名不能为空',
|
|
trigger: 'blur',
|
|
},
|
|
|
|
]"
|
|
>
|
|
<el-input v-model="state.userInfo.username" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
prop="nickName"
|
|
label="用户昵称"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
message: '用户昵称不能为空',
|
|
trigger: 'blur',
|
|
}
|
|
]"
|
|
>
|
|
<el-input v-model="state.userInfo.nickName" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
prop="password"
|
|
label="密码"
|
|
|
|
>
|
|
<el-input v-model="state.userInfo.password" type="password"/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm(formRef)">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue'
|
|
import type { FormInstance } from 'element-plus'
|
|
import { userInfoFront, userUpdateFront } from '~/api/user/frontUserApi'
|
|
const formRef = ref<FormInstance>()
|
|
const state = reactive({
|
|
userInfo: {}
|
|
})
|
|
function init() {
|
|
userInfoFront().then(res =>{
|
|
state.userInfo = res.data
|
|
})
|
|
}
|
|
onMounted(()=>{
|
|
init()
|
|
})
|
|
|
|
/**
|
|
* 提交
|
|
* @param formEl
|
|
*/
|
|
const submitForm = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
formEl.validate((valid) => {
|
|
if (valid) {
|
|
userUpdateFront(state.userInfo).then(res =>{
|
|
toast.success("修改成功~")
|
|
init()
|
|
}).catch(err=>{
|
|
})
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
<route lang="json">
|
|
{
|
|
"meta": {
|
|
"layout": "frontUserInfo"
|
|
}
|
|
}
|
|
</route>
|