页面调整

pages/sys/msg/index.vue

@@ -11,6 +11,13 @@
 					<input type="text" placeholder="请输入您的姓名" v-model="formData.visitorName" />
 				</view>
 			</view>
+			
+			<view class="form-item">
+				<text class="label required">证件号</text>
+				<view class="input-wrapper">
+					<input type="text" placeholder="请输入您的证件号" v-model="formData.visitorName" />
+				</view>
+			</view>
 
 			<view class="form-item">
 				<text class="label">所属公司</text>
@@ -31,7 +38,7 @@
 				<!-- <view class="input-wrapper">
 					<input type="text" placeholder="请简要描述拜访目的" v-model="formData.visitingReason" />
 				</view> -->
-				<view class="select-wrapper" @click.stop="showTypeDialog = true">
+				<view class="select-wrapper" :class="{active: showTypeDialog}" @click.stop="showTypeDialog = true">
 					<text>{{ formData.visitingReason || '请选择拜访事由' }}</text>
 					<image class="filter-img" src="/static/ic_down_arrow_g.png" />
 					<view v-if="showTypeDialog" class="dropdown">
@@ -164,6 +171,7 @@
 				formData: {
 					visitorName: '1',
 					visitorUnit: '1',
+					idCard:'',
 					visitorPhone: '15555555555',
 					visitingReason: '',
 					interviewedPerson: '1',
@@ -217,7 +225,12 @@
 			plus.screen.lockOrientation('landscape-primary');
 			// #endif
 		},
-
+		mounted() {
+			document.addEventListener('click', this.handleClickOutside);
+		},
+		beforeDestroy() {
+			document.removeEventListener('click', this.handleClickOutside);
+		},
 		methods: {
 			// 添加选择拜访事由方法
 			selectVisitingReason(reason) {
@@ -588,43 +601,16 @@
 		color: #333;
 	}
 	
-	u-icon {
+	.filter-img {
+		width: 18rpx;
+		height: 10rpx;
+		margin-left: 8rpx;
 		transition: transform 0.3s;
 	}
 	
-	.select-wrapper.active u-icon {
+	.select-wrapper.active .filter-img {
 		transform: rotate(180deg);
 	}
-	
-	.dropdown {
-		position: absolute;
-		top: calc(100% + 5px);
-		left: 0;
-		right: 0;
-		background: #fff;
-		border-radius: 6px;
-		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
-		z-index: 999;
-		max-height: 200px;
-		overflow-y: auto;
-	}
-	
-	.dropdown-item {
-		padding: 12px;
-		font-size: 14px;
-		color: #333;
-		border-bottom: 1rpx solid #eee;
-		text-align: left;
-		cursor: pointer;
-	}
-	
-	.dropdown-item:last-child {
-		border-bottom: none;
-	}
-	
-	.dropdown-item:hover {
-		background-color: #f5f7fa;
-	}
 
 	.input-wrapper input {
 		flex: 1;
@@ -633,7 +619,7 @@
 		color: #333;
 	}
 	
-	.filter-img {
+	.input-wrapper .filter-img {
 		position: absolute;
 		right: 12px;
 		top: 50%;
@@ -730,6 +716,27 @@
 		justify-content: center;
 	}
 	
+	.filter-btn {
+		padding: 15rpx 22rpx;
+		background: #f7f7f7;
+		border-radius: 25rpx;
+		height: 58rpx;
+		color: #9a9a9a;
+		font-size: 28rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-right: 24rpx;
+		position: relative;
+		cursor: pointer;
+	}
+	
+	.filter-img {
+		width: 18rpx;
+		height: 10rpx;
+		margin-left: 8rpx;
+	}
+	
 	.dropdown {
 		position: absolute;
 		top: calc(100% + 5px);