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

src/components/Dialog/index.tsx

@@ -10,10 +10,12 @@ interface PropsType {
   onClose?: (show: boolean) => void
   onChange?: (isShow) => void
   children?: React.ReactNode
+  customClassName?: string
+  customStyles?: React.CSSProperties
 }
 // 弹出框
 const Dialog = (props: PropsType) => {
-  const { showOverLay = true, show = false, onClose: _onClose, onChange: _onChange, children } = props
+  const { showOverLay = true, show = false, onClose: _onClose, onChange: _onChange, children, customClassName, customStyles } = props
 
   const [_show, setShow] = usePropsValue({
     value: show,
@@ -47,7 +49,7 @@ const Dialog = (props: PropsType) => {
     }
   }, [show])
   return _show
-    ? <View className={style.dialog}>
+    ? <View className={classnames(style.dialog, customClassName)} style={customStyles}>
       {/* 遮罩层 start */}
       <View
         className={classnames(style.dialog_mask, { [style.dialog_mask_active]: animShow, [style['drawer_mask--hidden']]: !showOverLay })}

src/components/normalButton/index.module.scss

@@ -10,7 +10,9 @@
   text-align: center;
   color: #fff;
   box-sizing: border-box;
-  
+  &:active {
+    opacity: $opacity-active;
+  }
   &--normal {
     height: 72px;
     font-size: $font_size_medium;
@@ -85,20 +87,20 @@
     }
   }
   // active 伪类
-  &--primary:active {
+  // &--primary:active {
-    background-color: rgba($color: $color_main, $alpha: 0.5);
+  //   background-color: rgba($color: $color_main, $alpha: 0.5);
-    color: #fff;
+  //   color: #fff;
-  }
+  // }
-  &--danger:active {
+  // &--danger:active {
-    background-color: rgba($color: $color_danger, $alpha: 0.5);
+  //   background-color: rgba($color: $color_danger, $alpha: 0.5);
-    color: #fff;
+  //   color: #fff;
-  }
+  // }
-  &--warning:active {
+  // &--warning:active {
-    background-color: rgba($color: $color_warning, $alpha: 0.5);
+  //   opacity: $opacity-active;
-    color: #fff;
+  // }
-  }
+  // &--info:active {
-  &--info:active {
+  //   // background-color: rgba($color: $color_info, $alpha: 0.5);
-    background-color: rgba($color: $color_info, $alpha: 0.5);
+  //   opacity: $opacity-active;
-    color: #fff;
+  //   // color: #fff;
-  }
+  // }
 }

src/components/normalButton/index.tsx

@@ -12,7 +12,7 @@ interface PropsType {
   type?: ButtonType
   round?: boolean // 大圆角
   disabled?: boolean
-  plain?: boolean // plain
+  plain?: boolean // 朴素(背景色为白色那种，不是全背景色)
   circle?: boolean // 小圆角
   children?: ReactNode
   onClick?: Function
@@ -20,10 +20,12 @@ interface PropsType {
   customStyles?: React.CSSProperties
   customTextClassName?: string
   loading?: boolean
+  hoverClass?: string
 }
 
 const NormalButton: FC<PropsType> = (props) => {
   const {
+    hoverClass = '',
     type = 'primary',
     size = 'normal',
     round = false,
@@ -57,7 +59,7 @@ const NormalButton: FC<PropsType> = (props) => {
   }
 
   return (
-    <View className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
+    <View hoverClass={hoverClass} className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
       <View className={classnames(styles['button--text'], customTextClassName)}>
         <View className={styles.loading}>{loading && <Loading width={30} />}</View>
         {children}</View>

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 { Input, Text, View } from '@tarojs/components'
-import React, { useState } from 'react'
+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>
+        <NormalButton type="info" customClassName={classNames(styles.button, styles.organizationNameModal_bottomBar_left)} onClick={handleCancel}>下次更改</NormalButton>
-        <View hoverClass="hoverClass" className={classNames(styles.button, styles.organizationNameModal_bottomBar_right)} onClick={handleConfirm}>确认</View>
+        <NormalButton type="primary" disabled={isInvalidate} customClassName={classNames(styles.button, styles.organizationNameModal_bottomBar_right)} onClick={handleConfirm}>确认</NormalButton>
       </View>
     </View>
   </Dialog>

src/components/shopCart/index.tsx

@@ -7,6 +7,7 @@ import type { SalesManDialogRef } from '../bindSalesManDialog'
 import BindSalesManDialog from '../bindSalesManDialog'
 import LabAndImgShow from '../LabAndImgShow'
 import LabAndImg from '../LabAndImg'
+import OrganizationNameModal from '../organizationNameModal'
 import styles from './index.module.scss'
 import ProductItem from './components/productItem'
 import Popup from '@/components/popup'
@@ -258,6 +259,15 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod
     }
   }, [list])
 
+  const [showModal, setShowModal] = useState(false)
+
+  const handleClose = () => {
+    setShowModal(false)
+  }
+  const handleShowChange = (val: boolean) => {
+    setShowModal(val)
+  }
+
   // 去结算
   const { fetchData: FetchData } = GetAdminUserInfoApi()
   const { fetchData: applyOrderAccessFetchData } = ApplyOrderAccessApi()
@@ -268,7 +278,12 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod
       bindSalesManDialogRef.current?.handleChange(true)
       // setShowBindSalesman(() => true)
       onClose?.()
-      return false
+      return
+    }
+    // TODO 检测是否修改过组织昵称
+    if (false) {
+      setShowModal(true)
+      return
     }
     getSelectId()
     if (selectIds.current.length == 0) {
@@ -308,6 +323,7 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod
       setSelectStatus(true)
     })
   }, [selectIndex])
