master
parent
34523dcde2
commit
c88e4bf02a
@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row class="top">
|
||||
<el-col :span="6" class="col">个人信息</el-col>
|
||||
<el-col :span="6" class="col-exit">注销账号</el-col>
|
||||
</el-row>
|
||||
<el-row class="body">
|
||||
<el-image class="user-img" src="/user.jpg"></el-image>
|
||||
<el-text class="phone">13456789000</el-text>
|
||||
|
||||
<el-form label-width="auto" style="max-width: 600px">
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="radio1">
|
||||
<el-radio value="male">男</el-radio>
|
||||
<el-radio value="female">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="生日">
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="date"
|
||||
placeholder="Pick a day"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地区">
|
||||
<el-input v-model="region"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="绑定手机">
|
||||
<el-input v-model="phone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
|
||||
<el-form-item label="登录名称">
|
||||
<el-input v-model="userInfo.username" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称" prop="nickname">
|
||||
<el-input v-model="userInfo.nickname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="updateUserInfo">提交修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useUserInfoStore } from "@/store/userInfo.js";
|
||||
import { userInfoUpdateService } from "@/api/user";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const value1 = ref('')
|
||||
const radio1 = ref('male') // 定义radio1并初始化为'male'
|
||||
const region = ref('')
|
||||
const phone = ref('')
|
||||
|
||||
const userInfoStore = useUserInfoStore();
|
||||
const userInfo = ref({
|
||||
...userInfoStore.userInfo
|
||||
})
|
||||
const rules = {
|
||||
nickname: [
|
||||
{ required: true, message: '请输入用户昵称', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^\S{2,10}$/,
|
||||
message: '昵称必须是2-10位的非空字符串',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
const updateUserInfo = async () => {
|
||||
try {
|
||||
await userInfoUpdateService(userInfo.value);
|
||||
ElMessage.success('修改成功')
|
||||
userInfoStore.setUserInfo(userInfo.value)
|
||||
} catch (error) {
|
||||
ElMessage.error('修改失败')
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.top {
|
||||
background-color: white;
|
||||
height: 50px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.col {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.col-exit {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.body {
|
||||
background-color: white;
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0px;
|
||||
}
|
||||
.user-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.phone {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue