作业管理v1

babel.config.js

@@ -6,5 +6,16 @@ module.exports = {
       framework: 'react',
       ts: false
     }]
+  ],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "@antmjs/vantui",
+        "libraryDirectory": "es",
+        "style": true
+      },
+      "@antmjs/vantui"
+    ]
   ]
 }

package.json

@@ -35,6 +35,7 @@
   ],
   "author": "",
   "dependencies": {
+    "@antmjs/vantui": "^1.5.1",
     "@babel/runtime": "^7.7.7",
     "@tarojs/components": "3.3.15",
     "@tarojs/react": "3.3.15",
@@ -49,6 +50,7 @@
     "@tarojs/webpack-runner": "3.3.15",
     "@types/react": "^17.0.2",
     "@types/webpack-env": "^1.13.6",
+    "babel-plugin-import": "^1.13.3",
     "babel-preset-taro": "3.3.15",
     "eslint": "^6.8.0",
     "eslint-config-taro": "3.3.15",

src/components/MyCard/index.jsx

@@ -0,0 +1,49 @@
+import Taro from "@tarojs/taro"
+import { View, Text } from '@tarojs/components'
+import MyCell from "../MyCell"
+import './style.less'
+
+export default (props) => {
+  const { detail, order, job,changeJob } = props
+  const handleDetail = () => {
+    Taro.navigateTo({ url: '/pages/orderDetail/index' });
+  }
+  return (
+    <View className='card'>
+      <View className='jianbian'>
+        <View className='text'>待作业</View>
+      </View>
+      <View className='cardHead'>
+        {
+          job && <MyCell header='需求时间' job action='详情>>'>2022-06-02</MyCell>
+        }
+        {
+          !job && <>
+            <MyCell header='需求时间'>2022-06-02</MyCell>
+            <Text className='price'><Text style={{ fontSize: '44rpx' }}>600</Text>元</Text>
+          </>
+        }
+      </View>
+      <View className='line' />
+      <MyCell header='农机名称'>收割机001</MyCell>
+      <MyCell header='下单人'>张三</MyCell>
+      {
+        detail && <MyCell header='手机号'>13613949434</MyCell>
+      }
+      <MyCell header='订单时间'>2022-03-08</MyCell>
+      {
+        detail && <MyCell header='服务地址'>河南省南阳市邓州市孟楼镇</MyCell>
+      }
+      <MyCell header='作业时间'>上午06:00--晚上21:00</MyCell>
+      {
+        job&&<View className='jobbtn' onClick={changeJob}>开始作业</View>
+      }      
+      {
+        order && <View className='line' />
+      }
+      {
+        order && <View className='footer' onClick={handleDetail}>详情{">"}{">"}</View>
+      }
+    </View>
+  )
+}

src/components/OrderCard/style.less → src/components/MyCard/style.less

@@ -43,6 +43,18 @@
     opacity: 0.1;
     margin: 15.5px 0;
   }
+  .jobbtn{
+    height: 94px;
+    font-size: 34px;
+    font-weight: bold;
+    line-height: 94px;
+    text-align: center;
+    color: #fff;
+    background: linear-gradient(0deg, #A0E067, #00AE39);
+    border-radius: 49px;
+    width: 100%;
+    margin: 25px 0 18px;
+  }
   .footer{
     width: 100%;
     text-align: center;

src/components/MyCell/index.jsx

@@ -1,13 +1,19 @@
+import Taro from "@tarojs/taro"
 import { View } from "@tarojs/components"
 import './style.less'
 
 export default (props) => {
-
+  const { job } = props
+  const handleClick = () => {
+    if (job) {
+      Taro.navigateTo({ url: '/pages/orderDetail/index' });
+    }
+  }
   return (
     <View className='Mycell'>
       <View className='cell-header'>{props.header}</View>：
       <View className='cell-body'>{props.children}</View>
-      <View className='cell-action'>{props.action}</View>
+      <View className='cell-action' style={{marginRight:job?'30rpx':''}} onClick={handleClick}>{props.action}</View>
     </View>
   )
 }

src/components/MyCell/style.less

@@ -20,5 +20,6 @@
     flex: 1;
     color: #101010;
     line-height: 46px;
+    word-break: break-all;
   }
 }

src/components/OrderCard/index.jsx

