fix：客户详细信息动态化

src/config/option.config.js

+export const sexTypeOpt = [
+  {
+    value: '0',
+    label: '未填写',
+  },
+  {
+    value: '1',
+    label: '男',
+  },
+  {
+    value: '2',
+    label: '女',
+  },
+];
+export const idTypeOpt = [
+  {
+    value: '0',
+    label: '身份证',
+  },
+  {
+    value: '1',
+    label: '护照',
+  },
+  {
+    value: '2',
+    label: '港澳回乡证',
+  },
+  {
+    value: '3',
+    label: '台胞证',
+  },
+  {
+    value: '4',
+    label: '其它',
+  },
+];
+export const deleteOption = [
+  {
+    value: '0',
+    label: '未删除',
+  },
+  {
+    value: '1',
+    label: '已删除',
+  },
+];
+export const userTypeOption = [
+  {
+    value: '1',
+    label: '公司员工',
+  },
+  {
+    value: '2',
+    label: '用户',
+  },
+  {
+    value: '3',
+    label: '默认',
+  },
+];
+
+export const userLevelOption = [
+  {
+    value: '0',
+    label: '普通用户',
+  },
+  {
+    value: '1',
+    label: 'VIP用户',
+  },
+  {
+    value: '2',
+    label: '高级VIP用户',
+  },
+];
+
+export const statusOption = [
+  {
+    value: '0',
+    label: '可用',
+  },
+  {
+    value: '1',
+    label: '禁用',
+  },
+  {
+    value: '2',
+    label: '注销',
+  },
+];
+export const jifenOption = [
+  {
+    value: '0',
+    label: '未赠送',
+  },
+  {
+    value: '1',
+    label: '已赠送',
+  },
+];
+export const booleanOpt = [
+  {
+    value: '0',
+    label: '否',
+  },
+  {
+    value: '1',
+    label: '是',
+  },
+];
+
+export const pointTypeOpt = [
+  {
+    value: '1',
+    label: 'EB',
+  },
+  {
+    value: '2',
+    label: 'R分',
+  },
+];
+
+export const appTypeOpt = [
+  {
+    value: '1010001',
+    label: '第一届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010002',
+    label: '第二届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010003',
+    label: '第三届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010004',
+    label: '第四届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010005',
+    label: '第五届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010006',
+    label: '第六届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010007',
+    label: '第七届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010008',
+    label: '第八届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010009',
+    label: '第九届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010010',
+    label: '第十届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010011',
+    label: '第十一届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010012',
+    label: '第十二届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010013',
+    label: '第十三届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010014',
+    label: '第十四届玄奘之路商学院戈壁挑战赛',
+  },
+  {
+    value: '1010015',
+    label: '第十五届玄奘之路商学院戈壁挑战赛',
+  },
+];

src/pages/Home.tsx

