feat:移除app 中我的栏目中不要的功能

wlzboy

2025-10-26 1626d13ec8b1a63676e63cf95c5004c4118da3b3

 app/pages/task/create.vue

@@ -1,19 +1,14 @@
<template>
  <scroll-view class="create-task-container" scroll-y="true">
    <!-- 任务类型选择界面 -->
    <view v-if="!selectedTaskCategory" class="task-category-container">
    <view class="task-category-container">
      <view class="header">
        <view class="title">选择任务类型</view>
        <view class="subtitle">请选择您要创建的任务类型</view>
      </view>
      

      <view class="category-list">
        <view 
          class="category-item" 
          v-for="(category, index) in taskCategories" 
          :key="index"
          @click="selectTaskCategory(category)"
        >
        <view class="category-item" v-for="(category, index) in taskCategories" :key="index"
          @click="selectTaskCategory(category)">
          <view class="icon">
            <uni-icons :type="category.icon" size="30" :color="category.color"></uni-icons>
          </view>
@@ -27,977 +22,123 @@
        </view>
      </view>
    </view>
    
    <!-- 任务创建表单 -->
    <view v-else class="task-form-container">
      <view class="form-header">
        <view class="back-btn" @click="backToCategory">
          <uni-icons type="arrowleft" size="20"></uni-icons>
        </view>
        <view class="title">创建{{ selectedTaskCategory.name }}任务</view>
      </view>
      
      <view class="form-section">
        <!-- 普通任务表单 -->
        <view v-if="selectedTaskCategory.type === 'normal'">
          <view class="form-item">
            <view class="form-label">任务车辆</view>
            <picker mode="selector" :range="vehicles" @change="onVehicleChange">
              <view class="form-input picker-input">
                {{ selectedVehicle || '请选择任务车辆' }}
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <view class="form-label">任务类型</view>
            <input 
              class="form-input" 
              :value="selectedTaskCategory.name" 
              disabled
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">任务描述</view>
            <textarea 
              class="form-textarea" 
              placeholder="请输入任务描述" 
              v-model="taskForm.description"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">任务出发地</view>
            <view class="form-input picker-input" @click="selectStartLocation">
              {{ taskForm.startLocation || '请选择任务出发地' }}
              <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">任务目的地</view>
            <view class="form-input picker-input" @click="selectEndLocation">
              {{ taskForm.endLocation || '请选择任务目的地' }}
              <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">行驶公里数</view>
            <input 
              class="form-input" 
              type="digit" 
              placeholder="请输入行驶公里数" 
              v-model="taskForm.distance"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">开始时间</view>
            <!-- 使用uni-datetime-picker组件 -->
            <uni-datetime-picker 
              v-model="taskForm.startTime" 
              type="datetime" 
              :placeholder="'请选择开始时间'"
              class="form-input"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">结束时间</view>
            <!-- 使用uni-datetime-picker组件 -->
            <uni-datetime-picker 
              v-model="taskForm.endTime" 
              type="datetime" 
              :placeholder="'请选择结束时间'"
              class="form-input"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">执行人</view>
            <input 
              class="form-input" 
              :value="currentUser.name" 
              disabled
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">备注</view>
            <textarea 
              class="form-textarea" 
              placeholder="请输入备注信息（最多200字）" 
              v-model="taskForm.remark"
              maxlength="200"
            />
          </view>
        </view>
        
        <!-- 急救转运任务表单 -->
        <view v-else-if="selectedTaskCategory.type === 'emergency'">
          <view class="form-item">
            <view class="form-label">任务车辆</view>
            <picker mode="selector" :range="vehicles" @change="onVehicleChange">
              <view class="form-input picker-input">
                {{ selectedVehicle || '请选择任务车辆' }}
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <view class="form-label">执行任务人员</view>
            <view class="staff-list">
              <view class="staff-item">
                <text>{{ currentUser.name }} ({{ currentUser.position }})</text>
                <uni-icons type="checkmarkempty" size="20" color="#007AFF"></uni-icons>
              </view>
              <view 
                class="staff-item" 
                v-for="(staff, index) in additionalStaff" 
                :key="index"
                @click="removeStaff(index)"
              >
                <text>{{ staff.name }} ({{ staff.position }})</text>
                <uni-icons type="closeempty" size="20" color="#ff4d4f"></uni-icons>
              </view>
              <view class="add-staff" @click="addStaff">
                <uni-icons type="plusempty" size="20" color="#007AFF"></uni-icons>
                <text>添加人员</text>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">归属机构</view>
            <picker mode="selector" :range="organizations" @change="onOrganizationChange">
              <view class="form-input picker-input">
                {{ selectedOrganization || '请选择归属机构' }}
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <view class="form-label">任务类型</view>
            <picker mode="selector" :range="emergencyTaskTypes" @change="onEmergencyTaskTypeChange">
              <view class="form-input picker-input">
                {{ selectedEmergencyTaskType || '请选择任务类型' }}
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <view class="form-label">转运时间</view>
            <!-- 使用uni-datetime-picker组件 -->
            <uni-datetime-picker 
              v-model="taskForm.transferTime" 
              type="datetime" 
              :placeholder="'请选择转运时间'"
              class="form-input"
            />
          </view>
          
          <view class="form-section-title">患者信息</view>
          <view class="form-item">
            <view class="form-label">联系人</view>
            <input 
              class="form-input" 
              placeholder="请输入联系人" 
              v-model="taskForm.patient.contact"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">联系电话</view>
            <input 
              class="form-input" 
              type="number" 
              placeholder="请输入联系电话" 
              v-model="taskForm.patient.phone"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">患者姓名</view>
            <input 
              class="form-input" 
              placeholder="请输入患者姓名" 
              v-model="taskForm.patient.name"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">性别</view>
            <view class="radio-group">
              <label class="radio-item">
                <radio value="male" :checked="taskForm.patient.gender === 'male'" @click="taskForm.patient.gender = 'male'" />
                <text>男</text>
              </label>
              <label class="radio-item">
                <radio value="female" :checked="taskForm.patient.gender === 'female'" @click="taskForm.patient.gender = 'female'" />
                <text>女</text>
              </label>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">患者身份证</view>
            <input 
              class="form-input" 
              type="idcard" 
              placeholder="请输入患者身份证号" 
              v-model="taskForm.patient.idCard"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">病情</view>
            <textarea 
              class="form-textarea" 
              placeholder="请输入患者病情描述" 
              v-model="taskForm.patient.condition"
            />
          </view>
          
          <view class="form-section-title">转出医院信息</view>
          <view class="form-item">
            <view class="form-label">医院名称</view>
            <input 
              class="form-input" 
              placeholder="请输入转出医院名称" 
              v-model="taskForm.hospitalOut.name"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">科室</view>
            <input 
              class="form-input" 
              placeholder="请输入科室" 
              v-model="taskForm.hospitalOut.department"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">床号</view>
            <input 
              class="form-input" 
              placeholder="请输入床号" 
              v-model="taskForm.hospitalOut.bedNumber"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">转出地址</view>
            <view class="form-input picker-input" @click="selectHospitalOutAddress">
              {{ taskForm.hospitalOut.address || '请选择转出地址' }}
              <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
          </view>
          
          <view class="form-section-title">转入医院信息</view>
          <view class="form-item">
            <view class="form-label">医院名称</view>
            <input 
              class="form-input" 
              placeholder="请输入转入医院名称" 
              v-model="taskForm.hospitalIn.name"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">科室</view>
            <input 
              class="form-input" 
              placeholder="请输入科室" 
              v-model="taskForm.hospitalIn.department"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">床号</view>
            <input 
              class="form-input" 
              placeholder="请输入床号" 
              v-model="taskForm.hospitalIn.bedNumber"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">转入地址</view>
            <view class="form-input picker-input" @click="selectHospitalInAddress">
              {{ taskForm.hospitalIn.address || '请选择转入地址' }}
              <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">转运公里数</view>
            <input 
              class="form-input" 
              type="digit" 
              placeholder="请输入转运公里数" 
              v-model="taskForm.transferDistance"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">成交价</view>
            <input 
              class="form-input" 
              type="digit" 
              placeholder="请输入成交价" 
              v-model="taskForm.price"
            />
          </view>
        </view>
        
        <!-- 福祉车任务表单 -->
        <view v-else-if="selectedTaskCategory.type === 'welfare'">
          <view class="form-item">
            <view class="form-label">任务车辆</view>
            <picker mode="selector" :range="vehicles" @change="onVehicleChange">
              <view class="form-input picker-input">
                {{ selectedVehicle || '请选择任务车辆' }}
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <view class="form-label">执行任务人员</view>
            <view class="staff-list">
              <view class="staff-item">
                <text>{{ currentUser.name }} ({{ currentUser.position }})</text>
                <uni-icons type="checkmarkempty" size="20" color="#007AFF"></uni-icons>
              </view>
              <view 
                class="staff-item" 
                v-for="(staff, index) in additionalStaff" 
                :key="index"
                @click="removeStaff(index)"
              >
                <text>{{ staff.name }} ({{ staff.position }})</text>
                <uni-icons type="closeempty" size="20" color="#ff4d4f"></uni-icons>
              </view>
              <view class="add-staff" @click="addStaff">
                <uni-icons type="plusempty" size="20" color="#007AFF"></uni-icons>
                <text>添加人员</text>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">归属机构</view>
            <picker mode="selector" :range="organizations" @change="onOrganizationChange">
              <view class="form-input picker-input">
                {{ selectedOrganization || '请选择归属机构' }}
                <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <view class="form-label">服务时间</view>
            <!-- 使用uni-datetime-picker组件 -->
            <uni-datetime-picker 
              v-model="taskForm.serviceTime" 
              type="datetime" 
              :placeholder="'请选择服务时间'"
              class="form-input"
            />
          </view>
          
          <view class="form-section-title">乘客信息</view>
          <view class="form-item">
            <view class="form-label">联系人</view>
            <input 
              class="form-input" 
              placeholder="请输入联系人" 
              v-model="taskForm.passenger.contact"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">联系电话</view>
            <input 
              class="form-input" 
              type="number" 
              placeholder="请输入联系电话" 
              v-model="taskForm.passenger.phone"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">出发地址</view>
            <view class="form-input picker-input" @click="selectStartAddress">
              {{ taskForm.startAddress || '请选择出发地址' }}
              <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">目的地址</view>
            <view class="form-input picker-input" @click="selectEndAddress">
              {{ taskForm.endAddress || '请选择目的地址' }}
              <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">公里数</view>
            <input 
              class="form-input" 
              type="digit" 
              placeholder="请输入公里数" 
              v-model="taskForm.distance"
            />
          </view>
          
          <view class="form-item">
            <view class="form-label">成交价</view>
            <input 
              class="form-input" 
              type="digit" 
              placeholder="请输入成交价" 
              v-model="taskForm.price"
            />
          </view>
        </view>
        
        <view class="form-actions">
          <button class="submit-btn" @click="submitTask">保存</button>
        </view>
      </view>
    </view>
    
    <!-- 地图选择器弹窗 -->
    <uni-popup ref="mapPopup" type="bottom" :mask-click="false">
      <view class="map-popup-container">
        <view class="popup-header">
          <view class="popup-title">选择地址</view>
          <view class="close-btn" @click="closeMapSelector">
            <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
          </view>
        </view>
        <map-selector 
          :initial-address="getInitialAddress()" 
          @addressSelected="onAddressSelected"
        ></map-selector>
      </view>
    </uni-popup>
  </scroll-view>
