✨ feat(ID1000840): 【临】游客信息换回获取用户的微信昵称（首次修改名字）

【【临】游客信息换回获取用户的微信昵称（首次修改名字）】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000840

src/components/organizationNameModal/index.module.scss

@@ -0,0 +1,57 @@
+.organizationNameModal {
+  width: 75vw;
+  background-color: #fff;
+  border-radius: 20px;
+  padding-top: 20px;
+  overflow: hidden;
+  .input {
+    border: 1px solid #eee;
+    margin: 20px 40px;
+    padding: 8px;
+    border-radius: 8px;
+    font-size: 26px;
+  }
+  &_title {
+    padding: 10px;
+    text-align: center;
+  }
+  &_content {
+    margin-bottom: 20px;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+  }
+  &_bottomBar {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid #eee;
+    .button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      box-sizing: border-box;
+      width: 50%;
+      font-size: 30px;
+      font-weight: 550;
+      padding: 30px 0;
+      background-color: #fff;
+    }
+    &_left {
+      border-right: 1px solid #eee;
+      color: #333;
+    }
+    &_right {
+      color: #606f97;
+    }
+  }
+  .tips {
+    background-color: #fef9f4;
+    font-size: 24px;
+    color: #ff9b33;
+    line-height: 1.5;
+    padding: 20px;
+  }
+}

src/components/organizationNameModal/index.tsx

@@ -0,0 +1,66 @@
+import type { CommonEventFunction, InputProps } from '@tarojs/components'
+import { Input, View } from '@tarojs/components'
+import { useState } from 'react'
+import classNames from 'classnames'
+import Dialog from '../Dialog'
+import InputX from '../InputX'
+import styles from './index.module.scss'
+import { usePropsValue } from '@/use/useCommon'
+
+interface PropsType {
+  showModal: boolean
+  onClose?: () => void
+  onShowModalChange?: (val: boolean) => void
+  onCancel?: () => void
+  onConfirm?: (val: string) => void
+}
+const OrganizationNameModal = (props: PropsType) => {
+  const {
+    showModal = false,
+    onClose,
+    onShowModalChange,
+    onCancel,
+    onConfirm,
+  } = props
+
+  const [_show, setShow] = usePropsValue({
+    value: showModal,
+    defaultValue: false,
+    onChange: (value) => {
+      onShowModalChange?.(value)
+    },
+  })
+
+  const handleClose = () => {
+    setShow(false)
+    onClose?.()
+  }
+
+  const [text, setText] = useState<string>('')
+
+  const handleCancel = () => {
+    onCancel?.()
+    handleClose()
+  }
+  const handleConfirm = () => {
+    onConfirm?.(text)
+  }
+  const handleIntput: CommonEventFunction<InputProps.inputEventDetail> = (e) => {
+    setText(e.detail.value)
+  }
+
+  return <Dialog show={showModal} onClose={handleClose} onChange={onShowModalChange}>
+    <View className={styles.organizationNameModal}>
+      <View className={styles.organizationNameModal_title}>请设置您的组织昵称</View>
+      <View className={styles.organizationNameModal_content}>
+        <View className={styles.tips}>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</View>
+        <InputX customClassName={styles.input} onInput={handleIntput} value={text} type="text" placeholder="请输入 组织/公司/码单昵称" />
+      </View>
+      <View className={styles.organizationNameModal_bottomBar}>
+        <View hoverClass="hoverClass" className={classNames(styles.button, styles.organizationNameModal_bottomBar_left)} onClick={handleCancel}>下次更改</View>
+        <View hoverClass="hoverClass" className={classNames(styles.button, styles.organizationNameModal_bottomBar_right)} onClick={handleConfirm}>确认</View>
+      </View>
+    </View>
+  </Dialog>
+}
+export default OrganizationNameModal

src/pages/userEdit/components/ModifyModal.scss

@@ -1,76 +0,0 @@
-  .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

@@ -1,49 +0,0 @@
-
-import { Button, Image, Text, Textarea, View } from '@tarojs/components'
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from 'react'
-import Popup from '@/components/popup'
-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/components/ModifyModal/index.module.scss

