tis

src/components/BottomMoadl/index.jsx

@@ -0,0 +1,67 @@
+import Taro from '@tarojs/taro'
+import { View, Image } from '@tarojs/components'
+import WeChatPay from '@/assets/BottomMoadlImags/WeChatPay.png'
+import Alipay from '@/assets/BottomMoadlImags/Alipay.png'
+import userRight from '@/assets/mineImgaes/userRight.png'
+
+import './style.css'
+
+
+export default (props) => {
+  const { frameTitle, flag, onRecommend } = props
+
+  let wrapAnimate = 'wrap wrapAnimate'
+  let frameAnimate = 'frame-wrapper'
+  // const [textNextSum, setTextNext] = useState(1)
+  // const [recommendContent, setRecommendContent] = useState([])
+  // const [loading, setLoading] = useState(false)
+
+  const hideFrame = () => {
+    onRecommend()
+  }
+
+
+
+
+  return (
+    flag && <view>
+      <view className={wrapAnimate} style='background:rgba(0,0,0,0);'></view>
+      <view onClick={hideFrame} className={frameAnimate}>
+        <view className='frame'>
+          {/* 标题  */}
+          <view className='title-wrapper '>
+            <view>{frameTitle}</view>
+          </view>
+          {/* 内容 */}
+          <View className='Paybox-moadl' style='overflow-x: hidden;'>
+            <View className='Paybox-moadl-Alipay'>
+              <View className='Paybox-moadl-liftPay'>
+                <Image className='Paybox-moadl-liftPay-Alipay' src={Alipay} />
+                支付宝
+              </View>
+              <Image className='Paybox-moadl-rightPay' src={userRight} />
+            </View>
+
+            <View className='Paybox-moadl-Alipay'>
+              <View className='Paybox-moadl-liftPay'>
+                <Image className='Paybox-moadl-liftPay-Alipay' src={WeChatPay} />
+                微信
+              </View>
+              <Image className='Paybox-moadl-rightPay' src={userRight} />
+            </View>
+            {/* 
+            <View className='Paybox-moadl-Alipay'>
+              <View>
+                <Image src={WeChatPay} />
+                微信
+              </View>
+              <Image src={userRight} />
+
+            </View> */}
+
+          </View>
+        </view>
+      </view>
+    </view>
+  )
+}

src/components/BottomMoadl/style.css

