版本07.14.1(订单取消和打赏模块)

App.js

@@ -53,7 +53,7 @@ export default function App() {
           routes: [
             {
               name: initName,
-              // name: 'OrderDetail',
+              // name: 'RewardRider',
             },
           ],
         })

Utils/OrderUtils.js

@@ -66,7 +66,7 @@ const orderStatusMap = new Map([
     'CANCELLED',
     {
       name: '订单已取消',
-      sort: -1,
+      sort: 2,
       type: 'order',
     },
   ],
@@ -200,10 +200,25 @@ function getStatusInfo(orderInfo) {
     };
   }
 }
+
+const reasonMap = new Map([
+  ['UNABLE_TO_DELIVER', { name: '当前订单无法配送' }],
+  ['DELIVERY_TIME_IS_TOO_LONG', { name: '配送时间太长' }],
+  ['ADDRESS_IS_INCORRECT', { name: '地址填写错误' }],
+  ['MERCHANT_CANNOT_DELIVER', { name: '商家无法送达，联系我取消' }],
+  ['MERCHANT_OUT_OF_STOCK', { name: '商家缺货/打烊，联系我取消' }],
+  ['FORGOT_TO_USE_THE_RED_ENVELOPE', { name: '忘记使用红包' }],
+  ['FORGET_ABOUT_STAPLE_FOOD', { name: '忘点主食' }],
+  ['RIDER_CONTACT_ME_TO_CANCEL', { name: '骑手联系我取消' }],
+  ['MORE_POINTS', { name: '点多了/点错了/漏点了' }],
+  ['RIDER_CANNOT_REACH_USER', { name: '临时有事不想要了' }],
+  ['OTHER', { name: '其他原因' }],
+]);
 export {
   merchantStatusMap,
   orderStatusMap,
   RiderStatusMap,
   payMap,
   getStatusInfo,
+  reasonMap,
 };

navigation/BaseNavigator.jsx

@@ -17,6 +17,7 @@ import Complaint from '../screens/Order/ComplaintScreen';
 import ComplaintNext from '../screens/Order/ComplaintNextScreen';
 import EvaluateScreen from '../screens/Order/EvaluateScreen';
 import RewardRider from '../screens/Order/RewardRiderScreen';
+import ApplayCancel from '../screens/Order/ApplayCancelScreen';
 
 // 用户
 import Setting from '../screens/User/SettingScreen';
@@ -83,7 +84,7 @@ export default function BasicScreens(Screen) {
       {/* 订单详情 */}
       <Screen
         name="OrderDetail"
-        initialParams={{ orderId: 2029 }}
+        initialParams={{ orderId: 1948 }}
         component={OrderDetail}
       />
       {/* 投诉 */}
@@ -91,9 +92,19 @@ export default function BasicScreens(Screen) {
       {/* 投诉 2 */}
       <Screen name="ComplaintNext" component={ComplaintNext} />
       {/* 评论 */}
-      <Screen name="Evaluate" component={EvaluateScreen} />
+      <Screen
+        name="Evaluate"
+        component={EvaluateScreen}
+        initialParams={{ orderId: 1948 }}
+      />
       {/* 打赏骑手 */}
       <Screen name="RewardRider" component={RewardRider} />
+      {/* 取消订单 */}
+      <Screen
+        name="ApplayCancel"
+        component={ApplayCancel}
+        initialParams={{ orderId: 2029 }}
+      />
 
       {/* *************************用户*********************************** */}
       {/* 设置 */}

package-lock.json

@@ -7511,6 +7511,11 @@
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
       "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q=="
     },
+    "immutable": {
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+      "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks="
+    },
     "import-fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@@ -14160,6 +14165,31 @@
         "react-native-iphone-x-helper": "^1.0.3"
       }
     },
