修改个人信息页面开发

common/styles/global/components.scss

@@ -237,4 +237,38 @@ margin-right: 18rpx;display: inline-block;vertical-align: middle;}
 		.ksms-intro{color: #666;}
 	}
 	
-}
+}
+
+/***** 上传头像  *****/
+.phone-user-file-picker{
+	
+}
+
+/***** form  *****/
+// label-input
+.form-label-input{
+	width: 100%;display: flex;justify-content: space-between;
+	background-color: #fff;font-size: 30rpx;color: #333;
+	padding: 20rpx;box-sizing: border-box;margin-bottom: 2rpx;
+	.form-label-require{color: #ff0101;margin-right: 6rpx;}
+	.phone-form-label{}
+	input{text-align: right;}
+}
+
+// label-radio
+.form-label-radio{
+	width: 100%;display: flex;justify-content: space-between;
+	background-color: #fff;font-size: 30rpx;color: #333;
+	padding: 10rpx 20rpx;box-sizing: border-box;margin-bottom: 2rpx;
+	.form-label-require{color: #ff0101;margin-right: 6rpx;}
+	.phone-form-label{min-width: 180rpx;line-height:52rpx;}
+	.form-radio-group{display: flex;flex: 1;}
+	.form-radio-double-group{justify-content: space-between;}
+	.form-radio-item{
+		width: 28%;height:60rpx;line-height:52rpx;border-radius: 6rpx;box-sizing: border-box;
+		background-color:#f5f5f5;text-align: center;margin:0 2%;border:1rpx solid #f5f5f5;
+	}
+	.genderActive{
+		background-color:#e5f8f4;border:1rpx solid #6bccb0;
+	}
+}

common/styles/global/pages.scss

@@ -334,10 +334,11 @@
 		width: 100%;height:372rpx;display: flex;align-items: center;box-sizing: border-box;padding: 52rpx 52rpx 0 52rpx;
 		background-image: url("@/static/images/my/client-my-bj.png");@include ezy-no-repeat-cover();
 	}
-	.head-img-box{
-		max-height: 200rpx;max-width: 160rpx;
+	.head-img-box,.head-icon-box{
+		max-width: 160rpx;max-height: 200rpx;
 		border: 1rpx solid #fff;margin-right: 32rpx;
 	}
+	.head-icon-box{width: 413rpx;height: 582rpx;background-image: url("@/static/images/my/client-default-icon.png");@include ezy-no-repeat-cover();}
 	.head-content-box{
 		font-size: 46rpx;color: #fff;
 		.idcard-row-box{display: flex;align-items: center;margin-top: 24rpx;}
@@ -376,4 +377,19 @@
 		.score-icon{background-image: url("@/static/images/my/my-score-icon.png");}
 		.login-out-icon{background-image: url("@/static/images/my/login-out-icon.png");}
 	}
+}
+
+/*** 个人信息页面 ***/
+.my-info-page{
+	background-color: #f8f9fd;height: 100vh;
+	.user-img-box{
+		display: flex;background-color: #fff;margin-bottom: 24rpx;
+		padding: 16rpx;box-sizing: border-box;
+		.uni-file-picker__container{justify-content: center;border: 0;}
+		.file-picker__box-content{border: 0;border-width: 0 !important;;}
+		.user-file-picker{
+			.file-picker-image{max-height: 200rpx;max-width: 160rpx;}
+		}
+	}
+	.info-btn{width: 360rpx;margin: 42rpx auto 24rpx;}
 }

pages.json

@@ -144,8 +144,7 @@
 		},
 		{
 			"path" : "pages/client/my/myInfo",
-			"style" : 
-			{
+			"style": {
 				"navigationStyle": "custom"
 			}
 		}

pages/client/my/index.vue

@@ -1,10 +1,11 @@
 <template>
 	<view class="client-my-page">
 		<view class="my-head-box">
-			<img class="head-img-box" :src="myInfoData.userImg">
+			<img class="head-img-box" :src="myInfoData.userImg" v-if="myInfoData.userImg">
+			<icon class="head-icon-box" v-else></icon>
 			<view class="head-content-box">
 				<text>{{myInfoData.userName}}</text>
-				<view class="idcard-row-box">
+				<view class="idcard-row-box" v-if="myInfoData.idcard">
 					<icon class="idcard-icon"></icon>
 					<text class="idcard-text" >{{myInfoData.idcard}}</text>
 				</view>
@@ -47,7 +48,7 @@
 			</view>
 		</view>
 		<!-- 底部区域 -->
-		<customTabbarClient></customTabbarClient>
+		<customTabbarClient :currentTab="1"></customTabbarClient>
 		<common-dialog ref="commonDialogRef" :title="exitTitle" :content="exitContent"@confirm-btn="exitBtn"></common-dialog>
 	</view>
 </template>

pages/client/my/myInfo.vue

@@ -1,49 +1,57 @@
 <template>
-	<view class="my-info">
+	<view class="my-info-page">
 		<!-- 导航区域 -->
-		<view class="icon-title-navBar-box">
+		<view class="icon-title-bjcolor-navBar-box">
 			<view @click="handleBack" class="nav-bar-icon"></view>
 			<text class="nav-bar-title">个人信息</text>
 		</view>
 		<!-- 头像 -->
-		<view>
-			<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles" :auto-upload="false"
-				@select="handleSelect" file-mediatype="image">选择</uni-file-picker>
-			<view>图片地址：{{data.icon}}</view>
+		<view class="user-img-box">
+			<uni-file-picker limit="1" :del-icon="false" disable-preview :auto-upload="false"
+				@select="handleSelect" file-mediatype="image" class="phone-file-picker user-file-picker">
+				<image :src="data.icon" class="file-picker-image"></image>
+			</uni-file-picker>
+			<!-- <view>图片地址：{{data.icon}}</view> -->
 		</view>
 		<!-- 姓名 -->
-		<view></view>
+		<view class="form-label-input">
+			<view class="phone-form-label"><text class="form-label-require">*</text>姓名</view>
+			<input v-model="data.realName"  placeholder="请输入姓名" />
+		</view>
+		<!-- 手机号 -->
+		<view class="form-label-input">
+			<view class="phone-form-label"><text class="form-label-require">*</text>手机号</view>
+			<input v-model="data.userName"  placeholder="请输入手机号" />
+		</view>
 		<!-- 证件号 -->
-		<view></view>
+		<view class="form-label-input">
+			<view class="phone-form-label"><text class="form-label-require">*</text>证件号</view>
+			<input v-model="data.idcard"  placeholder="请输入证件号" />
+		</view>
 		<!-- 电话 -->
 		<view></view>
 		<!-- 性别 -->
-		<view></view>
+		<view class="form-label-radio">
+			<view class="phone-form-label"><text class="form-label-require">*</text>性别</view>
+			<view class="form-radio-group">
+				<view class="form-radio-item" :class="{genderActive: data.gender===1}" @click="genderSelect(1)">男</view>
+				<view class="form-radio-item" :class="{genderActive: data.gender===2}" @click="genderSelect(2)">女</view>
+			</view>
+		</view>
 
-		<button @click="handleUpdate">更新</button>
+		<button type="default" class="phone-green-btn info-btn" @click="handleUpdate">修改资料</button>
 	</view>
 </template>
 
 <script setup>
 	import * as myApi from "@/api/my.js";
-	import {
-		getAliyunPolicy
-	} from "@/api/jiazheng.js"
-
-	import {
-		ref,
-		reactive
-	} from "vue"
-	import {
-		onLoad
-	} from "@dcloudio/uni-app"
+	import {getAliyunPolicy} from "@/api/jiazheng.js"
+	import {ref,reactive} from "vue"
+	import {onLoad} from "@dcloudio/uni-app"
 
 	const imageStyles = ref({
-		width: 64,
-		height: 64,
-		border: {
-			radius: '50%'
-		}
+		width: 120,
+		height: 120,
 	});
 
 	const data = reactive({
@@ -58,7 +66,6 @@
 
 	onLoad((options) => {
 		data.from = options.from || 'shouye';
-
 		initPage();
 	})
 
@@ -66,6 +73,9 @@
 		doUploadImage(e.tempFilePaths[0])
 	}
 
+	function genderSelect(data){
+		data.gender = data;
+	}
 
 	function doUploadImage(filePath) {
 		const loading = uni.showLoading({
@@ -168,14 +178,13 @@
 
 	function initPage() {
 		myApi.getMineUser().then(res => {
-			const {
-				gender,
-				icon,
-				idcard,
-				realName,
-				userName,
-				userId
-			} = res.data;
+			const {gender,icon,idcard,realName,userName,userId} = res.data;
+			data.gender = res.data.gender;
+			data.icon = res.data.icon;
+			data.idcard = res.data.idcard;
+			data.realName = res.data.realName; 
+			data.userName = res.data.userName;
+			data.userId = res.data.userId;
 		})
 	}
 </script>