页面调整

pages/sys/msg/index.vue

@@ -28,10 +28,24 @@
 
 			<view class="form-item">
 				<text class="label required">拜访事由</text>
-				<view class="input-wrapper">
+				<!-- <view class="input-wrapper">
 					<input type="text" placeholder="请简要描述拜访目的" v-model="formData.visitingReason" />
+				</view> -->
+				<view class="select-wrapper" @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">
+						<view class="dropdown-list">
+							<view v-for="(item, index) in typeList" :key="index" class="dropdown-item"
+								@click.stop="selectVisitingReason(item)">
+								{{ item }}
+							</view>
+						</view>
+					</view>
 				</view>
 			</view>
+			
+		
 
 			<!-- 被访人信息 -->
 			<view class="section-title">被访人信息</view>
@@ -151,7 +165,7 @@
 					visitorName: '1',
 					visitorUnit: '1',
 					visitorPhone: '15555555555',
-					visitingReason: '1',
+					visitingReason: '',
 					interviewedPerson: '1',
 					interviewedUnit: '1',
 					interviewedPhone: '15555555555',
@@ -171,7 +185,9 @@
 					1: '已确认',
 					2: '已取消',
 					3: '已完成'
-				}
+				},
+				typeList:['业务洽谈','会议参与','面试应聘','技术支持','办事咨询','调研考察'],
+				showTypeDialog:false
 			}
 		},
 		onLoad(options) {
@@ -201,7 +217,19 @@
 			plus.screen.lockOrientation('landscape-primary');
 			// #endif
 		},
+
 		methods: {
+			// 添加选择拜访事由方法
+			selectVisitingReason(reason) {
+				this.formData.visitingReason = reason;
+				this.showTypeDialog = false;
+			},
+			
+			// 点击外部关闭下拉菜单
+			handleClickOutside() {
+				this.showTypeDialog = false;
+			},
+			
 			// 处理日期时间选择
 			onBeginDateChange(e) {
 				this.formData.visitingBeginDate = e.detail.value;
@@ -539,6 +567,63 @@
 		padding: 0 12px;
 		display: flex;
 		align-items: center;
+		position: relative;
+	}
+
+	.select-wrapper {
+		flex: 1;
+		height: 40px;
+		border: 1px solid #e5e6eb;
+		border-radius: 6px;
+		padding: 0 12px;
+		display: flex;
+		align-items: center;
+		position: relative;
+		cursor: pointer;
+	}
+	
+	.select-wrapper text {
+		flex: 1;
+		font-size: 14px;
+		color: #333;
+	}
+	
+	u-icon {
+		transition: transform 0.3s;
+	}
+	
+	.select-wrapper.active u-icon {
+		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 {
@@ -547,6 +632,15 @@
 		font-size: 14px;
 		color: #333;
 	}
+	
+	.filter-img {
+		position: absolute;
+		right: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 18px; /* Adjust based on your image size */
+		height: 10px; /* Adjust based on your image size */
+	}
 
 	.picker-wrapper {
 		flex: 1;
@@ -635,4 +729,34 @@
 		align-items: center;
 		justify-content: center;
 	}
+	
+	.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;
+	}
 </style>