</template>

<script>
  import { mapState } from 'vuex'
  import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
  import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
  import { getUserProfile } from "@/api/system/user"
  import MapSelector from '@/components/map-selector.vue'
  
  export default {
    components: {
      uniDatetimePicker,
      uniPopup,
      MapSelector
    },
    data() {
      return {
        selectedTaskCategory: null,
        selectedVehicle: '',
        selectedOrganization: '',
        selectedEmergencyTaskType: '',
        boundVehicle: '', // 用户绑定的车辆
        // 地图选择相关
        showMapSelector: false,
        mapSelectorType: '', // 标识当前选择的是哪个地址字段
        taskForm: {
          description: '',
          startLocation: '',
          endLocation: '',
          distance: '',
          startTime: '',
          endTime: '',
          remark: '',
          transferTime: '',
          patient: {
            contact: '',
            phone: '',
            name: '',
            gender: 'male',
            idCard: '',
            condition: ''
          },
          hospitalOut: {
            name: '',
            department: '',
            bedNumber: '',
            address: ''
          },
          hospitalIn: {
            name: '',
            department: '',
            bedNumber: '',
            address: ''
          },
          transferDistance: '',
          price: '',
          serviceTime: '',
          passenger: {
            contact: '',
            phone: ''
          },
          startAddress: '',
          endAddress: ''
export default {
  data() {
    return {
      taskCategories: [
        {
          type: 'emergency',
          name: '转运任务',
          icon: 'hospital',
          color: '#E54D42',
          description: '紧急医疗转运任务',
          taskType: 'EMERGENCY_TRANSFER',
          page: '/pages/task/create-emergency'
        },
        taskCategories: [
          {
            type: 'normal',
            name: '维修保养',
            icon: 'repair',
            color: '#007AFF',
            description: '设备维修、保养等日常任务'
          },
          {
            type: 'normal',
            name: '加油',
            icon: 'fuel',
            color: '#1AAD19',
            description: '车辆加油等任务'
          },
          {
            type: 'emergency',
            name: '急救转运',
            icon: 'hospital',
            color: '#E54D42',
            description: '紧急医疗转运任务'
          },
          {
            type: 'welfare',
            name: '福祉车',
            icon: 'car',
            color: '#F37B1D',
            description: '老年人、残疾人等特殊群体用车服务'
          }
        ],
        vehicles: ['粤A12345', '粤B67890', '粤C11111', '粤D22222', '粤E33333'],
        organizations: ['广州分公司', '深圳分公司', '珠海分公司', '佛山分公司'],
        emergencyTaskTypes: ['急救转运', '航空转运'],
        additionalStaff: []
      }
    },
    computed: {
      ...mapState({
        currentUser: state => ({
          name: state.user.name || '张三',
          position: '司机'
        })
        {
          type: 'normal',
          name: '维修保养',
          icon: 'repair',
          color: '#007AFF',
          description: '设备维修、保养等日常任务',
          taskType: 'MAINTENANCE',
          page: '/pages/task/create-normal'
        },
        {
          type: 'normal',
          name: '加油',
          icon: 'fuel',
          color: '#1AAD19',
          description: '车辆加油等任务',
          taskType: 'FUEL',
          page: '/pages/task/create-normal'
        },

        {
          type: 'welfare',
          name: '福祉车',
          icon: 'car',
          color: '#F37B1D',
          description: '老年人、残疾人等特殊群体用车服务',
          taskType: 'WELFARE',
          page: '/pages/task/create-welfare'
        }
      ]
    }
  },
  methods: {
    selectTaskCategory(category) {
      // 跳转到对应的任务创建页面
      uni.navigateTo({
        url: `${category.page}?categoryName=${category.name}&categoryType=${category.type}&taskType=${category.taskType}`
      })
    },
    onLoad() {
      // 获取用户绑定的车辆信息
      this.getUserBoundVehicle()
    },
    methods: {
      // 获取用户绑定的车辆信息
      getUserBoundVehicle() {
        getUserProfile().then(response => {
          // 这里模拟从用户信息中获取绑定车辆，实际项目中应该从response.data中获取
          // 假设用户信息中有boundVehicle字段
          this.boundVehicle = '粤A12345' // 模拟值，实际应从response.data.boundVehicle获取
          
          // 如果有绑定车辆，则默认选中
          if (this.boundVehicle) {
            this.selectedVehicle = this.boundVehicle
          }
        }).catch(() => {
          // 获取用户信息失败时使用默认值
          this.boundVehicle = ''
        })
      },
      
      selectTaskCategory(category) {
        this.selectedTaskCategory = category
        // 当选择任务类型时，如果是普通任务且用户有绑定车辆，则默认选中绑定车辆
        if (category.type === 'normal' && this.boundVehicle) {
          this.selectedVehicle = this.boundVehicle
        }
      },
      
      backToCategory() {
        this.selectedTaskCategory = null
      },
      
      onVehicleChange(e) {
        this.selectedVehicle = this.vehicles[e.detail.value]
      },
      
      onOrganizationChange(e) {
        this.selectedOrganization = this.organizations[e.detail.value]
      },
      
      onEmergencyTaskTypeChange(e) {
        this.selectedEmergencyTaskType = this.emergencyTaskTypes[e.detail.value]
      },
      
      // 显示地图选择器 - 任务出发地
      selectStartLocation() {
        this.mapSelectorType = 'startLocation'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 任务目的地
      selectEndLocation() {
        this.mapSelectorType = 'endLocation'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 转出医院地址
      selectHospitalOutAddress() {
        this.mapSelectorType = 'hospitalOutAddress'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 转入医院地址
      selectHospitalInAddress() {
        this.mapSelectorType = 'hospitalInAddress'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 福祉车出发地址
      selectStartAddress() {
        this.mapSelectorType = 'startAddress'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 福祉车目的地址
      selectEndAddress() {
        this.mapSelectorType = 'endAddress'
        this.$refs.mapPopup.open()
      },
      
      // 获取初始地址用于地图搜索
      getInitialAddress() {
        switch (this.mapSelectorType) {
          case 'startLocation':
            return this.taskForm.startLocation
          case 'endLocation':
            return this.taskForm.endLocation
          case 'hospitalOutAddress':
            return this.taskForm.hospitalOut.address
          case 'hospitalInAddress':
            return this.taskForm.hospitalIn.address
          case 'startAddress':
            return this.taskForm.startAddress
          case 'endAddress':
            return this.taskForm.endAddress
          default:
            return ''
        }
      },
      
      // 地图选择器地址选择回调
      onAddressSelected(address) {
        // 根据不同的地址类型设置对应的表单字段
        switch (this.mapSelectorType) {
          case 'startLocation':
            this.taskForm.startLocation = address.title + ' - ' + address.address
            break
          case 'endLocation':
            this.taskForm.endLocation = address.title + ' - ' + address.address
            break
          case 'hospitalOutAddress':
            this.taskForm.hospitalOut.address = address.title + ' - ' + address.address
            break
          case 'hospitalInAddress':
            this.taskForm.hospitalIn.address = address.title + ' - ' + address.address
            break
          case 'startAddress':
            this.taskForm.startAddress = address.title + ' - ' + address.address
            break
          case 'endAddress':
            this.taskForm.endAddress = address.title + ' - ' + address.address
            break
        }
        
        // 关闭地图选择器
        this.closeMapSelector()
      },
      
      // 关闭地图选择器
      closeMapSelector() {
        this.$refs.mapPopup.close()
        this.mapSelectorType = ''
      },
      
      addStaff() {
        this.$modal.showToast('添加人员功能开发中')
      },
      
      removeStaff(index) {
        this.additionalStaff.splice(index, 1)
      },
      
      submitTask() {
        this.$modal.confirm('确定要保存任务吗？').then(() => {
          this.$modal.showToast('任务保存成功')
          // 这里可以调用API保存任务
          // 保存成功后跳转到任务列表
          this.$tab.navigateTo('/pages/task/index')
        }).catch(() => {
          // 取消操作
        })
      }
    }
  }
}
</script>

<style lang="scss">
  .create-task-container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
    // 隐藏滚动条但保持滚动功能
    ::-webkit-scrollbar {
      display: none;
      width: 0 !important;
      height: 0 !important;
      background: transparent;
    }
    
    // Firefox滚动条隐藏
    * {
      scrollbar-width: none; /* Firefox */
    }
    
    // IE/Edge滚动条隐藏
    * {
      -ms-overflow-style: none; /* IE 10+ */
    }
    
    .task-category-container {
      .header {
        text-align: center;
        padding: 40rpx 0;
        
        .title {
          font-size: 40rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 20rpx;
        }
        
        .subtitle {
          font-size: 28rpx;
          color: #666;
        }
.create-task-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;

  .task-category-container {
    .header {
      text-align: center;
      padding: 40rpx 0;

      .title {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .category-list {
        .category-item {
          display: flex;
          align-items: center;
          background-color: white;
          border-radius: 15rpx;
          padding: 30rpx;
          margin-bottom: 20rpx;
          box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
          
          .icon {
            margin-right: 20rpx;
          }
          
          .info {
            flex: 1;
            
            .name {
              font-size: 32rpx;
              font-weight: bold;
              margin-bottom: 10rpx;
            }
            
            .desc {
              font-size: 26rpx;
              color: #666;
            }
          }
          
          .arrow {
            margin-left: 20rpx;
          }
        }

      .subtitle {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .task-form-container {
      .form-header {

    .category-list {
      .category-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        margin-bottom: 30rpx;
        
        .back-btn {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #f0f0f0;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
        }
        
        .title {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
        }
      }
      
      .form-section {
        background-color: white;
        border-radius: 15rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        
        .form-section-title {
          font-size: 32rpx;
          font-weight: bold;
          margin: 40rpx 0 20rpx 0;
          padding-bottom: 10rpx;
          border-bottom: 1rpx solid #f0f0f0;

        .icon {
          margin-right: 20rpx;
        }
        
        .form-item {
          margin-bottom: 40rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .form-label {
            font-size: 28rpx;
            margin-bottom: 15rpx;
            color: #333;
          }
          
          .form-input {
            height: 70rpx;
            padding: 0 20rpx;
            border: 1rpx solid #eee;
            border-radius: 10rpx;
            font-size: 28rpx;
            
            &.picker-input {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
            
            &[disabled] {
              background-color: #f5f5f5;
              color: #999;
            }
          }
          
          .form-textarea {
            width: 100%;
            min-height: 150rpx;
            padding: 20rpx;
            border: 1rpx solid #eee;
            border-radius: 10rpx;
            font-size: 28rpx;
            resize: none;
          }
          
          .radio-group {
            display: flex;
            
            .radio-item {
              display: flex;
              align-items: center;
              margin-right: 30rpx;
              
              radio {
                margin-right: 10rpx;
              }
            }
          }
          
          .staff-list {
            .staff-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 20rpx;
              background-color: #f9f9f9;
              border-radius: 10rpx;
              margin-bottom: 20rpx;
            }
            
            .add-staff {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 20rpx;
              border: 1rpx dashed #007AFF;
              border-radius: 10rpx;
              color: #007AFF;
            }
          }
        }
        
        .form-actions {
          margin-top: 50rpx;
          text-align: center;
          
          .submit-btn {
            width: 80%;
            height: 80rpx;
            background-color: #007AFF;
            color: white;
            border-radius: 10rpx;

        .info {
          flex: 1;

          .name {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }

          .desc {
            font-size: 26rpx;
            color: #666;
          }
        }
      }
    }
    
    // 地图选择器弹窗样式
    .map-popup-container {
      height: 80vh;
      background-color: white;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      overflow: hidden;
      
      .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        .popup-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .close-btn {
          width: 50rpx;
          height: 50rpx;
          display: flex;
          align-items: center;
          justify-content: center;

        .arrow {
          margin-left: 20rpx;
        }
      }
    }
  }
</style>
}
</style>