--编辑个人信息对接50%

src/pages/userEdit/components/ModifyModal.scss

@@ -0,0 +1,76 @@
+  .modify-ickname-content {
+    margin: 0 auto;
+    width: 658px;
+    padding-bottom: 50px;
+
+    .modify-ickname-input {
+      width: 658px;
+      height: 182px;
+      background: #f3f3f3;
+      border: 2px solid #e6e6e6;
+      border-radius: 10px;
+      padding: 15px;
+      box-sizing: border-box;
+      font-size: 22px;
+      font-weight: 400;
+      color: #ababab;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .modify-ickname-input textarea {
+      width: 100%;
+      height: 80%;
+      font-size: 26px;
+      font-weight: 400;
+      color: #3c3c3c;
+    }
+
+    .modify-ickname-tips {
+      font-size: 22px;
+      font-weight: 400;
+      color: #ababab;
+      margin-top: 30px;
+    }
+
+    .modify-ickname-operation {
+      width: 658px;
+      height: 82px;
+      background: #ffffff;
+      border: 2px solid #cde5ff;
+      border-radius: 40px;
+      display: flex;
+      overflow: hidden;
+      margin-top: 105px;
+      display: flex;
+    }
+
+    .modify-ickname-operation button {
+      height: 100%;
+      width: 50%;
+      font-size: 32px;
+      font-weight: 400;
+      color: #007aff;
+      background-color: white;
+      border: none;
+      outline: none;
+      padding: 0;
+      border-radius: 0;
+    }
+
+    .modify-ickname-operation button::after,
+    .user-edit-logout::after {
+      border-radius: 0;
+      border: none;
+    }
+
+    .modify-ickname-operation .modify-ickname-operation-save {
+      background: #007aff;
+      color: #ffffff;
+    }
+
+    .modify-ickname-operation button::after {
+      border-radius: 0;
+    }
+  }

src/pages/userEdit/components/ModifyModal.tsx

@@ -0,0 +1,49 @@
+
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from "react"
+import Popup from "@/components/popup";
+import { Button, Image, Text, Textarea, View } from "@tarojs/components"
+import "./ModifyModal.scss"
+
+interface Params{
+  title?: string,
+  save: (value: any)=>void, // 确定保存
+}
+export default memo(forwardRef((props:any,ref)=>{
+  const {title="修改昵称"} = props;
+  const [value, setValue] = useState("");
+  useEffect(()=>{
+    setValue(props.value);
+  },[props.value])
+  // popup输入长度
+  const handleTextareaInput = (ev:any)=>{
+    setValue(ev.detail.value.slice(0,20));
+  }
+  // 重置
+  const handleTextareaReset = ()=>{
+    setValue("");
+  }
+  const [textareaBottom, setTextareaBottom] = useState(0);
+  const handleBlur = ()=>{
+    setTextareaBottom(0);
+  }
+  const handleFocus = (ev)=>{
+    setTextareaBottom(ev.detail.height);
+  }
+  const [modalShow,setModalShow] = useState(false);
+  useImperativeHandle(ref, ()=>({setModalShow}))
+  return (
+    <Popup onClose={()=>setModalShow(false)} title={title} show={modalShow}>
+        <View style={{marginBottom: `${textareaBottom}px`}} className="modify-ickname-content">
+          <View className="modify-ickname-input">
+            <Textarea showConfirmBar={false} auto-focus adjustPosition={false} value={value} onBlur={handleBlur} onFocus={handleFocus} onInput={handleTextareaInput} maxlength={20}/>
+            <Text>{value?.length}/20</Text>
+          </View>
+          <Text className="modify-ickname-tips">请设置2-20个字符，可由中文、英文、数字组成</Text>
+          <View className="modify-ickname-operation">
+            <Button onClick={handleTextareaReset} hoverClass="none" className="modify-ickname-operation-reset">重置</Button>
+            <Button onClick={()=>props.save(value)} hoverClass="none" className="modify-ickname-operation-save">保存</Button>
+          </View>
+        </View>
+      </Popup>
+  )
+}))

src/pages/userEdit/index.scss

@@ -33,6 +33,45 @@
   .user-edit-content-title text{
     margin-right: 10px;
   }
+  .user-edit-content-phone{
+    font-size: 26px;
+    font-weight: 400;
+    color: #000000;
+    display: flex;justify-content: space-between;
+  }
+  .user-edit-content-phone text{
+    font-size: 24px;
+    font-weight: 400;
+    color: #ababab;
+  }
+  .user-edit-content-bindphone{
+    padding: 0;width: auto;height: auto;
+    margin: 0;background: none;border: 0;
+    text-align: left;
+    font-size: 26px;
+    font-weight: 400;
+    color: #ababab;
+  }
+  .user-edit-content-bindphone::after{
+    border: 0;
+  }
+  .user-edit-content-company{
+    width: 118px;
+    height: 40px;
+    background: #dddddd;
+    border-radius: 6px;
+    display: flex;align-items: center;justify-content: center;
+    font-size: 24px;
+    font-weight: 400;
+    color: #707070;
+  }
+  .user-edit-content-company text{
+    margin-left: 5px;
+  }
+  .user-edit-content-company.user-edit-content-company-auth{
+    background-color: #CDF3DF;
+    color: #07C160;
+  }
   .user-edit-list{
     height: 90px;
     display: flex;align-items: center;
@@ -50,12 +89,15 @@
     color: #000000;
   }
   .user-edit-list-right{
-    display: flex;justify-content: space-between;
+    display: flex;justify-content: space-between;align-items: center;
     flex: auto;
     font-size: 26px;
     font-weight: 400;
     color: #000000;
   }