@@ -0,0 +1,82 @@
+.wrapAnimate {
+  animation: wrapAnimate 0.2s ease forwards;
+}
+@keyframes wrapAnimate {
+  0% {
+  }
+  100% {
+    background: rgba(0, 0, 0, 0.35);
+  }
+}
+.frame-wrapper {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  z-index: 2;
+  top: 0;
+}
+.frame {
+  background: #fff;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 2.9vw 2.9vw 0;
+  border-top-left-radius: 40px;
+  border-top-right-radius: 40px;
+  z-index: 3;
+  box-sizing: border-box;
+  align-items: center;
+  text-align: center;
+}
+.title-wrapper {
+  justify-content: space-between;
+
+  text-align: center;
+  height: 28px;
+  font-size: 35px;
+  font-weight: 700;
+  color: #202020;
+  margin-bottom: 5.9vw;
+}
+.title-wrapper > image {
+  width: 3.5vw;
+  height: 3.5vw;
+  padding: 0 5vw;
+  margin-right: -5vw;
+}
+
+.wrap {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.Paybox-moadl {
+}
+.Paybox-moadl-Alipay {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 60px auto 60px auto;
+}
+.Paybox-moadl-liftPay {
+  display: flex;
+  align-items: center;
+  font-size: 36px;
+  font-weight: 500;
+  color: #333333;
+}
+
+.Paybox-moadl-liftPay-Alipay {
+  width: 60px;
+  height: 60px;
+  padding-right: 21px;
+}
+.Paybox-moadl-rightPay {
+  width: 21px;
+  height: 38px;
+}

src/components/ButtontWX/style.less

@@ -1,6 +1,7 @@
 .buttont-box {
   background: #ff703b;
   display: flex;
+  margin: 0 auto;
   > View {
     margin: 0 auto;
     font-weight: 600;

src/pages/OrderInfo/index.jsx

@@ -0,0 +1,40 @@
+import { View, Text } from "@tarojs/components"
+import { useState } from "react"
+import ButtontWX from '@/components/ButtontWX'
+// import BottomMoadl from '@/components/BottomMoadl/index'
+
+
+
+
+
+
+import './style.less'
+
+export default (props) => {
+  //底部弹窗
+  // const [showFrame, setShowFrame] = useState(false)
+  // const setRecommend = () => {
+  //   setShowFrame(!showFrame)
+  // }
+
+
+  return (
+    <View>
+      {/* <BottomMoadl frameTitle='支付方式' flag={showFrame} onRecommend={setRecommend} /> */}
+      <View className='orders-listBox-RihtboxBoxOrderViewText'>
+        <View className='View-LiftTextTop'>订单编号：<Text>41242425</Text></View>
+        <View>农机名称：<Text>阿松大的</Text></View>
+        <View>需求数量：<Text>2</Text></View>
+        <View>需求时间：<Text>2322-80-99</Text></View>
+        <View>下单时间：<Text>2244-06-78</Text></View>
+        <View>订单状态：<Text  >未支付</Text></View>
+        <View className='View-LiftTextBotton'>
+          <View>费用：<Text className='feiyongStyle'>88</Text></View>
+        </View>
+      </View>
+      <View className='BottomtBut' onClick={setRecommend}>
+        <ButtontWX butText='支付' butWidth={345} butHeight={49} butFontSize={16} butBorderRadius={49} />
+      </View>
+    </View>
+  )
+}

src/pages/OrderInfo/infex.config.js

@@ -0,0 +1,9 @@
+
+export default {
+  navigationBarTitleText: '订单详情',
+  navigationStyle: 'custom',
+  disableScroll: true,
+  usingComponents: {
+  }
+
+}

src/pages/OrderInfo/style.less

@@ -0,0 +1,49 @@
+.orders-listBox-RihtboxBoxOrderViewText:before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  bottom: -10px;
+  left: 0;
+  border-bottom: 20px dotted rgb(255, 255, 255);
+}
+
+.orders-listBox-RihtboxBoxOrderViewText {
+  width: 85vw;
+  margin: 35px auto 44px auto;
+  padding: 62px 30px 93px 30px;
+  background: #ffffff;
+  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 40px 40px 0px 0px;
+  position: relative;
+
+  .View-LiftTextTop {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding-bottom: 20px;
+    padding-top: 0;
+  }
+  View:nth-child(6) {
+    padding-bottom: 40px;
+
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  > View {
+    padding: 15px 0;
+    font-size: 32px;
+    font-weight: bold;
+    color: #666666;
+    > Text {
+      color: #222222;
+    }
+
+    .feiyongStyle {
+      color: #222222;
+    }
+  }
+}
+
+.BottomtBut {
+  width: 99vw;
+  position: absolute;
+  bottom: 5vh;
+}

src/pages/UserLogin/index.jsx

@@ -1,9 +1,27 @@
 
-import { View, Text } from '@tarojs/components'
+import { View, Image, Input } from '@tarojs/components'
+import ButtontWX from '@/components/ButtontWX'
+
+import './style.less'
 
 export default (props) => {
 
   return (
-    <View>1111111111</View>
+    <View className='loginBackImg-box' >
+      <Image src={require("@/assets/lolginImages/backLogin.png")} />
+
+      <View className='loginhallo-text'>
+        <View>您好！</View>
+        <View>欢迎进入农户端小程序！</View>
+      </View>
+
+      <View className='loginPhone-box'>
+        <View>+86</View>
+        <Input />
+        <ButtontWX butText='获取验证码' butWidth={94} butHeight={34} butFontSize={15} butBorderRadius={10} />
+
+      </View>
+
+    </View>
   )
 }

src/pages/index/tabs/Mine.jsx

@@ -37,8 +37,11 @@ export default (props) => {
               <View style={{ backgroundImage: "url(" + require("@/assets/mineImgaes/mineBack.png") + ")" }} className='User-Avatar-background-trueBox'>
                 <View className='setPassword'>修改密码</View>
                 <Image className='User-Avatar-background-trueBox-userImg' src='https://profile.csdnimg.cn/3/1/5/0_qq_42551866' />
-                <View className='User-Avatar-background-trueBox-name textStyle' >鲍zhangchao</View>
-                <View className='User-Avatar-background-trueBox-phone textStyle'>18082043755</View>
+                <View className='User-Avatar-background-trueBox-name'>
+                  <View >鲍zhangchao</View>
+                  <View >18082043755</View>
+                </View>
+
               </View>
               <UserCellBox title='地址信息' >
                 <View className='addresss-box'>
@@ -71,8 +74,10 @@ export default (props) => {
 
         </UserCellBox>
 
-
-        <View className='bottom-buttom'>退出登陆</View>
+        {
+          !isLoginBox ? '' :
+            <View className='bottom-buttom'>退出登陆</View>
+        }
 
       </View>
     </scroll-view>

src/pages/index/tabs/MineCss/style.less

@@ -33,7 +33,7 @@
 //已登陆样式-----------------------
 
 .User-Avatar-background-trueBox {
-  background-size: 100%;
+  background-size: 100% 100%;
   background-repeat: no-repeat;
   width: 95vw;
   height: 30vh;
@@ -41,6 +41,7 @@
   box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.1);
   margin-top: 1em;
   margin: 0 auto 30px auto;
+  display: flex;
   &-userImg {
     position: relative;
     top: 8vh;
@@ -51,19 +52,30 @@
     border-radius: 50%;
   }
 
-  .textStyle {
+  &-name {
     position: relative;
-    top: -5vh;
-    margin-left: -2em;
-    text-align: center;
+    top: 9vh;
+    left: 11vw;
     font-size: 34px;
     color: #ffffff;
     font-weight: 500;
     text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.4);
+    > View {
+    }
   }
-  &-phone {
-    margin-top: 38px;
-  }
+  // .textStyle {
+  //   position: relative;
+  //   top: -5vh;
+  //   margin-left: -2em;
+  //   text-align: center;
+  //   font-size: 34px;
+  //   color: #ffffff;
+  //   font-weight: 500;
+  //   text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.4);
+  // }
+  // &-phone {
+  //   margin-top: 38px;
+  // }
 
   .setPassword {
     position: absolute;
@@ -116,8 +128,8 @@
   align-items: center;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   &-imgae {
-    width: 34px;
-    height: 43px;
+    width: 46px;
+    height: 46px;
   }
   .box-flex {
     width: 91%;

src/pages/index/tabs/Orders.jsx

@@ -1,12 +1,108 @@
 
-import { View } from "@tarojs/components"
+import { View, Image, Text } from "@tarojs/components"
+import Taro from '@tarojs/taro'
+
+import ordersListImga from '@/assets/ordersImages/ordersListImga.png'
+import ordersLeft from '@/assets/ordersImages/ordersLeft.png'//订单装饰
+
+
+import './OrdersCss/style.less'
 
 
 export default (props) => {
 
+
+
+
+  const orderStates = (item) => {
+    switch (item) {
+      case 0:
+        return {
+          title: '待付款',
+          styleColor: '#51D4FF'
+        }
+      case 1:
+        return {
+          title: '已付款',
+          styleColor: '#FF703B'
+        }
+      case 2:
+        return {
+          title: '进行中',
+          styleColor: '#44F68B'
+        }
+      case 3:
+        return {
+          title: '已完成',
+          styleColor: '#FF703B'
+        }
+      case 4:
+        return {
+          title: '待评价',
+          styleColor: '#51D4FF'
+        }
+      case 5:
+        return {
+          title: '退单待审',
+          styleColor: '#51D4FF'
+        }
+      case 6:
+        return {
+          title: '待付款',
+          styleColor: '#FF703B'
+        }
+      default:
+        return {
+          title: '暂无状态',
+          styleColor: '#000'
+        }
+    }
+  }
+  const handleTobePaid = () => {
+    Taro.navigateTo({ url: '/pages/OrderInfo/index' })
+  }
+
+  const orderListContent = [
+    { orderNumber: 'XJDF82521DA', cardsName: '联合收割机', cardNumber: '6', need: '2021-08-09', place: '2021-08-01', orderState: 0, feiyong: '360' },
+    { orderNumber: 'XJDF45244DA', cardsName: '不知道这是什么什么', cardNumber: '1', need: '2021-05-08', place: '2021-08-17', orderState: 1, feiyong: '78' },
+    { orderNumber: 'XJDF82521DA', cardsName: '为此发爱疸的箭的', cardNumber: '211', need: '2021-08-04', place: '2021-08-27', orderState: 2, feiyong: '35' },
+    { orderNumber: 'X78788821DA', cardsName: '水稻播种000015', cardNumber: '4', need: '2021-04-04', place: '2021-08-22', orderState: 3, feiyong: '170' },
+    { orderNumber: 'X44F77777DA', cardsName: '消费者协会', cardNumber: '5', need: '2021-02-11', place: '2021-08-10', orderState: 4, feiyong: '88' },
+    { orderNumber: 'XJ7857771DA', cardsName: '3·15', cardNumber: '1', need: '2021-01-09', place: '2021-08-10', orderState: 5, feiyong: '1.35' },
+    { orderNumber: 'X0000000001', cardsName: '农民伯伯', cardNumber: '2', need: '2027-08-29', place: '2021-08-17', orderState: 6, feiyong: '0.35' },
+  ]
+
   return (
-    <View>
+    <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>
+      {
+        orderListContent.map((item, index) => {
+          return (
+            <View key={index} className='orders-listBox'>
+              <Image src={ordersLeft} />
+              <View className='orders-listBox-RihtboxBoxOrderViewText'>
+                <View className='View-LiftTextTop' onClick={handleTobePaid} >订单编号：<Text>{item.orderNumber}</Text><Text className='View-LiftTextTop-nextText'>更多&gt;&gt;</Text></View>
+                <View>农机名称：<Text>{item.cardsName}</Text></View>
+                <View>需求数量：<Text>{item.cardNumber}</Text></View>
+                <View>需求时间：<Text>{item.need}</Text></View>
+                <View>下单时间：<Text>{item.place}</Text></View>
+                <View className='View-LiftTextBotton'>
+                  <View>订单状态：<Text style={{ color: orderStates(item.orderState).styleColor }} >{orderStates(item.orderState).title}</Text></View>
+                  <View>费用：<Text className='feiyongStyle'>{item.feiyong}</Text></View>
+                </View>
+              </View>
+            </View>
+          )
+        })
+
+      }
 
-    </View>
+    </scroll-view>
   )
 }

src/pages/index/tabs/OrdersCss/style.less

@@ -0,0 +1,86 @@
+.content-header-box-orders {
+  width: 93vw;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  &-liftCentent {
+    display: flex;
+    align-items: center;
+    > Image {
+      width: 44px;
+      height: 40px;
+    }
+    > View {
+      padding-left: 15px;
+      font-size: 40px;
+      font-weight: 800;
+      color: #222222;
+    }
+  }
+  &-rightCentent {
+    font-size: 32px;
+    font-weight: 500;
+    color: #666666;
+  }
+}
+.orders-listBox {
+  box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.1);
+  padding: 60px 30px;
+  display: flex;
+  justify-items: flex-start;
+  > Image {
+    width: 34px;
+    padding-right: 33px;
+  }
+  &-RihtboxBoxOrderViewText {
+    .View-LiftTextTop {
+      width: 80vw;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      padding-bottom: 20px;
+      padding-top: 0;
+      &-nextText {
+        position: relative;
+        left: 13vw;
+        font-size: 32px;
+        font-weight: 500;
+        color: #666666;
+      }
+    }
+
+    View:nth-child(5) {
+      padding-bottom: 40px;
+    }
+    > View {
+      padding: 15px 0;
+      font-size: 32px;
+      font-weight: bold;
+      color: #666666;
+      > Text {
+        color: #222222;
+      }
+    }
+    .View-LiftTextBotton {
+      border-top: 1px solid rgba(0, 0, 0, 0.1);
+      padding-bottom: 20px;
+      width: 80vw;
+      padding-top: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      > View {
+        padding-top: 30px;
+        font-size: 32px;
+        font-weight: bold;
+        color: #666666;
+        .feiyongStyle {
+          font-weight: bold;
+          color: #222222;
+          background: linear-gradient(180deg, #fa7878 0%, #b61515 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
+  }
+}

src/routes.js

@@ -6,6 +6,16 @@ const Pages = [
     page: 'pages/index/index',
     isIndex: true,
   },
+  {
+    title: '订单详情',
+    page: 'pages/OrderInfo/index',
+    isIndex: true,
+  },
+  {
+    title: '登陆页',
+    page: 'pages/UserLogin/index',
+    isIndex: true,
+  },
 
 ];