githu

src/components/ButtontWX/index.jsx

 import './style.less'
 
 export default (props) => {
-  const { butText, butWidth, butHeight, butFontSize, butBorderRadius, onClick, formType, disabled } = props
+  const { butText, butWidth, butHeight, butFontSize, butBorderRadius, onClick, formType, disabled, opacity } = props
   let butStyle = {
     width: `${butWidth || 100}px`,
     height: `${butHeight || 40}px`,
     borderRadius: `${butBorderRadius || 0}px`,
     fontSize: `${butFontSize || 20}px`,
+    opacity: `${opacity || '1'}`
 
   }
   let butStyle2 = {

src/pages/CheckDetails/index.config.js

+
+export default {
+  navigationBarTitleText: '查看详情',
+  navigationStyle: 'custom',
+  disableScroll: true,
+  usingComponents: {
+  }
+
+
+}

src/pages/CheckDetails/index.jsx

+import { useState } from "react"
+import { Textarea, View } from "@tarojs/components"
+import CustomNav from "@/components/CustomNav"
+import ButtontWX from "@/components/ButtontWX"
+import './style.less'
+
+
+
+export default (props) => {
+
+  const [textAreaValue, setTextAreaValue] = useState('')
+
+
+
+  return (
+    <View className='page-index'>
+      <View className='index-navbar'>
+        <CustomNav title='查看详情' />
+      </View>
+      <View>
+
+      </View>
+    </View>
+  )
+}

src/pages/CheckDetails/style.less

+.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;
+  }
+}
+
+.buton-bottom-Feedback {
+  width: 100%;
+  margin: 0 auto;
+  position: fixed;
+  bottom: 6vh;
+}

src/pages/CheckMap/index.jsx

+import { useState } from "react"
+import { Textarea, View } from "@tarojs/components"
+import CustomNav from "@/components/CustomNav"
+import ButtontWX from "@/components/ButtontWX"
+import './style.less'
+
+
+
+export default (props) => {
+
+
+  return (
+    <View className='page-index'>
+      <View className='index-navbar'>
+        <CustomNav title='查看地图' />
+      </View>
+      <View>
+
+      </View>
+    </View>
+  )
+}

src/pages/CheckMap/style.less

+.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;
+  }
+}
+
+.buton-bottom-Feedback {
+  width: 100%;
+  margin: 0 auto;
+  position: fixed;
+  bottom: 6vh;
+}

src/pages/MoreCars/index.jsx

 
 
-import { View, Image, Input, Button } from "@tarojs/components"
+import {
+  View, Image, Input, Picker,
+  Text
+} from "@tarojs/components"
+
+import { useState } from "react"
 import CustomNav from "@/components/CustomNav"
 import searchs from '@/assets/homesImgaes/searchs.png'//搜索图片
