From 3d48021257fa6df33681224dbf8ad9fbf9af1449 Mon Sep 17 00:00:00 2001
From: zjf <1799650030@qq.com>
Date: Tue, 15 Apr 2025 17:11:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BF=E5=AE=A2=E7=94=B3=E8=AF=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/integrated/visitor/index.vue | 1047 ++++++++++++++++++++++++
 1 file changed, 1047 insertions(+)
 create mode 100644 src/pages/integrated/visitor/index.vue

diff --git a/src/pages/integrated/visitor/index.vue b/src/pages/integrated/visitor/index.vue
new file mode 100644
index 0000000..6cd3cf8
--- /dev/null
+++ b/src/pages/integrated/visitor/index.vue
@@ -0,0 +1,1047 @@
+<template>
+  <view class="visitor-page">
+    <!-- 顶部导航 -->
+    <view class="header">
+      <view class="back-btn" @tap="goBack">
+        <text class="back-icon">〈</text>
+      </view>
+      <view class="title">普通访客入园预约</view>
+      <view class="right-placeholder"></view>
+    </view>
+
+    <!-- 使用scroll-view包裹内容区域 -->
+    <scroll-view 
+      scroll-y 
+      class="page-content"
+    >
+      <!-- 提示信息 -->
+      <view class="tips-box">
+        <text class="tips-icon">ℹ</text>
+        <text class="tips-text">入园预约请填写以下信息：</text>
+      </view>
+
+      <!-- 表单内容 -->
+      <view class="form-content">
+        <view class="form-item">
+          <text class="label">您的姓名</text>
+          <text class="required">*必填</text>
+          <input
+            type="text"
+            v-model="formData.name"
+            placeholder="请输入姓名"
+            placeholder-class="placeholder"
+            class="input"
+          />
+        </view>
+
+        <view class="form-item">
+          <text class="label">联系方式</text>
+          <text class="required">*必填</text>
+          <input
+            type="text"
+            v-model="formData.mobile"
+            placeholder="请输入手机号"
+            placeholder-class="placeholder"
+            class="input"
+          />
+        </view>
+
+        <view class="form-item">
+          <text class="label">公司名称</text>
+          <input
+            type="text"
+            v-model="formData.companyName"
+            placeholder="请输入公司名称"
+            placeholder-class="placeholder"
+            class="input"
+          />
+        </view>
+
+        <view class="form-item switch-item">
+          <text class="label">是否有随行人员</text>
+          <switch
+            :checked="formData.isOtherPeople === '1'"
+            @change="onSwitchOtherPeople"
+            style="transform:scale(0.9)"
+          />
+        </view>
+
+        <!-- 随行人员信息 -->
+        <block v-if="formData.isOtherPeople === '1'">
+          <view v-for="(person, index) in otherPeople" :key="index" class="companion-item">
+            <view class="companion-inputs">
+              <input
+                type="text"
+                v-model="person.name"
+                placeholder="姓名"
+                class="companion-input"
+                placeholder-class="placeholder"
+              />
+              <input
+                type="text"
+                v-model="person.mobile"
+                placeholder="手机号"
+                class="companion-input"
+                placeholder-class="placeholder"
+              />
+            </view>
+            <text v-if="index > 0" class="delete-text" @tap="removeOtherPeople(index)">删除</text>
+          </view>
+          <view v-if="otherPeople.length < 5" class="add-btn" @tap="addOtherPeople">
+            <text class="add-icon">+</text>
+            <text class="add-text">添加随行人员</text>
+          </view>
+        </block>
+
+        <view class="form-item switch-item">
+          <text class="label">是否驾驶车辆</text>
+          <switch
+            :checked="formData.isDrive === '1'"
+            @change="onSwitchDrive"
+            style="transform:scale(0.9)"
+          />
+        </view>
+
+        <!-- 车牌信息 -->
+        <block v-if="formData.isDrive === '1'">
+          <view v-for="(car, index) in carList" :key="index" class="car-item">
+            <input
+              type="text"
+              v-model="car.carNumber"
+              placeholder="请输入车牌号"
+              class="car-input"
+              placeholder-class="placeholder"
+            />
+            <text v-if="index > 0" class="delete-text" @tap="removeCarNumber(index)">删除</text>
+          </view>
+          <view v-if="carList.length < 2" class="add-btn" @tap="addCarNumber">
+            <text class="add-icon">+</text>
+            <text class="add-text">添加车牌号</text>
+          </view>
+        </block>
+
+        <view class="form-item select-item" @tap="showDeptPicker">
+          <text class="label">到访单位</text>
+          <view class="select-right">
+            <text class="select-value">{{ selectedDeptName || '请选择' }}</text>
+            <text class="select-arrow">></text>
+          </view>
+        </view>
+
+        <view class="form-item select-item" @tap="showUserPicker">
+          <text class="label">接待人</text>
+          <text class="required">*必填</text>
+          <view class="select-right">
+            <text class="select-value">{{ selectedUserName || '请选择' }}</text>
+            <text class="select-arrow">></text>
+          </view>
+        </view>
+
+        <view class="form-item select-item" @tap="showTimePicker">
+          <text class="label">到访时间</text>
+          <text class="required">*必填</text>
+          <view class="select-right">
+            <text class="select-value">{{ selectedTime || '请选择' }}</text>
+            <text class="select-arrow">></text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部占位，确保内容不被按钮遮挡 -->
+      <view class="bottom-space"></view>
+    </scroll-view>
+
+    <!-- 提交按钮 -->
+    <view class="submit-btn" @tap="handleSubmit">确定</view>
+
+    <!-- 部门选择弹窗 -->
+    <view class="popup" v-if="showDeptPopup">
+      <view class="popup-mask" @tap="closeDeptPicker"></view>
+      <view class="popup-content">
+        <view class="popup-header">
+          <text class="popup-title">选择到访单位</text>
+          <text class="popup-close" @tap="closeDeptPicker">×</text>
+        </view>
+        <scroll-view scroll-y class="dept-list">
+          <view
+            v-for="(dept, index) in flatDeptList"
+            :key="dept.id"
+            class="dept-item"
+            :class="{
+              'active': selectedDeptId === dept.id,
+              'level-1': dept.level === 1,
+              'level-2': dept.level === 2,
+              'level-3': dept.level === 3
+            }"
+            @tap="selectDept(dept)"
+          >
+            <text class="dept-name">{{ dept.name }}</text>
+          </view>
+        </scroll-view>
+        <view class="popup-footer">
+          <view class="confirm-btn" @tap="confirmDeptSelect">确定</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 时间选择弹窗 -->
+    <view class="popup" v-if="showTimePopup">
+      <view class="popup-mask" @tap="closeTimePicker"></view>
+      <view class="popup-content">
+        <view class="popup-header">
+          <text class="popup-title">到访时间</text>
+          <text class="popup-close" @tap="closeTimePicker">×</text>
+        </view>
+        <view class="time-picker">
+          <view class="date-list">
+            <view
+              v-for="(date, dateIndex) in dateList"
+              :key="dateIndex"
+              class="date-item"
+              :class="{ active: selectedDateIndex === dateIndex }"
+              @tap="selectDate(dateIndex)"
+            >
+              <text class="date-week">{{ date.weekDay }}</text>
+              <text class="date-day">{{ date.date }}</text>
+            </view>
+          </view>
+          <view class="time-list">
+            <view
+              v-for="(time, timeIndex) in timeList"
+              :key="timeIndex"
+              class="time-item"
+              :class="{ active: selectedTimeIndex === timeIndex }"
+              @tap="selectTime(timeIndex)"
+            >
+              {{ time }}
+            </view>
+          </view>
+        </view>
+        <view class="popup-footer">
+          <view class="confirm-btn" @tap="confirmTimeSelect">确定</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 用户选择弹窗 -->
+    <view class="popup" v-if="showUserPopup">
+      <view class="popup-mask" @tap="closeUserPicker"></view>
+      <view class="popup-content">
+        <view class="popup-header">
+          <text class="popup-title">选择接待人</text>
+          <text class="popup-close" @tap="closeUserPicker">×</text>
+        </view>
+        
+        <view class="search-box">
+          <input 
+            type="text" 
+            v-model="searchKeyword"
+            placeholder="搜索接待人姓名" 
+            placeholder-class="search-placeholder"
+            class="search-input"
+          />
+        </view>
+
+        <scroll-view 
+          scroll-y 
+          class="user-list"
+          :style="{ height: '50vh' }"
+        >
+          <view 
+            v-for="user in filteredUserList" 
+            :key="user.userId"
+            class="user-item"
+            :class="{ active: selectedUserId === user.userId }"
+            @tap="selectUser(user)"
+          >
+            <text class="user-name">{{ user.name }}</text>
+          </view>
+          <view v-if="filteredUserList.length === 0" class="empty-tip">
+            {{ searchKeyword ? '未找到相关接待人' : '暂无接待人数据' }}
+          </view>
+        </scroll-view>
+
+        <view class="popup-footer">
+          <view class="confirm-btn" @tap="confirmUserSelect">确定</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import visitorApi from '@/sheep/api/integrated/visitors'
+import dayjs from 'dayjs'
+import deptApi from '@/sheep/api/integrated/dept'
+
+// 表单数据
+const formData = reactive({
+  name: '',
+  mobile: '',
+  companyName: '',
+  isOtherPeople: '0',
+  isDrive: '0',
+  deptId: '',
+  deptName: '',
+  userId: '',
+  userName: '',
+  vStartDate: '',
+  vEndDate: '',
+  type: '1',
+  checkStatus: '0',
+})
+
+// 随行人员列表
+const otherPeople = ref<Array<{name: string, mobile: string}>>([])
+
+// 车牌列表
+const carList = ref<Array<{carNumber: string}>>([])
+
+// 弹窗控制
+const showDeptPopup = ref(false)
+const showTimePopup = ref(false)
+const showUserPopup = ref(false)
+
+// 时间选择相关的状态
+const selectedDateIndex = ref(0)
+const selectedTimeIndex = ref(-1)
+const selectedTime = ref('')
+
+// 部门选择相关的状态
+const deptList = ref<any[]>([])
+const flatDeptList = ref<any[]>([])
+const selectedDeptId = ref('')
+const selectedDeptName = ref('')
+
+// 接待人选择相关的状态
+const userList = ref<any[]>([])
+const selectedUserId = ref('')
+const selectedUserName = ref('')
+const searchKeyword = ref('')
+
+// 生成未来一周的日期
+const dateList = computed(() => {
+  const dates = []
+  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+
+  for (let i = 0; i < 7; i++) {
+    const date = dayjs().add(i, 'day')
+    dates.push({
+      date: date.format('MM.DD'),
+      weekDay: weekDays[date.day()],
+      fullDate: date.format('YYYY-MM-DD')
+    })
+  }
+
+  return dates
+})
+
+// 生成时间段列表（8:00-18:00，每小时一个时间段）
+const timeList = computed(() => {
+  const times = []
+  for (let i = 8; i < 18; i++) {
+    times.push(`${i.toString().padStart(2, '0')}:00-${(i + 1).toString().padStart(2, '0')}:00`)
+  }
+  return times
+})
+
+// 过滤后的用户列表
+const filteredUserList = computed(() => {
+  if (!searchKeyword.value) return userList.value
+  const keyword = searchKeyword.value.toLowerCase()
+  return userList.value.filter(user => 
+    user.name.toLowerCase().includes(keyword)
+  )
+})
+
+// 获取部门数据
+const getDeptList = async () => {
+  try {
+    const { code, data } = await visitorApi.getSimpleTree()
+    if (code === 0 && data) {
+      deptList.value = data
+      // 将树形数据扁平化并添加层级信息
+      flattenDeptList(data)
+    }
+  } catch (error) {
+    console.error('获取部门列表失败:', error)
+  }
+}
+
+// 扁平化部门数据并添加层级信息
+const flattenDeptList = (depts: any[], level = 1, result: any[] = []) => {
+  depts.forEach(dept => {
+    result.push({
+      id: dept.id,
+      name: dept.name,
+      level
+    })
+    if (dept.children && dept.children.length > 0) {
+      flattenDeptList(dept.children, level + 1, result)
+    }
+  })
+  flatDeptList.value = result
+}
+
+// 开关控制 - 随行人员
+const onSwitchOtherPeople = (value: boolean) => {
+  formData.isOtherPeople = value ? '1' : '0'
+  if (value && otherPeople.value.length === 0) {
+    otherPeople.value.push({ name: '', mobile: '' })
+  }
+}
+
+// 开关控制 - 驾驶车辆
+const onSwitchDrive = (value: boolean) => {
+  formData.isDrive = value ? '1' : '0'
+  if (value && carList.value.length === 0) {
+    carList.value.push({ carNumber: '' })
+  }
+}
+
+// 随行人员管理
+const addOtherPeople = () => {
+  if (otherPeople.value.length < 5) {
+    otherPeople.value.push({ name: '', mobile: '' })
+  }
+}
+
+const removeOtherPeople = (index: number) => {
+  otherPeople.value.splice(index, 1)
+}
+
+// 车牌管理
+const addCarNumber = () => {
+  if (carList.value.length < 2) {
+    carList.value.push({ carNumber: '' })
+  }
+}
+
+const removeCarNumber = (index: number) => {
+  carList.value.splice(index, 1)
+}
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack()
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  // 表单验证
+  if (!formData.name) {
+    uni.showToast({ title: '请输入姓名', icon: 'none' })
+    return
+  }
+  if (!formData.mobile) {
+    uni.showToast({ title: '请输入联系方式', icon: 'none' })
+    return
+  }
+  if (!formData.deptId || !formData.deptName) {
+    uni.showToast({ title: '请选择到访单位', icon: 'none' })
+    return
+  }
+  if (!formData.userId || !formData.userName) {
+    uni.showToast({ title: '请选择接待人', icon: 'none' })
+    return
+  }
+  if (!formData.vStartDate || !formData.vEndDate) {
+    uni.showToast({ title: '请选择到访时间', icon: 'none' })
+    return
+  }
+
+  try {
+    const submitData = {
+      ...formData,
+      peopleNumber: formData.isOtherPeople === '1' ? otherPeople.value.length : 0,
+      otherPeople: formData.isOtherPeople === '1' ? otherPeople.value : [],
+      carList: formData.isDrive === '1' ? carList.value : []
+    }
+
+    const { code, msg } = await visitorApi.save(submitData)
+    if (code === 0) {
+      uni.showToast({ title: '提交成功', icon: 'success' })
+      setTimeout(() => {
+        uni.navigateBack()
+      }, 1500)
+    } else {
+      uni.showToast({ title: msg || '提交失败', icon: 'none' })
+    }
+  } catch (error) {
+    uni.showToast({ title: '提交失败', icon: 'none' })
+  }
+}
+
+// 显示时间选择器
+const showTimePicker = () => {
+  showTimePopup.value = true
+}
+
+// 关闭时间选择器
+const closeTimePicker = () => {
+  showTimePopup.value = false
+}
+
+// 选择日期
+const selectDate = (index: number) => {
+  selectedDateIndex.value = index
+}
+
+// 选择时间
+const selectTime = (index: number) => {
+  selectedTimeIndex.value = index
+}
+
+// 确认时间选择
+const confirmTimeSelect = () => {
+  if (selectedTimeIndex.value === -1) {
+    uni.showToast({
+      title: '请选择具体时间',
+      icon: 'none'
+    })
+    return
+  }
+
+  const selectedDate = dateList.value[selectedDateIndex.value]
+  const selectedTimeRange = timeList.value[selectedTimeIndex.value]
+
+  // 更新表单数据
+  const [startTime, endTime] = selectedTimeRange.split('-')
+  formData.vStartDate = `${selectedDate.fullDate} ${startTime}:00`
+  formData.vEndDate = `${selectedDate.fullDate} ${endTime}:00`
+
+  // 更新显示文本
+  selectedTime.value = `${selectedDate.weekDay} ${selectedDate.date} ${selectedTimeRange}`
+
+  closeTimePicker()
+}
+
+// 显示部门选择器
+const showDeptPicker = () => {
+  if (flatDeptList.value.length === 0) {
+    getDeptList()
+  }
+  showDeptPopup.value = true
+}
+
+// 关闭部门选择器
+const closeDeptPicker = () => {
+  showDeptPopup.value = false
+}
+
+// 选择部门
+const selectDept = (dept: any) => {
+  selectedDeptId.value = dept.id
+  selectedDeptName.value = dept.name
+}
+
+// 部门选择确认
+const confirmDeptSelect = () => {
+  if (!selectedDeptId.value) {
+    uni.showToast({
+      title: '请选择到访单位',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // 更新表单数据，同时保存ID和名称
+  formData.deptId = selectedDeptId.value
+  formData.deptName = selectedDeptName.value
+  
+  // 清空已选择的接待人
+  formData.userId = ''
+  formData.userName = ''
+  selectedUserName.value = ''
+  selectedUserId.value = ''
+  
+  // 关闭弹窗
+  closeDeptPicker()
+}
+
+// 获取部门下的用户列表
+const getUserList = async (deptId: string) => {
+  try {
+    const { code, data } = await deptApi.getUserList(deptId)
+    if (code === 0 && data) {
+      // 确保返回的数据格式正确
+      userList.value = Array.isArray(data) ? data : []
+    }
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+    userList.value = []
+  }
+}
+
+// 选择用户
+const selectUser = (user: any) => {
+  selectedUserId.value = user.userId
+  selectedUserName.value = user.name
+}
+
+// 用户选择确认
+const confirmUserSelect = () => {
+  if (!selectedUserId.value) {
+    uni.showToast({
+      title: '请选择接待人',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // 更新表单数据，同时保存ID和名称
+  formData.userId = selectedUserId.value
+  formData.userName = selectedUserName.value
+  
+  // 关闭弹窗
+  closeUserPicker()
+}
+
+// 显示用户选择器
+const showUserPicker = async () => {
+  if (!formData.deptId) {
+    uni.showToast({
+      title: '请先选择到访单位',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // 如果切换了部门，重新获取用户列表
+  if (formData.deptId !== currentDeptId.value) {
+    await getUserList(formData.deptId)
+    currentDeptId.value = formData.deptId
+    // 清空选择
+    selectedUserId.value = ''
+    selectedUserName.value = ''
+  }
+  
+  showUserPopup.value = true
+}
+
+// 关闭用户选择器
+const closeUserPicker = () => {
+  showUserPopup.value = false
+  searchKeyword.value = ''
+}
+
+// 记录当前选中的部门ID，用于判断是否需要重新获取用户列表
+const currentDeptId = ref('')
+
+// 页面加载时获取部门数据
+onMounted(() => {
+  getDeptList()
+})
+</script>
+
+<style lang="scss" scoped>
+.visitor-page {
+  min-height: 100vh;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}
+
+.header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 90rpx;
+  padding: 0 30rpx;
+  position: relative;
+  border-bottom: 1rpx solid #f5f5f5;
+
+  .back-btn {
+    width: 60rpx;
+    height: 90rpx;
+    display: flex;
+    align-items: center;
+  }
+
+  .back-icon {
+    font-size: 38rpx;
+    color: #323233;
+  }
+
+  .title {
+    font-size: 36rpx;
+    color: #323233;
+    font-weight: 500;
+    letter-spacing: 0.5rpx;
+  }
+
+  .right-placeholder {
+    width: 60rpx;
+  }
+}
+
+.page-content {
+  flex: 1;
+  height: 0;
+}
+
+.tips-box {
+  padding: 24rpx 30rpx;
+  background: #FFF7E6;
+  display: flex;
+  align-items: center;
+
+  .tips-icon {
+    margin-right: 12rpx;
+    color: #FF9900;
+  }
+
+  .tips-text {
+    font-size: 28rpx;
+    color: #666;
+    line-height: 1.4;
+  }
+}
+
+.form-content {
+  padding: 0 30rpx;
+}
+
+.form-item {
+  padding: 32rpx 0;
+  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
+
+  .label {
+    font-size: 30rpx;
+    color: #323233;
+    font-weight: 400;
+    margin-right: 12rpx;
+    line-height: 1.4;
+  }
+
+  .required {
+    font-size: 28rpx;
+    color: #EE0A24;
+  }
+
+  .input {
+    margin-top: 24rpx;
+    font-size: 30rpx;
+    color: #323233;
+    width: 100%;
+  }
+}
+
+.switch-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.select-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.select-right {
+  display: flex;
+  align-items: center;
+
+  .select-value {
+    font-size: 30rpx;
+    color: #969799;
+  }
+
+  .select-arrow {
+    margin-left: 12rpx;
+    font-size: 28rpx;
+    color: #969799;
+  }
+}
+
+.placeholder {
+  color: #969799;
+  font-size: 30rpx;
+}
+
+.companion-item, .car-item {
+  padding: 24rpx 0;
+
+  .companion-inputs {
+    display: flex;
+    gap: 24rpx;
+  }
+
+  .companion-input, .car-input {
+    flex: 1;
+    height: 88rpx;
+    background: #F7F8FA;
+    border-radius: 8rpx;
+    padding: 0 24rpx;
+    font-size: 30rpx;
+    color: #323233;
+  }
+}
+
+.delete-text {
+  display: block;
+  text-align: right;
+  color: #EE0A24;
+  font-size: 28rpx;
+  margin-top: 12rpx;
+  padding: 8rpx 0;
+}
+
+.add-btn {
+  margin: 24rpx 0;
+  display: flex;
+  align-items: center;
+  padding: 8rpx 0;
+
+  .add-icon {
+    font-size: 32rpx;
+    color: #1989FA;
+    margin-right: 12rpx;
+  }
+
+  .add-text {
+    font-size: 30rpx;
+    color: #1989FA;
+    font-weight: 400;
+  }
+}
+
+.submit-btn {
+  position: fixed;
+  left: 30rpx;
+  right: 30rpx;
+  bottom: 40rpx;
+  height: 88rpx;
+  background: #1989FA;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: 500;
+  letter-spacing: 1rpx;
+  box-shadow: 0 4rpx 8rpx rgba(25, 137, 250, 0.12);
+}
+
+// 优化switch样式
+:deep(.uni-switch-input) {
+  background-color: #dcdee0 !important;
+
+  &.uni-switch-input-checked {
+    background-color: #1989FA !important;
+  }
+}
+
+// 添加时间选择器相关样式
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+
+  .popup-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  .popup-content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    border-radius: 24rpx 24rpx 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+
+  .popup-title {
+    font-size: 32rpx;
+    color: #323233;
+    font-weight: 500;
+  }
+
+  .popup-close {
+    font-size: 40rpx;
+    color: #969799;
+    padding: 10rpx;
+  }
+}
+
+.time-picker {
+  padding: 24rpx 0;
+}
+
+.date-list {
+  display: flex;
+  padding: 0 24rpx;
+  margin-bottom: 24rpx;
+
+  .date-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16rpx 0;
+
+    &.active {
+      background: #E8F3FF;
+      border-radius: 8rpx;
+
+      .date-week, .date-day {
+        color: #1989FA;
+      }
+    }
+
+    .date-week {
+      font-size: 28rpx;
+      color: #323233;
+      margin-bottom: 8rpx;
+    }
+
+    .date-day {
+      font-size: 26rpx;
+      color: #969799;
+    }
+  }
+}
+
+.time-list {
+  padding: 0 24rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+
+  .time-item {
+    width: calc((100% - 40rpx) / 3);
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #F7F8FA;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    color: #323233;
+
+    &.active {
+      background: #E8F3FF;
+      color: #1989FA;
+    }
+  }
+}
+
+.popup-footer {
+  padding: 24rpx 32rpx;
+  border-top: 1rpx solid #f5f5f5;
+
+  .confirm-btn {
+    height: 88rpx;
+    background: #1989FA;
+    border-radius: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 32rpx;
+    font-weight: 500;
+  }
+}
+
+// 添加部门选择相关样式
+.dept-list {
+  max-height: 60vh;
+  padding: 20rpx 0;
+}
+
+.dept-item {
+  padding: 24rpx 32rpx;
+  font-size: 28rpx;
+  color: #323233;
+
+  &.active {
+    color: #1989FA;
+    background: #F5F5F5;
+  }
+
+  &.level-1 {
+    font-weight: 500;
+  }
+
+  &.level-2 {
+    padding-left: 64rpx;
+  }
+
+  &.level-3 {
+    padding-left: 96rpx;
+  }
+}
+
+// 添加用户选择相关样式
+.search-box {
+  padding: 20rpx 32rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.search-input {
+  height: 72rpx;
+  background: #F7F8FA;
+  border-radius: 36rpx;
+  padding: 0 32rpx;
+  font-size: 28rpx;
+}
+
+.search-placeholder {
+  color: #969799;
+}
+
+.user-list {
+  padding: 20rpx 0;
+}
+
+.user-item {
+  padding: 24rpx 32rpx;
+  font-size: 28rpx;
+  color: #323233;
+  display: flex;
+  align-items: center;
+  
+  &.active {
+    color: #1989FA;
+    background: #F5F5F5;
+  }
+  
+  .user-name {
+    flex: 1;
+  }
+}
+
+.empty-tip {
+  padding: 40rpx;
+  text-align: center;
+  color: #969799;
+  font-size: 28rpx;
+}
+
+// 底部占位
+.bottom-space {
+  height: 180rpx;
+}
+</style>