+  .user-edit-list-right>view{
+    flex: 1;
+  }
   .user-edit-list-right-placeholder{
     color: #cccccc;
   }
@@ -77,69 +119,4 @@
     text-align: center;
     color: #007aff;
   }
-
-  .user-edit-popup-content{
-    margin: 0 auto;
-    width: 658px;
-    padding-bottom: 50px;
-  }
-  .user-edit-popup-input{
-    width: 658px;
-    height: 182px;
-    background: #f3f3f3;
-    border: 2px solid #e6e6e6;
-    border-radius: 10px;
-    padding: 15px;
-    box-sizing: border-box;
-    font-size: 22px;
-    font-weight: 400;
-    color: #ababab;
-    display: flex;flex-direction: column;
-    align-items: flex-end;
-  }
-  .user-edit-popup-input textarea{
-    width: 100%;
-    height: 80%;
-    font-size: 26px;
-    font-weight: 400;
-    color: #3c3c3c;
-  }
-  .user-edit-popup-tips{
-    font-size: 22px;
-    font-weight: 400;
-    color: #ababab;
-    margin-top: 30px;
-  }
-  .user-edit-popup-operation{
-    width: 658px;
-    height: 82px;
-    background: #ffffff;
-    border: 2px solid #cde5ff;
-    border-radius: 40px;
-    display: flex;
-    overflow: hidden;
-    margin-top: 105px;
-    display: flex;
-  }
-  .user-edit-popup-operation button{
-    height: 100%;
-    width: 50%;
-    font-size: 32px;
-    font-weight: 400;
-    color: #007aff;
-    background-color: white;
-    border: none;
-    outline: none;
-    padding: 0;
-    border-radius: 0;
-  }
-  .user-edit-popup-operation button::after,.user-edit-logout::after{
-    border-radius: 0;
-    border: none;
-  }
-  .user-edit-popup-operation .user-edit-popup-operation-save{
-    background: #007aff;
-    color: #ffffff;
-  }
-  .user-edit-popup-operation button::after{ border-radius: 0; }
 }

src/pages/userEdit/index.tsx

@@ -3,45 +3,45 @@ import { alert, goLink, isEmptyObject, retrieval } from "@/common/common";
 import Popup from "@/components/popup";
 import { Button, Image, Text, Textarea, View } from "@tarojs/components"
 import Taro, { chooseMedia } from "@tarojs/taro";
-import { GetAdminUserInfoApi, realNameUpdateApi } from "@/api/user";
-import { memo, useCallback, useEffect, useState } from "react"
+import { realNameUpdateApi } from "@/api/user";
+import { companyDetailApi, companyUpdateApi } from "@/api/company"
+import { memo, useCallback, useEffect, useRef, useState } from "react"
 import "./index.scss"
+import ModifyModal from "./components/ModifyModal";
+import useLogin from "@/use/useLogin";
+import { useSelector } from "@/reducers/hooks";
 
 export default ()=>{
+  const { getPhoneNumber, getAdminUserInfo } = useLogin();
+	const {adminUserInfo} = useSelector(state => state.userInfo);
 	// 用户信息
-	const { fetchData, state } = GetAdminUserInfoApi();
-	const getData = async ()=>{
-		const result = await fetchData();
-    setFormData({
-      ...formData,
-      real_name: result.data.user_name
-    })
-	}
   useEffect(()=>{
-    getData();
-  },[])
+    setFormData({
+      ...adminUserInfo as any
+    })
+  }, [adminUserInfo])
   // 表单数据
   const [formData, setFormData] = useState({
-    real_name: "麦兜"
+    user_name: "麦兜"
   });