@@ -0,0 +1,77 @@
+.modify-ickname-content {
+  margin: 0 auto;
+  padding: 40px 50px;
+
+  .modify-ickname-input {
+    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 {
+    background: #ffffff;
+    border: 2px solid #cde5ff;
+    border-radius: 40px;
+    display: flex;
+    overflow: hidden;
+    margin-top: 80px;
+    display: flex;
+  }
+
+  .modify-ickname-operation .button {
+    width: 50%;
+    font-size: 32px;
+    padding: 20px 0;
+    font-weight: 400;
+    color: #007aff;
+    background-color: white;
+    border: none;
+    outline: none;
+    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;
+  }
+}
+.warn-tips {
+  font-size: 22px;
+  font-weight: 400;
+  color: #ff9b33;
+  margin-top: 30px;
+}

src/pages/userEdit/components/ModifyModal/index.tsx

@@ -0,0 +1,102 @@
+
+import type { CommonEventFunction, TextareaProps } from '@tarojs/components'
+import { Button, Image, Text, Textarea, View } from '@tarojs/components'
+import type { Ref } from 'react'
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import classNames from 'classnames'
+import styles from './index.module.scss'
+import Popup from '@/components/popup'
+import NormalButton from '@/components/normalButton'
+
+interface Params {
+  title?: string
+  value?: string
+  isCompanyName?: boolean
+  save: (value: any) => void // 确定保存
+}
+export interface ModifyModalRef {
+  setModalShow: (val: boolean) => void
+}
+const ModifyModal = (props: Params, ref: Ref<ModifyModalRef>) => {
+  const { title = '修改昵称', value: _value = '', isCompanyName = false } = props
+  const [value, setValue] = useState('')
+
+  const [tipsComp, setTipsComp] = useState<React.ReactNode | null>(null)
+  // 不合法状态
+  const isInvalidate = useMemo(() => {
+    let flag = false
+    // 仅允输入类型为数字、英文、中文
+    const Reg = /^[a-zA-Z0-9\u4E00-\u9FA5]+$/
+    if (!Reg.test(value)) {
+      flag = true
+      setTipsComp(() => {
+        return <View className={styles['warn-tips']}>
+          仅允许驶入类型为数字、英文、中文，禁止输入其他任何字符
+        </View>
+      })
+      return flag
+    }
+    // 修改组织名称
+    if (isCompanyName) {
+      // TODO 检测是否没机会修改
+      if (true) {
+        flag = false
+        setTipsComp(() => {
+          return <View className={styles['warn-tips']}>
+            <View>公司名称是辨识您身份的重要依据，</View>
+            <View>请谨慎修改。（仅支持修改一次）</View>
+          </View>
+        })
+      }
+      else {
+        flag = true
+        setTipsComp(() => {
+          return <View className={styles['warn-tips']}>
+            <View>您修改的次数已达到上限！</View>
+            <View>如需修改，请联系业务经理修改。</View>
+          </View>
+        })
+      }
+    }
+    return flag
+  }, [value, isCompanyName])
+
+  useEffect(() => {
+    setValue(_value)
+  }, [_value])
+  // popup输入长度
+  const handleTextareaInput: CommonEventFunction<TextareaProps.onInputEventDetail> = (ev) => {
+    setValue(ev.detail.value.slice(0, 20))
+  }
+  // 重置
+  const handleTextareaReset = () => {
+    setValue('')
+  }
+  const [textareaBottom, setTextareaBottom] = useState(0)
+  const handleBlur: CommonEventFunction<TextareaProps.onBlurEventDetail> = () => {
+    setTextareaBottom(0)
+  }
+  const handleFocus: CommonEventFunction<TextareaProps.onFocusEventDetail> = (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={styles['modify-ickname-content']}>
+        <View className={styles['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>
+        <View className={styles['modify-ickname-tips']}>请设置2-20个字符，可由中文、英文、数字组成</View>
+        {tipsComp}
+        <View className={styles['modify-ickname-operation']}>
+          <NormalButton onClick={handleTextareaReset} type="info" customClassName={classNames(styles.button, styles['modify-ickname-operation-reset'])}>重置</NormalButton>
+          <NormalButton disabled={isInvalidate} onClick={() => props.save(value)} type="primary" customClassName={classNames(styles.button, styles['modify-ickname-operation-save'])}>保存</NormalButton>
+        </View>
+      </View>
+    </Popup>
+  )
+}
+export default memo(forwardRef(ModifyModal))

src/pages/userEdit/index.tsx

@@ -1,6 +1,7 @@
 import { Button, Image, Picker, Text, Textarea, View } from '@tarojs/components'
 import Taro, { chooseMedia } from '@tarojs/taro'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { ModifyModalRef } from './components/ModifyModal'
 import ModifyModal from './components/ModifyModal'
 import { alert, goLink, isEmptyObject, retrieval } from '@/common/common'
 import Popup from '@/components/popup'
@@ -14,6 +15,7 @@ import { IMG_CND_Prefix } from '@/common/constant'
 import useUserInfo from '@/use/useUserInfo'
 import IconFont from '@/components/iconfont/iconfont'
 import { formatImgUrl } from '@/common/fotmat'
+import OrganizationNameModal from '@/components/organizationNameModal'
 
 // 列表
 const UserEditList = memo((props: any) => {
@@ -31,6 +33,8 @@ const UserEditList = memo((props: any) => {
 export default () => {
   const { getPhoneNumber, getAdminUserInfo } = useLogin()
   const { adminUserInfo } = useSelector(state => state.userInfo)
+  const ModifyNicknameEl = useRef<ModifyModalRef>(null)
+  const ModifyCompanyNameEl = useRef<ModifyModalRef>(null)
   // 表单数据
   const [formData, setFormData] = useState<typeof adminUserInfo>(adminUserInfo)
   // 用户信息
@@ -40,13 +44,6 @@ export default () => {
       ...(adminUserInfo as any),
     })
   }, [adminUserInfo])
-  useEffect(() => {
-    setFormData({
-      ...(adminUserInfo as any),
-      company_type_index: 0,
-    })
-    getCompanyTypeData()
-  }, [])
 
   // 昵称修改保存
   const { fetchData: realNameUpdateFetch } = realNameUpdateApi()
@@ -75,8 +72,8 @@ export default () => {
         }
         if (result.success) {
           getAdminUserInfo()
-          ;(ModifyIcknameEl.current as any).setModalShow(false)
-          ;(ModifyCompanyNameEl.current as any).setModalShow(false)
+          ModifyNicknameEl.current?.setModalShow(false)
+          ModifyCompanyNameEl.current?.setModalShow(false)
           alert.success('保存成功')
         }
         else {
@@ -125,8 +122,7 @@ export default () => {
       alert.none('绑定失败!')
     }
   }
-  const ModifyIcknameEl = useRef(null)
-  const ModifyCompanyNameEl = useRef(null)
+
   // 获取企业类型
   const { fetchData: companyTypeFetch, state: companyTypeData } = companyTypeApi()
   const getCompanyTypeData = async() => {
@@ -185,6 +181,14 @@ export default () => {
     }
   }, [companyTypeData])
 
+  useEffect(() => {
+    setFormData({
+      ...(adminUserInfo as any),
+      company_type_index: 0,
+    })
+    getCompanyTypeData()
+  }, [])
+
   const userInfo = useSelector(state => state.userInfo)
 
   const onPhone = () => {
@@ -194,25 +198,34 @@ export default () => {
     })
   }
 
+  const [showModal, setShowModal] = useState(false)
+  const handleClickNickname = () => {
+    setShowModal(true)
+    // ModifyNicknameEl.current?.setModalShow(true)
+  }
+  const handleClickCompanyName = () => {
+    ModifyCompanyNameEl.current?.setModalShow(true)
+  }
+
   return (
     <View className="user-edit">
       <View onClick={handleSelectRortrait} className="user-edit-portrait">
-        <Image src={(formData as any)?.avatar_url} />
+        <Image src={formData?.avatar_url as string} />
         <View>点击编辑头像</View>
       </View>
       <View className="user-edit-content">
         <UserEditList
-          onClick={() => (ModifyIcknameEl.current as any).setModalShow(true)}
-          data={(formData as any)?.user_name}
+          onClick={handleClickNickname}
+          data={formData?.user_name}
           label="昵称"
           placeholder="请输入"
           icon=""
         />
         <UserEditList label="手机号" placeholder="去绑定" icon="" useIcon="true">
-          {(formData as any)?.phone
+          {formData?.phone
             ? (
               <View className="user-edit-content-phone">
-                <View>{(formData as any)?.phone}</View>
+                <View>{formData?.phone}</View>
               </View>
             )
             : (
@@ -222,8 +235,8 @@ export default () => {
             )}
         </UserEditList>
         <UserEditList
-          onClick={() => (ModifyCompanyNameEl.current as any).setModalShow(true)}
-          data={(formData as any)?.company_name}
+          onClick={handleClickCompanyName}
+          data={formData?.company_name}
           label="公司名称"
           placeholder="待绑定"
           icon=""
@@ -249,13 +262,15 @@ export default () => {
         退出当前账号
       </Button> */}
 
-      <ModifyModal title="修改昵称" ref={ModifyIcknameEl} value={(formData as any)?.user_name} save={value => handleTextareaSave(value, 'Ickname')} />
+      <ModifyModal title="修改昵称" ref={ModifyNicknameEl} value={(formData as any)?.user_name} save={value => handleTextareaSave(value, 'Ickname')} />
       <ModifyModal
         title="修改名称"
+        isCompanyName
         ref={ModifyCompanyNameEl}
-        value={(formData as any)?.company_name}
+        value={formData?.company_name}
         save={value => handleTextareaSave(value, 'companyName')}
       />
+      <OrganizationNameModal showModal={showModal} />
     </View>
   )
 }

src/styles/common.scss

@@ -30,6 +30,10 @@ $opacity-disabled: 0.3;
   height: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
 }
 
+.hoverClass{
+  filter: brightness(70%);
+}
+
 //省略号
 @mixin common_ellipsis($params: 1) {
   overflow: hidden;