@@ -1,41 +0,0 @@
-import Taro from "@tarojs/taro"
-import { View, Text } from '@tarojs/components'
-import MyCell from "../MyCell"
-import './style.less'
-
-export default (props) => {
-  const { detail } = props
-  const handleDetail = () => {
-    Taro.navigateTo({ url: '/pages/orderDetail/index' });
-  }
-  return (
-    <View className='card'>
-      <View className='jianbian'>
-        <View className='text'>待作业</View>
-      </View>
-      <View className='cardHead'>
-        <MyCell header='需求时间'>2022-06-02</MyCell>
-        <Text className='price'><Text style={{ fontSize: '44rpx' }}>600</Text>元</Text>
-      </View>
-      <View className='line' />
-      <View>
-        <MyCell header='农机名称'>收割机001</MyCell>
-        <MyCell header='下单人'>张三</MyCell>
-        {
-          detail && <MyCell header='手机号'>13613949434</MyCell>
-        }
-        <MyCell header='订单时间'>2022-03-08</MyCell>
-        {
-          detail && <MyCell header='服务地址'>河南省南阳市邓州市孟楼镇</MyCell>
-        }
-        <MyCell header='作业时间'>上午06:00--晚上21:00</MyCell>
-      </View> 
-      {
-        !detail && <View className='line' />
-      }
-      {
-        !detail && <View className='footer' onClick={handleDetail}>详情>></View>
-      }
-    </View>
-  )
-}

src/pages/index/components/Job/index.jsx

@@ -0,0 +1,38 @@
+import { View, ScrollView, Image, Button } from "@tarojs/components"
+import MyCard from "@/components/MyCard"
+import { Popup } from "@antmjs/vantui";
+import { useState } from "react";
+import PositionImg from '@/assets/job/positionImg.png'
+import './style.less'
+
+export default (props) => {
+  const [show, setShow] = useState(false)
+  const handleChange = () => {
+    setShow(true)
+  }
+  const onClose = () => {
+    setShow(false)
+  }
+  const handleOk=()=>{
+    console.log('开始作业')
+    setShow(false)
+  }
+  return (
+    <ScrollView scrollY style={{ height: '100%' }}>
+      <MyCard job changeJob={handleChange} />
+      <MyCard job changeJob={handleChange} />
+      <Popup
+        show={show}
+        onClose={onClose}
+        className='tanchuang'
+      >
+        <Image src={PositionImg} className='pImg' />
+        <View>当前位置在</View>
+        <View>河南省南阳市邓州市孟楼镇</View>
+        <Button className='btn' onClick={handleOk}>确认</Button>
+      </Popup>
+      <MyCard job changeJob={handleChange} />
+      <MyCard job changeJob={handleChange} />
+    </ScrollView>
+  )
+}

src/pages/index/components/Job/style.less

