🎈 perf(UI界面): 完成UI界面和逻辑，等待后端对接

src/components/organizationNameModal/index.module.scss

@@ -10,6 +10,7 @@
     border-radius: 20px;
     padding: 20px 42px;
     margin: 32px 40px;
+    margin-bottom: 0;
     font-size: 26px;
     color: #333;
     &_focus {
@@ -37,6 +38,7 @@
     align-items: center;
     justify-content: space-between;
     border-top: 1px solid #eee;
+    margin-top: 30px;
     .button {
       display: flex;
       align-items: center;
@@ -44,9 +46,11 @@
       text-align: center;
       box-sizing: border-box;
       width: 50%;
-      font-size: 30px;
+      height: 100%;
+      font-size: 32px;
       font-weight: 550;
       padding: 30px 0;
+      border: 0;
       background-color: #fff;
     }
     &_left {
@@ -58,6 +62,7 @@
     }
   }
   .tips {
+    display: flex;
     background-color: #fef9f4;
     font-size: 24px;
     color: #ff9b33;
@@ -65,3 +70,8 @@
     padding: 20px;
   }
 }
+.error_tips {
+  color: #f64861;
+  padding: 10px 42px;
+  font-size: 20px;
+}

src/components/organizationNameModal/index.tsx

@@ -1,11 +1,11 @@
 import type { CommonEventFunction, InputProps } from '@tarojs/components'
-import { Input, View } from '@tarojs/components'
-import React, { useState } from 'react'
+import { Input, Text, View } from '@tarojs/components'
+import React, { useMemo, useState } from 'react'
 import classNames from 'classnames'
 import Dialog from '../Dialog'
-import InputX from '../InputX'
+import IconFont from '../iconfont/iconfont'
+import NormalButton from '../normalButton'
 import styles from './index.module.scss'
-import { usePropsValue } from '@/use/useCommon'
 
 interface PropsType {
   showModal: boolean
@@ -37,37 +37,61 @@ const OrganizationNameModal = (props: PropsType) => {
     onConfirm?.(text)
   }
   const [inputStyles, setInputStyles] = useState<string[]>([])
-  const Reg = /^[a-zA-Z0-9\u4E00-\u9FA5]+$/
+  const [tipsComp, setTipsComp] = useState<React.ReactNode | null>(null)
+
+  const isInvalidate = useMemo(() => {
+    let flag = false
+    const Reg = /^[a-zA-Z0-9\u4E00-\u9FA5]+$/
+    console.log('text', text)
+    setTipsComp(null)
+    setInputStyles(() => [styles.inputBar_focus])
+    if (!text) {
+      flag = true
+    }
+    if (text && !Reg.test(text)) {
+      flag = true
+      setInputStyles(() => [styles.inputBar_error])
+      setTipsComp(() => {
+        return <View className={styles.error_tips}>
+          只允许输入数字、英文、中文；不允许输入任何其他符号
+        </View>
+      })
+    }
+    return flag
+  }, [text])
 
   const handleIntput: CommonEventFunction<InputProps.inputEventDetail> = (e) => {
-    if (!Reg.test(e.detail.value)) {
-      setInputStyles(() => [styles.inputBar_error])
-      setText(e.detail.value)
-      return
-    }
     setText(e.detail.value)
   }
   const handleFocus = () => {
-    if (text && !Reg.test(text)) {
+    if (isInvalidate) {
       setInputStyles(() => [styles.inputBar_error])
       return
     }
     setInputStyles(() => [styles.inputBar_focus])
   }
   const handleBlur = () => {
+    if (isInvalidate) {
+      setInputStyles(() => [styles.inputBar_error])
+      return
+    }
     setInputStyles(() => [])
   }
 
-  return <Dialog show={showModal} onClose={handleClose} onChange={onShowModalChange}>
+  return <Dialog show={showModal} customStyles={{ zIndex: '9999' }} onClose={handleClose} onChange={onShowModalChange}>
     <View className={styles.organizationNameModal}>
       <View className={styles.organizationNameModal_title}>请设置您的组织昵称</View>
       <View className={styles.organizationNameModal_content}>
-        <View className={styles.tips}>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</View>
+        <View className={styles.tips}>
+          <IconFont name="icon-tips" customStyle={{ marginRight: '8rpx', flexShrink: '0' }} size={36} color="#f79b31"></IconFont>
+          <Text>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</Text>
+        </View>
         <Input className={classNames(styles.inputBar, [...inputStyles])} onFocus={handleFocus} onBlur={handleBlur} onInput={handleIntput} value={text} type="text" placeholder="请输入 组织/公司/码单昵称" />
+        {tipsComp}
       </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>
+        <NormalButton type="info" customClassName={classNames(styles.button, styles.organizationNameModal_bottomBar_left)} onClick={handleCancel}>下次更改</NormalButton>
+        <NormalButton type="primary" disabled={isInvalidate} customClassName={classNames(styles.button, styles.organizationNameModal_bottomBar_right)} onClick={handleConfirm}>确认</NormalButton>
       </View>
     </View>
   </Dialog>