machinery-miniapp/src/pages/index/tabs/Homes.jsx

import { View, Swiper, Image, SwiperItem, Text, Input } from "@tarojs/components"
import ButtontWX from '@/components/ButtontWX'
import Taro from "@tarojs/taro"
import addresss from '@/assets/mineImgaes/addresss.png'//地址
import searchs from '@/assets/homesImgaes/searchs.png'//搜索图片
import carsListImga from '@/assets/homesImgaes/carsListImga.png'//农机列表图片



import './HomesCss/style.less'

export default (props) => {
  // const { SwiperItem } = Swiper

  const carsList = [
    { carsName: '联合收割机', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg', jiage: '300', carsLocation: '3.9' },
    { carsName: '水稻播种机', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd031719b1.jpg', jiage: '300', carsLocation: '3.9' },
    { carsName: '秸秆统一处理 型号：GB2312', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd03201503.jpg', jiage: '免费', carsLocation: '3.9' },
    { carsName: '花生稻子小麦收割一体机', carsUrl: 'http://img3.jc001.cn/img/001/1/1512/15566fd0324f649.jpg', jiage: '550', carsLocation: '3.9' },
    { carsName: '拖拉机', carsUrl: 'https://image.cnhnb.com/image/jpg/miniapp/2020/03/26/ef945970d2cc4948b61d45ce57ac1179.jpg', jiage: '180', carsLocation: '3.9' },
    { carsName: '自行车', carsUrl: 'https://image.cnhnb.com/image/jpg/miniapp/2020/03/26/e8745759793d48398f82e6658186686a.jpg', jiage: '20', carsLocation: '3.9' },
  ]

  const imglist = [
    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
    { url: 'https://profile.csdnimg.cn/3/1/5/0_qq_42551866' },
  ]

  const handleSearch = (e) => {
    console.log(e.detail.value)
  }

  const goToCarsList = () => {//更多
    Taro.navigateTo({ url: '/pages/MoreCars/index' })

  }

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

  }
  const goCarsInfo = (res) => {
    Taro.navigateTo({ url: `/pages/CheckDetails/index?id=${res}` })

  }
  const goMapInfo = (res) => {
    Taro.navigateTo({ url: `/pages/CheckMap/index?mapId=${res + 111}` })

  }


  return (


    <scroll-view className='scrollView' scrollY style='height: 100%;' >
      <View className='heads-top-box'>
        <View className='heads-top-box-left'>
          <Image src={addresss} className='heads-top-box-left-addresssImg' />
          <Text>邓州市</Text>
          <View className='heads-top-box-left-addresssImg-DownIcon' />
        </View>
        <View className='heads-content-searchClass'>
          <Input type='text' className='heads-content-searchClass-searchInput' onBlur={handleSearch} placeholder='搜索关键字查询订单' />
          <Image src={searchs} className='heads-content-searchClass-searchInput-searchImg' />
        </View>
      </View>
      <Swiper
        circular
        autoplay
        className='swiper-box'
      >
        {imglist.map((item, inx) => (
          <SwiperItem key={inx}>
            <Image src={item.url} mode='widthFix' className='storeImage' />
          </SwiperItem>
        ))}
      </Swiper>
      <View className='content-header-box'>
        <View className='content-header-box-liftCentent'>
          <Image src={carsListImga} />
          <View>农机列表</View>
        </View>
        <View onClick={goToCarsList} className='content-header-box-rightCentent'>更多&gt;&gt;</View>
      </View>

      {
        carsList.map((item, index) => {
          return (
            <View key={index} className='carsListImga-bottom-box'>
              <Image src={item.carsUrl} onClick={() => goCarsInfo(item.id)} />
              <View className='carsListImga-bottom-box-flaxBox'>
                <View className='carsListImga-bottom-box-flaxBox-liftText'>
                  <View className='carsListImga-bottom-box-flaxBox-liftText-Titles'>{item.carsName}</View>
                  <View className='carsListImga-bottom-box-flaxBox-liftText-price'>{item.jiage}/<Text>公顷</Text></View>
                </View>
                <View className='carsListImga-bottom-box-flaxBox-rightBut'>
                  <ButtontWX onClick={startReserve} butText='预约' butWidth={80} butHeight={34} butFontSize={19} butBorderRadius={0} />
                </View>
              </View>
              <View className='content-header-box-map' onClick={() => goMapInfo(item.mapId)}>
                <View className='content-header-box-map-liftCentent'>
                  <Image src={addresss} />
                  <View>距离当前位置{item.carsLocation}公里</View>
                </View>
                <View className='content-header-box-map-rightCentent'>进入地图&gt;&gt;</View>
              </View>
            </View>
          )
        })
      }

    </scroll-view>
  )
}