Carsclass

src/components/CarsListContent/index.jsx

@@ -6,7 +6,7 @@ import ButtontWX from '@/components/ButtontWX'
 import withLayout from '@/layouts'
 import addresss from '@/assets/mineImgaes/addresss.png'//地址
 import { useModel } from "@/store"
-
+import ListPlaceholder from "@/components/ListPlaceholder"
 import { getMachinery, } from "@/services/homes"
 
 
@@ -49,7 +49,7 @@ export default withLayout((props) => {
 
     <>
       {
-        carsList.map((item, index) => {
+        carsList != [] ? carsList.map((item, index) => {
           return (
             <View key={index} className='carsListImga-bottom-box'>
               <Image src={item.thumb} onClick={() => goCarsInfo(item.machineryId)} />
@@ -71,7 +71,7 @@ export default withLayout((props) => {
               </View>
             </View>
           )
-        })
+        }) : <ListPlaceholder title='暂无农机信息' />
       }
 
     </>

src/components/ListPlaceholder/index.jsx

@@ -0,0 +1,17 @@
+import { View, Image } from '@tarojs/components'
+import ListBack from '@/assets/icons/comm/ListBack.png'
+
+import './style.less'
+
+
+export default (props) => {
+  const { title } = props
+
+
+  return (
+    <View className='ListBack-box'>
+      <Image src={ListBack} />
+      <View>{title}</View>
+    </View>
+  )
+}

src/components/ListPlaceholder/style.less

@@ -0,0 +1,18 @@
+.ListBack-box {
+  width: 90%;
+  padding: 78px 0;
+  margin: 3em auto;
+  text-align: center;
+  background: #ffffff;
+  box-shadow: 0px 0px 44px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 40px;
+  > Image {
+    width: 220px;
+    height: 264px;
+  }
+  > View {
+    font-size: 34px;
+    font-weight: bold;
+    color: #b4b4b4;
+  }
+}

src/components/LoginModel/index.jsx

@@ -0,0 +1,161 @@
+
+import { useState } from 'react'
+import Taro from '@tarojs/taro'
+import { getUserQcode, setUserPhone } from '@/services/login'
+
+import { View, Image, Input, Text, Form } from '@tarojs/components'
+import CustomNav from '@/components/CustomNav'
+import ButtontWX from '@/components/ButtontWX'
+import checkedImg from '@/assets/lolginImages/checkedImg.png'
+import unselectedImg from '@/assets/lolginImages/unselectedImg.png'
+import { useModel } from '@/store'
+
+
+import './style.less'
+
+
+export default (props) => {
+
+  const { isLoginVisible } = props
+
+  const { person, setPerson } = useModel('userData')
+
+
+  const [countCenter, setCountCenter] = useState({
+    count: 60,
+    toast: false,
+    show_btn: false,
+    code_ts: '获取验证码'
+  })
+
+  const [checkImage, setCheckImage] = useState(false)
+
+  const [InputPhoneValue, setInputPhoneValue] = useState('18082043755')
+  const [InputCodeValue, setInputCodeValue] = useState('375501')
+
+  const onInputPhone = (r) => {
+    setInputPhoneValue(r?.detail?.value)
+    console.log("🚀 ~ file: index.jsx ~ line 26 ~ InputCodeValue", InputPhoneValue)
+
+  }
+  const onInputCode = (r) => {
+    setInputCodeValue(r?.detail?.value)
+
+  }
+  //获取验证码
+  const getCode = (r) => {
+    if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
+      console.log('提示')
+      Taro.showToast({
+        title: '手机号码有误',
+        icon: 'none',
+        duration: 2000
+      })
+
+    } else {
+      getUserQcode({ phone: InputPhoneValue }).then(() => {
+        Taro.showToast({
+          title: '验证码发送成功',
+          icon: 'none',
+          duration: 2000
+        })
+      })
+      let count = countCenter.count
+      const timer = setInterval(() => {
+        setCountCenter({
+          count: (count--),
+          show_btn: true,
+          code_ts: count + '秒后重发'
+        })
+        if (count == 0) {
+          setCountCenter({
+            show_btn: false,
+            count: 60,
+            code_ts: '获取验证码'
+          })
+          clearInterval(timer)
+
+        }
+
+      }, 1000)
+    }
+  }
+
+
+
+  const getUserLogin = () => {
+    if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
+      console.log('提示')
+      Taro.showToast({
+        title: '手机号或验证码有误',
+        icon: 'none',
+        duration: 2000
+      })
+    } else {
+      if (!checkImage) {
+        Taro.showToast({
+          title: '下方协议未勾选',
+          icon: 'none',
+          duration: 2000
+        })
+      } else {
+        setUserPhone(person.personId, { captcha: InputCodeValue, phone: InputPhoneValue }).then((e) => {
+          console.log('e', e);
+          setPerson({ ...person, phone: InputPhoneValue })
+          Taro.reLaunch({ url: '/pages/index/index' });
+        })
+        // console.log('person', person);
+      }
+
+    }
+
+  }
+
+
+
+  return (
+    <>
+      {
+        isLoginVisible ? <View className='page-index  ' style={{ position: 'absolute', zIndex: '29999' }
+        } >
+          <View className='index-navbar'>
+            <CustomNav title='登陆' home />
+          </View>
+          <View className='loginBackImg-box' >
+            <Image src={require("@/assets/lolginImages/backLogin.png")} />
+
+            <View className='loginhallo-text'>
+              <View>您好！</View>
+              <View>欢迎进入农户端小程序！</View>
+            </View>
+            <View>
+              <View className='loginPhone-box' >
+                <View className='loginPhone-box-loginPhoneView'>+86</View>
+                <Input maxlength={11} placeholder='请输入手机号码' type={Number} value={InputPhoneValue} onInput={onInputPhone} />
+
+                <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'>
+                  <Image style={{ width: '16px', height: '20px', margin: 'auto 2.8vw auto 2.8vw' }} src={require("@/assets/lolginImages/phoneCode.png")} />
+                </View>
+                <Input maxlength={10} placeholder='请输入验证码' value={InputCodeValue} onInput={onInputCode} />
+              </View>
+            </View>
+          </View>
+          <View className='BottomtButrelative'  >
+            <ButtontWX onClick={getUserLogin} butText='登陆' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
+          </View>
+          <View className='bottom-agreement'>
+            <Image src={!checkImage ? checkedImg : unselectedImg} onClick={() => { setCheckImage(!checkImage) }} />
+            <View>
+              请认真查看<Text style={{ color: '#CE3800' }}>文本协议/隐私政策</Text>，确认之后选择此项！
+            </View>
+          </View>
+
+        </View >
+          : <></>
+      }
+    </>
+  )
+}

src/components/LoginModel/style.less

@@ -0,0 +1,72 @@
+.loginBackImg-box {
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+
+  > Image {
+    height: 100%;
+    width: 100%;
+
+    position: absolute;
+    top: 0;
+  }
+
+  .loginhallo-text {
+    position: relative;
+    margin: 98px 0 80px 30px;
+  }
+  .loginhallo-text:nth-child(1) {
+    font-size: 66px;
+    font-weight: bold;
+    color: #333333;
+  }
+  .loginhallo-text:nth-child(2) {
+    font-size: 54px;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .loginPhone-box {
+    width: 93%;
+    height: 108px;
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    padding-bottom: 12px;
+
+    &-loginPhoneView {
+      font-size: 38px;
+      font-weight: 500;
+      color: #333333;
+      height: 39px;
+      line-height: 39px;
+      padding-right: 20px;
+      margin-right: 31px;
+      border-right: 3px solid #000;
+    }
+  }
+}
+.BottomtButrelative {
+  position: relative;
+  bottom: 5vh;
+}
+
+.bottom-agreement {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 26px;
+  color: #2a2a2a;
+  margin-left: 30px;
+  margin-bottom: 60px;
+  // height: 2vh;
+  // bottom: 8vh;
+  > Image {
+    width: 28px;
+    height: 28px;
+    margin-right: 11px;
+  }
+}

src/components/Spin/index.jsx

@@ -0,0 +1,34 @@
+import { View } from '@tarojs/components'
+import './style.less'
+
+export default (props) => {
+  const { size = '160rpx', background = 'transparent' } = props
+  const wrapperStyle = {
+    width: size,
+    height: size,
+    background,
+  }
+
+  const leftBarStyle = {
+    'border-top-right-radius': size,
+    'border-bottom-right-radius': size,
+  }
+
+  const rightBarStyle = {
+    'border-top-left-radius': size,
+    'border-bottom-left-radius': size,
+  }
+
+  return (
+    <View className='spinbox'>
+      <view className='spin' style={wrapperStyle}>
+        <view className='mask-left'>
+          <view className='spin-bar' style={leftBarStyle}></view>
+        </view>
+        <view className='mask-right'>
+          <view className='spin-bar' style={rightBarStyle}></view>
+        </view>
+      </view>
+    </View>
+  )
+}

src/components/Spin/style.less

@@ -0,0 +1,123 @@
+@width: 160px;
+
+.spinbox {
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  padding-top: 30vh;
+  display: flex;
+  .spin {
+    width: @width;
+    height: @width;
+    border-radius: 100%;
+    display: inline-block;
+    position: relative;
+    animation: spin-rotate 4s linear infinite;
+    box-sizing: border-box;
+
+    view {
+      box-sizing: border-box;
+      position: absolute;
+    }
+
+    .mask-left,
+    .mask-right {
+      top: 0;
+      width: calc(50% + 1px);
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .mask-left {
+      left: 0;
+
+      .spin-bar {
+        left: 100%;
+        border-top-right-radius: @width;
+        border-bottom-right-radius: @width;
+        border-left: 0;
+        transform-origin: center left;
+        animation: spin-rotate-right 1.2s cubic-bezier(0.25, 0.5, 0.25, 1) 0.6s
+            infinite,
+          spin-color 2s linear infinite;
+      }
+    }
+
+    .mask-right {
+      right: 0;
+
+      .spin-bar {
+        left: -100%;
+        border-top-left-radius: @width;
+        border-bottom-left-radius: @width;
+        border-right: 0;
+        transform-origin: center right;
+        animation: spin-rotate-right 1.2s cubic-bezier(1, 0.25, 0.5, 0.25)
+            infinite,
+          spin-color 2s linear infinite;
+      }
+    }
+
+    .spin-bar {
+      float: left;
+      width: 100%;
+      height: 100%;
+      border-width: 4px;
+      border-style: solid;
+    }
+  }
+}
+@keyframes spin-rotate-right {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-rotate-left {
+  0% {
+    transform: rotate(180deg);
+  }
+
+  50% {
+    transform: rotate(360deg);
+  }
+
+  100% {
+    transform: rotate(540deg);
+  }
+}
+
+@keyframes spin-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-color {
+  0%,
+  100% {
+    border-color: #d62d20;
+  }
+  40% {
+    border-color: #0057e7;
+  }
+  60% {
+    border-color: #008744;
+  }
+  80%,
+  90% {
+    border-color: #ffa700;
+  }
+}

src/layouts/index.jsx

@@ -1,62 +1,84 @@
 
 
 import useRouter from '@/utils/hooks/useRouter'
-import Taro from '@tarojs/taro'
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useModel } from '@/store'
 
+import LoginModel from '@/components/LoginModel'
 import useLogin from '@/utils/hooks/useLogin'
+import Spin from "@/components/Spin";
+
 
 
 export default (Child) => (props) => {
   const { person } = useModel('userData')
   const router = useRouter()
 
-  const { path } = router
 
-  useLogin()
+  const { loginVisible } = useLogin()
 
 
-  // Taro.useReady(()=>{
-  //   useLogin(person,router)
-  // })
-  // useEffect(()=>{
-  //   useLogin(person,router)
-  // },[person, person?.phone, router, router?.path])
 
   // 确保执行过 login 方法，拿到了 person
   const isLoged = useMemo(() => !!person?.personId, [person?.personId])
 
-  return isLoged ? <Child {...props} router={router} /> : <></>
+  return (
+    <>
+      {!isLoged && <Spin />}
+      {
+        isLoged && !loginVisible && <Child {...props} router={router} />
+      }
+      {
+        isLoged && loginVisible && <LoginModel isLoginVisible={loginVisible} />
+      }
+    </>
+  )
+
+
 }
 
 
 
 
 
+
+
+
+
+// import useRouter from '@/utils/hooks/useRouter'
+// import Taro from '@tarojs/taro'
+// import { useState, useMemo } from 'react'
+// import { useModel } from '@/store'
+// import LoginModel from '@/components/LoginModel'
+// import useLogin from '@/utils/hooks/useLogin'
+
+
 // export default (Child) => (props) => {
 //   const { person } = useModel('userData')
 //   const router = useRouter()
+//   const [isShow, setIsShow] = useState(false)
 
-//   const { path } = router
 
-//   useEffect(() => {
-//     if (!person?.phone) {
-//       if (path != '/pages/index/index' && path !== '/pages/UserLogin/index') {
-//         Taro.navigateTo({ url: `/pages/UserLogin/index?id${1}` })
-//       }
-//     }
-//     console.log("🚀 ~ file: index.jsx ~ line 11 ~ person", person, path)
+//   const { path } = router
 
-//     // if (path != '/pages/index/index' && !person?.phone) {
-//     //   Taro.navigateTo({ url: `/pages/userInfo/index?id${1}` })
-//     // }
-//   }, [path, person?.phone])
+//   useLogin()
+//   console.log("🚀 ~ file: index.jsx ~ line 20 ~   useLogin().abac", useLogin())
 
+//   const isShowFun = () => {
+//     setIsShow(true)
 
+//   }
+//   // Taro.useReady(()=>{
+//   //   useLogin(person,router)
+//   // })
+//   // useEffect(()=>{
+//   //   useLogin(person,router)
+//   // },[person, person?.phone, router, router?.path])
 
+//   // 确保执行过 login 方法，拿到了 person
+//   const isLoged = useMemo(() => !!person?.personId, [person?.personId])
 
+//   return isLoged ? <Child {...props} router={router} /> : <LoginModel isLoginVisible={isShow} />
+// }
 
-//   return <Child {...props} router={router} />
 
-// }

src/pages/MoreCars/CarTypeList.jsx

@@ -0,0 +1,76 @@
+
+import { View, Swiper, Image, SwiperItem, Text, Input } from "@tarojs/components"
+import { useEffect, useState, useMemo } from "react"
+import Taro, { useReachBottom } from "@tarojs/taro"
+import ButtontWX from '@/components/ButtontWX'
+import withLayout from '@/layouts'
+import addresss from '@/assets/mineImgaes/addresss.png'//地址
+import { useModel } from "@/store"
+import ListPlaceholder from "@/components/ListPlaceholder"
+
+
+import './CarTypeList.less'
+
+export default withLayout((props) => {
+  const { csrsListType } = props
+  console.log("🚀 ~ file: index.jsx ~ line 17 ~ withLayout ~ csrsListType", csrsListType)
+  const { sserLocation } = useModel('userData')
+
+  // const { carsList } = props
+
+  const [carsList, setCarsList] = useState([])
+  console.log("🚀 ~ file: index.jsx ~ line 23 ~ withLayout ~ carsList", carsList)
+
+  const [caryType, setCaryType] = useState(false)
+
+
+  const startReserve = (res) => {
+    Taro.navigateTo({ url: `/pages/OrderConfirmation/index?id=${res}` })
+
+  }
+  const goCarsInfo = (res) => {
+    Taro.navigateTo({ url: `/pages/CheckDetails/index?id=${res}&location=${sserLocation}` })
+
+  }
+  const goMapInfo = (res) => {
+    Taro.navigateTo({ url: `/pages/CheckMap/index?id=${res}&location=${sserLocation}` })
+
+
+  }
+
+
+  return (
+
+
+    <>
+      {
+        csrsListType == [] ? csrsListType.map((item, index) => {
+          return (
+            <View key={index} className='carsListImga-bottom-box'>
+              <Image src={item.thumb} onClick={() => goCarsInfo(item.machineryId)} />
+              <View className='carsListImga-bottom-box-flaxBox'>
+                <View className='carsListImga-bottom-box-flaxBox-liftText'>
+                  <View className='carsListImga-bottom-box-flaxBox-liftText-Titles'>{item.name}</View>
+                  <View className='carsListImga-bottom-box-flaxBox-liftText-price'>{item.price}/<Text>公顷</Text></View>
+                </View>
+                <View className='carsListImga-bottom-box-flaxBox-rightBut'>
+                  <ButtontWX onClick={() => startReserve(item.machineryId)} butText='预约' butWidth={80} butHeight={34} butFontSize={19} butBorderRadius={0} />
+                </View>
+              </View>
+              <View className='content-header-box-map' onClick={() => goMapInfo(item.machineryId)}>
+                <View className='content-header-box-map-liftCentent'>
+                  <Image src={addresss} />
+                  <View>距离当前位置公里</View>
+                </View>
+                <View className='content-header-box-map-rightCentent'>进入地图&gt;&gt;</View>
+              </View>
+            </View>
+          )
+        }) : <ListPlaceholder title='该分类暂无农机！' />
+
+      }
+
+
+    </>
+  )
+})

src/pages/MoreCars/CarTypeList.less

@@ -0,0 +1,75 @@
+.carsListImga-bottom-box {
+  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 {
+    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/MoreCars/index.jsx

@@ -1,16 +1,16 @@
 
 
-import {
-  View, Image, Input, Picker,
-  Text
-} from "@tarojs/components"
+import { View, Image, Input, Picker, Text } from "@tarojs/components"
+import { useModel } from "@/store"
 
-import { useState } from "react"
+import withLayout from '@/layouts'
+import { useState, useEffect } from "react"
 import CustomNav from "@/components/CustomNav"
 import searchs from '@/assets/homesImgaes/searchs.png'//搜索图片
-import { getMachineryType } from "@/services/homes"
-import CarsListContent from "@/components/CarsListContent"
-import withLayout from '@/layouts'
+import { getMachineryType, getMachinery } from "@/services/homes"
+import CarTypeList from "./CarTypeList"
+
+
 
 import './style.less'
 
@@ -18,37 +18,80 @@ import './style.less'
 
 
 export default withLayout((props) => {
-  const [activeTab, setActiveTab] = useState(1)
+  const [activeTab, setActiveTab] = useState(0)
+  const { sserLocation } = useModel('userData')
+
+  const [tabs, setTabs] = useState([])
+  const [csrsListType, steCsrsListType] = useState([])
+  const [activeNames, setActiveNames] = useState([])//全部分类
+  const [classId, setClassId] = useState([])//分类ID
+
+
+
+  const [tabIndex, steTabIndex] = useState(0)
 
 
   const handleSearch = (e) => {
-    console.log(e?.detail?.value)
   }
 
-  const tabs = [
-    {
-      title: '全部',
-    },
-    {
-      title: '收割机',
-    },
-    {
-      title: '水稻机',
-    },
-    {
-      title: '战斗机',
-    },
-    {
-      title: '清障机',
-    },
-  ]
 
 
 
+  // const ClassificationComparison = () => {
+  //   for (let item1 of tabs) {
+  //     let _index = activeNames.findIndex(c => c.name == item1.title)
+  //     if (_index > -1) {
+  //       item1.count = activeNames[_index].typeId;
+  //       console.log('saleTypes=tempSales //这', activeNames[_index].typeId);
+
+  //       // classId.push({ id: item1.count })
+
+  //     }
+  //   }
+
+
+
+  // }
+
+  useEffect(() => {
+    if (tabIndex !== 0) {
+      // ClassificationComparison()
+      activeNames.map((item) => {
+        classId.push({ id: item.typeId })
+
+      })
+      getMachinery(sserLocation, { typeId: classId[tabIndex - 1].id }).then((e) => {
+        console.log('农机分类', e);
+        steCsrsListType(e.records)
+      })
+    } else {
+      // ClassificationComparison()
+
+      getMachinery(sserLocation).then((e) => {
+        steCsrsListType(e.records)
+      })
+    }
+
+
+  }, [sserLocation, tabIndex])
+
+
+  useEffect(() => {
+    getMachineryType().then((e) => {
+      const tabList = e.records
+      setActiveNames(tabList)
+      let tabss = tabList.map(x => ({ title: x.name, }))
+      const newTabs = [{ title: '全部' }, ...tabss]
+      setTabs(newTabs)
+
+    })
+  }, [])
+
+
   const handleTabChange = (e) => {
-    console.log('e', e.detail.index);
-    const { index } = e.detail
-    setActiveTab(index)
+    console.log('e', e.detail);
+    steTabIndex(e?.detail?.index)
+
   }
 
 
@@ -75,7 +118,7 @@ export default withLayout((props) => {
 
         {/* 内容区域 */}
         <View className='cententText'>
-          <CarsListContent />
+          <CarTypeList csrsListType={csrsListType} />
         </View>
       </scroll-view>
     </View>

src/pages/OrderConfirmation/index.jsx

@@ -18,7 +18,7 @@ import './style.less'
 
 //为了调试，删除了withLayout 记得加上 如果我忘记的话
 
-export default (props) => {
+export default withLayout((props) => {
   //底部弹窗
   // const [showFrame, setShowFrame] = useState(false)
   // const setRecommend = () => {
@@ -46,10 +46,11 @@ export default (props) => {
       machineryType: carsInfo?.typeId,
       typeName: carsInfo?.typeName,
       address: address || '',
+      orgId: carsInfo?.orgId,
       // appontmentDate: appontmentDate || '',
       appontmentDate: '2022-03-25 08:00:00',
     }).then((es) => {
-      // Taro.navigateTo({ url: `/pages/OrderInfo/index?orderId=${es.orderId}` })
+      Taro.redirectTo({ url: `/pages/OrderInfo/index?orderId=${es.orderId}` })
 
     })
   }
@@ -118,4 +119,4 @@ export default (props) => {
 
     </View>
   )
-}
+})

src/pages/OrderInfo/index.jsx

@@ -78,17 +78,7 @@ export default withLayout((props) => {
   }, [orderId])
 
   const pay = () => {
-    generateOrder({
-      charges: 200,
-      price: 100,
-      amount: 20,
-      machineryId: '7cdf832d7a7af0c19ab33418e10e1a94',
-      machineryName: '第一台播种机',
-      machineryType: 'b4d183f684ed1f3d1cb2194c1975ae46',
-      typeName: '播种机',
-      address: '我是作业地址：房屋后面',
-      appontmentDate: new Date(),
-    })
+    //支付逻辑
   }
 
 

src/pages/UserLogin/index.jsx

@@ -1,154 +1,157 @@
 
-import { useState } from 'react'
-import Taro from '@tarojs/taro'
-import { getUserQcode, setUserPhone } from '@/services/login'
-
-import { View, Image, Input, Text, Form } from '@tarojs/components'
-import CustomNav from '@/components/CustomNav'
-import ButtontWX from '@/components/ButtontWX'
-import checkedImg from '@/assets/lolginImages/checkedImg.png'
-import unselectedImg from '@/assets/lolginImages/unselectedImg.png'
-import { useModel } from '@/store'
-
-import withLayout from '@/layouts'
-
-import './style.less'
-
-
-export default withLayout((props) => {
-
-  const { person, setPerson } = useModel('userData')
-
-
-  const [countCenter, setCountCenter] = useState({
-    count: 60,
-    toast: false,
-    show_btn: false,
-    code_ts: '获取验证码'
-  })
-
-  const [checkImage, setCheckImage] = useState(false)
-
-  const [InputPhoneValue, setInputPhoneValue] = useState('18082043755')
-  const [InputCodeValue, setInputCodeValue] = useState('375501')
-
-  const onInputPhone = (r) => {
-    setInputPhoneValue(r?.detail?.value)
-    console.log("🚀 ~ file: index.jsx ~ line 26 ~ InputCodeValue", InputPhoneValue)
-
-  }
-  const onInputCode = (r) => {
-    setInputCodeValue(r?.detail?.value)
-
-  }
-  //获取验证码
-  const getCode = (r) => {
-    if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
-      console.log('提示')
-      Taro.showToast({
-        title: '手机号码有误',
-        icon: 'none',
-        duration: 2000
-      })
-
-    } else {
-      getUserQcode({ phone: InputPhoneValue }).then(() => {
-        Taro.showToast({
-          title: '验证码发送成功',
-          icon: 'none',
-          duration: 2000
-        })
-      })
-      let count = countCenter.count
-      const timer = setInterval(() => {
-        setCountCenter({
-          count: (count--),
-          show_btn: true,
-          code_ts: count + '秒后重发'
-        })
-        if (count == 0) {
-          setCountCenter({
-            show_btn: false,
-            count: 60,
-            code_ts: '获取验证码'
-          })
-          clearInterval(timer)
-
-        }
-
-      }, 1000)
-    }
-  }
-
-
-
-  const getUserLogin = () => {
-    if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
-      console.log('提示')
-      Taro.showToast({
-        title: '手机号或验证码有误',
-        icon: 'none',
-        duration: 2000
-      })
-    } else {
-      if (!checkImage) {
-        Taro.showToast({
-          title: '下方协议未勾选',
-          icon: 'none',
-          duration: 2000
-        })
-      } else {
-        setUserPhone(person.personId, { captcha: InputCodeValue, phone: InputPhoneValue }).then((e) => {
-          console.log('e', e);
-          setPerson({ ...person, phone: InputPhoneValue })
-          Taro.reLaunch({ url: '/pages/index/index?tab=2&userOk' });
-        })
-        // console.log('person', person);
-      }
-
-    }
-
-  }
-
-
-
-  return (
-    <View className='page-index'>
-      <View className='index-navbar'>
-        <CustomNav title='登陆' home />
-      </View>
-      <View className='loginBackImg-box' >
-        <Image src={require("@/assets/lolginImages/backLogin.png")} />
-
-        <View className='loginhallo-text'>
-          <View>您好！</View>
-          <View>欢迎进入农户端小程序！</View>
-        </View>
-        <View>
-          <View className='loginPhone-box' >
-            <View className='loginPhone-box-loginPhoneView'>+86</View>
-            <Input maxlength={11} placeholder='请输入手机号码' type={Number} value={InputPhoneValue} onInput={onInputPhone} />
-
-            <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'>
-              <Image style={{ width: '16px', height: '20px', margin: 'auto 2.8vw auto 2.8vw' }} src={require("@/assets/lolginImages/phoneCode.png")} />
-            </View>
-            <Input maxlength={10} placeholder='请输入验证码' value={InputCodeValue} onInput={onInputCode} />
-          </View>
-        </View>
-      </View>
-      <View className='BottomtButrelative'  >
-        <ButtontWX onClick={getUserLogin} butText='登陆' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
-      </View>
-      <View className='bottom-agreement'>
-        <Image src={!checkImage ? checkedImg : unselectedImg} onClick={() => { setCheckImage(!checkImage) }} />
-        <View>
-          请认真查看<Text style={{ color: '#CE3800' }}>文本协议/隐私政策</Text>，确认之后选择此项！
-        </View>
-      </View>
-
-    </View>
-  )
-})
+// import { useState } from 'react'
+// import Taro from '@tarojs/taro'
+// import { getUserQcode, setUserPhone } from '@/services/login'
+
+// import { View, Image, Input, Text, Form } from '@tarojs/components'
+// import CustomNav from '@/components/CustomNav'
+// import ButtontWX from '@/components/ButtontWX'
+// import checkedImg from '@/assets/lolginImages/checkedImg.png'
+// import unselectedImg from '@/assets/lolginImages/unselectedImg.png'
+// import { useModel } from '@/store'
+
+// import withLayout from '@/layouts'
+
+// import './style.less'
+
+
+// export default withLayout((props) => {
+
+//   const { isLoginVisible } = props
+//   console.log("🚀 ~ file: index.jsx ~ line 21 ~ withLayout ~ props", props)
+
+//   const { person, setPerson } = useModel('userData')
+
+
+//   const [countCenter, setCountCenter] = useState({
+//     count: 60,
+//     toast: false,
+//     show_btn: false,
+//     code_ts: '获取验证码'
+//   })
+
+//   const [checkImage, setCheckImage] = useState(false)
+
+//   const [InputPhoneValue, setInputPhoneValue] = useState('18082043755')
+//   const [InputCodeValue, setInputCodeValue] = useState('375501')
+
+//   const onInputPhone = (r) => {
+//     setInputPhoneValue(r?.detail?.value)
+//     console.log("🚀 ~ file: index.jsx ~ line 26 ~ InputCodeValue", InputPhoneValue)
+
+//   }
+//   const onInputCode = (r) => {
+//     setInputCodeValue(r?.detail?.value)
+
+//   }
+//   //获取验证码
+//   const getCode = (r) => {
+//     if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
+//       console.log('提示')
+//       Taro.showToast({
+//         title: '手机号码有误',
+//         icon: 'none',
+//         duration: 2000
+//       })
+
+//     } else {
+//       getUserQcode({ phone: InputPhoneValue }).then(() => {
+//         Taro.showToast({
+//           title: '验证码发送成功',
+//           icon: 'none',
+//           duration: 2000
+//         })
+//       })
+//       let count = countCenter.count
+//       const timer = setInterval(() => {
+//         setCountCenter({
+//           count: (count--),
+//           show_btn: true,
+//           code_ts: count + '秒后重发'
+//         })
+//         if (count == 0) {
+//           setCountCenter({
+//             show_btn: false,
+//             count: 60,
+//             code_ts: '获取验证码'
+//           })
+//           clearInterval(timer)
+
+//         }
+
+//       }, 1000)
+//     }
+//   }
+
+
+
+//   const getUserLogin = () => {
+//     if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
+//       console.log('提示')
+//       Taro.showToast({
+//         title: '手机号或验证码有误',
+//         icon: 'none',
+//         duration: 2000
+//       })
+//     } else {
+//       if (!checkImage) {
+//         Taro.showToast({
+//           title: '下方协议未勾选',
+//           icon: 'none',
+//           duration: 2000
+//         })
+//       } else {
+//         setUserPhone(person.personId, { captcha: InputCodeValue, phone: InputPhoneValue }).then((e) => {
+//           console.log('e', e);
+//           setPerson({ ...person, phone: InputPhoneValue })
+//           Taro.reLaunch({ url: '/pages/index/index?tab=2&userOk' });
+//         })
+//         // console.log('person', person);
+//       }
+
+//     }
+
+//   }
+
+
+
+//   return (
+//     <View className='page-index' hidden={isLoginVisible}>
+//       <View className='index-navbar'>
+//         <CustomNav title='登陆' home />
+//       </View>
+//       <View className='loginBackImg-box' >
+//         <Image src={require("@/assets/lolginImages/backLogin.png")} />
+
+//         <View className='loginhallo-text'>
+//           <View>您好！</View>
+//           <View>欢迎进入农户端小程序！</View>
+//         </View>
+//         <View>
+//           <View className='loginPhone-box' >
+//             <View className='loginPhone-box-loginPhoneView'>+86</View>
+//             <Input maxlength={11} placeholder='请输入手机号码' type={Number} value={InputPhoneValue} onInput={onInputPhone} />
+
+//             <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'>
+//               <Image style={{ width: '16px', height: '20px', margin: 'auto 2.8vw auto 2.8vw' }} src={require("@/assets/lolginImages/phoneCode.png")} />
+//             </View>
+//             <Input maxlength={10} placeholder='请输入验证码' value={InputCodeValue} onInput={onInputCode} />
+//           </View>
+//         </View>
+//       </View>
+//       <View className='BottomtButrelative'  >
+//         <ButtontWX onClick={getUserLogin} butText='登陆' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
+//       </View>
+//       <View className='bottom-agreement'>
+//         <Image src={!checkImage ? checkedImg : unselectedImg} onClick={() => { setCheckImage(!checkImage) }} />
+//         <View>
+//           请认真查看<Text style={{ color: '#CE3800' }}>文本协议/隐私政策</Text>，确认之后选择此项！
+//         </View>
+//       </View>
+
+//     </View>
+//   )
+// })

src/pages/UserLogin/style.less

@@ -1,69 +1,69 @@
-.loginBackImg-box {
-  width: 100vw;
-  height: 100vh;
-  > Image {
-    height: 100%;
-    width: 100%;
+// .loginBackImg-box {
+//   width: 100vw;
+//   height: 100vh;
+//   > Image {
+//     height: 100%;
+//     width: 100%;
 
-    position: absolute;
-    top: 0;
-  }
+//     position: absolute;
+//     top: 0;
+//   }
 
-  .loginhallo-text {
-    position: relative;
-    margin: 98px 0 80px 30px;
-  }
-  .loginhallo-text:nth-child(1) {
-    font-size: 66px;
-    font-weight: bold;
-    color: #333333;
-  }
-  .loginhallo-text:nth-child(2) {
-    font-size: 54px;
-    font-weight: bold;
-    color: #333333;
-  }
+//   .loginhallo-text {
+//     position: relative;
+//     margin: 98px 0 80px 30px;
+//   }
+//   .loginhallo-text:nth-child(1) {
+//     font-size: 66px;
+//     font-weight: bold;
+//     color: #333333;
+//   }
+//   .loginhallo-text:nth-child(2) {
+//     font-size: 54px;
+//     font-weight: bold;
+//     color: #333333;
+//   }
 
-  .loginPhone-box {
-    width: 93%;
-    height: 108px;
-    margin: 0 auto;
-    position: relative;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    padding-bottom: 12px;
+//   .loginPhone-box {
+//     width: 93%;
+//     height: 108px;
+//     margin: 0 auto;
+//     position: relative;
+//     display: flex;
+//     align-items: center;
+//     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+//     padding-bottom: 12px;
 
-    &-loginPhoneView {
-      font-size: 38px;
-      font-weight: 500;
-      color: #333333;
-      height: 39px;
-      line-height: 39px;
-      padding-right: 20px;
-      margin-right: 31px;
-      border-right: 3px solid #000;
-    }
-  }
-}
-.BottomtButrelative {
-  position: relative;
-  bottom: 5vh;
-}
+//     &-loginPhoneView {
+//       font-size: 38px;
+//       font-weight: 500;
+//       color: #333333;
+//       height: 39px;
+//       line-height: 39px;
+//       padding-right: 20px;
+//       margin-right: 31px;
+//       border-right: 3px solid #000;
+//     }
+//   }
+// }
+// .BottomtButrelative {
+//   position: relative;
+//   bottom: 5vh;
+// }
 
-.bottom-agreement {
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-size: 26px;
-  color: #2a2a2a;
-  margin-left: 30px;
-  margin-bottom: 60px;
-  // height: 2vh;
-  // bottom: 8vh;
-  > Image {
-    width: 28px;
-    height: 28px;
-    margin-right: 11px;
-  }
-}
+// .bottom-agreement {
+//   position: relative;
+//   display: flex;
+//   align-items: center;
+//   font-size: 26px;
+//   color: #2a2a2a;
+//   margin-left: 30px;
+//   margin-bottom: 60px;
+//   // height: 2vh;
+//   // bottom: 8vh;
+//   > Image {
+//     width: 28px;
+//     height: 28px;
+//     margin-right: 11px;
+//   }
+// }

src/pages/index/index.jsx

@@ -3,6 +3,7 @@ import Taro, { useDidShow } from '@tarojs/taro'
 import withLayout from '@/layouts'
 import CustomNav from '@/components/CustomNav'
 import { useModel } from '@/store'
+import LoginModel from "@/components/LoginModel"
 
 import tabList from './tabbar'
 import Homes from './tabs/Homes'
@@ -16,6 +17,7 @@ export default withLayout((props) => {
   const { router } = props
   const { person } = useModel('userData')
 
+
   const { params, path } = router
   const { tab } = params || {}
 
@@ -23,6 +25,9 @@ export default withLayout((props) => {
 
   const [isDidShow, setIsDidShow] = useState(0)
 
+  const [isShow, setIsShow] = useState(false)
+
+
   useDidShow(() => {
     setIsDidShow(isDidShow + 1)
   })
@@ -31,28 +36,30 @@ export default withLayout((props) => {
     if (tab) {
       setCurrentTab(tab - 0)
     }
+    // setIsShow(true)
   }, [tab,])
 
 
   const handleTabChange = (e) => {
-    const { index } = e.detail
-    setCurrentTab(index)
-    // if (!person?.phone) {
-    //   Taro.navigateTo({ url: `/pages/UserLogin/index` })
 
-    // } else {
-    //   const { index } = e.detail
-    //   setCurrentTab(index)
+    if (!person?.phone) {
+      // Taro.navigateTo({ url: `/pages/UserLogin/index` })
+      setIsShow(true)
+    } else {
+      const { index } = e.detail
+      setCurrentTab(index)
 
-    // }
+    }
 
   }
 
 
   return (
     <view className='page-index'>
+      <LoginModel isLoginVisible={isShow} />
 
       <view className='index-navbar'>
+
         <CustomNav title='首页' home />
       </view>
       <view className='index-container'>

src/pages/index/tabs/Homes.jsx

@@ -20,6 +20,7 @@ export default withLayout((props) => {
   const { person, setPerson } = useModel('userData')
 
 
+
   useEffect(() => {
     getHomeBanner({ position: 'banner' }).then((e) => {
       console.log('e', e);
@@ -42,7 +43,9 @@ export default withLayout((props) => {
   }
 
   const goToCarsList = () => {//更多
-    Taro.navigateTo({ url: '/pages/MoreCars/index' })
+    Taro.navigateTo({ url: `/pages/MoreCars/index` })
+
+
 
   }
 

src/pages/index/tabs/Orders.jsx

@@ -9,7 +9,7 @@ import { getOrder } from "@/services/order"
 import formatTimes from "@/utils/codeSegment"
 import { useModel } from "@/store"
 import withLayout from '@/layouts'
-
+import ListPlaceholder from "@/components/ListPlaceholder"
 import './OrdersCss/style.less'
 
 
@@ -87,40 +87,36 @@ export default withLayout((props) => {
   return (
     <scroll-view scrollY style='height: 100%;' >
 
+      <View className='content-header-box-orders'>
+        <View className='content-header-box-orders-liftCentent'>
+          <Image src={ordersListImga} />
+          <View>订单列表</View>
+        </View>
+        {/* <View className='content-header-box-orders-rightCentent'>更多&gt;&gt;</View> */}
+      </View>
       {
-        person?.phone ? <>
-          <View className='content-header-box-orders'>
-            <View className='content-header-box-orders-liftCentent'>
-              <Image src={ordersListImga} />
-              <View>订单列表</View>
-            </View>
-            {/* <View className='content-header-box-orders-rightCentent'>更多&gt;&gt;</View> */}
-          </View>
-          {
-            ourderList.map((item, index) => {
-              return (
-                <View key={index} className='orders-listBox'>
-                  <Image src={ordersLeft} />
-                  <View className='orders-listBox-RihtboxBoxOrderViewText'>
-                    <View className='View-LiftTextTop' onClick={() => handleTobePaid(item.orderId)} >订单编号：<Text>{item.orderNo}</Text><Text className='View-LiftTextTop-nextText'>更多&gt;&gt;</Text></View>
-                    <View>农机名称：<Text>{item.machineryName}</Text></View>
-                    <View>作业面积：<Text>{item.amount}</Text></View>
-                    <View>需求时间：<Text>{formatTimes(item.appointmentDate, 'yyyy-MM-dd hh:mm')}</Text></View>
-                    <View>下单时间：<Text>{formatTimes(item.createDate, 'yyyy-MM-dd hh:mm')}</Text></View>
-                    <View className='View-LiftTextBotton'>
-                      <View>订单状态：<Text style={{ color: orderStates(item.payStatus).styleColor }} >{orderStates(item.orderState).title}</Text></View>
-                      <View>费用：<Text className='feiyongStyle'>{item.charges}</Text></View>
-                    </View>
-                  </View>
+        ourderList != [] ? ourderList.map((item, index) => {
+          return (
+            <View key={index} className='orders-listBox'>
+              <Image src={ordersLeft} />
+              <View className='orders-listBox-RihtboxBoxOrderViewText'>
+                <View className='View-LiftTextTop' onClick={() => handleTobePaid(item.orderId)} >订单编号：<Text>{item.orderNo}</Text><Text className='View-LiftTextTop-nextText'>更多&gt;&gt;</Text></View>
+                <View>农机名称：<Text>{item.machineryName}</Text></View>
+                <View>作业面积：<Text>{item.amount}</Text></View>
+                <View>需求时间：<Text>{formatTimes(item.appointmentDate, 'yyyy-MM-dd hh:mm')}</Text></View>
+                <View>下单时间：<Text>{formatTimes(item.createDate, 'yyyy-MM-dd hh:mm')}</Text></View>
+                <View className='View-LiftTextBotton'>
+                  <View>订单状态：<Text style={{ color: orderStates(item.payStatus).styleColor }} >{orderStates(item.orderState).title}</Text></View>
+                  <View>费用：<Text className='feiyongStyle'>{item.charges}</Text></View>
                 </View>
-              )
-            })
-
-          }
-        </>
-          : <View>未登录，请先登陆</View>
+              </View>
+            </View>
+          )
+        })
+          : <ListPlaceholder title='您还没有新的订单！' />
       }
 
+
     </scroll-view>
   )
 })

src/utils/hooks/useLogin.js

@@ -1,27 +1,30 @@
-import Taro, { useRouter, useDidShow } from "@tarojs/taro";
+
+
+
+import Taro, { useRouter } from "@tarojs/taro";
 import { useModel } from '@/store'
-import { useEffect, useMemo } from "react";
+import { useMemo, useState, useEffect } from "react";
 
 const whiteList = [
-  "/pages/UserLogin/index",
   "/pages/index/index"
 ]
 
 export default () => {
   const router = useRouter()
   const { person } = useModel('userData')
+  const [loginVisible, setLoginVisible] = useState(false)
 
   const isInWhiteList = useMemo(() => whiteList.includes(router.path), [router.path])
   const hasPhone = useMemo(() => !!person?.phone, [person?.phone])
 
-
   useEffect(() => {
     if (!isInWhiteList && !hasPhone) {
-      Taro.navigateTo({ url: "/pages/UserLogin/index" });
+      setLoginVisible(true)
+    } else {
+      setLoginVisible(false)
     }
   }, [hasPhone, isInWhiteList])
 
 
-
-  return { hasPhone, isInWhiteList }
+  return { loginVisible }
 };