cool-admin-vue/cool/modules/base/views/info.vue

<template>
	<div class="page-my-info">
		<div class="title">基本信息</div>

		<el-form size="small" label-width="100px" :model="form" :disabled="saving">
			<el-form-item label="头像">
				<cl-upload v-model="form.headImg"></cl-upload>
			</el-form-item>

			<el-form-item label="昵称">
				<el-input v-model="form.nickName" placeholder="请填写昵称"></el-input>
			</el-form-item>

			<el-form-item label="密码">
				<el-input type="password" v-model="form.password"></el-input>
			</el-form-item>

			<el-form-item label="">
				<el-button type="primary" @click="save" :disabled="saving">保存修改</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
	data() {
		return {
			form: {},
			saving: false
		};
	},

	computed: {
		...mapGetters(["userInfo"])
	},

	mounted() {
		this.form = this.userInfo;
	},

	methods: {
		save() {
			this.saving = true;

			const { headImg, nickName, password } = this.form;

			this.$service.common
				.userUpdate({
					headImg,
					nickName,
					password
				})
				.then(() => {
					this.form.password = "";
					this.$message.success("修改成功");
					this.$store.dispatch("userInfo");
				})
				.catch((err) => {
					this.$message.error(err);
				})
				.done(() => {
					this.saving = false;
				});
		}
	}
};
</script>

<style lang="scss">
.page-my-info {
	background-color: #fff;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;

	.el-form {
		width: 400px;
		max-width: 100%;
	}

	.title {
		color: #000;
		margin-bottom: 30px;
		font-size: 15px;
	}
}
</style>