+
   return (
     <View className={styles.shop_cart_main}>
       <Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
@@ -378,6 +394,7 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod
       <View>
         <LabAndImgShow value={labImageValue} show={showLabImage} onClose={closeLabImgShow} />
       </View>
+      <OrganizationNameModal showModal={showModal} onClose={handleClose} onShowModalChange={handleShowChange} />
     </View>
   )
 }

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

@@ -7,6 +7,7 @@ import classNames from 'classnames'
 import styles from './index.module.scss'
 import Popup from '@/components/popup'
 import NormalButton from '@/components/normalButton'
+import IconFont from '@/components/iconfont/iconfont'
 
 interface Params {
   title?: string
@@ -31,7 +32,10 @@ const ModifyModal = (props: Params, ref: Ref<ModifyModalRef>) => {
       flag = true
       setTipsComp(() => {
         return <View className={styles['warn-tips']}>
-          仅允许驶入类型为数字、英文、中文，禁止输入其他任何字符
+          <View style={{ display: 'flex', alignItems: 'center' }}>
+            <IconFont customStyle={{ marginRight: '8rpx' }} name="icon-tips" size={36} color="#f79b31"></IconFont>
+            <Text>仅允许驶入类型为数字、英文、中文，禁止输入其他任何字符</Text>
+          </View>
         </View>
       })
       return flag
@@ -43,8 +47,10 @@ const ModifyModal = (props: Params, ref: Ref<ModifyModalRef>) => {
         flag = false
         setTipsComp(() => {
           return <View className={styles['warn-tips']}>
-            <View>公司名称是辨识您身份的重要依据，</View>
+            <View style={{ display: 'flex' }}>
-            <View>请谨慎修改。（仅支持修改一次）</View>
+              <IconFont customStyle={{ marginRight: '8rpx' }} name="icon-tips" size={36} color="#f79b31"></IconFont>
+              <View>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</View>
+            </View>
           </View>
         })
       }
@@ -52,8 +58,10 @@ const ModifyModal = (props: Params, ref: Ref<ModifyModalRef>) => {
         flag = true
         setTipsComp(() => {
           return <View className={styles['warn-tips']}>
-            <View>您修改的次数已达到上限！</View>
+            <View style={{ display: 'flex' }}>
-            <View>如需修改，请联系业务经理修改。</View>
+              <IconFont customStyle={{ marginRight: '8rpx' }} name="icon-tips" size={36} color="#f79b31"></IconFont>
+              <View>您修改的次数已达到上限！如需修改，请联系业务经理修改。</View>
+            </View>
           </View>
         })
       }

src/pages/userEdit/index.tsx

@@ -198,17 +198,7 @@ export default () => {
     })
   }
 
-  const [showModal, setShowModal] = useState(false)
-
-  const handleClose = () => {
-    setShowModal(false)
-  }
-  const handleShowChange = (val: boolean) => {
-    setShowModal(val)
-  }
-
   const handleClickNickname = () => {
-    // setShowModal(true)
     ModifyNicknameEl.current?.setModalShow(true)
   }
   const handleClickCompanyName = () => {
@@ -278,7 +268,6 @@ export default () => {
         value={formData?.company_name}
         save={value => handleTextareaSave(value, 'companyName')}
       />
-      <OrganizationNameModal showModal={showModal} onClose={handleClose} onShowModalChange={handleShowChange} />
     </View>
   )
 }

src/styles/common.scss

@@ -34,6 +34,8 @@ $opacity-disabled: 0.3;
   filter: brightness(70%);
 }
 
+$opacity-active: 0.6 !default;
+
 //省略号
 @mixin common_ellipsis($params: 1) {
   overflow: hidden;