xinelu-applet-ui/pagesB/modify/modify.vue

<template>
	<view class="app">
		<view class="body">
			<view class="top">
				<image :src="img" mode="" @tap='uploadImag' v-if="img"></image>
				<image src="../../static/headsculpture.png" mode="" v-else @tap='uploadImag'></image>
				
				<view class="editimg" >
					点击编辑头像
				</view>
			</view>
			<view class="item">
				<span>姓名:</span>
				<u-input placeholder="请输入姓名" type="text"/>
			</view>
			<view class="item">
				<span>性别:</span>
				<u-radio-group v-model="appPersonallist.sex" size='44'>
					<u-radio @change='sexchange' v-for="(item, index) in sexlist" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<!-- <u-input placeholder="请输入性别" type="text" /> -->
			</view>
			<view class="item" @tap='timeshow=true'>
				<span>出生日期:</span>
				<view class="address" style="" v-if="appPersonallist.birthDate">
					{{appPersonallist.birthDate}}
				</view>
			<!-- 	<u-input placeholder="请输入出生日期" type="text" /> -->
			
			</view>
			<view class="item">
				<span>手机号:</span>
				<u-input placeholder="请输入手机号" type="text" style="margin-left: 20rpx;"/>
			</view>
			<view class="item">
				<span>所属区域:</span>
				<view class="address">山东省济南市</view>
				<!-- <u-input placeholder="请输入所属区域" type="text" /> -->
			</view>
			<view class="item">
				<span>详细地址:</span>
				<u-input placeholder="请输入详细地址" type="text" style="margin-left: 40rpx;"/>
			</view>
			<view class="submit">
				保存
			</view>
			<u-picker mode="time" v-model="timeshow" :params="params" @confirm='timechange' @canel='timeshow=false'>
			</u-picker>
  
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:'',
				timeshow: false, //出生日期
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				appPersonallist:{
					birthDate: '',
					sex:'',
				},
				// 性别
				sexlist: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],

			}
		},
		methods: {
			//上传头像
			uploadImag() {
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success(res) {
						// that.appPersonallist.headPictureUrl = res.tempFilePaths[0]
						// that.img = res.tempFilePaths[0]
						// that.image = res.tempFilePaths[0]
					}
				})
			},
			//性别
			sexchange(e) {
				if (e == '男') {
					this.appPersonallist.sex = 'MALE';
				} else if (e == '女') {
					this.appPersonallist.sex = 'FEMALE';
				}
			},
			//选择出生日期
			timechange(e) {
				this.appPersonallist.birthDate = e.year + '-' + e.month + '-' + e.day
			},

		}
	}
</script>

<style lang="scss">
	.app {
		background: #F7F5F5;
		height: 100vh;
		padding-top: 30rpx;

		.body {
			position: relative;
			margin: 0 auto;
			width: 96%;
			height: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;

			.top {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 3%;

				image {
					width: 144rpx;
					height: 144rpx;

				}

				.editimg {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-top: 10rpx;

				}

			}

			.item {
				width: 94%;
				margin: 0 auto;
				height: 120rpx;
				line-height: 120rpx;
				border-bottom: 1rpx solid #D8D4D4;
				position: relative;
				font-size: 30rpx;
				top: 20%;
				span{
					position: absolute;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-left: 20rpx;
				}
					.address {
						position: absolute;
						left: 25%;
						top: 50%;
						width: 75%;
						transform: translateY(-50%);
						display: inline-block;
						height: 120rpx;
						line-height: 120rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					::v-deep .u-radio-group{
						position: absolute;
						top:50%;
						transform: translateY(-50%);
						left:170rpx;
					}
					::v-deep .u-radio{
						width: 150rpx !important;
					}

				::v-deep .u-input__input {
					height: 120rpx;
					line-height: 120rpx;
					font-size: 30rpx;
				}

				::v-deep .uni-input-wrapper {
					position: absolute;
					display: inline-block !important;
					height: 66rpx;
					line-height: 66rpx;
					width: 50%;
					// top: -120rpx;
					left: 120rpx;
					height: 120rpx;
					line-height: 120rpx;
				}

				::v-deep u-input {
					height: 120rpx;
					line-height: 120rpx;
				
					position: absolute;
					left: 129rpx;
			
					// top: 50%;
				}
			}
			.submit{
				position: absolute;
				width: 496rpx;
				height: 61rpx;
				background: #26A888;
				border-radius: 5rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: 10%;
				color: #FFFFFF;
				line-height: 61rpx;
				text-align: center;
				
			}


		}

	}
</style>