gitMap

src/pages/CheckDetails/index.jsx

@@ -1,25 +1,73 @@
 import { useState } from "react"
-import { Textarea, View } from "@tarojs/components"
+import { Image, View, Text } from "@tarojs/components"
+import Taro from "@tarojs/taro"
 import CustomNav from "@/components/CustomNav"
+
 import ButtontWX from "@/components/ButtontWX"
+import decorate from "@/assets/icons/comm/decorate.png"
+import addresss from '@/assets/mineImgaes/addresss.png'//地址
+
 import './style.less'
 
 
 
 export default (props) => {
 
-  const [textAreaValue, setTextAreaValue] = useState('')
 
+  const startReserve = () => {
+    console.log('预约 startReserve',);
+  }
+
+  const goMapInfo = (res) => {
+    Taro.navigateTo({ url: `/pages/CheckMap/index?mapId=${res + 111}` })
 
+  }
 
   return (
     <View className='page-index'>
+
       <View className='index-navbar'>
         <CustomNav title='查看详情' />
       </View>
-      <View>
+      <scroll-view scrollY style='height: 100%;' >
 
-      </View>
-    </View>
+        <View >
+
+          <Image style={{ width: '100%' }} src='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' />
+
+          <View className='CarsContent-TextBox'>
+            <View className='CheckDetails-bottom-box-flaxBox-liftText'>
+              <View className='CheckDetails-bottom-box-flaxBox-liftText-Titles'>不知家收割机</View>
+              <View className='CheckDetails-bottom-box-flaxBox-liftText-price'>2188/<Text>公顷</Text></View>
+            </View>
+            <View className='content-header-box-map-Info' onClick={() => goMapInfo('222888')}>
+              <View className='content-header-box-map-Info-liftCentent'>
+                <Image src={addresss} />
+                <View>距离当前位置8.8公里&gt;&gt;</View>
+              </View>
+            </View>
+            <View className='content-header-box-map-Info-carsName'>农机手小李的收割机</View>
+            <View className='startReserve-centent'>
+              <View className='articleTitle-box-Details'>
+                <Image src={decorate} />
+                <View>作业详情</View>
+                <Image src={decorate} />
+              </View>
+              <Image style={{ width: '100%' }} src='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' />
+              <Image style={{ width: '100%' }} src='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' />
+              <Image style={{ width: '100%' }} src='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' />
+
+              <View className='startReserve-Bottom'>
+                <ButtontWX butText='预约' onClick={startReserve} butWidth={300} butHeight={49} butFontSize={16} butBorderRadius={49} />
+
+              </View>
+            </View>
+
+
+          </View>
+        </View>
+      </scroll-view>
+
+    </View >
   )
 }

src/pages/CheckDetails/style.less

