订单v1

src/components/MyCell/index.jsx

@@ -0,0 +1,13 @@
+import { View } from "@tarojs/components"
+import './style.less'
+
+export default (props) => {
+
+  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>
+  )
+}

src/components/MyCell/style.less

@@ -0,0 +1,24 @@
+
+.Mycell {
+  display: flex;  
+  font-size: 34px;
+  font-weight: bold;
+  color: #606060;
+  padding:18px 0;
+
+  .cell-header, .cell-action {
+    flex: none;
+  }
+  .cell-header{
+    width: 5em;
+    display: inline-block;
+    text-align: justify;
+    text-align-last: justify;
+  }
+
+  .cell-body {
+    flex: 1;
+    color: #101010;
+    line-height: 46px;
+  }
+}

src/components/OrderCard/index.jsx

@@ -1,37 +1,41 @@
 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'>
-        <View className='cell' style={{display:'inline-block'}}>
-          <Text className='label'>需求时间</Text>：
-          <Text className='data'>2022-06-02</Text>
-        </View>
-        <Text className='price'><Text style={{fontSize:'44rpx'}}>600</Text>元</Text>
+        <MyCell header='需求时间'>2022-06-02</MyCell>
+        <Text className='price'><Text style={{ fontSize: '44rpx' }}>600</Text>元</Text>
       </View>
       <View className='line' />
-      <View className='content'>
-        <View className='cell'>
-          <Text className='label'>农机名称</Text>：<Text className='data'>收割机001</Text>
-        </View>
-        <View className='cell'>
-          <Text className='label'>下单人</Text>：<Text className='data'>张三</Text>
-        </View>
-        <View className='cell'>
-          <Text className='label'>订单时间</Text>：<Text className='data'>2022-03-08</Text>
-        </View>
-        <View className='cell'>
-          <Text className='label'>作业时间</Text>：<Text className='data'>上午06:00--晚上21:00</Text>
-        </View>
-      </View>
-      <View className='line' />
-      <View className='footer'>详情>></View>
+      <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/components/OrderCard/style.less

@@ -29,10 +29,9 @@
     padding: 5px 0 0 38px;
     position: relative;
     .price{
-      line-height: 36px;
       position: absolute;
       right: 40px;
-      top: 22px;
+      top: 14px;
       font-size: 30px;
       font-weight: bold;
       color: #FF2525;
@@ -40,36 +39,16 @@
   }
   .line{
     width: 100%;
-    border: 1px solid #000;
+    border-top: 1px solid #000;
     opacity: 0.1;
-    margin: 15px 0;
-  }
-  .content {
-    width: 100%;
-  }
-  .cell{
-    line-height: 32px;
-    padding: 25px 0;
-    font-size: 34px;
-    font-weight: bold;
-    color: #606060;
-    .label{
-      width: 24vw;
-      display: inline-block;
-      text-align: justify;
-      text-align-last: justify;
-    }
-    .data{
-      color: #101010;
-    }
+    margin: 15.5px 0;
   }
   .footer{
     width: 100%;
     text-align: center;
-    line-height: 32px;
     font-size: 34px;
     font-weight: bold;
     color: #606060;
-    padding-top: 15px;
+    padding-top: 25px;
   }
 }

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

@@ -50,7 +50,6 @@
     }
   }
   .swiper {
-    transition: all 0.3s linear;
     height: calc( calc(100vw - 60px) * 0.62);
     text-align: center;
     margin: 30px;

src/pages/moreOrder/index.jsx

@@ -1,4 +1,4 @@
-import { View, Input, Image,Text,ScrollView } from "@tarojs/components"
+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";
@@ -20,7 +20,7 @@ export default () => {
   const handleClick = () => {
     setImageShow(false)
   }
-  const handleChange =(val)=>{
+  const handleChange = (val) => {
     setCurrentTab(val)
   }
   return (
@@ -44,8 +44,8 @@ export default () => {
           <View>
             <Text className='text'>待付款</Text>
             {
-              currentTab === 0&&<View className='line' />
-            }            
+              currentTab === 0 && <View className='line' />
+            }
           </View>
         </View>
         <View
@@ -55,8 +55,8 @@ export default () => {
           <View>
             <Text className='text'>进行中</Text>
             {
-              currentTab === 1&&<View className='line' />
-            } 
+              currentTab === 1 && <View className='line' />
+            }
           </View>
         </View>
         <View
@@ -66,19 +66,19 @@ export default () => {
           <View>
             <Text className='text'>已完成</Text>
             {
-              currentTab === 2&&<View className='line' />
-            } 
+              currentTab === 2 && <View className='line' />
+            }
           </View>
         </View>
       </View>
       <View className='index-container'>
-      <ScrollView scrollY style={{height:'100%'}}>
-        {currentTab}
-      <OrderCard />
-      <OrderCard />
-      <OrderCard />
-      <Footer />
-      </ScrollView>
+        <ScrollView scrollY style={{ height: '100%' }}>
+          {currentTab}
+          <OrderCard />
+          <OrderCard />
+          <OrderCard />
+          <Footer />
+        </ScrollView>
         {/* {currentTab === 0 && <View>777</View>}
         {currentTab === 1 && <View>888</View>}
         {currentTab === 2 && <View>999</View>} */}

src/pages/orderDetail/index.config.js

@@ -0,0 +1,7 @@
+export default {
+  navigationBarTitleText: '详情',
+  navigationStyle: 'custom',
+  styleIsolation: 'shared',
+  enableShareAppMessage: true,
+  disableScroll: true,
+}

src/pages/orderDetail/index.jsx

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

src/routes.js

@@ -10,6 +10,10 @@ const mainPages = [
     title: '更多',
     page: 'pages/moreOrder/index',
   },
+  {
+    title: '详情',
+    page: 'pages/orderDetail/index',
+  },
   
 ];