解决合并冲突

src/components/Select/OptionsPopup.tsx

@@ -39,7 +39,7 @@ export interface SelectOptionsPopupProps {
   /**
    * 选择值改变触发事件
    */
-  onChange?: (value: SelectValueType) => void;
+  onChange?: (value: SelectValueType,data:any) => void;
   /**
    * 选项
    */

src/components/Select/index.tsx

@@ -140,15 +140,25 @@ const Select = React.forwardRef<SelectRef, SelectProps>((props, ref) => {
     setVisible(flag);
   };
 
-  const triggerChange = (next: SelectValueType) => {
-    onChange?.(next);
+  const triggerChange = (next: SelectValueType,data?:any) => {
+    onChange?.(next,data);
   };
 
   const handleSelectItem = (next: SelectValueType) => {
     if (!value) {
       setInternalValue(next);
     }
-    triggerChange(next);
+    // 生成合同接口返回的数据，需回显到上传电子合同栏
+    triggerChange(next,
+      [{uid:123456,
+        status:'success',
+        name:'测试合同',
+        size:5,
+        thumbUrl:'https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/E3911934-2DD2-47b5-9D9E-F5178EBE3F7120c8eabf31894284b8f9bb283a8cd580.png',
+        url:'https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/baseClassificationTemplate (7)95867d054fc04c078c12a5134893ff5a.xls',
+        type:'xls',
+        width:45,
+        height:45}]);
   };
 
   const handlePress = () => {

src/components/Upload/FilesUpload.tsx

@@ -11,6 +11,7 @@ import Spin from '../Loading/Spin';
 // import IMG_FILE_OTHERS from '../../../assets/images/files/file-others.png';
 import { UploadFileStateType, UploadFileType } from './typings';
 import styles from './styles';
+import Icons from 'react-native-vector-icons/AntDesign';
 
 const _appendFilesStatus = (
   files: DocumentPickerResponse[],
@@ -45,6 +46,10 @@ interface FilesUploadProps {
    */
   onChange?: (value: UploadFileType[]) => void;
   /**
+   * 传入的文件列表
+   */
+  propValue?: UploadFileType[];
+  /**
    * 最大上传数量，默认 -1 不限制
    */
   max?: number;
@@ -68,10 +73,13 @@ const FilesUpload: React.FC<FilesUploadProps> = props => {
     max = -1,
     disabled,
     onChange,
+    propValue=[]
   } = props;
 
   const [internalValue, setInternalValue] = useState<UploadFileType[]>([]);
-
+  console.log('setInternalValue==>10',internalValue);
+  console.log('setInternalValue==>101',propValue);
+  
   // 手动操作标识
   const inputRef = useRef(false);
 
@@ -86,6 +94,11 @@ const FilesUpload: React.FC<FilesUploadProps> = props => {
       setInternalValue(arrayValue);
     }
   }, [value]);
+  useEffect(() => {
+    if ('propValue' in props) {
+      setInternalValue(propValue)
+    }
+  }, [propValue]);
 
   /**
    * 这里只回传上传状态为 'done' 的数据
@@ -162,8 +175,8 @@ const FilesUpload: React.FC<FilesUploadProps> = props => {
       const pickerResult = await DocumentPicker.pickSingle({
         // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
         type: [
-          // types.xls,
-          // types.xlsx,
+          types.xls,
+          types.xlsx,
           types.doc,
           types.docx,
           types.pdf,
@@ -201,6 +214,7 @@ const FilesUpload: React.FC<FilesUploadProps> = props => {
             ) : null}
             <Image
               // source={IMG_FILE_OTHERS}
+              source={{uri:item.thumbUrl}}
               style={myStyle['upload-files-list-item-icon']}
             />
             <Text
@@ -219,8 +233,9 @@ const FilesUpload: React.FC<FilesUploadProps> = props => {
                 onPress={() => handleRemoveItem(item.url)}
                 disabled={item.status === 'uploading'}
               >
-                删除
+               <Icons name="minuscircle" color={'#93959B'} size={16} />
               </Text>
+              
             ) : null}
           </View>
         ))}

src/components/Upload/styles.ts

@@ -110,8 +110,8 @@ export default (theme: ThemeStyle) =>
       flexDirection: 'row',
       alignItems: 'center',
       alignSelf: 'flex-start',
-      paddingVertical: themeLayout['padding-xxs'] - 1,
-      paddingHorizontal: themeLayout['padding-xs'],
+      paddingVertical: themeLayout['padding-xxs'] - 2,
+      paddingHorizontal: themeLayout['padding-xxs'] - 2,
       backgroundColor: theme.background.base,
       borderWidth: 1,
       borderColor: theme.colors['grey-3'],
@@ -131,8 +131,12 @@ export default (theme: ThemeStyle) =>
     },
     'upload-files-list': {},
     'upload-files-list-item': {
-      flexDirection: 'row',
+      width:70,
+      height:70,
+      flexDirection: 'column',
+      justifyContent:'center',
       alignItems: 'center',
+      position:'relative',
       marginBottom: themeLayout['margin-xs'],
     },
     'upload-files-list-item-loading': {
@@ -146,13 +150,13 @@ export default (theme: ThemeStyle) =>
       color: theme.colors.notification,
     },
     'upload-files-list-item-icon': {
-      width: 18,
-      height: 18,
-      flex: 0,
+      width: 70,
+      height: 70,
+      // flex: 0,
       marginRight: themeLayout['margin-xs'],
     },
     'upload-files-list-item-fileName': {
-      flex: 1,
+      // flex: 1,
       fontSize: theme.fontSize.sm,
       color: theme.colors['grey-0'],
     },
@@ -160,9 +164,15 @@ export default (theme: ThemeStyle) =>
       color: theme.colors.notification,
     },
     'upload-files-list-item-remove': {
-      flex: 0,
+      position:'absolute',
+      zIndex:10,
+      top:-10,
+      right:0,
+      // flex: 0,
       marginLeft: themeLayout['margin-xs'],
-      padding: themeLayout['padding-xxs'],
+      // padding: themeLayout['padding-xxs'],
+      backgroundColor:'#fff',
+      borderRadius:10,
       fontSize: theme.fontSize.sm,
       color: theme.colors.notification,
     },

src/global.d.ts

@@ -7,9 +7,31 @@ declare global {
  * 必须要传递RouteName
  * 当该组件是路由组件时， 使用该类型声明
  */
-export type FcWithRoute<RouteName extends string, ComponentProps extends {[key: string]: any} = {}, Params extends object = {}> = FC<
+export type FcWithRoute<
+  RouteName extends string,
+  ComponentProps extends { [key: string]: any } = {},
+  Params extends object = {},
+> = FC<
   ComponentProps & {
-    navigation: NavigationProp<{[key: string]: any}, RouteName>;
+    navigation: NavigationProp<{ [key: string]: any }, RouteName>;
+    route: Route<RouteName, Params>;
+  }
+>;
+
+/**
+ * @description 必须要传递RouteName
+ * 当该组件是路由组件时， 使用该类型声明
+ * 换个顺序，因为路由组件，ComponentProps大部分时间都是没有的，但Params常常有值
+ * @param RouteName 路由名字
+ * @param Params 跳转路由时，传递的参数类型
+ */
+export type FcRoute<
+  RouteName extends string,
+  Params extends object = {},
+  ComponentProps extends { [key: string]: any } = {},
+> = FC<
+  ComponentProps & {
+    navigation: NavigationProp<{ [key: string]: any }, RouteName>;
     route: Route<RouteName, Params>;
   }
 >;

src/locales/zh_CN/order.ts

@@ -26,6 +26,7 @@ export default {
   'order.modal.reasonNeed': '修改原因必填',
   'order.info.checkOrder': '查看订单',
   'order.tip.taxWarn': '所有批次的支付比例总和需等于100%',
+  'order.tip.previewTip': '文件已下载，请打开预览',
 
 
 

src/routers/routers.ts

@@ -23,6 +23,7 @@ import RequireOrder from '../views/RequireOrder';
 import MsgDetail from '../views/messageCenter/MsgDetail';
 import RequireOrderDetail from '../views/RequireOrder/pages/RequireOrderDetail';
 import RequirePriceOrder from '../views/RequireOrder/pages/RequirePriceOrder';
+import RequirePriceOrderDetail from '../views/RequireOrder/pages/RequirePriceOrderDetail';
 import CheckRequireOrder from '../views/CheckRequireOrder';
 export const ROUTERS = {
   Login: {
@@ -100,6 +101,11 @@ export const ROUTERS = {
     component: RequirePriceOrder,
     headerShown: false,
   },
+  RequirePriceOrderDetail: {
+    title: '求购报价单详情',
+    component: RequirePriceOrderDetail,
+    headerShown: false,
+  },
 
   CheckRequireOrder: {
     title: '审核求购报价单',

src/services/TransactionV2Api/id146918.ts

-/* prettier-ignore-start */
-/* tslint:disable */
-/* eslint-disable */
 
 /* 该文件由 yapi-to-typescript 自动生成，请勿直接修改！！！ */
 

src/utils/formatNum.ts

+/**
+ *@describe 用于格式化数字，有小数格式化，无则不格式化
+ *@param   num 值
+ *@param   point 格式化的位数
+ *@returns 格式化后发值
+ */
+
+export const formatNum = (num: number | undefined, point: number) => {
+  // eslint-disable-next-line curly
+  if (!num) return;
+  var result = num.toString().indexOf('.');
+  if (result === -1) {
+    return num;
+  } else {
+    return Number(num).toFixed(point);
+  }
+};

src/utils/getEnumManager.ts

@@ -8,7 +8,6 @@
 export function getEnumManager(enums: any[], name?: any) {
   const labels = enums.map((item: any) => item.label);
   const values = enums.map((item: any) => item.value);
-
   return {
     name,
     labels,

src/views/Order/ContractDetails/index.tsx

 import React from 'react';
-import { View } from 'react-native';
+import { View, Text, Image, TouchableOpacity } from 'react-native';
 import WebView from 'react-native-webview';
 import NavBar from '../../../components/NavBar';
 import { RootStackScreenProps } from '../../../routers/types';
 import useLocale from '../../../hooks/useLocale'
+// import OpenFile from 'react-native-doc-viewer';
+import { Platform } from 'react-native';
+import Toast from 'react-native-root-toast';
 
 type ContractDetailsProps = RootStackScreenProps<'ContractDetails'>;
 
@@ -12,11 +15,16 @@ const ContractDetails: React.FC<ContractDetailsProps> = ({ route }) => {
     params: { fileUrl,type='' },
   } = route;
   const { t } = useLocale('order')
+
   return (
     <View style={{ flex: 1 }}>
       <NavBar title={type=='contract'?t("order.detailInfo.contractFileName"):t('order.detailInfo.fujian')} />
       <View style={{ flex: 1 }}>
-        <WebView source={{ uri: fileUrl ||'https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/baseClassificationTemplate(7)95867d054fc04c078c12a5134893ff5a.xls' }} />
+         {
+            Platform.OS !== 'ios' &&
+            <Text style={{textAlign:'center',marginTop:30}}>{t('order.tip.previewTip')}</Text>
+         }
+        <WebView source={{ uri:fileUrl }} />
       </View>
     </View>
   );

src/views/Order/ContractText/index.tsx

@@ -24,6 +24,7 @@ const ContractDetails: React.FC<ContractDetailsProps> = ({ route }) => {
   const handleFinish = async (values: FormSubmitValuesType) => { }
   const handleContractTypeChange = async () => { }
   const [contractualValue, setContractualValue] = useState(false);
+  const [propValue, setPropValue] = useState([]);
   const [contractUploadTypeValue, setContractUploadTypeValue] = useState<number>();
   const handleContractualChange = (next: boolean) => {
     setContractualValue(next);
@@ -36,8 +37,11 @@ const ContractDetails: React.FC<ContractDetailsProps> = ({ route }) => {
       });
     }
   };
-  const handleContractUploadTypeChange = (next: number) => {
+  const handleContractUploadTypeChange = (next: number,data?:any) => {
     setContractUploadTypeValue(next);
+    console.log('handleContractUploadTypeChange==>99',data);
+    
+    setPropValue(data)
   };
   const handleCommit = () => {
     form.submit();
@@ -131,7 +135,7 @@ const ContractDetails: React.FC<ContractDetailsProps> = ({ route }) => {
               contractUploadTypeValue === 2 ? ( */}
           {contractualValue &&
             <Form.Item customContentStyle={{display:'flex',flexDirection:'column',minHeight:200}} label={t('order.detailInfo.upLoadContract')} name="contractFiles" labelWidth={130} customItemStyle={{ margin: 8, backgroundColor: '#fff', borderRadius: 6,paddingLeft:8 }}>
-              <Upload.FilesUpload max={1} />
+              <Upload.FilesUpload max={1} propValue={propValue}/>
             </Form.Item>
           }
 

src/views/Order/MycommodityDetails/components/StaySubmit/index.tsx

@@ -728,6 +728,9 @@ const StaySubmit = (props: Iprops) => {
       }
 
       {/* 电子合同 */}
+      {/* {
+        showbutton
+      } */}
       {
         orderOperation == 1 &&
         <View style={myStyle.cell}>

src/views/RequireOrder/constants/index.tsx

@@ -28,3 +28,28 @@ export enum RequireOrderSort {
   'CutOff+',
   'CutOff-',
 }
+
+// 1.待提交审核2.审核报价单 3.审核报价单2级  4.提交询价单  5.审核通过  6.审核不通过,
+export enum RequirePriceOrderStatus {
+  // 'All' = '',
+  'WaitCheck' = 1, // 待提交审核
+  'CheckOrder', //审核报价单
+  'CheckOrder2',
+  'SubmitOrder',
+  'CheckPass',
+  'CheckNoPass',
+}
+
+export const RequirePriceOrderStatusOptions = [
+  { label: '全部', value: RequireOrderStatus.All },
+  { label: '待提交审核', value: RequirePriceOrderStatus.WaitCheck },
+  { label: '审核报价单', value: RequirePriceOrderStatus.CheckOrder },
+  { label: '审核报价单2级', value: RequirePriceOrderStatus.CheckOrder2 },
+  { label: '提交询价单', value: RequirePriceOrderStatus.SubmitOrder },
+  { label: '审核通过', value: RequirePriceOrderStatus.CheckPass },
+  { label: '审核不通过', value: RequirePriceOrderStatus.CheckNoPass },
+];
+
+export const RequirePriceOrderStatusEnum = getEnumManager(
+  RequirePriceOrderStatusOptions,
+);

src/views/RequireOrder/pages/RequireOrderDetail/index.tsx

@@ -22,6 +22,7 @@ import {
 import { RequireOrderStatusEnum } from '../../constants';
 import RNFetchBlob from 'rn-fetch-blob';
 import { WebView } from 'react-native-webview';
+import { formatNum } from '../../../../utils/formatNum';
 interface IProp {
   route: any;
   navigation: any;
@@ -47,7 +48,6 @@ const RequireOrderDetail = ({ route, navigation }: IProp) => {
   //   'https://www.huf-haus.com/fileadmin/Bilder/Header/ART_3/Header_HUF_Haus_ART_3___1_.jpg';
 
   const handlePress = () => {
-    console.log('-------------------------------------------------');
     // let PictureDir = fs.dirs.PictureDir; // this is the pictures directory. You can check the available directories in the wiki.
     // let options = {
     //   fileCache: true,
@@ -82,7 +82,7 @@ const RequireOrderDetail = ({ route, navigation }: IProp) => {
       // setheadText(false);
     }
   };
-  const handleCopy = (text: string) => {
+  const handleCopy = (text?: string) => {
     if (!text) {
       Toast.show(t('order.tip.noCopy'));
       return;
@@ -121,40 +121,31 @@ const RequireOrderDetail = ({ route, navigation }: IProp) => {
   const materialList = [
     {
       title: 'CAS号：',
-      // value: orderData?.askPurchaseGoodsResponses[index].casNo,
       value: 'casNo',
     },
     {
       title: '采购数量：',
-      // value: orderData?.askPurchaseGoodsResponses[index].num,
       value: 'num',
+      formatNum: true,
     },
     {
       title: '品类：',
-      // value: orderData?.askPurchaseGoodsResponses[index].categoryName,
       value: 'categoryName',
     },
     {
       title: '品牌：',
-      // value: orderData?.askPurchaseGoodsResponses[index].brandName,
       value: 'brandName',
     },
     {
       title: '单位：',
-      // value: orderData?.askPurchaseGoodsResponses[index].unit,
       value: 'unit',
     },
     {
       title: '币种：',
-      // value: orderData?.askPurchaseGoodsResponses[index].currencyName,
       value: 'currencyName',
     },
   ];
 
-  const requirementDockList = [
-    { title: '中山龙华皮料有限公司', value: '张三三' },
-  ];
-
   const renderCommonList = (item, index) => (
     <View
       style={myStyle.CellIem}
@@ -165,13 +156,11 @@ const RequireOrderDetail = ({ route, navigation }: IProp) => {
       <View style={{ flexDirection: 'row' }}>
         <Text style={myStyle.CellText} numberOfLines={1}>
           {item.value}
-
-          {/* {item.copyfn && <Icons name="right" size={12} />} */}
         </Text>
         {item.hasCopy && (
           <Text
             style={[myStyle.addressName, { marginLeft: 10 }]}
-            onPress={() => handleCopy('zzzzzzzzzzzzzzzz')}
+            onPress={() => handleCopy(item.value)}
           >
             {t('order.btn.copy')}
           </Text>
@@ -195,7 +184,11 @@ const RequireOrderDetail = ({ route, navigation }: IProp) => {
             return (
               <View style={myStyle['Mcell-content']}>
                 <Text style={myStyle['Mcell-text']}>{title}</Text>
-                <Text style={{ color: '#252D37' }}>{Goods?.[value]}</Text>
+                <Text style={{ color: '#252D37' }}>
+                  {item.formatNum
+                    ? formatNum(Goods?.[value], 6)
+                    : Goods?.[value]}
+                </Text>
               </View>
             );
           }}
@@ -208,7 +201,7 @@ const RequireOrderDetail = ({ route, navigation }: IProp) => {
           }}
         >
           <Text>期望单价： </Text>
-          <Text>{Goods?.['expectedUnitPrice']}</Text>
+          <Text> {formatNum(Goods?.expectedUnitPrice, 6)}</Text>
         </View>
       </View>
     );
@@ -250,7 +243,7 @@ const RequireOrderDetail = ({ route, navigation }: IProp) => {
                 </Text>
                 <Text
                   style={[myStyle.addressName]}
-                  onPress={() => handleCopy('zzzzzzzzzzzzzzzz')}
+                  onPress={() => handleCopy(orderData?.askPurchaseNo)}
                 >
                   {t('order.btn.copy')}
                 </Text>

src/views/RequireOrder/pages/RequireOrderDetail/styles.ts

-import { color } from 'react-native-reanimated';
 import { StyleSheet, Platform } from 'react-native';
 import { ThemeStyle } from '../../../../constants/theme';
 import themeLayout from '../../../../constants/theme/layout';
@@ -57,13 +56,11 @@ export default (theme: ThemeStyle) =>
     },
     block: {
       width: 4,
-      height: 16,
+      height: 20,
       backgroundColor: '#00A98F',
       borderRadius: 2,
       position: 'absolute',
-      // left: '-10',
-      // flex: 1,
-      left: -8,
+      left: -10,
       top: 2,
     },
     'addressFlex-title-text': {
@@ -118,7 +115,7 @@ export default (theme: ThemeStyle) =>
     HeadCellText: {
       fontSize: 14,
       color: '#252D37',
-      fontWeight: '400',
+      fontWeight: Platform.OS === 'ios' ? '500' : '600',
     },
     CellIem: {
       display: 'flex',
@@ -150,6 +147,7 @@ export default (theme: ThemeStyle) =>
     },
     Mcell: {
       display: 'flex',
+      marginTop: 10,
       justifyContent: 'space-between',
     },
     'Mcell-title': {

src/views/RequireOrder/pages/RequirePriceOrder/components/OrderList/index.tsx

+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { RequireOrderStatusEnum } from '../../../../constants';
+import { useNavigation } from '@react-navigation/native';
+import useAppStyle from '../../../../../../hooks/useAppStyle';
+import styles from './styles';
+
+const OrderList = props => {
+  const { data: item, askPurchaseId } = props;
+  const myStyle = useAppStyle(styles);
+  const navigation = useNavigation();
+  console.log(item, 'itemitemitemitem');
+  return (
+    <TouchableOpacity
+      style={myStyle.box}
+      onPress={() => {
+        navigation.navigate('RequirePriceOrderDetail', {
+          askPurchaseId: askPurchaseId,
+          quoteNoId: item.id,
+        });
+      }}
+    >
+      <View style={myStyle['box-top']}>
+        <Text style={myStyle['box-top-text']}>{item.memberName}</Text>
+        {item?.status ? (
+          <Text style={myStyle['box-top-text']}>
+            {/* {RequireOrderStatusEnum.getLabelByValue(item?.status)} */}
+          </Text>
+        ) : null}
+      </View>
+      <View style={myStyle['box-bottome']}>
+        <View style={myStyle['box-bottome-container']}>
+          <View style={myStyle['box-bottome-title']}>
+            <Text style={myStyle['box-bottome-title-text']}>{item?.name}</Text>
+          </View>
+          <View style={myStyle['box-bottome-content']}>
+            <View style={myStyle['box-bottome-content-left']}>
+              <View style={myStyle['box-bottome-content-left-text']}>
+                <View style={{ marginRight: 8 }}>
+                  <Text style={myStyle['box-bottome-content-left-text-label']}>
+                    营业担当
+                  </Text>
+                </View>
+                <Text style={myStyle['box-bottome-content-left-text-value']}>
+                  {item?.salesDirectorName}
+                </Text>
+              </View>
+              <View style={myStyle['box-bottome-content-left-text']}>
+                <View style={{ marginRight: 4 }}>
+                  <Text style={myStyle['box-bottome-content-left-text-label']}>
+                    截止时间
+                  </Text>
+                </View>
+                <Text style={myStyle['box-bottome-content-left-text-value']}>
+                  {item?.quoteEndTime}
+                </Text>
+              </View>
+            </View>
+            <View style={myStyle['box-bottome-content-right']}>
+              {/* source={{ uri: products.logo }} */}
+              {/* <Image
+                source={lingxi_icon}
+                style={myStyle['box-bottome-content-right-img']}
+              /> */}
+            </View>
+          </View>
+        </View>
+        {/* {haveFoot ? (
+          <View style={myStyle['box-bottome-foot']}>
+            <TouchableOpacity
+              onPress={() => {
+                navigation.navigate('RequireOrderDetail', { id: item?.id });
+              }}
+              style={myStyle['box-bottome-content-button']}
+            >
+              <Text style={myStyle['box-bottome-content-button-text']}>
+                查看单据
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                navigation.navigate('RequirePriceOrder', { id: item?.id });
+              }}
+              style={myStyle['box-bottome-content-button']}
+            >
+              <Text style={myStyle['box-bottome-content-button-text']}>
+                查看报价
+              </Text>
+            </TouchableOpacity>
+          </View>
+        ) : null} */}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default OrderList;

src/views/RequireOrder/pages/RequirePriceOrder/components/OrderList/styles.ts

+import { StyleSheet, Platform } from 'react-native';
+import { ThemeStyle } from '../../../../../../constants/theme';
+import themeLayout from '../../../../../../constants/theme/layout';
+
+export default (theme: ThemeStyle) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    header: {
+      width: '100%',
+      flexDirection: 'row',
+      backgroundColor: '#fff',
+      alignItems: 'center',
+    },
+    input: {
+      width: '100%',
+      flexDirection: 'row',
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      position: 'relative',
+    },
+    IconView: {
+      position: 'relative',
+      width: '100%',
+    },
+    searchImg: {
+      width: 18,
+      height: 18,
+      backgroundColor: '#F6F8FA',
+      position: 'absolute',
+      left: 25,
+      top: 12,
+      zIndex: 10,
+    },
+    search: {
+      display: 'flex',
+      width: '60%',
+      // flexDirection:'row'
+    },
+    categoryContainer: {
+      paddingHorizontal: themeLayout['padding-l'],
+      alignItems: 'center',
+      flexDirection: 'row',
+      backgroundColor: '#fff',
+    },
+    categoryWrap: {
+      flex: 1,
+      overflow: 'hidden',
+      height: 36,
+      // justifyContent: 'center',
+    },
+    categoryBox: {
+      // width: '25%',
+
+      marginRight: 5,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    categoryItem: {
+      flexDirection: 'row',
+      paddingRight: 40,
+      height: '100%',
+      alignItems: 'center',
+    },
+    categoryText: {
+      // fontSize: 12,
+      textAlign: 'center',
+      color: theme.fonts.black2,
+      fontWeight: '400',
+    },
+    categoryText__active: {
+      color: '#00A98F',
+      fontWeight: Platform.OS === 'ios' ? '500' : '600',
+    },
+    categoryIcon__active: {
+      color: '#00A98F',
+      // fontWeight: Platform.OS === 'ios' ? '500' : '600',
+    },
+
+    commodityList: {
+      backgroundColor: '#F4F5F7',
+      paddingHorizontal: 8,
+      paddingVertical: 8,
+      flex: 1,
+    },
+
+    searchBox: {
+      // flex: 0.9,
+      width: '90%',
+      height: 40,
+      borderRadius: 18,
+      alignItems: 'center',
+      backgroundColor: '#F7F8FA',
+      paddingLeft: themeLayout['padding-xs'],
+      overflow: 'hidden',
+    },
+    box: {
+      flex: 1,
+      height: 132,
+      backgroundColor: '#fff',
+      borderRadius: themeLayout['padding-xs'],
+      marginBottom: themeLayout['padding-xs'],
+      paddingHorizontal: themeLayout['padding-s'],
+    },
+    'box-top': {
+      height: 40,
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      flexDirection: 'row',
+    },
+    'box-top-text': {
+      color: '#252D37',
+      fontWeight: Platform.OS === 'ios' ? '500' : '600',
+    },
+    'box-bottome': {
+      height: 131,
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    'box-bottome-container': {
+      width: '100%',
+      height: 83,
+      justifyContent: 'center',
+      // alignItems: 'center',
+    },
+    'box-bottome-title': {
+      width: '100%',
+      height: 20,
+      // justifyContent: 'center',
+      alignItems: 'flex-start',
+      marginTop: 5,
+      marginBottom: 2,
+    },
+    'box-bottome-title-text': {
+      color: '#252D37',
+      fontWeight: Platform.OS === 'ios' ? '500' : '600',
+    },
+    'box-bottome-content': {
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      flexDirection: 'row',
+    },
+    'box-bottome-content-left': {
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 14,
+    },
+    'box-bottome-content-left-text': {
+      width: '100%',
+      alignItems: 'center',
+      flexDirection: 'row',
+      // marginTop: 16,
+    },
+    'box-bottome-content-left-text-label': {
+      color: '#91959B',
+      // marginRight: 6,
+    },
+    'box-bottome-content-left-text-value': {
+      color: '#252D37',
+      marginLight: 4,
+    },
+    'box-bottome-content-right': {
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    'box-bottome-content-right-img': {
+      height: 48,
+      width: 48,
+    },
+    'box-bottome-foot': {
+      height: 48,
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      flexDirection: 'row',
+    },
+    'box-bottome-content-button': {
+      backgroundColor: '#EBF9F6',
+      borderRadius: 4,
+      height: 24,
+      width: 72,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 8,
+    },
+    'box-bottome-content-button-text': {
+      color: '#00A98F',
+    },
+  });

src/views/RequireOrder/pages/RequirePriceOrder/index.tsx

@@ -8,22 +8,43 @@ import {
 } from 'react-native';
 import useAppStyle from '../../../../hooks/useAppStyle';
 import styles from './styles';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, Route, NavigationProp } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Icons from 'react-native-vector-icons/AntDesign';
 import FeatherIcons from 'react-native-vector-icons/Feather';
-import { postTransactionMobileAskPurchaseQuotePage } from '../../../../services/TransactionV2Api';
-import CommodityItem from '../../components/CommodityItem';
+import {
+  postTransactionMobileAskPurchaseQuotePage,
+  PostTransactionMobileAskPurchaseQuotePageRequest as ParamsType,
+} from '../../../../services/TransactionV2Api';
+import OrderList from './components/OrderList';
+import OrderNavBar from '../../../../components/OrderNavBar';
+import { FcRoute } from '../../../../global';
+
+
+type Parmas = {
+  id?: number;
+};
 
-const RequirePriceOrder = props => {
-  const { id: askPurchaseId } = props;
+const RequirePriceOrder: FcRoute<'RequirePriceOrder', Parmas> = props => {
+  const {
+    route: {
+      params: { id: askPurchaseId },
+    },
+  } = props;
   const myStyle = useAppStyle(styles);
-  const safeInset = useSafeAreaInsets();
-  const navigation = useNavigation();
+
   const [productList, setProductList] = useState<any[]>([]);
+  const [innerValue, setInnerValue] = useState('');
+  const [searchcriteria, setSearchcriteria] = useState<ParamsType>({
+    pageSize: 8,
+    askPurchaseId,
+  });
+
   const getProductList = (): Promise<any[]> => {
     return new Promise((resolve, reject) => {
-      postTransactionMobileAskPurchaseQuotePage({ askPurchaseId }).then(res => {
+      postTransactionMobileAskPurchaseQuotePage(searchcriteria).then(res => {
+        // postTransactionMobileAskPurchaseQuotePage({ askPurchaseId: 12 }).then(
+        // res => {
         if (res.code === 1000) {
           resolve(res.data.data);
         } else {
@@ -39,61 +60,31 @@ const RequirePriceOrder = props => {
         setProductList(res);
       })
       .catch(() => {});
-  }, []);
+  }, [searchcriteria]);
 
-  const renderCommodityItem = ({
-    item,
-    index,
-  }: {
-    item: any;
-    index: number;
-  }) => {
-    return <CommodityItem data={item} />;
+  const handleChange = text => {
+    setInnerValue(text);
   };
+
+  const handleSearchSubmit = () => {
+    setSearchcriteria({
+      ...searchcriteria,
+      askPurchaseMemberName: innerValue,
+    });
+  };
+
+  const renderCommodityItem = ({ item }: { item: any }) => {
+    return <OrderList data={item} askPurchaseId={askPurchaseId} />;
+  };
+
   return (
     <View style={myStyle.container}>
       {/* 头区域 */}
-      <StatusBar
-        translucent
-        backgroundColor="transparent"
-        barStyle="dark-content"
+      <OrderNavBar
+        placeholder={'报价会员'}
+        onChangeText={handleChange}
+        onSubmitEditing={handleSearchSubmit}
       />
-      <View style={{ paddingTop: safeInset.top, height: safeInset.top + 4 }} />
-
-      <View style={myStyle.header}>
-        <TouchableOpacity
-          style={{ marginLeft: 12, marginRight: 20 }}
-          onPress={() => {
-            navigation.goBack();
-          }}
-          activeOpacity={0.8}
-        >
-          <Icons name={'left'} size={24} color={'#252D37'} />
-        </TouchableOpacity>
-        <View style={[myStyle.input]}>
-          <FeatherIcons
-            name="search"
-            size={18}
-            style={[myStyle.searchImg, { backgroundColor: '#fff' }]}
-          />
-          <View style={[myStyle.searchBox, { width: '73%' }]}>
-            <TextInput
-              placeholder={'需求单号/需求单摘要'}
-              returnKeyType="search"
-              returnKeyLabel="搜索"
-              // onSubmitEditing={handleSearchSubmit}
-              style={{
-                fontSize: 14,
-                width: '90%',
-                backgroundColor: '#F6F8FA',
-                borderRadius: 4,
-                paddingLeft: 25,
-              }}
-              // onChangeText={handleChange}
-            />
-          </View>
-        </View>
-      </View>
 
       {/* 内容区域 */}
       <View style={myStyle.commodityList}>

src/views/RequireOrder/pages/RequirePriceOrderDetail/styles.ts

+import { StyleSheet, Platform } from 'react-native';
+import { ThemeStyle } from '../../../../constants/theme';
+import themeLayout from '../../../../constants/theme/layout';
+
+export default (theme: ThemeStyle) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#F4F5F7',
+      flexDirection: 'column',
+    },
+    satus: {
+      height: 80,
+      paddingVertical: 15,
+      paddingHorizontal: 10,
+      backgroundColor: '#00A990',
+      justifyContent: 'space-between',
+    },
+    satusTxet: {
+      fontSize: 20,
+      color: '#fff',
+      fontWeight: '900',
+    },
+
+    address: {
+      width: '100%',
+      paddingHorizontal: 10,
+      backgroundColor: '#fff',
+      borderRadius: 8,
+      paddingVertical: 12,
+      alignItems: 'flex-start',
+      // marginTop: -30,
+      position: 'relative',
+      top: -30,
+    },
+    addressFlex: {
+      flexDirection: 'column',
+      marginLeft: 10,
+      width: '100%',
+    },
+    'addressFlex-title': {
+      flexDirection: 'row',
+      position: 'relative',
+    },
+    block: {
+      width: 4,
+      height: 20,
+      backgroundColor: '#00A98F',
+      borderRadius: 2,
+      position: 'absolute',
+      left: -10,
+      top: 2,
+    },
+    'addressFlex-title-text': {
+      color: '#303133',
+      fontSize: 16,
+      fontWeight: Platform.OS === 'ios' ? '500' : '600',
+      marginBottom: 6,
+    },
+    orderNo: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+    },
+    addressName: {
+      fontSize: 12,
+      color: '#252D37',
+    },
+    addressText: {
+      fontSize: 13,
+      lineHeight: 23,
+    },
+    customer: {
+      position: 'relative',
+      top: -30,
+      marginTop: 10,
+      backgroundColor: '#fff',
+      justifyContent: 'center',
+      paddingVertical: 10,
+      borderRadius: 8,
+    },
+    cell: {
+      position: 'relative',
+      top: -30,
+      marginTop: 10,
+      paddingVertical: 10,
+      backgroundColor: '#fff',
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      flexDirection: 'column',
+    },
+    HeadCell: {
+      justifyContent: 'space-between',
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '100%',
+      marginBottom: 10,
+    },
+    CellShow: {
+      fontSize: 12,
+    },
+    HeadCellText: {
+      fontSize: 14,
+      color: '#252D37',
+      fontWeight: Platform.OS === 'ios' ? '500' : '600',
+    },
+    CellIem: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingVertical: 10,
+    },
+    cellCard: {
+      backgroundColor: '#F5F6F7',
+      borderRadius: 6,
+    },
+    cellCardItem: {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+    },
+    CellName: {
+      fontSize: 14,
+      color: '#5C626A',
+    },
+    CellText: {
+      maxWidth: 260,
+      fontSize: 14,
+      color: '#252D37',
+    },
+    Mcell: {
+      display: 'flex',
+      marginTop: 10,
+    },
+    'Mcell-title': {
+      fontWeight: Platform.OS === 'ios' ? '500' : '600',
+      marginBottom: 8,
+      fontSize: 14,
+      color: '#252D37',
+    },
+    'Mcell-content': {
+      flexDirection: 'row',
+      width: '48%',
+    },
+    'Mcell-text': {
+      marginRight: 5,
+    },
+    'Popup-title': {
+      fontWeight: Platform.OS === 'ios' ? '500' : '600',
+    },
+    'Popup-container': {
+      height: 450,
+      // flexDirection:'row',
+    },
+    'Popup-content': {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: 12,
+      height: 48,
+      alignItems: 'center',
+    },
+    'Popup-text': {
+      color: '#252D37',
+    },
+  });