我的投诉

locales/zh-CN.json

@@ -109,5 +109,13 @@
   "shu-ru-shen-fen-zheng-hao": "输入身份证号",
   "ding-dong-wai-mai-kuai-jie-zhi-fu-fu-wu-xie-yi": "《叮咚外卖快捷支付服务协议》",
   "ti-jiao-cheng-gong": "提交成功",
-  "quan-bu": "全部"
+  "quan-bu": "全部",
+  "ti-xian-jie-guo": "提现结果",
+  "wo-de-ping-jia": "我的评价",
+  "fei-chang-cha": "非常差",
+  "yi-ban": "一般",
+  "chao-zan": "超赞",
+  "wu-shu-ju": "无数据",
+  "dao-di-le": "到底了",
+  "wo-de-tou-su": "我的投诉"
 }

mine/MineAppraisalScreen.tsx

@@ -0,0 +1,200 @@
+import { StackScreenProps } from '@react-navigation/stack';
+import * as React from 'react';
+import * as Animatable from 'react-native-animatable';
+import {
+  Div,
+  Button,
+  Image,
+  Text,
+  Avatar,
+  Icon,
+  Tag,
+} from 'react-native-magnus';
+import { FlatList } from 'react-native-gesture-handler';
+import { RefreshControl } from 'react-native';
+
+import { useTranslation } from 'react-i18next';
+import { useRequest, useCreation } from 'ahooks';
+
+import { riderScore } from '../utils/RiderInfoUtils';
+
+import { MonthDate, getSearchDate } from '../utils/TimeUtils';
+import request from '../utils/RequestUtils';
+
+const AppraisalCom = ({ info }) => {
+  const {
+    content,
+    date,
+    merShowName,
+    riderAppraise,
+    riderLike,
+    userNickname,
+  } = info;
+  return (
+    <Div mx={14} mb={10} bg="white" rounded="sm">
+      <Div
+        h={50}
+        row
+        alignItems="center"
+        justifyContent="space-between"
+        px={14}
+        borderBottomColor="gray100"
+        borderBottomWidth={1}
+      >
+        <Text fontSize="sm" color="gray500">
+          {userNickname}
+        </Text>
+        <Image w={30} h={30} source={riderScore.get(riderLike).img} />
+      </Div>
+
+      <Div row py={5} px={11} flexWrap="wrap">
+        {content.map((item, index) => {
+          return (
+            <Tag
+              fontSize="xs"
+              key={index}
+              bg="white"
+              borderColor="gray100"
+              borderWidth={1}
+              ml={3}
+              mt={5}
+              color="gray500"
+            >
+              {item}
+            </Tag>
+          );
+        })}
+        {riderAppraise && (
+          <Text fontSize="sm" py={5} w="100%" mt={5} color="gray500">
+            {riderAppraise}
+          </Text>
+        )}
+      </Div>
+
+      <Div row justifyContent="space-between" p={14}>
+        <Text fontSize="xs" color="gray500">
+          {merShowName}
+        </Text>
+        <Text fontSize="xs" color="gray500">
+          {date}
+        </Text>
+      </Div>
+    </Div>
+  );
+};
+interface Result {
+  list: Item[];
+  last: boolean;
+  current: number;
+  empty: boolean;
+}
+
+export default function MineAppraisalScreen({ navigation }: StackScreenProps) {
+  const { t } = useTranslation();
+  const [type, settype] = React.useState<string>('');
+
+  const [show, setshow] = React.useState<boolean>(false);
+
+  const monthDate = new MonthDate();
+  const [showDate, setshowDate] = React.useState<string>(monthDate.showList[0]);
+  const [layout, setLayout] = React.useState<any>();
+  const { data, loading, loadMore, loadingMore, reload } = useRequest(
+    (d: Result | undefined) => {
+      return request.get('/appraisal/riderList', {
+        params: { riderId: 2006 },
+      });
+    },
+    {
+      formatResult: (response) => {
+        return {
+          list: response,
+          last: true,
+          empty: response.length === 0,
+        };
+      },
+      isNoMore: (r: Result) => {
+        return false;
+      },
+      defaultLoading: true,
+      debounceInterval: 1000,
+      loadMore: true,
+    }
+  );
+
+  const showList = useCreation(() => {
+    if (type) {
+      return data.list.filter((item) => {
+        return item.riderLike === type;
+      });
+    } else {
+      return data.list;
+    }
+  }, [data, type]);
+
+  return (
+    <Div bg="gray100" flex={1}>
+      <Div px={15} py={10} bg="white" row>
+        {[...riderScore.keys()].map((item, index) => {
+          const info = riderScore.get(item);
+          return (
+            <Button
+              key={index}
+              bg="white"
+              w="33.33%"
+              onPress={() => settype(item)}
+            >
+              <Div alignItems="center">
+                <Image source={info.img} w={53} h={53} />
+                <Text
+                  fontSize="sm"
+                  mt={10}
+                  color={item === type ? 'yellow500' : 'gray500'}
+                  fontWeight={item === type ? 'bold' : 'normal'}
+                >
+                  {t(info.name)}
+                </Text>
+              </Div>
+            </Button>
+          );
+        })}
+      </Div>
+      <FlatList
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={reload} />
+        }
+        contentContainerStyle={{
+          flexGrow: 1,
+          backgroundColor: '#f2f2f2',
+          paddingTop: 10,
+        }}
+        data={showList}
+        renderItem={({ item }) => {
+          return <AppraisalCom info={item} />;
+        }}
+        keyExtractor={(item) => item.id.toString()}
+        ListFooterComponent={() => {
+          return (
+            <>
+              {showList.length !== 0 && (
+                <Text p={15} textAlign="center">
+                  {data.last ? t('dao-di-le') : t('jia-zai-zhong')}
+                </Text>
+              )}
+            </>
+          );
+        }}
+        ListEmptyComponent={() => {
+          return (
+            <>
+              {showList.length === 0 && !loading && (
+                <Text textAlign="center" p={15}>
+                  {t('wu-shu-ju')}
+                </Text>
+              )}
+            </>
+          );
+        }}
+      />
+    </Div>
+  );
+}

