diff --git a/pages/sys/msg/index.vue b/pages/sys/msg/index.vue index 00f3694..9a69f58 100644 --- a/pages/sys/msg/index.vue +++ b/pages/sys/msg/index.vue @@ -28,10 +28,24 @@ 拜访事由 - + + + {{ formData.visitingReason || '请选择拜访事由' }} + + + + + {{ item }} + + + + + 被访人信息 @@ -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; + } \ No newline at end of file diff --git a/static/ic_down_arrow_g.png b/static/ic_down_arrow_g.png new file mode 100644 index 0000000..d26dc9a Binary files /dev/null and b/static/ic_down_arrow_g.png differ