91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="detail-container">
|
||
|
|
<el-card shadow="hover">
|
||
|
|
<el-form label-width="100px" :disabled="disabled">
|
||
|
|
<el-form-item label="头像">
|
||
|
|
<PreviewSingleImgUpload :ImgUrlList="userForm.userAvatar" @update:goodImgArr="userForm.userAvatar = $event"/>
|
||
|
|
</el-form-item>
|
||
|
|
<div style="display: flex;">
|
||
|
|
<el-form-item label="账号">
|
||
|
|
<el-input v-model="userForm.userAccount"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="密码">
|
||
|
|
<el-input v-model="userForm.userPassword" type="password" />
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex;">
|
||
|
|
<el-form-item label="用户名">
|
||
|
|
<el-input v-model="userForm.userName" />
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex;">
|
||
|
|
<el-form-item label="积分">
|
||
|
|
<el-input v-model="userForm.points"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
<div style="display: flex;">
|
||
|
|
<el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import myAxios from '@/api/myAxios';
|
||
|
|
import { ref, onBeforeMount } from 'vue'
|
||
|
|
import { SuccessInfo, WarnInfo } from '@/utils/messageInfo';
|
||
|
|
import { useRoute } from "vue-router";
|
||
|
|
import PreviewSingleImgUpload from "@/utils/imgUpload/PreviewSingleImgUpload.vue";
|
||
|
|
|
||
|
|
|
||
|
|
const disabled = ref(true) //表单是否禁用
|
||
|
|
const userForm: any = ref({}) //用户表单
|
||
|
|
const tempAvatar = ref('') //暂存的用户头像
|
||
|
|
const route = useRoute()
|
||
|
|
|
||
|
|
onBeforeMount(()=>{
|
||
|
|
if(route.params.flag === '1') {
|
||
|
|
disabled.value = false
|
||
|
|
}
|
||
|
|
getUserInfo()
|
||
|
|
console.log('用户id---->',route.params.id)
|
||
|
|
console.log('标识--->',route.params.flag)
|
||
|
|
})
|
||
|
|
|
||
|
|
//获取当前登陆用户信息
|
||
|
|
const getUserInfo = async () => {
|
||
|
|
const res = await myAxios.post('/user/query/id',{ id: route.params.id })
|
||
|
|
console.log('后端返回---->',res.data)
|
||
|
|
if(res.data.code === 1) {
|
||
|
|
userForm.value = res.data.data
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const saveEdit = async ()=>{ //保存用户信息
|
||
|
|
const res = await myAxios.post('/user/update',{
|
||
|
|
id: userForm.value.id,
|
||
|
|
userPassword: userForm.value.userPassword,
|
||
|
|
userName: userForm.value.userName,
|
||
|
|
userAvatar: userForm.value.userAvatar,
|
||
|
|
phone: userForm.value.phone,
|
||
|
|
userRole: userForm.value.userRole
|
||
|
|
})
|
||
|
|
console.log('更新信息--->',res.data)
|
||
|
|
if (res.data.code === 1) {
|
||
|
|
disabled.value = true
|
||
|
|
SuccessInfo('更新成功')
|
||
|
|
} else {
|
||
|
|
WarnInfo('更新失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.detail-container {
|
||
|
|
width: 80%;
|
||
|
|
padding: 20px 20px 20px 20px;
|
||
|
|
margin: 20px auto;
|
||
|
|
}
|
||
|
|
</style>
|