🎈 perf(完成UI界面和逻辑): 完成

src/common/constant.ts

@@ -1,11 +1,11 @@
-// export const BASE_URL = CURRENT_BASE_URL
+export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `http://192.168.0.75:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:50001/lymarket`
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
 // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
-// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
+// export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
-export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
+// export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
 // export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发

src/components/bindSalesManDialog/index.tsx

@@ -8,14 +8,11 @@ import NormalButton from '../normalButton'
 import LayoutBlock from '../layoutBlock'
 import IconText from '../iconText'
 import IconFont from '../iconfont/iconfont'
-import InputX from '../InputX'
 import Divider from '../divider'
 import styles from './index.module.scss'
-import { formatImgUrl } from '@/common/fotmat'
 import { alert, goLink } from '@/common/common'
 import CloseBtn from '@/components/closeBtn'
 import { getCDNSource } from '@/common/constant'
-import { getFilterData } from '@/common/util'
 import { BindInvitationInfoApi, GetInvitationInfoApi } from '@/api/user'
 // 获取业务员信息
 interface Param { invitation_code: string; name: string; phone: string }

src/components/organizationNameModal/index.module.scss

@@ -4,13 +4,23 @@
   border-radius: 20px;
   padding-top: 20px;
   overflow: hidden;
-  .input {
+  .inputBar {
-    border: 1px solid #eee;
+    border: 1px solid transparent;
-    margin: 20px 40px;
+    background-color: #f5f5f5;
-    padding: 8px;
+    border-radius: 20px;
-    border-radius: 8px;
+    padding: 20px 42px;
+    margin: 32px 40px;
     font-size: 26px;
+    color: #333;
+    &_focus {
+      border: 1px solid #337fff;
+    }
+    &_error {
+      border: 1px solid #f64861;
+      color: #f64861;
+    }
   }
+
   &_title {
     padding: 10px;
     text-align: center;
@@ -44,7 +54,7 @@
       color: #333;
     }
     &_right {
-      color: #606f97;
+      color: #337fff;
     }
   }
   .tips {

src/components/organizationNameModal/index.tsx

@@ -1,6 +1,6 @@
 import type { CommonEventFunction, InputProps } from '@tarojs/components'
 import { Input, View } from '@tarojs/components'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import classNames from 'classnames'
 import Dialog from '../Dialog'
 import InputX from '../InputX'
@@ -23,16 +23,7 @@ const OrganizationNameModal = (props: PropsType) => {
     onConfirm,
   } = props
 
-  const [_show, setShow] = usePropsValue({
-    value: showModal,
-    defaultValue: false,
-    onChange: (value) => {
-      onShowModalChange?.(value)
-    },
-  })
-
   const handleClose = () => {
-    setShow(false)
     onClose?.()
   }
 
@@ -45,16 +36,34 @@ const OrganizationNameModal = (props: PropsType) => {
   const handleConfirm = () => {
     onConfirm?.(text)
   }
+  const [inputStyles, setInputStyles] = useState<string[]>([])
+  const Reg = /^[a-zA-Z0-9\u4E00-\u9FA5]+$/
+
   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)) {
+      setInputStyles(() => [styles.inputBar_error])
+      return
+    }
+    setInputStyles(() => [styles.inputBar_focus])
+  }
+  const handleBlur = () => {
+    setInputStyles(() => [])
+  }
 
   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="请输入 组织/公司/码单昵称" />
+        <Input className={classNames(styles.inputBar, [...inputStyles])} onFocus={handleFocus} onBlur={handleBlur} 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>

src/pages/userEdit/components/ModifyModal/index.module.scss

@@ -1,8 +1,11 @@
 .modify-ickname-content {
   margin: 0 auto;
-  padding: 40px 50px;
+  padding: 40px 0;
 
   .modify-ickname-input {
+    margin-top: 30px;
+    margin-left: 48px;
+    margin-right: 48px;
     height: 182px;
     background: #f3f3f3;
     border: 2px solid #e6e6e6;
@@ -26,6 +29,7 @@
   }
 
   .modify-ickname-tips {
+    padding: 0 48px;
     font-size: 22px;
     font-weight: 400;
     color: #ababab;
@@ -34,24 +38,28 @@
 
   .modify-ickname-operation {
     background: #ffffff;
-    border: 2px solid #cde5ff;
-    border-radius: 40px;
     display: flex;
-    overflow: hidden;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 48px;
     margin-top: 80px;
-    display: flex;
+    .button {
-  }
+      width: 45%;
-
+      font-size: 32px;
-  .modify-ickname-operation .button {
+      padding: 20px 0;
-    width: 50%;
+      font-weight: 400;
-    font-size: 32px;
+      &::after {
-    padding: 20px 0;
+        border-radius: 0;
-    font-weight: 400;
+      }
-    color: #007aff;
+    }
-    background-color: white;
+    .modify-ickname-operation-save {
-    border: none;
+      background: #007aff;
-    outline: none;
+      color: #ffffff;
-    border-radius: 0;
+    }
+    .modify-ickname-operation-IKnown {
+      width: 100%;
+    }
   }
 
   .modify-ickname-operation .button::after,
@@ -59,19 +67,12 @@
     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 {
+  background-color: #fef9f4;
+  line-height: 1.5;
+  padding: 15px 48px;
   font-size: 22px;
   font-weight: 400;
   color: #ff9b33;
-  margin-top: 30px;
 }

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

@@ -85,15 +85,23 @@ const ModifyModal = (props: Params, ref: Ref<ModifyModalRef>) => {
   return (
     <Popup onClose={() => setModalShow(false)} title={title} show={modalShow}>
       <View style={{ marginBottom: `${textareaBottom}px` }} className={styles['modify-ickname-content']}>
+        {tipsComp}
         <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>
+            // TODO 检测是否没机会修改
+            true
+              ? <>
+                <NormalButton round type="primary" plain onClick={handleTextareaReset} customClassName={classNames(styles.button, styles['modify-ickname-operation-reset'])}>重置</NormalButton>
+                <NormalButton round disabled={isInvalidate} onClick={() => props.save(value)} type="primary" customClassName={classNames(styles.button, styles['modify-ickname-operation-save'])}>保存</NormalButton>
+
+              </>
+              : <NormalButton round onClick={() => setModalShow(false)} type="primary" customClassName={classNames(styles.button, styles['modify-ickname-operation-IKnown'])}>知道了</NormalButton>
+          }
         </View>
       </View>
     </Popup>

src/pages/userEdit/index.tsx

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