-
+import ButtontWX from '@/components/ButtontWX'
+import addresss from '@/assets/mineImgaes/addresss.png'//地址
 
 import './style.less'
 
 
 export default (props) => {
 
+  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 handleSearch = (e) => {
     console.log(e.detail.value)
   }
 
+  const [distanceValue, setDistanceValue] = useState('距离')
+  const distanceValueState = {
+    selector: ['由近到远', '由远到近'],
+    selectorChecked: distanceValue,
+  }
+  const onChangeDistance = e => {
+    setDistanceValue(distanceValueState.selector[e.detail.value])
+  }
+
 
 
+  const [selectValueType, setselectValueType] = useState('类型')
+  const selectValueTypeState = {
+    selector: ['收割机', '水稻机', '清障机', '战斗机', '公鸡'],
+    selectorChecked: selectValueType,
+  }
+
+
+  const onChangeType = e => {
+    setselectValueType(selectValueTypeState.selector[e.detail.value])
+  }
+
 
   return (
     <View className='page-index'>
           <Input type='text' className='heads-content-searchClass-abcc-searchInput' onBlur={handleSearch} placeholder='搜索关键字查询订单' />
           <Image src={searchs} className='heads-content-searchClass-abcc-searchInput-searchImg' />
         </View>
-
-
-
+        <View className='pick-box'>
+
+          <Picker className='picker-box' mode='selector' range={distanceValueState.selector} onChange={onChangeDistance}>
+            <View className='picker-text'>
+              {distanceValueState.selectorChecked}
+              <View className='heads-top-box-left-addresssImg-DownIcon-Picker' />
+            </View>
+          </Picker>
+          <Picker className='picker-box' mode='selector' range={selectValueTypeState.selector} onChange={onChangeType}>
+            <View className='picker-text'>
+              {selectValueTypeState.selectorChecked}
+              <View className='heads-top-box-left-addresssImg-DownIcon-Picker' />
+            </View>
+          </Picker>
+        </View>
+        {/* 内容区域 */}
+
+        {
+          carsList.map((item, index) => {
+            return (
+              <View key={index} className='carsListImga-bottom-box-copyStyleless'>
+                <Image src={item.carsUrl} />
+                <View className='carsListImga-bottom-box-copyStyleless-flaxBox'>
+                  <View className='carsListImga-bottom-box-copyStyleless-flaxBox-liftText'>
+                    <View className='carsListImga-bottom-box-copyStyleless-flaxBox-liftText-Titles'>{item.carsName}</View>
+                    <View className='carsListImga-bottom-box-copyStyleless-flaxBox-liftText-price'>{item.jiage}/<Text>公顷</Text></View>
+                  </View>
+                  <View className='carsListImga-bottom-box-copyStyleless-flaxBox-rightBut'>
+                    <ButtontWX butText='预约' butWidth={80} butHeight={34} butFontSize={19} butBorderRadius={0} />
+                  </View>
+                </View>
+                <View className='content-header-box-map-copyStyleless'>
+                  <View className='content-header-box-map-copyStyleless-liftCentent'>
+                    <Image src={addresss} />
+                    <View>距离当前位置{item.carsLocation}公里</View>
+                  </View>
+                  <View className='content-header-box-map-copyStyleless-rightCentent'>进入地图&gt;&gt;</View>
+                </View>
+              </View>
+            )
+          })
+        }
       </scroll-view>
     </View>
   )

src/pages/MoreCars/style.less

 .heads-content-searchClass-abcc {
   display: inline-block;
   position: relative;
-  width: 95%;
+  width: 92%;
+  margin-top: 30px;
   text-align: center;
-  flex: 1;
+  left: 4vw;
   &-searchInput {
     background: #f8f8f8;
     border-radius: 34px;
     top: 19px;
   }
 }
+
+.pick-box {
+  width: 93vw;
+  margin: 0 auto;
+  text-align: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  margin: 29px auto 32px auto;
+  padding-bottom: 18px;
+
+  .picker-box {
+    display: inline-block;
+    .picker-text {
+      line-height: 73px;
+      text-align: center;
+      border-radius: 42px;
+      font-size: 30px;
+      font-weight: 700;
+      // position: relative;
+      top: 34px;
+      height: 9.9vw;
+      left: 12px;
+      padding-right: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .picker-text-line {
+        color: #808080;
+        padding-left: 6px;
+        font-weight: 100;
+      }
+      .heads-top-box-left-addresssImg-DownIcon-Picker {
+        border-top: 7px solid #000;
+        border-left: 7px solid transparent;
+        border-right: 7px solid transparent;
+        margin-left: 15px;
+      }
+    }
+  }
+}
+
+.carsListImga-bottom-box-copyStyleless {
+  margin: 30px auto 0 auto;
+  background: #f2f2f2;
+  width: 93vw;
+  > Image {
+    width: 100%;
+    margin: 0 auto;
+  }
+  &-flaxBox {
+    width: 94%;
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: 40px;
+    margin-bottom: 38px;
+    &-liftText {
+      width: 95%;
+
+      &-Titles {
+        width: 95%;
+
+        text-overflow: ellipsis; //显示...
+        white-space: nowrap; //不换行
+        overflow: hidden;
+        font-size: 36px;
+        font-weight: bold;
+        color: #222222;
+      }
+      &-price {
+        margin-top: 44px;
+        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;
+        }
+      }
+    }
+    &-rightBut {
+      align-items: center;
+      margin: 0 auto;
+    }
+  }
+  .content-header-box-map-copyStyleless {
+    width: 94%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 60px;
+    &-liftCentent {
+      display: flex;
+      align-items: center;
+      > Image {
+        width: 22px;
+        height: 27px;
+      }
+      > View {
+        padding-left: 15px;
+        font-size: 30px;
+        font-weight: 800;
+        color: #222222;
+      }
+    }
+    &-rightCentent {
+      font-size: 30px;
+      font-weight: 500;
+      color: #666666;
+    }
+  }
+}

src/pages/UserLogin/index.jsx

 export default (props) => {
 
   const [countCenter, setCountCenter] = useState({
-    count: 10,
+    count: 60,
     toast: false,
     show_btn: false,
     code_ts: '获取验证码'
 
   const getCode = (r) => {
     if (InputCodeValue === '' || !(/^1[3456789]\d{9}$/.test(InputCodeValue))) {
-      // 这里验证一下号码格式是否正确，为空或者不正常都提示一下，然后激活提示控件true，其他的框架提示控件同理
       console.log('提示')
       Taro.showToast({
         title: '手机号码有误',
       })
 
     } else {
-      // 这里写一个定时器就可以去更新灰色按钮的内容而且show_btn是false时会出现灰色按钮，当倒计时结束又变成可以触发的按钮
       let count = countCenter.count
       const timer = setInterval(() => {
         setCountCenter({
           count: (count--),
           show_btn: true,
           code_ts: count + '秒后重发'
-        }, () => {
-          if (count == 0) {
-            clearInterval(timer)
-            setCountCenter({
-              show_btn: false,
-              count: 60,
-              code_ts: '获取验证码'
-            })
-          }
         })
+        if (count == 0) {
+          setCountCenter({
+            show_btn: false,
+            count: 60,
+            code_ts: '获取验证码'
+          })
+          clearInterval(timer)
+
+        }
+
       }, 1000)
     }
   }
           <View className='loginPhone-box' >
             <View className='loginPhone-box-loginPhoneView'>+86</View>
             <Input maxlength={11} placeholder='请输入手机号码' type={Number} onInput={InputCode} />
-            <ButtontWX disabled={countCenter.show_btn} onClick={getCode} butText={countCenter.code_ts} butWidth={94} butHeight={34} butFontSize={15} butBorderRadius={10} />
+            <ButtontWX opacity={countCenter.show_btn ? '0.7' : '11'} disabled={countCenter.show_btn} onClick={getCode} butText={countCenter.code_ts} butWidth={94} butHeight={34} butFontSize={15} butBorderRadius={10} />
           </View>
           <View className='loginPhone-box'>
             <View className='loginPhone-box-loginPhoneView'>

src/routes.js

     page: 'pages/MoreCars/index',
   },
 
+  {
+    title: '查看详情',//农机详情
+    page: 'pages/CheckDetails/index',
+  },
+  {
+    title: '查看地图',
+    page: 'pages/CheckMap/index',
+  },
 ];