+    "react-native-legacy-components": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/react-native-legacy-components/-/react-native-legacy-components-0.1.3.tgz",
+      "integrity": "sha512-qiYtJl1xhLeWcHnh19L1MTUCKEOR7RPztuz/20XmI9/1Z4j1DeWHhUo4qZFzYpBPqBa6opFgV+u2Dp61bbRXtg==",
+      "requires": {
+        "create-react-class": "15.6.0",
+        "fbjs": "~0.8.9",
+        "immutable": "~3.7.6",
+        "prop-types": "^15.5.10",
+        "react-timer-mixin": "^0.13.2",
+        "rebound": "^0.0.13"
+      },
+      "dependencies": {
+        "create-react-class": {
+          "version": "15.6.0",
+          "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.0.tgz",
+          "integrity": "sha1-q0SEl8JlZuHilBPogyB9V8/nvtQ=",
+          "requires": {
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.3.1",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "react-native-magnus": {
       "version": "1.0.39",
       "resolved": "https://registry.npmjs.org/react-native-magnus/-/react-native-magnus-1.0.39.tgz",
@@ -14603,6 +14633,11 @@
       "integrity": "sha512-v1SEYUOXXdbBZK8ZuNgO4TBjamPsiSgcFr0aP+tEKpQZK8vooEUqV6nm6Cv502mX4NF2EfsnVqtNAHG+/6Ur1Q==",
       "dev": true
     },
+    "rebound": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/rebound/-/rebound-0.0.13.tgz",
+      "integrity": "sha1-SiJSVMr32nVnl7GcWBe/enlB+sE="
+    },
     "regenerate": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
@@ -15643,6 +15678,15 @@
         }
       }
     },
+    "teaset": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/teaset/-/teaset-0.7.4.tgz",
+      "integrity": "sha512-ofMfzaGrC5hbOCDPSTO5BX63xj3MWPHUj/FqzvVH5JflFdKAJaKb32rCDALBbLUMM8Etk74+PJDC8l6P6Kk6+Q==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "react-native-legacy-components": "^0.1.3"
+      }
+    },
     "temp": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",

package.json

@@ -20,6 +20,7 @@
     "@react-native-community/datetimepicker": "^2.4.0",
     "@react-native-community/masked-view": "0.1.10",
     "@react-native-community/netinfo": "^5.9.2",
+    "@react-native-community/slider": "3.0.0",
     "@react-navigation/bottom-tabs": "^5.3.1",
     "@react-navigation/material-top-tabs": "^5.2.9",
     "@react-navigation/native": "^5.2.1",
@@ -70,8 +71,8 @@
     "react-native-vector-icons": "^6.6.0",
     "react-native-web": "~0.11.7",
     "react-native-webview": "9.4.0",
-    "umi-request": "^1.3.5",
-    "@react-native-community/slider": "3.0.0"
+    "teaset": "^0.7.4",
+    "umi-request": "^1.3.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.1",

screens/Main/Home/HomeHeader.js

@@ -93,7 +93,10 @@ export default function Header() {
             }}
             title={local ? TchangeToChinese : TchangeToth}
           />
-          <Menu.Item onPress={() => {}} title="版本07.13.2(地址模块bug)" />
+          <Menu.Item
+            onPress={() => {}}
+            title="版本07.14.1(订单取消和打赏模块)"
+          />
         </Menu>
       </Appbar.Header>
     </>

screens/Order/ApplayCancelScreen.jsx

