0907

App.js

@@ -37,7 +37,11 @@ export default function App() {
     if (id === 0) {
       // 未登录
       initName = 'Login';
-    } else if (id !== null) {
+		} 
+		// else if (__DEV__) {
+    //   initName = 'HomeCategory';
+		// } 
+		else if (id !== null) {
       // 已登录
       initName = 'Home';
     }

Utils/OrderUtils.js

@@ -24,7 +24,7 @@ const merchantStatusMap = new Map([
     'REJECTED',
     {
       name: i18n.t('shang-jia-yi-tui-dan'),
-      sort: -1,
+      sort: 2,
       type: 'merchant',
     },
   ],

Utils/TotastUtils.js

@@ -71,26 +71,39 @@ export function operation() {
   ]);
 }
 
-export function connectKefu(orderId) {
+export function connectKefu(orderId, canConnect) {
   Modal.alert(
     '',
     <Text style={{ marginHorizontal: 15 }} more>
       {i18n.t('tips9')}
     </Text>,
-    [
-      {
-        text: i18n.t('ke-fu-dian-hua'),
-        onPress: connectKefuOn,
-        style: { color: '#000', fontSize: 12, lineHeight: 30 },
-      },
-      {
-        text: i18n.t('wo-yao-tou-su'),
-        onPress: () => {
-          navigate('Complaint', { orderId });
-        },
-        style: { color: '#FFC21C', fontSize: 12, lineHeight: 30 },
-      },
-    ],
+    canConnect
+      ? [
+          {
+            text: i18n.t('ke-fu-dian-hua'),
+            onPress: connectKefuOn,
+            style: { color: '#000', fontSize: 12, lineHeight: 30 },
+          },
+          {
+            text: i18n.t('wo-yao-tou-su'),
+            onPress: () => {
+              navigate('Complaint', { orderId });
+            },
+            style: { color: '#FFC21C', fontSize: 12, lineHeight: 30 },
+          },
+        ]
+      : [
+          {
+            text: i18n.t('qu-xiao'),
+            onPress: () => console.log('cancel'),
+            style: { color: '#000', fontSize: 12, lineHeight: 30 },
+          },
+          {
+            text: '拨打电话',
+            onPress: connectKefuOn,
+            style: { color: '#FFC21C', fontSize: 12, lineHeight: 30 },
+          },
+        ],
     () => true
   );
 }

constants/ThemeMagnus.js

@@ -8,7 +8,7 @@ export default {
     brand500: 'rgba(255,194,28,1)',
     brand600: '#FFB11E',
     red500: '#B00020',
-    gray100: 'rgb(221, 221, 221)',
+    gray100: '#EEEEEE',
     gray200: 'rgb(238, 238, 238)',
     gray300: '#B5B5B5',
     gray400: '#BFBFBF',

navigation/BaseNavigator.jsx

@@ -10,6 +10,7 @@ import SubmitScreen from '../screens/Detail/SubmitScreen';
 import OrderCoupon from '../screens/userCoupon/OrderCouponScreen';
 import OrderMessage from '../screens/Order/OrderMessageScreen';
 import ReportBusinessScreen from '../screens/Detail/ReportBusinessScreen';
+import GoodsDetailScreen from '../screens/Detail/GoodsDetailScreen';
 
 // 订单
 import OrderDetail from '../screens/Order/OrderDetailScreen';
@@ -19,6 +20,7 @@ import EvaluateScreen from '../screens/Order/EvaluateScreen';
 import RewardRider from '../screens/Order/RewardRiderScreen';
 import ApplayCancel from '../screens/Order/ApplayCancelScreen';
 import PayOrderScreen from '../screens/Pay/PayOrderScreen';
+import OrderDetailListScreen from '../screens/Order/OrderDetailListScreen';
 
 // 用户
 import Setting from '../screens/User/SettingScreen';
@@ -53,6 +55,8 @@ import MapMarkScreen from '../screens/Map/MapMarkScreen';
 // 聊天页面
 import ChatScreen from '../chat/ChatScreen.tsx';
 
+import HomeCategoryScreen from '../screens/Main/HomeCategoryScreen.tsx';
+
 export default function BasicScreens(Screen) {
   return (
     <>
@@ -78,6 +82,12 @@ export default function BasicScreens(Screen) {
       />
       {/* 举报商家 */}
       <Screen name="ReportBusiness" component={ReportBusinessScreen} />
+      {/* 商品详情 */}
+      <Screen
+        name="GoodsDetail"
+        component={GoodsDetailScreen}
+        initialParams={{ goodsId: 214 }}
+      />
       {/* 提交订单 */}
       <Screen name="Submit" component={SubmitScreen} />
       {/* 订单优惠券 */}
@@ -97,6 +107,11 @@ export default function BasicScreens(Screen) {
         initialParams={{ orderId: 2307 }}
         component={PayOrderScreen}
       />
+      <Screen
+        name="OrderDetailList"
+        initialParams={{ orderId: 2307 }}
+        component={OrderDetailListScreen}
+      />
       {/* 投诉 */}
       <Screen name="Complaint" component={Complaint} />
       {/* 投诉 2 */}
@@ -148,8 +163,12 @@ export default function BasicScreens(Screen) {
       <Screen name="SearchMap" component={SearchMap} />
       <Screen name="MapScreen" component={MapScreen} />
       <Screen name="MapMarkScreen" component={MapMarkScreen} />
-
       <Screen name="Chat" component={ChatScreen} />
+      <Screen
+        name="HomeCategory"
+        component={HomeCategoryScreen}
+        initialParams={{ categoryId: 0 }}
+      />
     </>
   );
 }

screens/Address/EditAddressScreen.jsx

@@ -51,15 +51,7 @@ export default function EditAddressScreen({ navigation }) {
   }, [locationInfo]);
 
   const canSub = useCreation(() => {
-    if (
-      phone &&
-      name &&
-      addressName &&
-      number &&
-      longitude &&
-      latitude &&
-      addressTag
-    ) {
+    if (phone && name && addressName && number && longitude && latitude) {
       return true;
     } else {
       return false;
@@ -103,7 +95,9 @@ export default function EditAddressScreen({ navigation }) {
       setaddressName(addressInfo.addressName);
       setnumber(addressInfo.number);
       isDefaultEvent.toggle(addressInfo.isDefault);
-      setaddressTag(addressInfo.addressTag);
+      if (addressInfo.addressTag) {
+        setaddressTag(addressInfo.addressTag);
+      }
       setlatitude(addressInfo.latitude);
       setlongitude(addressInfo.longitude);
     }

screens/Address/model.js

@@ -62,7 +62,7 @@ const AddressModel = (now) => ({
           phone: submitPhone(phone),
           addressName,
           number,
-          addressTag: addressTag || '',
+          addressTag: addressTag || null,
           isDefault,
           latitude,
           longitude,

screens/Detail/ClassificationList.jsx

@@ -1,65 +1,69 @@
 import * as WebBrowser from 'expo-web-browser';
 import * as React from 'react';
-import { Div, Image, Text } from 'react-native-magnus';
+import { Div, Image, Text, Button } from 'react-native-magnus';
 
 import { useRequest, useCreation } from '@umijs/hooks';
+import { useNavigation } from '@react-navigation/native';
 
 import useModel from 'flooks';
 import Detail from './model';
 import Plus from '../../components/Plus';
 
-function Item({ info, cartMap, checkgoodsSpecification, changeNum }) {
+function Item({ info, cartMap, checkgoodsSpecification, changeNum, goDetail }) {
   return (
-    <Div py={5} px={10} row bg="white">
-      <Image
-        w={70}
-        h={70}
-        bg="gray200"
-        rounded="sm"
-        source={{ uri: info.img }}
-      />
-      <Div flex={1} ml={5}>
-        <Text textAlign="left">{info.name}</Text>
-        <Text color="gray300" fontSize="xs" textAlign="left">
-          {info.introduction}
-        </Text>
-        <Text color="gray300" fontSize="xs" textAlign="left">
-          月售{info.inventory || 0}
-        </Text>
-        <Div flex={1} />
-        <Div row alignItems="center">
-          <Text color="red500" textAlign="left">
-            ¥{info.discountAmount || info.amount}
+    <Button bg="hide" p={0} onPress={goDetail} block>
+      <Div py={5} px={10} row bg="white" flex={1}>
+        <Image
+          w={70}
+          h={70}
+          bg="gray200"
+          rounded="sm"
+          source={{ uri: info.img }}
+        />
+        <Div flex={1} ml={5}>
+          <Text textAlign="left">{info.name}</Text>
+          <Text color="gray300" fontSize="xs" textAlign="left">
+            {info.introduction}
+          </Text>
+          <Text color="gray300" fontSize="xs" textAlign="left">
+            月售{info.inventory || 0}
           </Text>
-          {!!info.discountAmount && (
-            <Text
-              color="gray300"
-              ml={5}
-              fontSize="xs"
-              textDecorLine="line-through"
-              textDecorColor="gray300"
-              textAlign="left"
-            >
-              ¥{info.amount}
-            </Text>
-          )}
           <Div flex={1} />
-          <Plus
-            num={cartMap.has(info.id) ? cartMap.get(info.id).num : 0}
-            minus={() => {
-              changeNum(
-                cartMap.get(info.id).specIds,
-                cartMap.get(info.id).num - 1
-              );
-            }}
-            plusEvent={() => checkgoodsSpecification(info)}
-          />
+          <Div row alignItems="center">
+            <Text color="red500" textAlign="left">
+              ¥{info.discountAmount || info.amount}
+            </Text>
+            {!!info.discountAmount && (
+              <Text
+                color="gray300"
+                ml={5}
+                fontSize="xs"
+                textDecorLine="line-through"
+                textDecorColor="gray300"
+                textAlign="left"
+              >
+                ¥{info.amount}
+              </Text>
+            )}
+            <Div flex={1} />
+            <Plus
+              num={cartMap.has(info.id) ? cartMap.get(info.id).num : 0}
+              minus={() => {
+                changeNum(
+                  cartMap.get(info.id).specIds,
+                  cartMap.get(info.id).num - 1
+                );
+              }}
+              plusEvent={() => checkgoodsSpecification(info)}
+            />
+          </Div>
         </Div>
       </Div>
-    </Div>
+    </Button>
   );
 }
 export default function ClassificationList() {
+  const navigation = useNavigation();
   const {
     selectClass,
     cartMap,
@@ -109,6 +113,11 @@ export default function ClassificationList() {
             cartMap={cartMap}
             checkgoodsSpecification={checkgoodsSpecification}
             changeNum={changeNum}
+            goDetail={() =>
+              navigation.navigate('GoodsDetail', {
+                goodsId: item.id,
+              })
+            }
           />
         );
       })}

screens/Detail/Comment.jsx

@@ -9,6 +9,8 @@ import useModel from 'flooks';
 import Detail from './model';
 import DetailHeader from './DetailHeader';
 
+import CommentItem from './CommentCom';
+
 const AppraisalSortMap = new Map([
   [
     'ALL',
@@ -42,52 +44,6 @@ const AppraisalSortMap = new Map([
     },
   ],
 ]);
-const CommentItem = ({ info }) => {
-  const imgs = info.img ? info.img.split(',') : [];
-
-  const imageSize = imgs.length > 1 ? 80 : 167;
-  return (
-    <Div row py={10} px={15} bg="white" mt={10}>
-      <Image source={{ uri: info.avatar }} w={33} h={33} />
-      <Div flex={1} ml={5}>
-        <Div row>
-          <Div flex={1}>
-            <Text fontSize="sm" textAlign="left">
-              {info.nickname}
-            </Text>
-            <Div row>
-              <Icon name="like1" color="brand500" />
-              <Text fontSize="sm" color="brand500" textAlign="left">
-                {info.likes || 0}
-              </Text>
-            </Div>
-          </Div>
-          <Text fontSize="sm" color="gray400" textAlign="left">
-            {info.appraiseTime}
-          </Text>
-        </Div>
-        <Text my={5} textAlign="left">
-          {info.goodsAppraise}
-        </Text>
-        <Div row>
-          {imgs.map((item, index) => {
-            return (
-              <Image
-                key={index}
-                mt={5}
-                mr={5}
-                source={{ uri: item }}
-                w={imageSize}
-                h={imageSize}
-                rounded={3}
-              />
-            );
-          })}
-        </Div>
-      </Div>
-    </Div>
-  );
-};
 
 export default function Comment() {
   const { id } = useModel(Detail, ['id']);

screens/Detail/CommentCom.jsx

@@ -0,0 +1,51 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
+import { ScrollView } from 'react-native-gesture-handler';
+
+export default function CommentItem({ info }) {
+  const imgs = info.img ? info.img.split(',') : [];
+
+  const imageSize = imgs.length > 1 ? 80 : 167;
+  return (
+    <Div row py={10} px={15} bg="white" mt={10}>
+      <Image source={{ uri: info.avatar }} w={33} h={33} />
+      <Div flex={1} ml={5}>
+        <Div row>
+          <Div flex={1}>
+            <Text fontSize="sm" textAlign="left">
+              {info.nickname}
+            </Text>
+            <Div row>
+              <Icon name="like1" color="brand500" />
+              <Text fontSize="sm" color="brand500" textAlign="left">
+                {info.likes || 0}
+              </Text>
+            </Div>
+          </Div>
+          <Text fontSize="sm" color="gray400" textAlign="left">
+            {info.appraiseTime}
+          </Text>
+        </Div>
+        <Text my={5} textAlign="left">
+          {info.goodsAppraise}
+        </Text>
+        <Div row>
+          {imgs.map((item, index) => {
+            return (
+              <Image
+                key={index}
+                mt={5}
+                mr={5}
+                source={{ uri: item }}
+                w={imageSize}
+                h={imageSize}
+                rounded={3}
+              />
+            );
+          })}
+        </Div>
+      </Div>
+    </Div>
+  );
+}

screens/Detail/GoodsDetailScreen.jsx

@@ -0,0 +1,148 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { Dimensions } from 'react-native';
+import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
+import { ScrollView } from 'react-native-gesture-handler';
+
+import useModel from 'flooks';
+
+import { useRequest } from '@umijs/hooks';
+import User from '../../flooks/User'; // detail模块通用方法
+
+import Header from '../../components/Header';
+import SvgIcon from '../../components/SvgIcon';
+import CommentItem from './CommentCom';
+import request from '../../Utils/RequestUtils';
+
+const { width } = Dimensions.get('window');
+
+export default function LinksScreen({ route }) {
+  const { userInfo } = useModel(User, ['id']);
+
+  const { params } = route;
+  const { goodsId } = params;
+
+  const { data } = useRequest(`/goods/get/${goodsId}`, {
+    initialData: () => {
+      return {};
+    },
+    refreshDeps: [goodsId],
+  });
+  const appraisal = useRequest(
+    () => {
+      return request
+        .get(`/appraisal/goods?goodsId=${goodsId}`)
+        .then((res) => {
+          return Promise.resolve(res);
+        })
+        .catch(() => {
+          return Promise.resolve([]);
+        });
+    },
+    {
+      initialData: () => {
+        return [];
+      },
+      refreshDeps: [goodsId],
+    }
+	);
+	
+
+  const {
+    img,
+    name,
+    goodNum,
+    badNum,
+    monthSales,
+    amount,
+    discountAmount,
+    introduction,
+  } = data;
+
+  return (
+    <>
+      <Header title="商品详情" />
+      <ScrollView
+        contentContainerStyle={{ flexGrow: 1, backgroundColor: '#eee' }}
+      >
+        <Image source={img} w={width} h={width} />
+
+        <Div py={20} px={15} bg="white">
+          <Text fontSize="xl" fontWeight="bold">
+            {name}
+          </Text>
+
+          <Div row alignItems="center">
+            <Div row alignItems="center" mr={10}>
+              <SvgIcon name="zan" type="primary" width={18} height={18} />
+              <Text fontSize="sm" color="brand500" ml={3} textAlign="left">
+                {goodNum || 0}
+              </Text>
+            </Div>
+            <Div row alignItems="center" mr={10}>
+              <SvgIcon name="zan" Flip color="#000" width={18} height={18} />
+              <Text fontSize="sm" color="gray300" ml={3} textAlign="left">
+                {badNum || 0}
+              </Text>
+            </Div>
+            <Div row alignItems="center">
+              <Text size="c1" color="gray300" textAlign="left">
+                月售：
+                {monthSales || 0}
+              </Text>
+            </Div>
+          </Div>
+
+          <Div
+            row
+            alignItems="flex-end"
+            py={15}
+            borderBottomWidth={1}
+            borderBottomColor="gray100"
+          >
+            <Text fontSize="2xl" color="red500">
+              {discountAmount || amount}
+            </Text>
+            {!!discountAmount && (
+              <Text
+                fontSize="sm"
+                color="gray300"
+                textDecorLine="line-through"
+                textDecorStyle="solid"
+                textDecorColor="gray300"
+                mb={2}
+                ml={5}
+              >
+                ¥{amount}
+              </Text>
+            )}
+          </Div>
+
+          <Text color="gray300" fontSize="sm" pt={12}>
+            {introduction}
+          </Text>
+        </Div>
+
+        <Div bg="gray100">
+          <Text fontSize="xl" pt={22} pb={12} px={17}>
+            商品评价
+          </Text>
+
+          {appraisal.data.length === 0 ? (
+            <Div px={10} py={20} bg="gray100">
+              <Text color="gray300" textAlign="center">
+                暂无数据
+              </Text>
+            </Div>
+          ) : (
+            <Div bg="white" py={20}>
+              {appraisal.data.map((item, index) => {
+                return <CommentItem info={item} key={index} />;
+              })}
+            </Div>
+          )}
+        </Div>
+      </ScrollView>
+    </>
+  );
+}

screens/Detail/Recommend.jsx

@@ -4,6 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import { Flex } from '@ant-design/react-native';
 import { Card, IconButton, Colors } from 'react-native-paper';
 import { Div, Image, Text } from 'react-native-magnus';
+import { useNavigation } from '@react-navigation/native';
 
 import useModel from 'flooks';
 import Detail from './model';
@@ -11,6 +12,7 @@ import Detail from './model';
 import Plus from '../../components/Plus';
 
 export default function Order() {
+  const navigation = useNavigation();
   const {
     goodsList,
     checkgoodsSpecification,
@@ -33,7 +35,15 @@ export default function Order() {
           key={item.id}
           style={{ paddingHorizontal: 3, maxWidth: '50%' }}
         >
-          <Card elevation={2} style={styles.card}>
+          <Card
+            elevation={2}
+            style={styles.card}
+            onPress={() =>
+              navigation.navigate('GoodsDetail', {
+                goodsId: item.id,
+              })
+            }
+          >
             <Card.Cover
               style={styles.image2}
               resizeMode="cover"

screens/Main/Home/CategoryModel.js

@@ -0,0 +1,116 @@
+import request from '../../../Utils/RequestUtils';
+import Toast from '../../../flooks/Toast';
+import MapModel from '../../Map/model';
+
+const CategoryModel = (now) => ({
+  list: [],
+  finish: false,
+  page: 0,
+  size: 20,
+  sort: '',
+  filter: '',
+  tag: '',
+  natureId: '',
+  endAmount: '',
+  categoryId: null,
+  merchantNatureList: [],
+  getData(chooseCategoryId) {
+    if (chooseCategoryId != null) {
+      now({ categoryId: chooseCategoryId });
+    }
+    const {
+      page,
+      size,
+      list,
+      sort,
+      filter,
+      tag,
+      natureId,
+      endAmount,
+      categoryId,
+    } = now();
+    const { loading, warnning, clearLoading } = now(Toast);
+    loading();
+    const { chooseInfo } = now(MapModel);
+    const { location } = chooseInfo;
+    const params = { latitude: location.lat, longitude: location.lng };
+    if (sort) {
+      params.sort = sort;
+    }
+
+    if (filter) {
+      params.filter = filter;
+    }
+    if (tag) {
+      params.tag = tag;
+    }
+    if (natureId) {
+      params.natureId = natureId;
+    }
+    if (endAmount) {
+      params.startAmount = 0;
+      params.endAmount = endAmount;
+    }
+    request
+      .get('/settings/show', {
+        params,
+      })
+      .then((res) => {
+        clearLoading();
+        now({
+          list: list.concat(res),
+          finish: true,
+          page: 0,
+          loading: false,
+        });
+      })
+      .catch((e) => {
+        warnning(e.error);
+      });
+  },
+  changeChooseMap(info) {
+    console.log(info);
+  },
+  changeSort(type) {
+    now({
+      sort: type,
+      page: 0,
+      list: [],
+    });
+    const { getData } = now();
+    getData();
+  },
+  getNature() {
+    request.get('/merchantNature/all').then((res) => {
+      now({
+        merchantNatureList: res.content,
+      });
+    });
+  },
+  ChangeFiliter(filter, tag, natureId, endAmount) {
+    now({
+      filter,
+      tag,
+      natureId,
+      endAmount,
+      page: 0,
+      list: [],
+    });
+    const { getData } = now();
+    getData();
+  },
+  clearFiliter() {
+    now({
+      filter: '',
+      tag: '',
+      natureId: '',
+      endAmount: '',
+      page: 0,
+      list: [],
+    });
+    const { getData } = now();
+    getData();
+  },
+});
+
+export default CategoryModel;

screens/Main/Home/Menu.jsx

@@ -5,14 +5,25 @@ import { Flex, WingBlank } from '@ant-design/react-native';
 import { Card } from 'react-native-paper';
 import { Icon, Text, Button, Div } from 'react-native-magnus';
 import useModel from 'flooks';
+import { useNavigation } from '@react-navigation/native';
 import HomeModel from './model';
 
 export default function RecommendStore() {
   const { categories, timeTag } = useModel(HomeModel);
 
+  const navigation = useNavigation();
+
   const CardCom = ({ info }) => (
     <Div flex={1}>
-      <Card elevation={0} style={styles.card}>
+      <Card
+        elevation={0}
+        style={styles.card}
+        onPress={() =>
+          navigation.navigate('HomeCategory', {
+            categoryId: info.id,
+          })
+        }
+      >
         <Card.Cover
           style={styles.image2}
           resizeMode="cover"

screens/Main/Home/MerchantCom.js

@@ -53,10 +53,8 @@ export default function MerchantCom(props) {
   }, [category, merchantNature]);
 
   const long = useCreation(() => {
-    if (distance < 1000) {
-      return `${distance}${t('mi')}`;
-    } else if (distance) {
-      return `${(distance / 1000).toFixed(1)}km`;
+    if (distance) {
+      return `${(distance / 1000).toFixed(2)}km`;
     } else {
       return false;
     }

screens/Main/Home/RecommendStore.jsx

@@ -7,9 +7,17 @@ import { useTranslation } from 'react-i18next';
 import { Div, Button, Text, Image } from 'react-native-magnus';
 import { useNavigation } from '@react-navigation/native';
 import useModel from 'flooks';
+import { useCreation } from '@umijs/hooks';
 import HomeModel from './model';
 
-function CardCom({ info, onPress }) {
+function CardCom({ info, distance, onPress }) {
+  const long = useCreation(() => {
+    if (distance) {
+      return `${(distance / 1000).toFixed(2)}km`;
+    } else {
+      return false;
+    }
+  }, [distance]);
   return (
     <Button bg="hide" block flex={1} onPress={onPress}>
       <Div px={5} flex={1} alignItems="center">
@@ -56,6 +64,7 @@ export default function RecommendStore() {
             <CardCom
               key={item.id}
               info={item}
+              distance={item.distance}
               onPress={() => {
                 navigation.navigate('MerchantDetail', {
                   merchantId: item.id,

screens/Main/HomeCategoryScreen.tsx

@@ -0,0 +1,255 @@
+import { StackScreenProps } from '@react-navigation/stack';
+import * as React from 'react';
+import { View, Animated, Dimensions } from 'react-native';
+import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
+import { useBoolean, useCreation, useRequest, useMount } from '@umijs/hooks';
+import { useTranslation } from 'react-i18next';
+import { useAnimation } from 'react-native-animation-hooks';
+import { ScrollView } from 'react-native-gesture-handler';
+import useModel from 'flooks';
+import HomeModel from './Home/model';
+import CategoryModel from './Home/CategoryModel';
+import { sortMap, filterMap, tagMap } from '../../Utils/MerchantUtils';
+import Filter from './Home/Filter';
+import Header from '../../components/Header';
+import MerchantCom from './Home/MerchantCom';
+
+const { height } = Dimensions.get('window');
+
+export default function HomeCategoryScreen({
+  navigation,
+  route,
+}: StackScreenProps) {
+  const { params } = route;
+  const { categoryId } = params;
+  const { t } = useTranslation();
+  const SortMenu = useBoolean(false);
+  const filterMenu = useBoolean(false);
+  const {
+    sort,
+    changeSort,
+    merchantNatureList,
+    getNature,
+    clearFiliter,
+    ChangeFiliter,
+    filter,
+    tag,
+    natureId,
+    endAmount,
+    list,
+    getData,
+  } = useModel(CategoryModel, [
+    'sort',
+    'merchantNatureList',
+    'filter',
+    'tag',
+    'natureId',
+    'endAmount',
+    'list',
+  ]);
+  const soltType = useCreation(() => {
+    return 'first';
+  }, [sort]);
+
+  const sortInfo = useCreation(() => {
+    return sortMap.get(sort);
+  }, [sort]);
+
+  const SortHeight = useAnimation({
+    type: 'timing',
+    initialValue: 0,
+    duration: 100,
+    toValue: SortMenu.state ? 230 : 0,
+  });
+
+  const { data } = useRequest(`/category/tree?id=${categoryId}`, {
+    refreshDeps: [categoryId],
+    initialData: [],
+    formatResult: (res) => {
+      return [...res];
+    },
+    onSuccess: (res) => {
+      if (res.length > 0) {
+        getData(res[0].id);
+      }
+    },
+  });
+
+  const chooseCategory = useRequest(`/category/get/${categoryId}`, {
+    refreshDeps: [categoryId],
+    initialData: {},
+  });
+
+  return (
+    <>
+      <Header title={chooseCategory.data.name || '分类'} />
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          backgroundColor: '#f2f2f2',
+          zIndex: 1,
+          position: 'relative',
+        }}
+        stickyHeaderIndices={[1]}
+      >
+        <Div py={10} px={15} row>
+          <Image flex={1} h={75} source={{ uri: chooseCategory.data.icon }} />
+        </Div>
+        <Div bg="white">
+          <Div row>
+            {data.map((item) => {
+              return (
+                <Button key={item.id} bg="hide" color="black" fontSize="sm">
+                  {item.name}
+                </Button>
+              );
+            })}
+          </Div>
+          <Div row bg="white" alignItems="center">
+            <Button
+              onPress={() => {
+                SortMenu.toggle();
+                filterMenu.setFalse();
+              }}
+              bg="hide"
+              px={10}
+            >
+              <Text
+                fontSize="xs"
+                color={
+                  sort && sortInfo.showType !== 'top' ? 'brand500' : 'gray600'
+                }
+              >
+                {sortInfo.showType !== 'top'
+                  ? sortInfo.name
+                  : sortMap.get('').name}
+              </Text>
+              <Icon
+                name="down"
+                fontSize="xs"
+                color={
+                  sort && sortInfo.showType !== 'top' ? 'brand500' : 'gray600'
+                }
+              />
+            </Button>
+
+            <Button
+              fontSize="xs"
+              bg="hide"
+              color={sort === '7' ? 'brand500' : 'gray600'}
+              px={10}
+              onPress={() => {
+                changeSort('7');
+                SortMenu.setFalse();
+                filterMenu.setFalse();
+              }}
+            >
+              {t('ju-li')}
+            </Button>
+            <Button
+              fontSize="xs"
+              bg="hide"
+              color={sort === '8' ? 'brand500' : 'gray600'}
+              px={10}
+              onPress={() => {
+                changeSort('8');
+                SortMenu.setFalse();
+                filterMenu.setFalse();
+              }}
+            >
+              {t('xiao-liang')}
+            </Button>
+            <Div flex={1} />
+            <Button
+              onPress={() => {
+                filterMenu.toggle();
+                SortMenu.setFalse();
+              }}
+              bg="hide"
+              px={10}
+            >
+              <Text fontSize="xs" color="gray600">
+                {t('shai-xuan')}
+              </Text>
+              <Icon
+                name="down"
+                fontSize="xs"
+                color={
+                  sort && sortInfo.showType !== 'top' ? 'brand500' : 'gray600'
+                }
+              />
+            </Button>
+          </Div>
+          <Animated.View
+            style={{
+              height: SortHeight,
+              overflow: 'hidden',
+              backgroundColor: '#fff',
+            }}
+          >
+            {[...sortMap.keys()].map((item, index) => {
+              const info = sortMap.get(item);
+              return info.showType !== 'top' ? (
+                <Button
+                  key={index}
+                  block
+                  bg="white"
+                  rounded="none"
+                  onPress={() => {
+                    SortMenu.setFalse();
+                    changeSort(item);
+                  }}
+                >
+                  <Text
+                    fontSize="xs"
+                    flex={1}
+                    color={sort === item ? 'brand500' : 'gray600'}
+                  >
+                    {info.name}
+                  </Text>
+                </Button>
+              ) : (
+                <></>
+              );
+            })}
+          </Animated.View>
+          <Filter
+            show={filterMenu.state}
+            merchantNatureList={merchantNatureList}
+            filters={filter}
+            tags={tag}
+            natureId={natureId}
+            endAmount={endAmount}
+            clear={() => {
+              filterMenu.setFalse();
+              clearFiliter();
+            }}
+            submit={(filter, tag, natureId, endAmount) => {
+              filterMenu.setFalse();
+            }}
+          />
+        </Div>
+        {list.length > 0 &&
+          list.map((item, index) => {
+            return <MerchantCom key={item.id} info={item} />;
+          })}
+
+        {(SortMenu.state || filterMenu.state) && (
+          <Button
+            bg="black600"
+            position="absolute"
+            top={95}
+            left={0}
+            right={0}
+            bottom={0}
+            zIndex={2}
+            onPress={() => {
+              SortMenu.setFalse();
+              filterMenu.setFalse();
+            }}
+          />
+        )}
+      </ScrollView>
+    </>
+  );
+}

screens/Order/ApplayCancelScreen.jsx

@@ -6,7 +6,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { TextareaItem } from '@ant-design/react-native';
 import { useTranslation } from 'react-i18next';
 
-// import { PullPicker } from 'teaset';
+import { PullPicker } from 'teaset';
 
 import { useRoute } from '@react-navigation/native';
 import { useCreation } from '@umijs/hooks';

screens/Order/OrderDetailListScreen.jsx

@@ -0,0 +1,56 @@
+import * as WebBrowser from 'expo-web-browser';
+import * as React from 'react';
+import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
+import { ScrollView } from 'react-native-gesture-handler';
+
+import { useRequest, useCreation, useMount } from '@umijs/hooks';
+
+import useModel from 'flooks';
+
+import Header from '../../components/Header';
+
+export default function OrderDetailListScreen({ route }) {
+  const { params } = route;
+  const { orderId } = params;
+
+  const { data } = useRequest(`/orderInfo/get/${orderId}`, {
+    refreshDeps: [orderId],
+    initialData: {},
+  });
+
+  const { orderTime, timeOfArrival } = data;
+  return (
+    <>
+      <Header title="订单追踪" />
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          backgroundColor: '#eee',
+        }}
+      >
+        <Div bg="white" py={5}>
+          {!!orderTime && (
+            <Div row justifyContent="space-between" py={5} px={15}>
+              <Text fontSize="sm" color="gray600">
+                下单时间
+              </Text>
+              <Text fontSize="sm" color="gray500">
+                {orderTime}
+              </Text>
+            </Div>
+          )}
+          {!!timeOfArrival && (
+            <Div row justifyContent="space-between" py={5} px={15}>
+              <Text fontSize="sm" color="gray600">
+                用户收到时间
+              </Text>
+              <Text fontSize="sm" color="gray500">
+                {timeOfArrival}
+              </Text>
+            </Div>
+          )}
+        </Div>
+      </ScrollView>
+    </>
+  );
+}

screens/Order/OrderDetailScreen.jsx

@@ -270,278 +270,122 @@ export default function OrderScreen({ navigation }) {
       >
         <View {...panResponder.panHandlers}>
           <Div pt={10} pb={10} px={15}>
-            <View style={[styles.card]}>
-              {!cancelOrder &&
-                (finish ? (
-                  <Text fontSize="xl">
-                    <Text
-                      fontSize="xl"
-                      color="brand500"
-                      mr={10}
-                      fontWeight="bold"
-                    >
-                      {statusInfo.name}
+            <Button
+              block
+              bg="hide"
+              p={0}
+              onPress={() =>
+                navigation.navigate('OrderDetailList', {
+                  orderId,
+                })
+              }
+            >
+              <Div flex={1}>
+                <View style={styles.card}>
+                  <Div row pb={10}>
+                    <Text fontSize="xl" fontWeight="bold">
+                      {orderInfo.merShowName}
                     </Text>
-                    {new Time(
-                      orderInfo.userReceivedTime,
-                      'yyyy-MM-DD HH:mm:ss'
-                    ).getFormat('HH:mm')}
-                    {t('song-da')}
-                  </Text>
-                ) : (
-                  <Text fontSize="xl">
-                    <Text
-                      fontSize="xl"
-                      color="brand500"
-                      mr={10}
-                      fontWeight="bold"
+                    <Button
+                      fontSize="xs"
+                      w={100}
+                      bg="white"
+                      color="gray600"
+                      borderColor="brand500"
+                      borderWidth={1}
+                      rounded={3}
+                      ml={14}
+                      onPress={() => {
+                        if (!orderInfo.muserId) {
+                          warnning('商家信息有误请联系客服帮你催单');
+                        } else {
+                          navigation.navigate('Chat', {
+                            toUserId: orderInfo.muserId,
+                            toUserName: orderInfo.merShowName,
+                          });
+                        }
+                      }}
                     >
-                      {statusInfo.name}
-                    </Text>
-                    {t('yu-ji')}
-                    {new Time(
-                      orderInfo.timeOfArrival,
-                      'yyyy-MM-DD HH:mm:ss'
-                    ).getFormat('HH:mm')}
-                    {t('song-da')}
-                  </Text>
-                ))}
-              {cancelOrder && (
-                <Div row>
-                  <Text
-                    fontSize="xl"
-                    color="brand500"
-                    mr={10}
-                    fontWeight="bold"
-                  >
-                    {statusInfo.name}
-                  </Text>
-                  {!!orderInfo.reason && (
-                    <Text fontSize="xl" color="red500">
-                      ({reasonMap.get(orderInfo.reason).name})
-                    </Text>
-                  )}
-                </Div>
-              )}
-              <Div row mt={10}>
-                <Button
-                  fontSize="xs"
-                  flex={1}
-                  mx={5}
-                  bg="white"
-                  color="gray600"
-                  borderColor="brand500"
-                  borderWidth={1}
-                  rounded={3}
-                  onPress={() => connectKefu(orderId)}
-                >
-                  {t('lian-xi-ke-fu')}
-                </Button>
-
-                <Button
-                  fontSize="xs"
-                  flex={1}
-                  mx={5}
-                  bg="white"
-                  color="gray600"
-                  borderColor="brand500"
-                  borderWidth={1}
-                  rounded={3}
-                  onPress={() => connectKefu(orderId)}
-                >
-                  立即支付
-                </Button>
-
-                {!finish && hasRider && (
-                  <Button
-                    fontSize="xs"
-                    flex={1}
-                    mx={5}
-                    bg="white"
-                    color="gray600"
-                    borderColor="brand500"
-                    borderWidth={1}
-                    rounded={3}
-                    onPress={(e) => {
-                      if (!orderInfo.ruserId) {
-                        warnning('骑手信息有误请联系客服');
-                      } else {
-                        navigation.navigate('Chat', {
-                          toUserId: orderInfo.ruserId,
-                          toUserName: orderInfo.riderName,
-                        });
-                      }
-                      console.log(e);
-                    }}
-                  >
-                    {t('lian-xi-qi-shou')}
-                  </Button>
-                )}
-                {!finish && isPay && (
-                  <Button
-                    fontSize="xs"
-                    flex={1}
-                    mx={5}
-                    bg="white"
-                    color="gray600"
-                    borderColor="brand500"
-                    borderWidth={1}
-                    rounded={3}
-                    onPress={() => {
-                      if (!orderInfo.muserId) {
-                        warnning('商家信息有误请联系客服帮你催单');
-                      } else {
-                        navigation.navigate('Chat', {
-                          toUserId: orderInfo.muserId,
-                          toUserName: orderInfo.merShowName,
-                          type: 'Reminder',
-                        });
-                      }
-                    }}
-                  >
-                    {t('cui-dan')}
-                  </Button>
-                )}
-                {finish && !cancelOrder && (
-                  <Button
-                    fontSize="xs"
-                    flex={1}
-                    mx={5}
-                    bg="white"
-                    color="gray600"
-                    borderColor="brand500"
-                    borderWidth={1}
-                    rounded={3}
-                    onPress={() => {
-                      navigation.navigate('RewardRider', {
-                        orderId,
-                      });
-                    }}
-                  >
-                    {t('da-shang-qi-shou')}
-                  </Button>
-                )}
-                {finish && !Allfinish && !cancelOrder && (
-                  <Button
-                    fontSize="xs"
-                    flex={1}
-                    mx={5}
-                    bg="white"
-                    color="gray600"
-                    borderColor="brand500"
-                    borderWidth={1}
-                    rounded={3}
-                    onPress={() => {
-                      navigation.navigate('Evaluate', {
-                        orderId,
-                      });
-                    }}
-                  >
-                    {t('li-ji-ping-jia')}
-                  </Button>
-                )}
-              </Div>
-            </View>
-
-            <View style={[styles.card]}>
-              <Div row pb={10}>
-                <Text fontSize="xl" fontWeight="bold">
-                  {orderInfo.merShowName}
-                </Text>
-                <Button
-                  fontSize="xs"
-                  w={100}
-                  bg="white"
-                  color="gray600"
-                  borderColor="brand500"
-                  borderWidth={1}
-                  rounded={3}
-                  ml={14}
-                  onPress={() => {
-                    if (!orderInfo.muserId) {
-                      warnning('商家信息有误请联系客服帮你催单');
-                    } else {
-                      navigation.navigate('Chat', {
-                        toUserId: orderInfo.muserId,
-                        toUserName: orderInfo.merShowName,
-                      });
-                    }
-                  }}
-                >
-                  {t('lian-xi-shang-jia')}
-                </Button>
-              </Div>
-              <Div>
-                {orderGoodsSpecs.map((item) => {
-                  return (
-                    <GoodsItem info={item} goods={item.goods} key={item.id} />
-                  );
-                })}
-              </Div>
-              <Flex style={styles.info}>
-                <Flex.Item>
-                  <Flex>
+                      {t('lian-xi-shang-jia')}
+                    </Button>
+                  </Div>
+                  <Div>
+                    {orderGoodsSpecs.map((item) => {
+                      return (
+                        <GoodsItem
+                          info={item}
+                          goods={item.goods}
+                          key={item.id}
+                        />
+                      );
+                    })}
+                  </Div>
+                  <Flex style={styles.info}>
+                    <Flex.Item>
+                      <Flex>
+                        <Text fontSize="xs" color="gray300" textAlign="left">
+                          {t('bao-zhuang-fei')}
+                        </Text>
+                        <Text fontSize="xs" color="gray300" textAlign="left">
+                          {t('can-he')}
+                        </Text>
+                      </Flex>
+                    </Flex.Item>
                     <Text fontSize="xs" color="gray300" textAlign="left">
-                      {t('bao-zhuang-fei')}
+                      ¥{orderInfo.packingPrice}
                     </Text>
+                  </Flex>
+                  <Flex style={styles.info}>
+                    <Flex.Item>
+                      <Text fontSize="xs" color="gray300" textAlign="left">
+                        {t('pei-song-fei-ding-dong-zhuan-song')}
+                      </Text>
+                    </Flex.Item>
                     <Text fontSize="xs" color="gray300" textAlign="left">
-                      {t('can-he')}
+                      ¥{orderInfo.deliveryAmount}
                     </Text>
                   </Flex>
-                </Flex.Item>
-                <Text fontSize="xs" color="gray300" textAlign="left">
-                  ¥{orderInfo.packingPrice}
-                </Text>
-              </Flex>
-              <Flex style={styles.info}>
-                <Flex.Item>
-                  <Text fontSize="xs" color="gray300" textAlign="left">
-                    {t('pei-song-fei-ding-dong-zhuan-song')}
-                  </Text>
-                </Flex.Item>
-                <Text fontSize="xs" color="gray300" textAlign="left">
-                  ¥{orderInfo.deliveryAmount}
-                </Text>
-              </Flex>
-              <Flex style={styles.info}>
-                <Flex.Item>
-                  <Text fontSize="xs" color="gray300" textAlign="left">
-                    {t('man-jian')}
-                  </Text>
-                </Flex.Item>
-                <Text fontSize="xs" color="red500" textAlign="left">
-                  -¥{orderInfo.fullReduction}
-                </Text>
-              </Flex>
-              {!!orderInfo.firstBuy && (
-                <Flex style={styles.info}>
-                  <Flex.Item>
-                    <Text fontSize="xs" color="gray300" textAlign="left">
-                      {t('shou-dan')}
+                  <Flex style={styles.info}>
+                    <Flex.Item>
+                      <Text fontSize="xs" color="gray300" textAlign="left">
+                        {t('man-jian')}
+                      </Text>
+                    </Flex.Item>
+                    <Text fontSize="xs" color="red500" textAlign="left">
+                      -¥{orderInfo.fullReduction}
                     </Text>
-                  </Flex.Item>
-                  <Text fontSize="xs" color="red500" textAlign="left">
-                    ¥{orderInfo.firstBuy}
-                  </Text>
-                </Flex>
-              )}
+                  </Flex>
+                  {!!orderInfo.firstBuy && (
+                    <Flex style={styles.info}>
+                      <Flex.Item>
+                        <Text fontSize="xs" color="gray300" textAlign="left">
+                          {t('shou-dan')}
+                        </Text>
+                      </Flex.Item>
+                      <Text fontSize="xs" color="red500" textAlign="left">
+                        ¥{orderInfo.firstBuy}
+                      </Text>
+                    </Flex>
+                  )}
 
-              <Flex style={styles.info}>
-                <Flex.Item>
-                  <Text fontSize="xs" color="gray300" textAlign="left">
-                    {t('hong-bao')}
-                  </Text>
-                </Flex.Item>
-                <Text fontSize="xs" color="red500" textAlign="left">
-                  -¥{orderInfo.redBag || 0}
-                </Text>
-              </Flex>
-              <Flex style={styles.total} justify="end">
-                <Text size="s1">
-                  {t('xiao-ji')} ¥{orderInfo.realAmount}
-                </Text>
-              </Flex>
-            </View>
+                  <Flex style={styles.info}>
+                    <Flex.Item>
+                      <Text fontSize="xs" color="gray300" textAlign="left">
+                        {t('hong-bao')}
+                      </Text>
+                    </Flex.Item>
+                    <Text fontSize="xs" color="red500" textAlign="left">
+                      -¥{orderInfo.redBag || 0}
+                    </Text>
+                  </Flex>
+                  <Flex style={styles.total} justify="end">
+                    <Text size="s1">
+                      {t('xiao-ji')} ¥{orderInfo.realAmount}
+                    </Text>
+                  </Flex>
+                </View>
+              </Div>
+            </Button>
 
             <View style={[styles.card]}>
               <Text size="c1">{t('ding-dan-xin-xi')}</Text>

screens/Order/OrderScreen.jsx

@@ -148,7 +148,7 @@ function Item({
           info={info}
         />
         <Flex justify="end" style={styles.btns}>
-          {info.status !== 'UNPAID' && (
+          {info.status === 'UNPAID' && (
             <Button
               w={100}
               fontSize="xs"