machinery-miniapp/src/pages/CheckMap/index.jsx

import { useEffect, useState } from "react"
import { Map, View, Image, Text } from "@tarojs/components"
import CustomNav from "@/components/CustomNav"
import ButtontWX from "@/components/ButtontWX"
import withLayout from '@/layouts'

import Taro from "@tarojs/taro"
import locationImage from "@/assets/icons/comm/locationImage.png"
import addresss from '@/assets/mineImgaes/addresss.png'//地址
import { getMachineryInfo } from "@/services/homes"
import { useModel } from "@/store"
import { setMorKm } from "@/utils/codeSegment"
import './style.less'


export default withLayout((props) => {


  const $instance = Taro.getCurrentInstance()
  const { id, location } = $instance.router.params


  const { sserLocation } = useModel('userData')




  const LocationMap = sserLocation.split(",")

  const [carsInfo, setCarsInfo] = useState({})
  const [imagesList, setImagesList] = useState([])
  const [contentList, setContentList] = useState([])


  useEffect(() => {
    if (id) {
      getMachineryInfo(id, { location: sserLocation, attached: true }).then((e) => {
        setImagesList(e.imagesList)
        setContentList(e.contentList)
        setCarsInfo(e)

      })
    }



  }, [$instance.router.params, id, sserLocation])


  const startReserve = () => {
    Taro.navigateTo({ url: `/pages/OrderConfirmation/index?id=${id}&location=${location}` })


  }

  const markers = [{ // 绘制浮标，传入JSON支持多个
    iconPath: locationImage,
    id: 1,
    // longitude: LocationMap[0] ,// 经度
    // latitude: LocationMap[1] ,//纬度
    longitude: 112.095318,
    latitude: 32.695301,
    top: 10,
    width: 40, // 浮标宽度
    height: 37,// 浮标高度
  }]
  console.log("🚀 ~ file: index.jsx ~ line 46 ~ markers", markers)

  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='查看地图' />
      </View>
      <scroll-view scrollY style='height: 100%;' >

        <View className='MapBox-centent'>
          <Map
            id='map'
            longitude={112.092169}
            latitude={32.694883}
            scale='12'
            markers={markers}
            bindmarkertap='markertap'
            style='width:100%;height:35vh;'
          >
          </Map>
          <View className='MapBox-centent-BodyArticle'>
            <Image style={{ width: '100%', borderRadius: '20px 20px 0px 0px' }} src={carsInfo.thumb} />
            <View className='CarsContent-TextBox'>
              <View className='CheckDetails-bottom-box-flaxBox-liftText'>
                <View className='CheckDetails-bottom-box-flaxBox-liftText-Titles'>{carsInfo.name}</View>
                <View className='CheckDetails-bottom-box-flaxBox-liftText-price'>{(carsInfo.price / 100).toFixed(2)}/<Text>亩</Text></View>
              </View>
              <View className='content-header-box-map-Info'>
                <View className='content-header-box-map-Info-liftCentent'>
                  <Image src={addresss} />
                  <View>距离当前位置{setMorKm(carsInfo.distance)}&gt;&gt;</View>
                </View>
              </View>
              <View className='content-header-box-map-Info-carsName'>{carsInfo.orgName}</View>
              <View className='startReserve-centent'>
                {/* <View className='articleTitle-box-Details'>
                  <Image src={decorate} />
                  <View>作业详情</View>
                  <Image src={decorate} />
                </View> */}

                <View className='startReserve-Bottom'>
                  <ButtontWX butText='预约' onClick={startReserve} butWidth={300} butHeight={49} butFontSize={16} butBorderRadius={49} />

                </View>
              </View>


            </View>
          </View>
        </View>
      </scroll-view>
    </View>
  )
})