mine/MineComplaint.tsx

@@ -0,0 +1,133 @@
+import { StackScreenProps } from '@react-navigation/stack';
+import * as React from 'react';
+import * as Animatable from 'react-native-animatable';
+import {
+  Div,
+  Button,
+  Image,
+  Text,
+  Avatar,
+  Icon,
+  Tag,
+} from 'react-native-magnus';
+import { FlatList } from 'react-native-gesture-handler';
+import { RefreshControl } from 'react-native';
+
+import { useTranslation } from 'react-i18next';
+import { useRequest, useCreation } from 'ahooks';
+
+import { riderScore } from '../utils/RiderInfoUtils';
+
+import { MonthDate, getSearchDate } from '../utils/TimeUtils';
+import request from '../utils/RequestUtils';
+
+const AppraisalCom = ({ info }) => {
+  const {
+    content,
+    enabled,
+    id,
+    img,
+    orderId,
+    resolve,
+    solution,
+    target,
+    time,
+    type,
+  } = info;
+  const imgs = img ? img.split(',') : [];
+  return (
+    <Div mb={10} bg="white" p={15}>
+      <Text fontSize="sm">投诉类型:{type}</Text>
+      <Text fontSize="sm">投诉时间:{time}</Text>
+      <Text
+        fontSize="sm"
+        color="gray500"
+        pt={10}
+        borderTopColor="gray100"
+        borderTopWidth={1}
+      >
+        {content}
+      </Text>
+      <Div row>
+        {imgs.map((item, index) => {
+          return (
+            <Image source={item} key={index} w={36} h={36} mr={13} mt={10} />
+          );
+        })}
+      </Div>
+    </Div>
+  );
+};
+interface Result {
+  list: Item[];
+  last: boolean;
+  current: number;
+  empty: boolean;
+}
+
+export default function MineAppraisalScreen({ navigation }: StackScreenProps) {
+  const { t } = useTranslation();
+
+  const { data, loading, loadMore, loadingMore, reload } = useRequest(
+    (d: Result | undefined) => {
+      return request.get(__DEV__ ? '/complaint/all' : '/complaint/my');
+    },
+    {
+      formatResult: (response) => {
+        return {
+          list: __DEV__ ? response.content : response,
+          last: true,
+          empty: __DEV__ ? response.empty : response.length === 0,
+        };
+      },
+      isNoMore: (r: Result) => {
+        return false;
+      },
+      defaultLoading: true,
+      debounceInterval: 1000,
+      loadMore: true,
+    }
+  );
+
+  return (
+    <Div bg="gray100" flex={1}>
+      <FlatList
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={reload} />
+        }
+        contentContainerStyle={{
+          flexGrow: 1,
+          backgroundColor: '#f2f2f2',
+          paddingTop: 10,
+        }}
+        data={data.list}
+        renderItem={({ item }) => {
+          return <AppraisalCom info={item} />;
+        }}
+        keyExtractor={(item) => item.id.toString()}
+        ListFooterComponent={() => {
+          return (
+            <>
+              {!data.empty && (
+                <Text p={15} textAlign="center">
+                  {data.last ? t('dao-di-le') : t('jia-zai-zhong')}
+                </Text>
+              )}
+            </>
+          );
+        }}
+        ListEmptyComponent={() => {
+          return (
+            <>
+              {!loading && (
+                <Text textAlign="center" p={15}>
+                  {t('wu-shu-ju')}
+                </Text>
+              )}
+            </>
+          );
+        }}
+      />
+    </Div>
+  );
+}

