feat: 添加map

wlzboy

2025-09-26 97db9d11ff425583d2dece82a842a7766bb5e7e4

 app/pages/task/create.vue

@@ -475,16 +475,37 @@
        </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
      uniDatetimePicker,
      uniPopup,
      MapSelector
    },
    data() {
      return {
@@ -492,6 +513,10 @@
        selectedVehicle: '',
        selectedOrganization: '',
        selectedEmergencyTaskType: '',
        boundVehicle: '', // 用户绑定的车辆
        // 地图选择相关
        showMapSelector: false,
        mapSelectorType: '', // 标识当前选择的是哪个地址字段
        taskForm: {
          description: '',
          startLocation: '',
@@ -575,9 +600,34 @@
        })
      })
    },
    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() {
@@ -596,28 +646,94 @@
        this.selectedEmergencyTaskType = this.emergencyTaskTypes[e.detail.value]
      },
      
      // 显示地图选择器 - 任务出发地
      selectStartLocation() {
        this.$modal.showToast('选择出发地功能开发中')
        this.mapSelectorType = 'startLocation'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 任务目的地
      selectEndLocation() {
        this.$modal.showToast('选择目的地功能开发中')
        this.mapSelectorType = 'endLocation'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 转出医院地址
      selectHospitalOutAddress() {
        this.$modal.showToast('选择转出医院地址功能开发中')
        this.mapSelectorType = 'hospitalOutAddress'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 转入医院地址
      selectHospitalInAddress() {
        this.$modal.showToast('选择转入医院地址功能开发中')
        this.mapSelectorType = 'hospitalInAddress'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 福祉车出发地址
      selectStartAddress() {
        this.$modal.showToast('选择出发地址功能开发中')
        this.mapSelectorType = 'startAddress'
        this.$refs.mapPopup.open()
      },
      
      // 显示地图选择器 - 福祉车目的地址
      selectEndAddress() {
        this.$modal.showToast('选择目的地址功能开发中')
        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() {
@@ -852,5 +968,36 @@
        }
      }
    }
    
    // 地图选择器弹窗样式
    .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>