@@ -0,0 +1,181 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { Platform } from 'react-native';
+import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
+import { ScrollView } from 'react-native-gesture-handler';
+import { TextareaItem } from '@ant-design/react-native';
+
+import { PullPicker } from 'teaset';
+
+import { useRoute } from '@react-navigation/native';
+import { useCreation } from '@umijs/hooks';
+import useModel from 'flooks';
+import Order from './model'; // Order模块通用方法
+
+import Header from '../../components/Header';
+import ImagePicker from '../../components/ImagePicker';
+import { reasonMap } from '../../Utils/OrderUtils';
+
+export default function ApplayCancelScreen({ navigation }) {
+  const { cancelOrder } = useModel(Order, []);
+
+  const [imgList, setimgList] = React.useState(['']);
+  const [content, setcontent] = React.useState('');
+  const [chooseReason, setchooseReason] = React.useState('');
+
+  const route = useRoute();
+  const { params } = route;
+  const { orderId } = params || {};
+  const canSubmit = useCreation(() => {
+    if (orderId && chooseReason && content) {
+      return true;
+    } else {
+      return false;
+    }
+  }, [orderId, chooseReason, content, imgList]);
+
+  function changeImg(img, index) {
+    const list = [...imgList];
+    if (!img) {
+      list.splice(index, 1);
+    } else {
+      list.splice(index, 1, img);
+    }
+    if (index === list.length - 1 && list.length < 4) {
+      list.push('');
+    }
+    setimgList(list);
+  }
+
+  function deleteImg(index) {
+    const list = [...imgList];
+    if (!list[index]) {
+      return null;
+    } else {
+      return () => changeImg('', index);
+    }
+  }
+
+  const onSubmit = () => {
+    cancelOrder(orderId, chooseReason, content, imgList.join(',')).then(() => {
+      navigation.goBack();
+    });
+  };
+
+  return (
+    <>
+      <Header title="申请取消订单" />
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          backgroundColor: '#eee',
+        }}
+      >
+        <Div p={15} bg="white">
+          <Text fontSize="xs" color="gray500">
+            商家和骑手已经接单，并在火速赶来，商家可以j拒绝您取消订单。建议您可
+            以和商家先联系下。
+          </Text>
+
+          <Button
+            fontSize="xs"
+            bg="white"
+            borderWidth={1}
+            borderColor="brand500"
+            color="black"
+            mt={13}
+          >
+            联系商家
+          </Button>
+        </Div>
+        <Div bg="white" mt={2} p={15}>
+          <Text color="gray500" fontSize="xs">
+            您如果确定取消，
+            <Text color="red500" fontSize="xs">
+              请务必填写真实原因
+            </Text>
+            ，以使我们可以更好地帮您解决问题。
+          </Text>
+
+          <Button
+            block
+            bg="white"
+            px={0}
+            my={5}
+            onPress={() => {
+              if (Platform.OS !== 'web') {
+                var list = [...reasonMap.keys()];
+                PullPicker.show(
+                  '取消原因',
+                  list,
+                  chooseReason ? list.indexOf(chooseReason) : '',
+                  (item) => {
+                    setchooseReason(item);
+                  },
+                  {
+                    getItemText: (item) => {
+                      return reasonMap.get(item).name;
+                    },
+                  }
+                );
+              }
+            }}
+          >
+            <Div flex={1} row>
+              <Text color="gray500" fontSize="xs">
+                取消原因
+              </Text>
+              <Text flex={1} textAlign="right" fontSize="xs" mx={10}>
+                {chooseReason ? reasonMap.get(chooseReason).name : ''}
+              </Text>
+              <Icon name="right" />
+            </Div>
+          </Button>
+
+          <Div borderWidth={1} borderColor="gray200" rounded="xs">
+            <TextareaItem
+              last
+              rows={4}
+              placeholder="为了让我们更直观的了解情况，请补充详细信息！"
+              count={50}
+              style={{
+                backgroundColor: '#fff',
+                paddingVertical: 10,
+                fontSize: 10,
+                borderBottomWidth: 0,
+              }}
+              onChange={setcontent}
+            />
+          </Div>
+
+          <Div row py={10}>
+            {imgList.map((item, index) => {
+              return (
+                <ImagePicker
+                  key={index}
+                  img={item}
+                  setImg={(img) => changeImg(img, index)}
+                  cancelEvent={deleteImg(index)}
+                />
+              );
+            })}
+          </Div>
+
+          <Button
+            w={160}
+            color="black"
+            fontSize="xs"
+            borderWidth={1}
+            borderColor="brand500"
+            bg="white"
+            alignSelf="center"
+            disabled={!canSubmit}
+            onPress={onSubmit}
+          >
+            申请取消
+          </Button>
+        </Div>
+      </ScrollView>
+    </>
+  );
+}

screens/Order/Header.js

@@ -2,16 +2,22 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import { Appbar } from 'react-native-paper';
-import { goBack } from '../../navigation/RootNavigation';
+import { Appbar, Menu } from 'react-native-paper';
+import { useBoolean, useCreation } from '@umijs/hooks';
+import { goBack, navigate } from '../../navigation/RootNavigation';
 
