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

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>
+  )
+}))