mine/MineScreen.tsx

@@ -51,7 +51,15 @@ export default function RegisterScreen({ navigation }: StackScreenProps) {
           </Button>
         </Div>
         <Div bg="gray100" p={10}>
-          <Button block bg="white" p={10} rounded="sm">
+          <Button
+            block
+            bg="white"
+            p={10}
+            rounded="sm"
+            onPress={() =>
+              navigation.navigate('MineStack', { screen: 'Wallet' })
+            }
+          >
             <Div flex={1} row>
               <Div flex={1}>
                 <Text>我的叮咚币</Text>
@@ -80,13 +88,35 @@ export default function RegisterScreen({ navigation }: StackScreenProps) {
             <Icon name="right" />
           </Div>
         </Button>
-        <Button block bg="white" p={20} rounded="sm" mb={10}>
+        <Button
+          block
+          bg="white"
+          p={20}
+          rounded="sm"
+          mb={10}
+          onPress={() =>
+            navigation.navigate('MineStack', {
+              screen: 'MineAppraisal',
+            })
+          }
+        >
           <Div flex={1} row>
             <Text flex={1}>我的评价</Text>
             <Icon name="right" />
           </Div>
         </Button>
-        <Button block bg="white" p={20} rounded="sm" mb={10}>
+        <Button
+          block
+          bg="white"
+          p={20}
+          rounded="sm"
+          mb={10}
+          onPress={() =>
+            navigation.navigate('MineStack', {
+              screen: 'MineComplaint',
+            })
+          }
+        >
           <Div flex={1} row>
             <Text flex={1}>我的投诉</Text>
             <Icon name="right" />

navigation/MineStackNavigator.tsx

@@ -16,6 +16,8 @@ import { MineStackParamList } from '../types';
 
 import MineInfoScreen from '../mine/MineInfoScreen';
 import ChangePasswordScreen from '../mine/ChangePasswordScreen';
+import MineAppraisalScreen from '../mine/MineAppraisalScreen';
+import MineComplaintScreen from '../mine/MineComplaint';
 
 //叮咚币
 import MineWalletScreen from '../wallet/MineWalletScreen';
@@ -34,7 +36,7 @@ export default function Navigation({
   const { t } = useTranslation();
   return (
     <MineStack.Navigator
-      initialRouteName="MineRecord"
+      initialRouteName="MineComplaint"
       screenOptions={{
         cardOverlayEnabled: true,
         cardStyle: { backgroundColor: '#f2f2f2', flex: 1 },
@@ -87,14 +89,29 @@ export default function Navigation({
         name="WithdrawResult"
         component={WithdrawResultScreen}
         options={{
-          title: '提现结果',
+          title: t('ti-xian-jie-guo'),
         }}
       />
+      <MineStack.Screen
+        name="MineAppraisal"
+        component={MineAppraisalScreen}
+        options={{
+          title: t('wo-de-ping-jia'),
+        }}
+      />
+      <MineStack.Screen
+        name="MineComplaint"
+        component={MineComplaintScreen}
+        options={{
+          title: t('wo-de-tou-su'),
+        }}
+      />
+
       <MineStack.Screen
         name="MineRecord"
         component={MineRecordScreen}
         options={{
-					title: '我的对账单',
+          title: t('wo-de-dui-zhang-dan'),
         }}
       />
     </MineStack.Navigator>

navigation/index.tsx

@@ -4,7 +4,10 @@ import {
   DarkTheme,
   CommonActions,
 } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import {
+  createStackNavigator,
+  CardStyleInterpolators,
+} from '@react-navigation/stack';
 import * as React from 'react';
 import { ColorSchemeName } from 'react-native';
 import { useTranslation } from 'react-i18next';
@@ -41,8 +44,7 @@ export default function Navigation({
   const initRoute = useCreation(() => {
     if (__DEV__) {
       return {
-        name: 'MineStack',
-        screen: 'ChangePassword',
+        name: 'Main',
       };
     } else {
       return {
@@ -93,26 +95,29 @@ function RootNavigator({ initRoute }) {
     >
       <Stack.Screen name="Login" component={LoginStackNavigator} />
 
-      <Stack.Screen name="Main" component={MainTabNavigator} />
-
-      <Stack.Screen name="MineStack" component={MineStackNavigator} />
       <Stack.Screen
-        name="Modal"
-        mode="modals"
-        component={ModalStackNavigator}
+        name="Main"
+        component={MainTabNavigator}
         options={{
-          cardStyle: { backgroundColor: 'transparent' },
-          animationEnabled: false,
+          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
         }}
       />
 
       <Stack.Screen
-        name="AlertModal"
+        name="MineStack"
+        component={MineStackNavigator}
+        options={{
+          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+        }}
+      />
+      <Stack.Screen
+        name="Modal"
         mode="modals"
+        component={ModalStackNavigator}
         options={{
           cardStyle: { backgroundColor: 'transparent' },
+          animationEnabled: false,
         }}
-        component={AlertModalScreen}
       />
     </Stack.Navigator>
   );

utils/RiderInfoUtils.ts

@@ -1,3 +1,5 @@
+import { resolveUri } from 'expo-asset/build/AssetSources';
+
 const RiderMap = new Map([
   [
     '摩托车',
@@ -32,4 +34,10 @@ const ApplyStatus = new Map([
   ['PENDING', { name: '审核中' }],
 ]);
 
-export { RiderMap };
+const riderScore = new Map([
+  [1, { name: 'fei-chang-cha', img: require('../assets/images/appra3.png') }],
+  [2, { name: 'yi-ban', img: require('../assets/images/appra2.png') }],
+  [3, { name: 'chao-zan', img: require('../assets/images/appra1.png') }],
+]);
+
+export { RiderMap, riderScore };

wallet/MineRecordScreen.tsx

@@ -14,7 +14,7 @@ import { MonthDate, getSearchDate } from '../utils/TimeUtils';
 import request from '../utils/RequestUtils';
 import ReacordCom from './ReacordCom';
 
-import { PopoverPicker } from 'teaset';
+// import { PopoverPicker } from 'teaset';
 
 interface Result {
   list: Item[];
@@ -168,9 +168,13 @@ export default function MineRecordScreen({ navigation }: StackScreenProps) {
         }}
         ListFooterComponent={() => {
           return (
-            <Text p={15} textAlign="center">
-              {data.last ? '到底了' : '加载中...'}
-            </Text>
+            <>
+              {!data.empty && (
+                <Text p={15} textAlign="center">
+                  {data.last ? '到底了' : '加载中...'}
+                </Text>
+              )}
+            </>
           );
         }}
         stickyHeaderIndices={[0]}

wallet/MineWalletScreen.tsx

@@ -58,7 +58,7 @@ export default function MineWalletScreen({
           {getMoney(money)}
         </Text>
         <Button
-          onPress={() => navigation.navigate('WithdrawApply')}
+          onPress={() => navigation.navigate('BankCard')}
           flex={1}
           bg="transparent"
           alignSelf="flex-end"
@@ -104,24 +104,22 @@ export default function MineWalletScreen({
             </Text>
           )}
         </Div>
-
-        <Div
-          mb={10}
-          row
+        <Button
+          p={0}
+          block
+          mb={50}
           bg="white"
-          row
-          h={52}
           mt={10}
-          alignItems="center"
-          px={15}
-          mb={50}
+          onPress={() => navigation.navigate('MineRecord')}
         >
-          <Text flex={1} fontSize="sm">
-            {t('wo-de-dui-zhang-dan')}
-          </Text>
+          <Div flex={1} row h={52} alignItems="center" px={15}>
+            <Text flex={1} fontSize="sm">
+              {t('wo-de-dui-zhang-dan')}
+            </Text>
 
-          <Icon ml={5} name="right" fontSize="sm" />
-        </Div>
+            <Icon ml={5} name="right" fontSize="sm" />
+          </Div>
+        </Button>
       </ScrollView>
     </Div>
   );