@@ -1,18 +1,86 @@
-.components-page {
-  &-TextareaCentent {
-    width: 85%;
-    background: #fefefe;
-    border: 2px solid rgba(0, 0, 0, 0.2);
-    border-radius: 20px;
-    min-height: 25vh;
-    margin: 1em auto;
-    padding: 10px 37px;
+.CarsContent-TextBox {
+  padding: 40px 30px;
+  position: relative;
+  top: -13vh;
+  background-color: #fff;
+  border-radius: 40px 40px 0px 0px;
+  .CheckDetails-bottom-box-flaxBox-liftText {
+    width: 95%;
+
+    display: flex;
+    justify-content: space-between;
+
+    &-Titles {
+      text-overflow: ellipsis; //显示...
+      white-space: nowrap; //不换行
+      overflow: hidden;
+      font-size: 36px;
+      font-weight: bold;
+      color: #222222;
+    }
+    &-price {
+      font-size: 44px;
+      font-weight: 800;
+      color: #666666;
+      background: linear-gradient(180deg, #fa7878 0%, #b61515 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      > Text {
+        font-size: 25px;
+      }
+    }
+  }
+
+  .content-header-box-map-Info {
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    // justify-content: space-between;
+    padding: 30px 0 30px 0;
+    &-liftCentent {
+      display: flex;
+      align-items: center;
+      > Image {
+        width: 22px;
+        height: 27px;
+      }
+      > View {
+        padding-left: 15px;
+        font-size: 30px;
+        font-weight: 800;
+        color: #222222;
+      }
+    }
+    &-rightCententInfo {
+      font-size: 30px;
+      font-weight: 500;
+      color: #666666;
+    }
+    &-carsName {
+      font-size: 30px;
+      font-weight: bold;
+      color: #222222;
+    }
+  }
+
+  .articleTitle-box-Details {
+    display: flex;
+    font-size: 30px;
+    font-weight: bold;
+    color: #222222;
+    align-items: center;
+    justify-content: center;
+    margin-top: 32px;
+    > Image {
+      width: 33px;
+      height: 33px;
+      margin: auto 31px;
+    }
   }
-}
 
-.buton-bottom-Feedback {
-  width: 100%;
-  margin: 0 auto;
-  position: fixed;
-  bottom: 6vh;
+  .startReserve-Bottom {
+    position: absolute;
+    bottom: -3vh;
+    width: 92vw;
+  }
 }

src/pages/CheckMap/index.jsx

@@ -1,22 +1,87 @@
-import { useState } from "react"
-import { Textarea, View } from "@tarojs/components"
+import { useEffect } from "react"
+import { Map, View, Image, Text } from "@tarojs/components"
 import CustomNav from "@/components/CustomNav"
 import ButtontWX from "@/components/ButtontWX"
+import Taro from "@tarojs/taro"
+import decorate from "@/assets/icons/comm/decorate.png"
+import addresss from '@/assets/mineImgaes/addresss.png'//地址
 import './style.less'
 
 
-
 export default (props) => {
 
+  const $instance = Taro.getCurrentInstance()
+
+
+  useEffect(() => {
+    console.log($instance.router.params)
+
+  }, [])
+
+  const startReserve = () => {
+    console.log('预约 startReserve',);
+  }
+
+
+  const markers = [{ // 绘制浮标，传入JSON支持多个
+    // iconPath: "/images/location.png", 
+    id: 0,
+    latitude: 112.092169,// 经度
+    longitude: 32.694883,//纬度
+    width: 50, // 浮标宽度
+    height: 50 // 浮标高度
+  }]
 
   return (
     <View className='page-index'>
       <View className='index-navbar'>
         <CustomNav title='查看地图' />
       </View>
-      <View>
+      <scroll-view scrollY style='height: 100%;' >
 
-      </View>
+        <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='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' />
+            <View className='CarsContent-TextBox'>
+              <View className='CheckDetails-bottom-box-flaxBox-liftText'>
+                <View className='CheckDetails-bottom-box-flaxBox-liftText-Titles'>不知家收割机</View>
+                <View className='CheckDetails-bottom-box-flaxBox-liftText-price'>2188/<Text>公顷</Text></View>
+              </View>
+              <View className='content-header-box-map-Info'>
+                <View className='content-header-box-map-Info-liftCentent'>
+                  <Image src={addresss} />
+                  <View>距离当前位置8.8公里&gt;&gt;</View>
+                </View>
+              </View>
+              <View className='content-header-box-map-Info-carsName'>农机手小李的收割机</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>
   )
 }

src/pages/CheckMap/style.less

@@ -1,18 +1,95 @@
-.components-page {
-  &-TextareaCentent {
-    width: 85%;
-    background: #fefefe;
-    border: 2px solid rgba(0, 0, 0, 0.2);
-    border-radius: 20px;
-    min-height: 25vh;
-    margin: 1em auto;
-    padding: 10px 37px;
-  }
-}
+.MapBox-centent {
+  width: 100vw;
+  &-BodyArticle {
+    background: #fff;
+    position: relative;
+    top: -7vh;
+    .CarsContent-TextBox {
+      padding: 40px 30px;
+      position: relative;
+      top: -8vh;
+      background-color: #fff;
+      border-radius: 40px 40px 0px 0px;
+      .CheckDetails-bottom-box-flaxBox-liftText {
+        width: 95%;
+
+        display: flex;
+        justify-content: space-between;
+
+        &-Titles {
+          text-overflow: ellipsis; //显示...
+          white-space: nowrap; //不换行
+          overflow: hidden;
+          font-size: 36px;
+          font-weight: bold;
+          color: #222222;
+        }
+        &-price {
+          font-size: 44px;
+          font-weight: 800;
+          color: #666666;
+          background: linear-gradient(180deg, #fa7878 0%, #b61515 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          > Text {
+            font-size: 25px;
+          }
+        }
+      }
 
-.buton-bottom-Feedback {
-  width: 100%;
-  margin: 0 auto;
-  position: fixed;
-  bottom: 6vh;
+      .content-header-box-map-Info {
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        // justify-content: space-between;
+        padding: 30px 0 30px 0;
+        &-liftCentent {
+          display: flex;
+          align-items: center;
+          > Image {
+            width: 22px;
+            height: 27px;
+          }
+          > View {
+            padding-left: 15px;
+            font-size: 30px;
+            font-weight: 800;
+            color: #222222;
+          }
+        }
+        &-rightCententInfo {
+          font-size: 30px;
+          font-weight: 500;
+          color: #666666;
+        }
+        &-carsName {
+          font-size: 30px;
+          font-weight: bold;
+          color: #222222;
+        }
+      }
+
+      .articleTitle-box-Details {
+        display: flex;
+        font-size: 30px;
+        font-weight: bold;
+        color: #222222;
+        align-items: center;
+        justify-content: center;
+        margin-top: 32px;
+        > Image {
+          width: 33px;
+          height: 33px;
+          margin: auto 31px;
+        }
+      }
+
+      .startReserve-Bottom {
+        margin-top: 87px;
+        position: relative;
+        bottom: -3vh;
+        width: 92vw;
+      }
+    }
+  }
 }

src/pages/index/tabs/Homes.jsx

@@ -34,10 +34,20 @@ export default (props) => {
     console.log(e.detail.value)
   }
 
-  const goToCarsList = () => {
+  const goToCarsList = () => {//更多
     Taro.navigateTo({ url: '/pages/MoreCars/index' })
   }
 
+  const goCarsInfo = (res) => {
+    Taro.navigateTo({ url: `/pages/CheckDetails/index?id=${res}` })
+
+  }
+  const goMapInfo = (res) => {
+    Taro.navigateTo({ url: `/pages/CheckMap/index?mapId=${res + 111}` })
+
+  }
+
+
   return (
 
 
@@ -83,10 +93,10 @@ export default (props) => {
                   <View className='carsListImga-bottom-box-flaxBox-liftText-price'>{item.jiage}/<Text>公顷</Text></View>
                 </View>
                 <View className='carsListImga-bottom-box-flaxBox-rightBut'>
-                  <ButtontWX butText='预约' butWidth={80} butHeight={34} butFontSize={19} butBorderRadius={0} />
+                  <ButtontWX onClick={() => goCarsInfo(item.id)} butText='预约' butWidth={80} butHeight={34} butFontSize={19} butBorderRadius={0} />
                 </View>
               </View>
-              <View className='content-header-box-map'>
+              <View className='content-header-box-map' onClick={() => goMapInfo(item.mapId)}>
                 <View className='content-header-box-map-liftCentent'>
                   <Image src={addresss} />
                   <View>距离当前位置{item.carsLocation}公里</View>

src/pages/index/tabs/Mine.jsx

@@ -1,6 +1,6 @@
 
 import { View, Image } from "@tarojs/components"
-import { useDidShow } from "@tarojs/taro"
+import Taro from "@tarojs/taro"
 import { useState } from "react"
 import UserCellBox from '@/components/UserCellBox'
 import addresss from '@/assets/mineImgaes/addresss.png'//地址
@@ -15,12 +15,38 @@ import './MineCss/style.less'
 export default (props) => {
   const [isLoginBox, setIsLoginBox] = useState(false)
   const userList = [
-    { userTitle: '关于我们', userImg: aboutUs },
-    { userTitle: '版本更新', userImg: versionUpdate },
-    { userTitle: '帮助中心', userImg: helpCenter },
-    { userTitle: '意见反馈', userImg: feedbacks },
+    { userTitle: '关于我们', userImg: aboutUs, pageType: 0 },
+    { userTitle: '版本更新', userImg: versionUpdate, pageType: 1 },
+    { userTitle: '帮助中心', userImg: helpCenter, pageType: 2 },
+    { userTitle: '意见反馈', userImg: feedbacks, pageType: 3 },
   ]
 
+
+  const goToPages = (res) => {
+    switch (res) {
+      case 0:
+        Taro.navigateTo({ url: '/pages/AboutUsPage/index' })
+
+        break;
+      case 1:
+        Taro.navigateTo({ url: '/pages/NewVersionUpdatePage/index' })
+
+        break;
+      case 2:
+        Taro.navigateTo({ url: '/pages/HelpCenterInfo/index' })
+
+        break;
+      case 3:
+        Taro.navigateTo({ url: '/pages/FeedbackText/index' })
+
+        break;
+
+      default:
+        break;
+    }
+  }
+
+
   return (
 
     <scroll-view scrollY style='height: 100%;' >
@@ -61,7 +87,7 @@ export default (props) => {
           {
             userList.map((item, index) => {
               return (
-                <View key={index} className='User-Setup-background-wxInfo-InfoCell'>
+                <View key={index} className='User-Setup-background-wxInfo-InfoCell' onClick={() => goToPages(item.pageType)}>
                   <Image className='User-Setup-background-wxInfo-InfoCell-imgae' src={item.userImg} />
                   <View className='box-flex'>
                     <View className='User-Setup-background-wxInfo-InfoCell-text'>{item.userTitle}</View>