YY_MP_REFACTOR/src/pages-task/task-visit/components/visit-map/index.vue

<template>
  <view class="visit-map-panel">
    <map
      class="visit-map-panel__map"
      :latitude="mapLatitude"
      :longitude="mapLongitude"
      :circles="rangeCircles"
      :markers="targetMarkers"
      :scale="15"
      show-location
      show-compass
    />

    <view class="visit-map-panel__locate" @click="emit('refresh-location')">⌖</view>

    <view class="visit-map-panel__add-card">
      <view class="visit-map-panel__add-title">
        附近没有合适的{{ targetTypeLabel }}？
      </view>
      <view class="visit-map-panel__add-action">＋ 新增地点</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import type { LocationResult } from '@/lib/location'

import type { VisitTarget } from '../../types'

const props = defineProps<{
  target?: VisitTarget
  targetTypeLabel: string
  currentLocation: LocationResult | null
  rangeRadius: number
}>()

const emit = defineEmits<{
  (event: 'refresh-location'): void
}>()

const rangeCircles = computed(() => {
  if (!props.currentLocation) return []

  return [
    {
      latitude: props.currentLocation.latitude,
      longitude: props.currentLocation.longitude,
      radius: props.rangeRadius,
      color: '#42bde9aa',
      fillColor: '#42bde926',
      strokeWidth: 2,
    },
  ]
})

const targetMarkers = computed(() => {
  if (!props.target) return []

  return [
    {
      id: 1,
      latitude: props.target.latitude,
      longitude: props.target.longitude,
      iconPath: '/static/images/common/map-marker.png',
      width: 30,
      height: 30,
      callout: {
        content: props.target.name,
        color: '#1f2937',
        fontSize: 12,
        borderRadius: 6,
        borderWidth: 1,
        borderColor: '#dbeafe',
        bgColor: '#ffffff',
        padding: 7,
        textAlign: 'center' as const,
        display: 'ALWAYS' as const,
      },
    },
  ]
})

const mapLatitude = computed(
  () => props.currentLocation?.latitude ?? props.target?.latitude ?? 22.543096
)
const mapLongitude = computed(
  () => props.currentLocation?.longitude ?? props.target?.longitude ?? 114.057865
)
</script>

<style lang="scss" scoped>
.visit-map-panel {
  position: relative;
  height: 480rpx;
  overflow: hidden;
  background: #dce8f3;
}

.visit-map-panel__map {
  width: 100%;
  height: 100%;
}

.visit-map-panel__locate {
  position: absolute;
  top: 28rpx;
  right: 28rpx;
  width: 66rpx;
  height: 66rpx;
  color: #2f8cf7;
  font-size: 44rpx;
  font-weight: 700;
  line-height: 66rpx;
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20rpx;
  box-shadow: 0 10rpx 28rpx rgba(24, 39, 75, 0.14);
}

.visit-map-panel__add-card {
  position: absolute;
  right: 28rpx;
  bottom: 44rpx;
  left: 28rpx;
  display: flex;
  align-items: center;
  min-height: 80rpx;
  padding: 12rpx 14rpx 12rpx 22rpx;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 20rpx;
  box-shadow: 0 16rpx 40rpx rgba(24, 39, 75, 0.16);
  box-sizing: border-box;
}

.visit-map-panel__add-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #1e293b;
  font-size: 24rpx;
  font-weight: 650;
  line-height: 34rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visit-map-panel__add-action {
  flex-shrink: 0;
  height: 54rpx;
  margin-left: 14rpx;
  padding: 0 18rpx;
  color: #2f8cf7;
  font-size: 22rpx;
  font-weight: 650;
  line-height: 54rpx;
  background: #edf6ff;
  border-radius: 16rpx;
}
</style>