<template>
|
<scroll-view class="create-task-container" scroll-y="true">
|
<!-- 任务类型选择界面 -->
|
<view v-if="!selectedTaskCategory" 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="icon">
|
<uni-icons :type="category.icon" size="30" :color="category.color"></uni-icons>
|
</view>
|
<view class="info">
|
<view class="name">{{ category.name }}</view>
|
<view class="desc">{{ category.description }}</view>
|
</view>
|
<view class="arrow">
|
<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
|
</view>
|
</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: ''
|
},
|
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: '司机'
|
})
|
})
|
},
|
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;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
|
.task-form-container {
|
.form-header {
|
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;
|
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;
|
}
|
|
.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;
|
font-size: 32rpx;
|
}
|
}
|
}
|
}
|
|
// 地图选择器弹窗样式
|
.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;
|
}
|
}
|
}
|
}
|
</style>
|