-  // 显示popup
-  const [popupShow,setPopupShow] = useState(false);
-  const triggerList = useCallback((key:string)=>{
-    setPopupShow(true);
-  },[])
-  // popup保存
+  // 昵称修改保存
 	const { fetchData: realNameUpdateFetch } = realNameUpdateApi();
   const rules = {
-    real_name: [{
-      message: "请输入昵称"
+    user_name: [{
+      message: "请输入"
     }]
   }
-  const handleTextareaSave = async (real_name)=>{
-    retrieval({real_name},rules).then(async ()=>{
-      const result = await realNameUpdateFetch({real_name});
+  const {fetchData: saveFetch} = companyUpdateApi();
+  const handleTextareaSave = async (text, type)=>{
+    retrieval({text},rules).then(async ()=>{
+      let result;
+      if(type=="Ickname"){
+        result = await realNameUpdateFetch({real_name: text});
+      }else{
+        result = saveFetch({company_name: text});
+      }
       if(result.success){
-        getData();
-        setPopupShow(false);
+        getAdminUserInfo();
         alert.success("保存成功");
       }else{
         alert.none(result.msg);
@@ -66,6 +66,15 @@ export default ()=>{
       }
     })
   }
+	const mGetPhoneNumber = (ev)=>{
+		if(ev.detail?.code){
+			getPhoneNumber(ev.detail.code);
+		}else{
+			alert.none("绑定失败!");
+		}
+	}
+  const ModifyIcknameEl = useRef(null);
+  const ModifyCompanyNameEl = useRef(null);
 
   return (
     <View className="user-edit">
@@ -75,21 +84,31 @@ export default ()=>{
       </View>
       <View className="user-edit-content">
         <View className="user-edit-content-title"><Text/> 个人资料</View>
-        <UserEditList onClick={()=>triggerList('real_name')} data={state.data.user_name} label="昵称" placeholder="请输入" icon=""/>
-        <UserEditList onClick={()=>onNavigate("/pages/company/index")} label="手机号" placeholder="去绑定" icon=""/>
+        <UserEditList onClick={()=>(ModifyIcknameEl.current as any).setModalShow(true)} data={(formData as any)?.user_name} label="昵称" placeholder="请输入" icon=""/>
+        <UserEditList label="手机号" placeholder="去绑定" icon="">
+          {((formData as any)?.phone)?<View className="user-edit-content-phone">
+            <View>{(formData as any)?.phone}</View>
+            <Text>已绑定</Text>
+           </View>:
+           <Button className="user-edit-content-bindphone" openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}>去绑定</Button>
+          }
+        </UserEditList>
       </View>
       <View className="user-edit-content">
         <View className="user-edit-content-title"><Text/> 组织资料</View>
-        <UserEditList onClick={()=>triggerList('real_name')} data={state.data.user_name} label="名称" placeholder="待绑定" icon=""/>
+        <UserEditList onClick={()=>(ModifyCompanyNameEl.current as any).setModalShow(true)} data={(formData as any)?.company_name} label="名称" placeholder="待绑定" icon=""/>
         <UserEditList onClick={()=>onNavigate("/pages/company/index")} label="类型" placeholder="完善公司/组织信息" icon=""/>
         <UserEditList onClick={()=>onNavigate("/pages/certification/index")} label="我的认证" placeholder="待绑定" icon="">
-          已认证
+          <View className="user-edit-content-company">
+            <Text className="iconfont "/> 未认证
+          </View>
         </UserEditList>
-        <UserEditList onClick={()=>onNavigate("/pages/weightList/index")} label="创建人" placeholder="完善公司/组织信息" icon=""/>
+        <UserEditList onClick={()=>onNavigate("/pages/weightList/index")} label="创建人" data={(formData as any)?.founder_user_name} placeholder="完善公司/组织信息" icon=""/>
       </View>
       <Button hoverClass="none" className="user-edit-logout">退出当前账号</Button>
 
-      <PopupContent value={formData.real_name} show={popupShow} setPopupShow={setPopupShow} save={handleTextareaSave}/>
+      <ModifyModal title="修改昵称" ref={ModifyIcknameEl} value={(formData as any)?.user_name} save={(value)=>handleTextareaSave(value, "Ickname")}/>
+      <ModifyModal title="修改名称" ref={ModifyCompanyNameEl} value={(formData as any)?.company_name} save={(value)=>handleTextareaSave(value, "companyName")}/>
     </View>
   )
 }
@@ -114,34 +133,3 @@ const UserEditList = memo((props:any)=>{
     </View>
   )
 })
-
-// popup内容
-const PopupContent = memo((props:any)=>{
-  const [value, setValue] = useState("");
-  useEffect(()=>{
-    setValue(props.value);
-  },[props.value])
-  // popup输入长度
-  const handleTextareaInput = (ev:any)=>{
-    setValue(ev.detail.value.slice(0,20));
-  }
-  // 重置
-  const handleTextareaReset = ()=>{
-    setValue("");
-  }
-  return (
-    <Popup onClose={()=>props.setPopupShow(false)} title="修改昵称" show={props.show}>
-        <View className="user-edit-popup-content">
-          <View className="user-edit-popup-input">
-            <Textarea value={value} onInput={handleTextareaInput} maxlength={20}/>
-            <Text>{value.length}/20</Text>
-          </View>
-          <Text className="user-edit-popup-tips">请设置2-20个字符，由中文、英文、数字、-和_组成</Text>
-          <View className="user-edit-popup-operation">
-            <Button onClick={handleTextareaReset} hoverClass="none" className="user-edit-popup-operation-reset">重置</Button>
-            <Button onClick={()=>props.save(value)} hoverClass="none" className="user-edit-popup-operation-save">保存</Button>
-          </View>
-        </View>
-      </Popup>
-  )
-})