androidCnToWechatGrt/pagesHome/employee/detail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='员工管理'></cus-header>
		<div class="info">
			<div class="item">
				<div class="left">姓名</div>
				<div class="right">
					<input type="text" v-model="userInfo.name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="item">
				<div class="left">工号</div>
				<div class="right">
					<input type="text" v-model="userInfo.workno" placeholder="请输入工号">
				</div>
			</div>
			<div class="item">
				<div class="left">身份证</div>
				<div class="right">
					<input type="text" v-model="userInfo.idcard" placeholder="请输入身份证">
				</div>
			</div>
			<div class="item">
				<div class="left">性别</div>
				<div class="right" @tap="sexShow = true">
					{{userInfo.sex==1?'男':(userInfo.sex==2?'女':'未知')}}
					<u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon>
				</div>
			</div>
			<div class="item">
				<div class="left">手机号</div>
				<div class="right">
					<input type="text" v-model="userInfo.phone" placeholder="请输入手机号">
				</div>
			</div>
			<div class="item">
				<div class="left">职位</div>
				<div class="right">
					<input type="text" v-model="userInfo.worklevel" placeholder="请输入职位">
				</div>
			</div>
			<div class="item">
				<div class="left">邮箱</div>
				<div class="right">
					<input type="text" v-model="userInfo.email" placeholder="请输入邮箱">
				</div>
			</div>
			<div class="item">
				<div class="left">家庭住址</div>
				<div class="right">
					<input type="text" v-model="userInfo.address" placeholder="请输入家庭住址">
				</div>
			</div>
			<div class="item">
				<div class="left">入职时间</div>
				<div class="right" @tap="dateShow = true">
					{{userInfo.workdate2}}
					<u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon>
				</div>
			</div>
		</div>
		<div class="btn" @tap="confirm">确定</div>
		<u-picker :show="sexShow" :columns="sexColumns" title="性别" keyName="name" @cancel="sexShow = false;" @confirm="sexConfirm"></u-picker>
		<u-datetime-picker :show="dateShow" v-model="userInfo.workdate" mode="date" @cancel="dateShow = false;" @confirm="dateConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				userInfo:{
					name:'梁惠美',
					workno:'0103',
					idcard:'341321 **** **** 9808',
					sex:2,
					phone:'18755113276',
					worklevel:'总经理',
					email:'9128377409@qq.com',
					address:'合肥市蜀山区红皖家园1号楼',
					workdate:'2022-09-02',
					workdate2:'2022-09-02'
				},
				sexShow:false,
				sexColumns:[[{id:1,name:'男'},{id:2,name:'女'}]],
				dateShow:false
			}
		},
		methods:{
			sexConfirm(e){
				this.userInfo.sex = e.value[0].id;
				this.sexShow = false;
			},
			dateConfirm(e){
				this.userInfo.workdate = new Date(e.value);
				this.userInfo.workdate2 = new Date(this.userInfo.workdate).Format('yyyy-MM-dd');
				this.dateShow = false;
			},
			confirm(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F4F8FB;
		box-sizing: border-box;
		
		.info{
			width: 100%;
			margin-top: 20rpx;
			.item{
				padding: 24rpx 25rpx;
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
					text-align: left;
				}
				.right{
					display: flex;
					align-items: center;
					input{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #4E5969;
						line-height: 42rpx;
						text-align: right;
						outline: none;
						border: none;
					}
				}
			}
		}
		
		.btn{
			width: calc(100% - 108rpx);
			height: 88rpx;
			background: #198CFF;
			border-radius: 16rpx;
			margin: 240rpx 54rpx 0;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			letter-spacing: 2rpx;
		}
	}
</style>