@@ -0,0 +1,26 @@
+.tanchuang{
+  text-align: center;
+  font-size: 34px;
+  font-weight: 800;
+  color: #323232;
+  width: calc(100vw - 60px);
+  padding: 142px 130px;
+  .pImg{
+    width: 80px;
+    height: 77px;
+    margin-bottom: 52px;
+  }
+  view{
+    text-align: left;
+    line-height: 46px;
+  }
+  .btn{
+    width: 200px;
+    height: 88px;
+    background: linear-gradient(0deg, #A0E067, #00AE39);
+    border-radius: 34px;
+    font-size: 32px;
+    color: #FFFFFF;  
+    margin-top: 100px;  
+  }
+}

src/pages/index/components/order/index.jsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react"
 import Taro from "@tarojs/taro";
-import { View, Input, Swiper, Image, SwiperItem, Text,ScrollView } from "@tarojs/components"
+import { View, Input, Swiper, Image, SwiperItem, Text, ScrollView } from "@tarojs/components"
 import positionImg from '@/assets/comm/position.png'
 import searchImg from '@/assets/comm/search.png'
 import orderImg from '@/assets/comm/orderList.png'
 import Footer from "@/components/Footer";
-import OrderCard from "@/components/OrderCard";
+import MyCard from "@/components/MyCard";
 import './style.less'
 
 export default () => {
@@ -23,7 +23,7 @@ export default () => {
   const handleSearch = (e) => {
     console.log(e.detail.value)
   }
-  const handleMore=()=>{
+  const handleMore = () => {
     Taro.navigateTo({ url: '/pages/moreOrder/index' });
   }
   return (
@@ -39,30 +39,31 @@ export default () => {
           <Image src={searchImg} className='searchImg' />
         </View>
       </View>
-      <ScrollView scrollY style={{height:'calc(100% - 50px)'}}>
-      <View>
-        <Swiper
-          circular
-          autoplay
-          className='swiper'
-        >
-          {imglist.map((item, inx) => (
-            <SwiperItem key={inx}>
-              <Image src={item.url} mode='widthFix' className='storeImage' />
-            </SwiperItem>
-          ))}
-        </Swiper></View>
-      <View className='orderList'>
-        <View className='head'>
-          <Image className='headIcon' src={orderImg} />
-          <Text className='title'>订单列表</Text>
-          <Text className='more' onClick={handleMore}>更多>></Text>
+      <ScrollView scrollY style={{ height: 'calc(100% - 50px)' }}>
+        <View>
+          <Swiper
+            circular
+            autoplay
+            className='swiper'
+          >
+            {imglist.map((item, inx) => (
+              <SwiperItem key={inx}>
+                <Image src={item.url} mode='widthFix' className='storeImage' />
+              </SwiperItem>
+            ))}
+          </Swiper>
+        </View>
+        <View className='orderList'>
+          <View className='head'>
+            <Image className='headIcon' src={orderImg} />
+            <Text className='title'>订单列表</Text>
+            <Text className='more' onClick={handleMore}>更多>></Text>
+          </View>
+
+          <MyCard order />
+          <MyCard order />
+          <Footer />
         </View>
-        
-        <OrderCard />
-        <OrderCard />
-        <Footer />
-      </View>
       </ScrollView>
     </View>
   )

src/pages/index/index.jsx

@@ -1,5 +1,5 @@
 import Taro from "@tarojs/taro";
-import { useState } from "react";
+import { useState,useEffect } from "react";
 import { View, Image } from "@tarojs/components"
 import indexImg from "@/assets/comm/index.png";
 import indexActive from "@/assets/comm/indexActive.png";
@@ -8,22 +8,24 @@ import jobActive from "@/assets/comm/jobActive.png";
 import user from "@/assets/comm/user.png";
 import userActive from "@/assets/comm/userActive.png";
 import CustomNav from "@/components/CustomNav";
-import Order from './components/order'
+import Order from './components/Order'
+import Job from './components/Job'
 import "./index.less";
 
-export default () => {
+export default (props) => {
   const [currentTab, setCurrentTab] = useState(0);
   const handleClick = (val) => {
     setCurrentTab(val);
   };
+  
   return (
     <View className='page-index'>
       <View className='index-navbar'>
-        <CustomNav home />
+        <CustomNav home title={currentTab === 0?'首页':currentTab === 1?'作业管理':'我的'} />
       </View>
       <View className='index-container'>
         {currentTab === 0 && <Order />}
-        {currentTab === 1 && <View>888</View>}
+        {currentTab === 1 && <Job />}
         {currentTab === 2 && <View>999</View>}
       </View>
       <View className='index-tabbar'>

src/pages/moreOrder/index.jsx

@@ -2,7 +2,7 @@ import { View, Input, Image, Text, ScrollView } from "@tarojs/components"
 import CustomNav from "@/components/CustomNav";
 import searchImg from '@/assets/comm/search.png'
 import { useState } from "react";
-import OrderCard from "@/components/OrderCard";
+import MyCard from "@/components/MyCard";
 import Footer from "@/components/Footer";
 import './style.less'
 
@@ -74,9 +74,9 @@ export default () => {
       <View className='index-container'>
         <ScrollView scrollY style={{ height: '100%' }}>
           {currentTab}
-          <OrderCard />
-          <OrderCard />
-          <OrderCard />
+          <MyCard />
+          <MyCard />
+          <MyCard />
           <Footer />
         </ScrollView>
         {/* {currentTab === 0 && <View>777</View>}

src/pages/orderDetail/index.jsx

@@ -1,6 +1,6 @@
 import { View } from "@tarojs/components"
 import CustomNav from "@/components/CustomNav"
-import OrderCard from "@/components/OrderCard"
+import MyCard from "@/components/MyCard"
 
 export default () => {
   return (
@@ -9,7 +9,7 @@ export default () => {
         <CustomNav title='更多' />
       </View>
       <View className='index-container'>
-        <OrderCard detail />
+        <MyCard detail />
       </View>
     </View>
   )