bug

src/pages/customer/customerlist/customerDetail.jsx

@@ -15,8 +15,8 @@ function header(props) {
    * @returns
    */
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [data, setData] = useState([{ }])
-  const [tableData, setTableDataData] = useState([{ }])
+  const [data, setData] = useState([{}])
+  const [tableData, setTableDataData] = useState([{}])
   const [dataConsultant, setDataonsultant] = useState({})
   const [intentionData, setIntentionData] = useState([])
 
@@ -39,8 +39,8 @@ function header(props) {
         }]),
       )
       arr.push(a)
-   }
-   setIntentionData(arr)
+    }
+    setIntentionData(arr)
   }
 
   // 查询
@@ -59,11 +59,11 @@ function header(props) {
       setIntentionData(res.intentions)
     })
   }
-// 分页
-function onChange(number) {
-  if (id === '' || id === undefined) {
-    return
-  }
+  // 分页
+  function onChange(number) {
+    if (id === '' || id === undefined) {
+      return
+    }
     // eslint-disable-next-line max-len
     request({ ...apis.customer.CustomerRecommendGet, urlData: { id }, params: { pageNumber: number, pageSize: 10 } }).then(res => {
       setData(res)
@@ -89,14 +89,14 @@ function onChange(number) {
       dataIndex: 'visitTime',
       key: 'visitTime',
       align: 'center',
-      render: (_, record) => <span> {moment(record.visitTime).format('YYYY-MM-DD HH:mm:ss') }</span>,
+      render: (_, record) => <span> {moment(record.visitTime).format('YYYY-MM-DD HH:mm:ss')}</span>,
     },
     {
       title: '停留时间',
       dataIndex: 'visitDuration',
       key: 'visitDuration',
       align: 'center',
-      render: (_, record) => <span>{record.visitDuration === null ? 0 : record.visitDuration }秒</span>,
+      render: (_, record) => <span>{record.visitDuration === null ? 0 : record.visitDuration}秒</span>,
     },
   ]
   // 意向
@@ -105,7 +105,7 @@ function onChange(number) {
       title: <span styles={{ color: '#222', fontSize: '24px' }}>项目名称</span>,
       dataIndex: 'name',
       width: '64%',
-    render: (_, record) => <span>{record.buildingName}</span>,
+      render: (_, record) => <span>{record.buildingName}</span>,
     },
     {
       title: <span styles={{ color: '#222', fontSize: '24px' }}>意向值</span>,
@@ -118,58 +118,60 @@ function onChange(number) {
       <div className={styles.cardBox}>
         <div className={styles.rightBox}>
           <p className={styles.tit}>客户信息</p>
-          <img className={styles.touxiang} src={ data.picture && data.picture } />
-          <div className={styles.right}>
-            <p className={styles.rightItem}>用户名称：{ data.name }</p>
-            <p className={styles.rightItem}>手机号码：{ data.phone }</p>
-            <p className={styles.rightItem}>首次访问时间：{data.visitTime && moment(data.visitTime).format('YYYY-MM-DD')}</p>
-          </div>
-          <div className={styles.Centered}>
-          <p>访问时长：{ data.duration }秒</p>
-          <p>访问次数：{ data.visitTimes }</p>
-          <p className={styles.rightItem}>客户描述：{ data.describe }</p>
-          {/* <p>预约人数：{ data.visiteNum }</p> */}
-          </div>
-          <div className={styles.rightCentered}>
-          <p >需求类型：{ data.demandType }</p>
-          <p >价格区间：{data.priceRange }</p>
-          <p >物业类型：{ data.realtyManageType }</p>
-          {/* <p>预约人数：{ data.visiteNum }</p> */}
-          </div>
-          {/* <p className={styles.rightItem}>预约到访时间：{data.appointmentTime && moment(data.appointmentTime).format('YYYY-MM-DD') }</p> */}
-          <div className={styles.rightInfo}>
-            <p className={styles.rightItem}>国家：{ dataConsultant && dataConsultant.country }</p>
-            <p className={styles.rightItem}>省份：{ dataConsultant && dataConsultant.provience }</p>
-            <p className={styles.rightItem}>城市：{dataConsultant && dataConsultant.city }</p>
-            <p className={styles.rightItem}>来访渠道：{data.personFrom}</p>
-            {/* <p className={styles.rightItem}>详细信息：</p> */}
-            {/* <p className={styles.rightItem}>意向项目：{data.intention }</p> */} 
-            {/* <p className={styles.rightItem}>客户说明：{ data.verifyRemark }</p> */}
+          <div className={styles.flexBox}>
+            <img className={styles.touxiang} src={data.picture && data.picture} />
+            <div className={styles.right}>
+              <p className={styles.rightItem}>用户名称：{data.name}</p>
+              <p className={styles.rightItem}>手机号码：{data.phone}</p>
+              <p className={styles.rightItem}>首次访问时间：{data.visitTime && moment(data.visitTime).format('YYYY-MM-DD')}</p>
+            </div>
+            <div className={styles.Centered}>
+              <p>访问时长：{data.duration}秒</p>
+              <p>访问次数：{data.visitTimes}</p>
+              <p className={styles.rightItem}>客户描述：{data.describe}</p>
+              {/* <p>预约人数：{ data.visiteNum }</p> */}
+            </div>
+            <div className={styles.rightCentered}>
+              <p >需求类型：{data.demandType}</p>
+              <p >价格区间：{data.priceRange}</p>
+              <p >物业类型：{data.realtyManageType}</p>
+              {/* <p>预约人数：{ data.visiteNum }</p> */}
+            </div>
+            {/* <p className={styles.rightItem}>预约到访时间：{data.appointmentTime && moment(data.appointmentTime).format('YYYY-MM-DD') }</p> */}
+            <div className={styles.rightInfo}>
+              <p className={styles.rightItem}>国家：{dataConsultant && dataConsultant.country}</p>
+              <p className={styles.rightItem}>省份：{dataConsultant && dataConsultant.provience}</p>
+              <p className={styles.rightItem}>城市：{dataConsultant && dataConsultant.city}</p>
+              <p className={styles.rightItem}>来访渠道：{data.personFrom}</p>
+              {/* <p className={styles.rightItem}>详细信息：</p> */}
+              {/* <p className={styles.rightItem}>意向项目：{data.intention }</p> */}
+              {/* <p className={styles.rightItem}>客户说明：{ data.verifyRemark }</p> */}
+            </div>
           </div>
         </div>
       </div>
       <br></br>
       <div className={styles.cardBox}>
-          <div className={styles.rightBoxCentre}>
+        <div className={styles.rightBoxCentre}>
           <p className={styles.tit}>置业顾问信息</p>
           <div>
-          <img className={styles.touxiangphoto}  src={ data.consultant && data.consultant.photo }/>
-          <p >{data.consultant && data.consultant.userName}</p>
+            <img className={styles.touxiangphoto} src={data.consultant && data.consultant.photo} />
+            <p >{data.consultant && data.consultant.userName}</p>
           </div>
           <div className={styles.right}>
-          {/* <p className={styles.infoItem}>姓名：{ data.consultant && data.consultant.name }</p>
+            {/* <p className={styles.infoItem}>姓名：{ data.consultant && data.consultant.name }</p>
           <p className={styles.infoItem}>部门：{ data.consultant && data.consultant.department }</p> */}
-          <p className={styles.infoItem}>号码：{ data.consultant && data.consultant.phone } </p>
-          <p className={styles.infoItem}>岗位：{ data.consultant && data.consultant.position }</p>
+            <p className={styles.infoItem}>号码：{data.consultant && data.consultant.phone} </p>
+            <p className={styles.infoItem}>岗位：{data.consultant && data.consultant.position}</p>
           </div>
           <div className={styles.left}>
-          <p className={styles.infoItem}>公司：{ data.consultant && data.consultant.orgName } </p>
-          <p className={styles.infoItem}>
-            所属项目：
+            <p className={styles.infoItem}>公司：{data.consultant && data.consultant.orgName} </p>
+            <p className={styles.infoItem}>
+              所属项目：
             {
-              data.consultant && data.consultant.projects.map((item, _) => <span>{item}</span>)
-            }
-          </p>
+                data.consultant && data.consultant.projects.map((item, _) => <span>{item}</span>)
+              }
+            </p>
           </div>
         </div>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
@@ -180,7 +182,7 @@ function onChange(number) {
           </div> */}
           {/* <img className={styles.touxiang} src={ data.picture && data.picture } /> */}
           {/* <div className={styles.infoItem}> */}
-          <Table bordered = { false } columnWidth={10} columns={intention} dataSource={intentionData} pagination={false} scroll={intentionData && intentionData.length >= 3 ? { y: 240 } : false} width={500}/>
+          <Table bordered={false} columnWidth={10} columns={intention} dataSource={intentionData} pagination={false} scroll={intentionData && intentionData.length >= 3 ? { y: 240 } : false} width={500} />
           {/* </div> */}
         </div>
 

src/pages/customer/customerlist/publicCustomerDetail.jsx

@@ -147,7 +147,7 @@ function onChange(number) {
         <div className={publicStyle.leftBoxCentre}>
           <div className={publicStyle.tit}>
                 <span>项目名称</span>
-                <span style={{ marginLeft: '47%' }}>意向值</span>
+                <span style={{ float: 'right' }}>意向值</span>
           </div>
           {/* <img className={styles.touxiang} src={ data.picture && data.picture } /> */}
           <div className={publicStyle.infoItem}>

src/pages/customer/customerlist/publicStyle.less

@@ -136,7 +136,7 @@
     position: relative;
   }
   .tit{
-    font-size:24px;
+    font-size:0.15rem;
     font-weight:600;
     color:#222;
     margin: 10px 0 0 0;
@@ -149,13 +149,13 @@
   }
   .infoItem{
     color:#666;
-    font-size: 19px;
+    font-size: 0.1rem;
     margin: 0 0 10px 0;
     
   }
   .rightItem{
     color:#666;
-    font-size: 19px;
+    font-size: 0.1rem;
     margin: 0 0 15px 0;
   }
   .right{
@@ -177,10 +177,10 @@
   .Centered{
     position: absolute;
     top:108px;
-    left:40%;
+    left:50%;
     margin: 0 0 15px 0;
     color:#666;
-    font-size: 19px;
+    font-size: 0.1rem;
   }
 
   .rightCentered{
@@ -189,7 +189,7 @@
     left:55%;
     margin: 0 0 15px 0;
     color:#666;
-    font-size: 19px;
+    font-size: 0.1rem;
   }
   
 }

src/pages/customer/customerlist/style.less

@@ -136,11 +136,15 @@
     position: relative;
   }
   .tit{
-    font-size:24px;
+    font-size:0.15rem;
     font-weight:600;
     color:#222;
     margin: 10px 0 0 0;
   }
+  .flexBox{
+    display: flex;
+    align-items: end;
+  }
   .touxiang{
     width: 120px;
     width: 120px;
@@ -154,47 +158,62 @@
   }
   .infoItem{
     color:#666;
-    font-size: 19px;
+    font-size: 0.1rem;
     margin: 0 0 30px 0;
     
   }
   .rightItem{
     color:#666;
-    font-size: 19px;
+    font-size: 0.1rem;
     margin: 0 0 15px 0;
   }
   .right{
-    position: absolute;
-    top:108px;
-    left:170px;
+    width: 25%;
+    min-width: 1.3rem;
+    margin-left: 0.1rem;
+    padding-top: 0.3rem;
+    // position: absolute;
+    // top:108px;
+    // left:170px;
   }
   .left{
     position: absolute;
     top:108px;
     left:60%;
+  
   }
   .rightInfo{
-    position: absolute;
-    top:108px;
-    left:80%;
+    width: 25%;
+    min-width: 1.3rem;
+    margin-right: 0.1rem;
+    padding-top: 0.3rem;
+    // position: absolute;
+    // top:108px;
+    // left:80%;
   }
 
   .Centered{
-    position: absolute;
-    top:108px;
-    left:30%;
+    width: 25%;
+    // position: absolute;
+    // top:108px;
+    // left:30%;
+    min-width: 1.3rem;
     margin: 0 0 15px 0;
     color:#666;
-    font-size: 19px;
+    font-size: 0.1rem;
+    padding-top: 0.3rem;
   }
 
   .rightCentered{
-    position: absolute;
-    top:108px;
-    left:55%;
+    // position: absolute;
+    // top:108px;
+    // left:55%;
+    width: 25%;
+    min-width: 1.3rem;
     margin: 0 0 15px 0;
+    padding-top: 0.3rem;
     color:#666;
-    font-size: 19px;
+    font-size: 0.1rem;
   }
   
 }