查看个人信息

pages/personal/editPassword.vue

@@ -2,24 +2,24 @@
 	<view>
 		<view class="content">
 			<view class="flex item">
-				<view style="color: gray;">账号</view>
-				<view><input class="uni-input" disabled value="user.phone" /></view>
-			</view>
-			<view class="flex item">
 				<view>旧密码</view>
-				<view><input class="uni-input" :value="pwd.olePassword" placeholder="请输入旧密码" /></view>
+				<view><input class="uni-input" :password="show" maxlength="16" v-model="pwd.oldPassword" placeholder="请输入旧密码" /></view>
 			</view>
 			<view class="flex item">
 				<view>新密码</view>
-				<view><input class="uni-input" :value="pwd.olePassword" placeholder="请输入新密码" /></view>
+				<view><input class="uni-input" :password="show" maxlength="16" v-model="pwd.newPassword" placeholder="请输入新密码" /></view>
+				<view class="label show"><view class="icon" :class="{ active: !show }" @click="show = !show">&#xe7a6;</view></view>
 			</view>
 			<view class="flex item">
 				<view>确认密码</view>
-				<view><input class="uni-input" :value="pwd.rePassword" placeholder="请再次输入新密码" /></view>
+				<view><input class="uni-input" :password="show" maxlength="16" v-model="pwd.rePassword" placeholder="请再次输入新密码" /></view>
 			</view>
 			<view class="item">
 				<text style="color: gray;">密码必须是8-16位英文字母、数字、字符组合（不能是纯数字）</text>
 			</view>
+			<view class="item">
+				<button class="btn" @click="edit()">确认修改</button>
+			</view>
 		</view>
 	</view>
 </template>
@@ -29,13 +29,49 @@
 		data() {
 			return {
 				user: this.getUser(),
-				pwd: {}
+				pwd: [{
+					label: '旧密码',
+					oldPassword: '',
+					isShow: true,
+				},{
+					label: '新密码',
+					newPassword: '',
+					isShow: true,
+				},{
+					label: '确认密码',
+					rePassword: '',
+					isShow: true,
+				}
+				],
+				show: true
 			}
 		},
 		methods: {
 			edit(){
+				console.log(this.pwd)
+				let rule = [
+					{ name: 'newPassword', checkType: 'notnull', errorMsg: '请输入新密码' },
+					{ name: 'rePassword', checkType: 'same', checkRule: this.pwd.newPassword, errorMsg: '两次输入不一致' },
+				];
+				if (!this.verify.check(this.pwd, rule)) {
+					uni.showModal({ content: this.verify.error, showCancel: false });
+					return false;
+				}
 				this.http.request({
 					url: '/sp-admin/app/AppUser/modifyPassword',
+					data: this.pwd,
+					success: res => {
+						uni.showModal({ content: '修改成功，请重新登录', showCancel: false });
+						this.exitLogin()
+					}
+				});
+			},
+			exitLogin() {
+				let param = {
+					appUserId: this.getUser().id
+				}
+				this.http.request({
+					url: '/sp-admin/app/AppUser/logout',
 					data: param,
 					success: res => {
 						uni.removeStorageSync('token');
@@ -62,4 +98,12 @@
 		align-items: center;
 		border-top: 1px solid #DCDCDC;
 	}
+	.btn{
+		margin-top: 40px;
+		width: 200px;
+	}
+	.show{
+		position: relative;
+		left: 100px;
+	}
 </style>

pages/personal/my.vue

@@ -1,6 +1,15 @@
 <template>
 	<view>
-		
+		<view class="con">
+			<view class="flex item">
+				<view>用户名：</view>
+				<input v-model="person.name" />
+			</view>
+			<view class="flex item">
+				<view>手机号：</view>
+				<input v-model="person.phone" />
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,11 +17,35 @@
 	export default {
 		data() {
 			return {
-				
+				person: {}
 			}
 		},
+		onLoad() {
+			this.getSelfInfo()
+		},
 		methods: {
-			
+			// 查看个人信息
+			getSelfInfo() {
+				this.http.request({
+					url: '/sp-admin/app/AppUser/getSelfInfo',
+					success: res => {
+						this.person = res.data.data
+					}
+				});
+			},
+			// 修改个人信息
+			updateUser(){
+				this.http.request({
+					url: '/sp-admin/app/AppUser/update',
+					success: res => {
+						uni.showModal({
+							content: '修改成功',
+							showCancel: false
+						}),
+						this.getSelfInfo()
+					}
+				});
+			}
 		}
 	}
 </script>
@@ -21,4 +54,19 @@
 	page {
 		background-color: $pg;
 	}
+	
+	.con{
+		background-color: #fff;
+		margin: 20px;
+		padding: 10px;
+		border-radius: 10px;
+		height: 200px;
+		border: 1px #fff solid;
+	}
+	.item{
+		height: 50px;
+		display: flex;
+		align-items: center;
+		border-bottom: 1px #dcdcdc solid;
+	}
 </style>