@@ -55,11 +55,11 @@ const [orderList,setOrderList] = useState<any>(
   [
     {
       name:'戈有好物',
-      price:""
+      price:"0.00元"
     },
     {
       name:'纷享销客',
-      price:""
+      price:"0.00元"
     },
     {
       name:'客户中心',
@@ -210,8 +210,9 @@ const layout = {
     const orderInfo = await getOrderInfoByWxId(data)
     let orderItem = [...orderList]
     orderItem[2].price = orderInfo.data.clientOrderPrice
-    orderItem[1].price = orderInfo.data.fxxkPrice
-    orderItem[0].price = orderInfo.data.gyhwPrice
+    //戈友好物和纷享销客暂时不做先屏蔽
+    // orderItem[1].price = orderInfo.data.fxxkPrice
+    // orderItem[0].price = orderInfo.data.gyhwPrice
     setOrderList(orderItem)
     setOrderInfo(orderInfo.data)
     

src/pages/person.tsx

@@ -4,141 +4,66 @@ import {LeftOutlined,DownOutlined,RightOutlined } from '@ant-design/icons';
 import './../css/person.css'
 import {  } from 'react-router-dom'
 import { useHistory} from 'react-router-dom'
+import { appProps } from '.././config/chartConfig'
+import { title } from 'process';
 // import Top from './../components/Top'
 
 const Person: React.FC = () => {
-
   const location:any = useHistory()
   const [customData, setCustomData] = useState<any>({})
   const [userId,setUserId]=useState<any>([])
+  const [titleData,setTitleData]=useState<any>([])
   const back=async ()=>{
     // location.back()
     location.push({pathname: '/Order', state: { userId }})
   }
+  const getAppId=(appID:any)=>{
+    let appIdKey = `${appID}`.substring(0, 3)
+    // if (appIdKey === "101" && Number(appID) > 1010000) appIdKey = "101New";
+    return appIdKey
+  }
+  const getPropsName=(keyInfo:any)=> {
+    console.log(keyInfo)
+    console.log(titleData)
+    
+      console.log(titleData.get(keyInfo))
+      return titleData.get(keyInfo).name
+    
+    // 
+    // if (typeof keyInfo === 'string') return keyInfo
+    // return keyInfo.name
+  }
+  const mapProps=(propsMaps:any,cus:any)=>{
+    const element:any=[];
+      propsMaps.forEach((item:any,key:any) => {
+        element.push( ( <div key={key} className="flex spaceBetween">
+        <p className='leftword'>{item.name}:</p>
+        {item.type==='image'?<img src={cus[key]}  className='avatar' alt=""  />:<p className='rightword'>{cus[key]?cus[key]:'-'}</p>}
+        
+        
+      </div>))
+      });
+      return element
+  }
 //路由跳转过来携带的数据
   const GetRouterData = async ()=>{
     console.log(location, 'props')
     setCustomData(location.location.state.userItem)
     setUserId(location.location.state.userId)
+    const type:any=getAppId(location.location.state.userItem.appId)
+    const titles:any = appProps
+    setTitleData(titles[type])
   }
   useEffect(() => {
     GetRouterData()
-  }, [customData])
+  }, [customData,titleData])
   return (
     <div>
       {/* <Top text={'dddd'}/> */}
       <div className="orderItem" ><LeftOutlined onClick={back}/>客户中心</div>
       <div className="detail">详细信息</div>
       <div className="customDetail">
-        <div className="flex spaceBetween">
-          <p className='leftword'>ID:</p>
-          <p className='rightword'>{customData.id}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>证件姓名：</p>
-          <p className='rightword'>{customData.idCardName}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>出生日期：</p>
-          <p className='rightword'>{customData.birthDay}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>微信号：</p>
-          <p className='rightword'>{customData.wxId}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>赛事名称：</p>
-          <p className='rightword'>{customData.gobiName}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>分组：</p>
-          <p className='rightword'>{customData.rolesName}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>证件类型：</p>
-          <p className='rightword'>{customData.cardTypeName}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>电话：</p>
-          <p className='rightword'>{customData.enrollPhone}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>性别：</p>
-          <p className='rightword'>{customData.genderTypes}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>邮箱：</p>
-          <p className='rightword'>{customData.email}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>证件号：</p>
-          <p className='rightword'>{customData.idCard}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>操作者电话：</p>
-          <p className='rightword'>{customData.operateUserPhone}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>昵称：</p>
-          <p className='rightword'>{customData.realName}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>头像：</p>
-          <img className='avatar' alt="" src={customData.prettyImg}></img>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>组织ID：</p>
-          <p className='rightword'>{customData.organizeId}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>是否在线支持：</p>
-          <p className='rightword'>{customData.isOnlinePay}</p>
-        </div>
-
-        <div className="flex spaceBetween">
-          <p className='leftword'>价格：</p>
-          <p className='rightword'>{customData.price}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>国籍：</p>
-          <p className='rightword'>{customData.nationality}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>省：</p>
-          <p className='rightword'>{customData.province}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>市：</p>
-          <p className='rightword'>{customData.city}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>区：</p>
-          <p className='rightword'>{customData.district}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>详细地址：</p>
-          <p className='rightword'>{customData.address}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>行业：</p>
-          <p className='rightword'>{customData.businessName}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>公司：</p>
-          <p className='rightword'>{customData.id}</p>
-        </div>
-
-        <div className="flex spaceBetween">
-          <p className='leftword'>职务：</p>
-          <p className='rightword'>{customData.dutyTypesName}</p>
-        </div>
-        <div className="flex spaceBetween">
-          <p className='leftword'>身高：</p>
-          <p className='rightword'>{customData.height}</p>
-        </div>
-
-
-        
+            {mapProps(titleData,customData)}
       </div>
     </div>
   )