machinery-miniapp-worker/src/pages/machineryMap/index.jsx

import Taro from "@tarojs/taro"
import { useState, useEffect } from "react"
import { View, Map, Image } from "@tarojs/components"
import withLayout from '@/layouts'
import { getMachineryList } from '@/services/machinery'
import { useModel } from "@/store"
import CustomNav from "@/components/CustomNav"
import m1 from '@/assets/machinery/greenMachinery.png'
import m2 from '@/assets/machinery/orangeMachinery.png'
import picon from '@/assets/comm/position.png'
import './style.less'


export default withLayout((props) => {
  const [show, setShow] = useState(false)
  const { location } = useModel('location')
  const [machineryList, setMachineryList] = useState([])
  const [markerList, setMarkerList] = useState([])
  const [current, setCurrent] = useState()

  const locList = [
    {
      longitude: 112.106514,
      latitude: 32.685927
    },
    {
      longitude: 112.100406,
      latitude: 32.673406
    },
    {
      longitude: 112.06397,
      latitude: 32.670488
    },
    {
      longitude: 112.05434,
      latitude: 32.685684
    },
    {
      longitude: 112.058724,
      latitude: 32.701302
    },
    {
      longitude: 112.015102,
      latitude: 32.665504
    },
    {
      longitude: 112.010503,
      latitude: 32.685502
    },
    {
      longitude: 112.097747,
      latitude: 32.651764
    },
    {
      longitude: 112.149705,
      latitude: 32.664957
    },
    {
      longitude: 112.16185,
      latitude: 32.701241
    },
  ]
  const handleClick = (e) => {
    setCurrent(machineryList[e.markerId])
    setShow(true)
  }
  const goDetail = (val) => {
    Taro.navigateTo({ url: `/pages/machineryDetail/index?id=${val}` });
  }
  const goList = () => {
    Taro.navigateTo({ url: '/pages/machineryList/index' });
  }
  useEffect(() => {
    getMachineryList({ location: location }).then((res) => {
      setMachineryList(res.records)
      setMarkerList(res.records.map((item, index) => {
        return {
          id: index,
          longitude: locList[index % 10].longitude,
          latitude: locList[index % 10].latitude,
          iconPath: item.jobStatus?m1:m2,
          width: 50,
          height: 50
        }
      }))
    })
  }, [])
  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='我的农机' />
      </View>
      <View className='index-container machineryMap'>
        <Map
          longitude={112.092716}
          latitude={32.681642}
          markers={markerList}
          className='map'
          onMarkerTap={handleClick}
          onRegionChange={() => setShow(false)}
        />
        {
          show &&
          <View className='showModel'>
            <View className='goList' onClick={goList}>{'<'}{'<'} 农机列表</View>
            <View className='title'>
              <View className='name'>{current.name}</View>
              <View className='action' onClick={() => goDetail(current.machineryId)}>详情 {">"}{">"}</View>
            </View>
            <View className='position'>
              <Image src={picon} className='picon' />
              当前位置：&nbsp;&nbsp;邓州市陈楼
            </View>
          </View>
        }

      </View>
    </View>
  )
})