-export default function Header({ title, noBack, bg }) {
+export default function Header({ title, noBack, bg, hasRight, orderId }) {
+  const { state, setTrue, setFalse } = useBoolean(false);
   return (
     <>
-      <StatusBar backgroundColor={bg || '#FFC21C'} style="light" translucent />
+      <StatusBar
+        backgroundColor={bg || '#FFC21C'}
+        style={!bg || bg === '#FFC21C' ? 'light' : 'dark'}
+        translucent
+      />
 
       <Appbar.Header
-        dark
+        dark={!bg || bg === '#FFC21C'}
         style={{
           zIndex: 3,
           elevation: 0,
@@ -28,11 +34,28 @@ export default function Header({ title, noBack, bg }) {
           title={title || '我的订单'}
           titleStyle={{ textAlign: 'center', fontSize: 16 }}
         />
-        {!noBack && (
+        {!noBack && !hasRight && (
           <Appbar.Action
             icon={() => <View style={{ width: 24, height: 24 }} />}
           />
         )}
+        {hasRight && (
+          <Menu
+            visible={state}
+            onDismiss={setFalse}
+            anchor={<Appbar.Action icon="dots-vertical" onPress={setTrue} />}
+          >
+            <Menu.Item
+              onPress={() => {
+                setFalse();
+                navigate('ApplayCancel', {
+                  orderId,
+                });
+              }}
+              title="取消订单"
+            />
+          </Menu>
+        )}
       </Appbar.Header>
     </>
   );

screens/Order/OrderDetailScreen.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
 import {
@@ -11,6 +12,7 @@ import {
   UIManager,
 } from 'react-native';
 import { Div, Button, Image, Text } from 'react-native-magnus';
+import { Appbar, Menu } from 'react-native-paper';
 import Constants from 'expo-constants';
 
 import { Flex } from '@ant-design/react-native';
@@ -31,6 +33,7 @@ import {
   orderStatusMap,
   RiderStatusMap,
   payMap,
+  reasonMap,
 } from '../../Utils/OrderUtils';
 import Time from '../../Utils/TimeUtils';
 
@@ -82,7 +85,18 @@ export default function OrderScreen({ navigation }) {
   }, [orderInfo]);
 
   const finish = useCreation(() => {
-    if (orderInfo.riderStatus === 'CARRY_OUT') {
+    if (
+      orderInfo.riderStatus === 'CARRY_OUT' ||
+      orderInfo.status === 'CANCELLED'
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }, [orderInfo]);
+
+  const cancelOrder = useCreation(() => {
+    if (orderInfo.status === 'CANCELLED') {
       return true;
     } else {
       return false;
@@ -132,7 +146,7 @@ export default function OrderScreen({ navigation }) {
           }
         }
 
-        if (maxMove._value != 0) {
+        if (maxMove._value !== 0) {
           if (maxMove._value - y < 200) {
             setbackgorundColor(
               `rgba(255, 194, 28,${Math.ceil(
@@ -141,7 +155,7 @@ export default function OrderScreen({ navigation }) {
             );
             setshowDetail(false);
           } else {
-            setbackgorundColor('rgba(255, 194, 28,1)');
+            setbackgorundColor('#FFC21C');
             setshowDetail(true);
           }
         }
@@ -159,7 +173,7 @@ export default function OrderScreen({ navigation }) {
         y: 0,
       });
       setshowDetail(true);
-      setbackgorundColor('rgba(255, 194, 28,1)');
+      setbackgorundColor('#FFC21C');
     } else {
       maxMove.setValue(Dimensions.get('window').height * 0.6);
       pan.setValue({
@@ -185,7 +199,12 @@ export default function OrderScreen({ navigation }) {
 
   return (
     <Div bg="gray200" w="100%" flex={1}>
-      <Header title={showDetail ? statusInfo.name : ' '} bg={backgorundColor} />
+      <Header
+        title={showDetail ? statusInfo.name : ' '}
+        bg={backgorundColor}
+        orderId={orderId}
+        hasRight={!finish && !Allfinish && !cancelOrder}
+      />
 
       {/* <RefreshControl
         refreshing={orderRequest.loading}
@@ -223,29 +242,52 @@ export default function OrderScreen({ navigation }) {
       >
         <Div pt={10} pb={10} px={15}>
           <View style={[styles.card]}>
-            {finish ? (
-              <Text fontSize="xl">
-                <Text fontSize="xl" color="brand500" mr={10} fontWeight="bold">
-                  {statusInfo.name}
+            {!cancelOrder &&
+              (finish ? (
+                <Text fontSize="xl">
+                  <Text
+                    fontSize="xl"
+                    color="brand500"
+                    mr={10}
+                    fontWeight="bold"
+                  >
+                    {statusInfo.name}
+                  </Text>
+                  {new Time(
+                    orderInfo.userReceivedTime,
+                    'yyyy-MM-DD HH:mm:ss'
+                  ).getFormat('HH:mm')}
+                  送达
                 </Text>
-                {new Time(
-                  orderInfo.userReceivedTime,
-                  'yyyy-MM-DD HH:mm:ss'
-                ).getFormat('HH:mm')}
-                送达
-              </Text>
-            ) : (
-              <Text fontSize="xl">
+              ) : (
+                <Text fontSize="xl">
+                  <Text
+                    fontSize="xl"
+                    color="brand500"
+                    mr={10}
+                    fontWeight="bold"
+                  >
+                    {statusInfo.name}
+                  </Text>
+                  预计
+                  {new Time(
+                    orderInfo.timeOfArrival,
+                    'yyyy-MM-DD HH:mm:ss'
+                  ).getFormat('HH:mm')}
+                  送达
+                </Text>
+              ))}
+            {cancelOrder && (
+              <Div row>
                 <Text fontSize="xl" color="brand500" mr={10} fontWeight="bold">
                   {statusInfo.name}
                 </Text>
-                预计
-                {new Time(
-                  orderInfo.timeOfArrival,
-                  'yyyy-MM-DD HH:mm:ss'
-                ).getFormat('HH:mm')}
-                送达
-              </Text>
+                {!!orderInfo.reason && (
+                  <Text fontSize="xl" color="red500">
+                    ({reasonMap.get(orderInfo.reason).name})
+                  </Text>
+                )}
+              </Div>
             )}
             <Div row mt={10}>
               <Button
@@ -295,7 +337,7 @@ export default function OrderScreen({ navigation }) {
                   催单
                 </Button>
               )}
-              {finish && !Allfinish && (
+              {finish && !cancelOrder && (
                 <Button
                   fontSize="xs"
                   flex={1}
@@ -306,15 +348,15 @@ export default function OrderScreen({ navigation }) {
                   borderWidth={1}
                   rounded={3}
                   onPress={() => {
-                    navigation.navigate('Evaluate', {
+                    navigation.navigate('RewardRider', {
                       orderId,
                     });
                   }}
                 >
-                  立即评价
+                  打赏骑手
                 </Button>
               )}
-              {finish && (
+              {finish && !Allfinish && !cancelOrder && (
                 <Button
                   fontSize="xs"
                   flex={1}
@@ -325,12 +367,12 @@ export default function OrderScreen({ navigation }) {
                   borderWidth={1}
                   rounded={3}
                   onPress={() => {
-                    navigation.navigate('MerchantDetail', {
-                      merchantId: orderInfo.merchantId,
+                    navigation.navigate('Evaluate', {
+                      orderId,
                     });
                   }}
                 >
-                  再来一单
+                  立即评价
                 </Button>
               )}
             </Div>

screens/Order/RewardRiderScreen.jsx

@@ -4,23 +4,206 @@ import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import useModel from 'flooks';
-import User from '../../flooks/User'; // detail模块通用方法
+import Order from './model'; // Order模块通用方法
 
 import Header from '../../components/Header';
 
-export default function RewardRiderScreen() {
-  const { userInfo } = useModel(User, ['id']);
+export default function RewardRiderScreen({ navigation }) {
+  const { rewardRider } = useModel(Order, []);
+
+  const reward = () => {
+    rewardRider().then(() => {
+      navigation.goBack();
+    });
+  };
 
   return (
     <>
-      <Header title="" />
+      <Header title="打赏骑手" />
       <ScrollView
         contentContainerStyle={{
           flexGrow: 1,
           backgroundColor: '#eee',
         }}
       >
-        <Div />
+        <Div bg="white" p={10} mx={10} mt={10} rounded="xs">
+          <Div row alignItems="center">
+            <Div bg="gray200" w={53} h={53} />
+            <Text fontSize="2xl" fontWeight="bold" ml={10}>
+              胖肥肥
+            </Text>
+            <Text fontSize="xs" ml={5} flex={1}>
+              等级
+            </Text>
+            <Div>
+              <Button
+                borderColor="brand500"
+                borderWidth={1}
+                w={100}
+                fontSize="xs"
+                bg="white"
+                color="black"
+              >
+                联系骑手
+              </Button>
+            </Div>
+          </Div>
+
+          <Div row mt={5}>
+            <Div flex={1} row>
+              <Text fontSize="xs">准时率</Text>
+              <Text fontSize="xs" ml={13}>
+                100%
+              </Text>
+            </Div>
+
+            <Div flex={1} row>
+              <Text fontSize="xs">日均送单</Text>
+              <Text fontSize="xs" ml={13}>
+                99
+              </Text>
+            </Div>
+          </Div>
+
+          <Div row flexWrap="wrap">
+            <Div w="33.33%" px={3} mt={5}>
+              <Button
+                fontSize="xs"
+                color="black"
+                bg="white"
+                borderColor="brand500"
+                borderWidth={1}
+                rounded="xs"
+                block
+              >
+                颜值一流 999+
+              </Button>
+            </Div>
+            <Div w="33.33%" px={3} mt={5}>
+              <Button
+                fontSize="xs"
+                color="black"
+                bg="white"
+                borderColor="brand500"
+                borderWidth={1}
+                rounded="xs"
+                block
+              >
+                穿着得体 999+
+              </Button>
+            </Div>
+            <Div w="33.33%" px={3} mt={5}>
+              <Button
+                fontSize="xs"
+                color="black"
+                bg="white"
+                borderColor="brand500"
+                borderWidth={1}
+                rounded="xs"
+                block
+              >
+                穿着得体 999+
+              </Button>
+            </Div>
+            <Div w="33.33%" px={3} mt={5}>
+              <Button
+                fontSize="xs"
+                color="black"
+                bg="white"
+                borderColor="brand500"
+                borderWidth={1}
+                rounded="xs"
+              >
+                穿着得体 999+
+              </Button>
+            </Div>
+            <Div w="33.33%" px={3} mt={5}>
+              <Button
+                fontSize="xs"
+                color="black"
+                bg="white"
+                borderColor="brand500"
+                borderWidth={1}
+                rounded="xs"
+              >
+                穿着得体 999+
+              </Button>
+            </Div>
+          </Div>
+        </Div>
+
+        <Div bg="white" mt={10} mx={10} px={10} pt={10} pb={30}>
+          <Text fontSize="xl" fontWeight="bold">
+            打赏骑手
+          </Text>
+          <Text fontSize="xs" color="gray500" mt={10}>
+            打赏将全额转给骑手
+          </Text>
+          <Text fontSize="xs" color="gray500" mt={10}>
+            上次为您提前12:02分钟送达订单哦
+          </Text>
+
+          <Div row mt={10}>
+            <Div w="33.33%" px={3} alignItems="center">
+              <Image
+                w={66}
+                h={66}
+                source={require('../../assets/images/jinbi1.png')}
+              />
+              <Button
+                fontSize="xs"
+                color="black"
+                bg="white"
+                borderColor="brand500"
+                borderWidth={1}
+                rounded="xs"
+                block
+                onPress={reward}
+              >
+                打赏
+              </Button>
+            </Div>
+            <Div w="33.33%" px={3} alignItems="center">
+              <Image
+                w={66}
+                h={66}
+                source={require('../../assets/images/jinbi2.png')}
+              />
+              <Button
+                fontSize="xs"
+                color="black"
+                bg="white"
+                borderColor="brand500"
+                borderWidth={1}
+                rounded="xs"
+                block
+                onPress={reward}
+              >
+                打赏
+              </Button>
+            </Div>
+            <Div w="33.33%" px={3} alignItems="center">
+              <Image
+                w={66}
+                h={66}
+                source={require('../../assets/images/jinbi3.png')}
+              />
+
+              <Button
+                fontSize="xs"
+                color="black"
+                bg="white"
+                borderColor="brand500"
+                borderWidth={1}
+                rounded="xs"
+                block
+                onPress={reward}
+              >
+                打赏
+              </Button>
+            </Div>
+          </Div>
+        </Div>
       </ScrollView>
     </>
   );

screens/Order/model.js

@@ -87,6 +87,32 @@ const OrderModel = (now) => ({
         return Promise.reject();
       });
   },
+  cancelOrder(id, reason, remark, img) {
+    const { loading, warnning, success } = now(Toast);
+    loading();
+    return request
+      .get(`/orderInfo/cancelOrder`, {
+        params: {
+          id,
+          reason,
+          remark,
+          img,
+        },
+      })
+      .then((res) => {
+        success('提交成功');
+        return Promise.resolve(res);
+      })
+      .catch((e) => {
+        warnning(e.error);
+        return Promise.reject();
+      });
+  },
+  rewardRider() {
+    const { success } = now(Toast);
+    success('打赏成功');
+    return Promise.resolve();
+  },
 });
 
 export default OrderModel;