对接后端个人信息部分接口

src/views/userCenter/user/account.vue

@@ -1,20 +1,29 @@
 <template>
 	<el-card shadow="never" header="账户信息">
-		<el-form ref="form" :model="form" label-width="90px" style="margin-top:10px;width: 518px;">
-			<el-form-item label="账号">
+		<el-form ref="form" :model="form" :rules="rules" label-width="90px" style="margin-top:10px;width: 480px;">
+			<el-form-item label="" prop="avatar">
+				<ossImgUpload @parentParams="parentParams" :url="this.$store.state.global.login_avatar" />
+			</el-form-item>
+			<el-form-item label="账号" prop="user">
 				<el-input v-model="form.user" disabled></el-input>
 				<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
 			</el-form-item>
-			<el-form-item label="手机号码">
-				<el-input v-model="form.mobile"></el-input>
-			</el-form-item>
-			<el-form-item label="真实姓名">
+			<el-form-item label="姓名" prop="name">
 				<el-input v-model="form.name"></el-input>
 			</el-form-item>
-			<el-form-item label="邮箱地址">
+			<el-form-item label="手机号码" prop="mobile">
+				<el-input v-model="form.mobile"></el-input>
+			</el-form-item>
+			<el-form-item label="验证码" prop="verify_code">
+				<div class="login-msg-yzm">
+					<el-input v-model="form.verify_code" clearable placeholder="请输入验证码"></el-input>
+					<el-button style="margin-left:10px;" @click="getYzm" :disabled="disabled">获取验证码<span v-if="disabled"> ({{ time }})</span></el-button>
+				</div>
+			</el-form-item>
+			<el-form-item label="邮箱地址" prop="email">
 				<el-input v-model="form.email"></el-input>
 			</el-form-item>
-			<el-form-item label="个性签名">
+			<el-form-item label="个性签名" prop="about">
 				<el-input v-model="form.about" type="textarea"></el-input>
 			</el-form-item>
 			<el-form-item>
@@ -25,20 +34,111 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				form: {
-					user: "administrator@scuiadmin.com",
-					name: "Sakuya",
-					mobile:'18828382888',
-					email:'',
-					about: "正所谓富贵险中求"
-				}
+const {verifyPhone} = require("@/utils/verificate");
+export default {
+	data() {
+		return {
+			disabled:false,
+			time:0,
+			userRole:[],
+
+			form: {
+				id: "",
+				avatar:this.$store.state.global.login_avatar,
+				name: this.$store.state.global.login_name,
+				login_name: '',
+				user: "",
+				mobile: "",
+				email: "",
+				about: "正所谓富贵险中求",
+			},
+			rules: {
+				name: [
+					{required: true, message: '请输入姓名'}
+				],
+				mobile: [
+					{required: true, message: '请输入手机号'},
+					{validator: verifyPhone, trigger: 'blur'}
+				],
+				verify_code:[
+					{required: true, message: '请输入验证码'}
+				]
 			}
 		}
+	},
+	mounted() {
+		this.getInfo();
+	},
+	methods:{
+		// 图片上传成功回调
+		async parentParams(files) {
+			let params = {
+				avatar:files
+			}
+			const res = await this.$API.user.uploadAvatar.post(params);
+			if (res.code == 200) {
+				this.$store.commit("SET_LOGIN_AVATAR", files);
+			}
+		},
+		async getInfo() {
+			const res = await this.$API.user.getInformation.post();
+			if(res.code == 200){
+				const userInfo = JSON.parse(JSON.stringify(this.$TOOL.data.get('USER_INFO')));
+				this.form.user = userInfo.login_name;
+				this.userRole = userInfo.user_roles && userInfo.user_roles.role_names.length>0?userInfo.user_roles.role_names:[];
+
+				this.$store.commit("SET_LOGIN_AVATAR", res.data.avatar);
+				this.$store.commit("SET_LOGIN_NAME", res.data.name);
+
+				Object.assign(this.form,res.data);
+				Object.assign(userInfo,res.data);
+
+				this.$TOOL.data.set('USER_INFO',userInfo);
+			}
+		},
+		async getYzm() {
+			const validate = await this.$refs.form.validateField("mobile").catch(() => {});
+			if (!validate) {
+				return false
+			}
+			const res = await this.$API.system.user.verifyCode.post({mobile: this.form.mobile});
+			if (res.code === 200) {
+				this.$message.success('短信已发送至手机号码');
+				this.disabled = true
+				this.time = 60
+				const t = setInterval(() => {
+					this.time -= 1
+					if (this.time < 1) {
+						clearInterval(t)
+						this.disabled = false
+						this.time = 0
+					}
+				}, 1000);
+			}
+		},
+		save() {
+			this.$refs.form.validate(async (valid) => {
+				if (valid) {
+					const res = await this.$API.system.user.updateProfile.post(this.form)
+					if (res.code === 200) {
+						// this.$TOOL.data.set("USER_INFO", res.data)
+						this.$message.success("操作成功");
+						await this.getInfo();
+					}
+				} else {
+					return false
+				}
+			})
+		},
 	}
+}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.login-msg-yzm{
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
 </style>