fix: 注册页面添加密码提示

src/pages/lxMall/index/index.tsx

@@ -7,7 +7,6 @@ import FloorAnchor from '../components/FloorAnchor'
 import { PublicApi } from '@/services/api'
 import { Advert, FloorLine } from 'lingxi-design-ui'
 import FloorSkeleton from '../components/FloorSkeleton'
-import { GetTemplatePlatformFindAllFirstCategoryResponse } from '@/services'
 import { LAYOUT_TYPE } from '@/constants'
 import styles from './index.less'
 
@@ -18,8 +17,8 @@ interface MallIndexPropsType {
 }
 
 const MallIndex: React.FC<MallIndexPropsType> = (props) => {
-  const { mallInfo, layoutType } = props
-  const [categoryList, setCategoryList] = useState<GetTemplatePlatformFindAllFirstCategoryResponse>([])
+  const { mallInfo } = props
+  const [categoryList, setCategoryList] = useState<any>([])
   const { mallTemplateId } = props.SiteStore
   const [firstAdvertList, setFirstAdvertList] = useState([])
   const [secondAdvertList, setSecondAdvertList] = useState([])

src/pages/systemSetting/collection/commodity.tsx

@@ -12,6 +12,7 @@ import { GlobalConfig } from '@/global/config'
 
 const Commodity: React.FC = () => {
   const [list, setList] = useState([])
+  const [buyLoading, setBuyLoading] = useState<boolean>(false)
   const [current, setCurrent] = useState<number>(1)
   const [pageSize, setPageSize] = useState<number>(10)
   const [totalCount, setTotalCount] = useState<number>(0)
@@ -38,40 +39,50 @@ const Commodity: React.FC = () => {
   }
 
   const linkToDetail = (detail) => {
-    const el = document.createElement('a')
-    switch (detail.type) {
-      case 1:
-      case 2:
-        el.href = `/shop/commodity/detail?id=${detail.commodity.id}&shopId=${btoa(JSON.stringify({ shopId: detail.commodity.storeId, memberId: detail.commodity.memberId, roleId: detail.commodity.memberRoleId }))}`;
-        break
-      case 3:
-        el.href = `${GlobalConfig.channelRootRoute}/commodity/detail?id=${detail.commodity.id}&channelId=${btoa(JSON.stringify({ memberId: detail.channelMemberId }))}`;
-        break
-      case 4:
-        el.href = `${GlobalConfig.ichannelRootRoute}/commodity/detail?id=${detail.commodity.id}&channelId=${btoa(JSON.stringify({ memberId: detail.channelMemberId }))}`;
-        break
-      case 5:
-        el.href = `${GlobalConfig.channelRootRoute}/commodity/detail?id=${detail.commodity.id}&channelId=${btoa(JSON.stringify({ memberId: detail.channelMemberId }))}`;
-        break
+    const param: any = {
+      commodityId: detail.commodity.id,
+      type: detail.type,
+      channelMemberId: detail.channelMemberId
     }
-    el.target = '_blank';
-    el.click()
-    // if (detail.commodity.status !== 2) {
-
-    // } else {
-    //   message.destroy()
-    //   message.info("该商品已下架")
-    // }
+    setBuyLoading(true)
+    PublicApi.getSearchShopCommonGetCommodityIsPublish(param).then(res => {
+      setBuyLoading(false)
+      if(res.code === 1000) {
+        if(res.data) {
+          const el = document.createElement('a')
+          switch (detail.type) {
+            case 1:
+            case 2:
+              el.href = `/shop/commodity/detail?id=${detail.commodity.id}&shopId=${btoa(JSON.stringify({ shopId: detail.commodity.storeId, memberId: detail.commodity.memberId, roleId: detail.commodity.memberRoleId }))}`;
+              break
+            case 3:
+              el.href = `${GlobalConfig.channelRootRoute}/commodity/detail?id=${detail.commodity.id}&channelId=${btoa(JSON.stringify({ memberId: detail.channelMemberId }))}`;
+              break
+            case 4:
+              el.href = `${GlobalConfig.ichannelRootRoute}/commodity/detail?id=${detail.commodity.id}&channelId=${btoa(JSON.stringify({ memberId: detail.channelMemberId }))}`;
+              break
+            case 5:
+              el.href = `${GlobalConfig.channelRootRoute}/commodity/detail?id=${detail.commodity.id}&channelId=${btoa(JSON.stringify({ memberId: detail.channelMemberId }))}`;
+              break
+          }
+          el.target = '_blank';
+          el.click()
+        } else {
+          message.destroy()
+          message.info("该商品已下架")
+        }
+      }
+    })
   }
 
   const renderBtn = (priceType, commodity) => {
     switch (priceType) {
       case COMMODITY_TYPE.prompt:
-        return <Button className={styles.collection_state_wrap_btn} type="primary" onClick={() => linkToDetail(commodity)}>再次购买</Button>
+        return <Button loading={buyLoading} className={styles.collection_state_wrap_btn} type="primary" onClick={() => linkToDetail(commodity)}>再次购买</Button>
       case COMMODITY_TYPE.integral:
-        return <Button className={styles.collection_state_wrap_btn} type="primary" onClick={() => linkToDetail(commodity)}>立即兑换</Button>
+        return <Button loading={buyLoading} className={styles.collection_state_wrap_btn} type="primary" onClick={() => linkToDetail(commodity)}>立即兑换</Button>
       case COMMODITY_TYPE.inquiry:
-        return <Button className={styles.collection_state_wrap_btn} type="primary" onClick={() => linkToDetail(commodity)}>立即询价</Button>
+        return <Button loading={buyLoading} className={styles.collection_state_wrap_btn} type="primary" onClick={() => linkToDetail(commodity)}>立即询价</Button>
     }
   }
 

src/pages/user/components/PasswordInput.tsx

+import React, { useEffect } from 'react'
+import { Input, Tooltip, Form } from 'antd'
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'
+import { PATTERN_MAPS } from '@/constants/regExp';
+import styles from './index.less'
+
+interface PasswordInputPropsType {
+  value: string,
+  type: string,
+  placeholder: string,
+  size: any,
+  styles?: any,
+  onChange: Function,
+}
+
+const PasswordInput: React.FC<PasswordInputPropsType> & { isFieldComponent: boolean } = (props) => {
+  const { type, placeholder, size, value, onChange } = props
+  const LengthReg = /^[a-zA-Z\d]{8,20}$/
+  const wordReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z\d]*$/
+
+  const showPasswordTip = () => {
+
+    return <div className={styles.passwordInputTip}>
+      <div className={styles.tipItem}>
+        {
+          LengthReg.test(value) ? <CheckCircleOutlined style={{color: '#00b47b'}} /> : <CloseCircleOutlined style={{color: '#e63f3c'}} />
+        }
+        <span className={styles.tiptext}>密码长度8-20个字符</span>
+      </div>
+      <div className={styles.tipItem}>
+        {
+          value.indexOf(" ") === -1 ? <CheckCircleOutlined style={{color: '#00b47b'}} /> : <CloseCircleOutlined style={{color: '#e63f3c'}} />
+        }
+        <span className={styles.tiptext}>密码不能包含空格</span>
+      </div>
+      <div className={styles.tipItem}>
+        {
+          wordReg.test(value) ? <CheckCircleOutlined style={{color: '#00b47b'}} /> : <CloseCircleOutlined style={{color: '#e63f3c'}} />
+        }
+        <span className={styles.tiptext}>密码必须包含大写字母、小写字母和数字</span>
+      </div>
+    </div>
+  }
+
+  const handleChange = (value) => {
+    onChange(value)
+  }
+
+  return (
+    <div style={{ width: '100%'}} className={styles.customInput}>
+      <Tooltip
+        placement="right"
+        title={showPasswordTip}
+        color="#FFF"
+      >
+        <Form.Item
+          name="password"
+          style={{ marginBottom: 0 }}
+          rules={[{pattern: PATTERN_MAPS.password, message: '请输入正确的密码'}]}
+        >
+          <Input placeholder={placeholder} value={value} size={size} type={type} onChange={handleChange} />
+        </Form.Item>
+      </Tooltip>
+    </div>
+  )
+}
+
+PasswordInput.defaultProps = {
+  type: 'password',
+  placeholder: '请设置你的登录密码',
+  size: 'large',
+  value: "",
+};
+
+PasswordInput.isFieldComponent = false;
+
+export default PasswordInput;
+

src/pages/user/components/index.less

+.passwordInputTip {
+  color: #909399;
+  padding: 8px 6px;
+  // width: 320px;
+
+  .tipItem {
+    margin-bottom: 4px;
+
+    span {
+      font-size: 14px;
+    }
+
+    .tiptext {
+      padding-left: 8px;
+      font-size: 12px;
+    }
+  }
+}
+
+.customInput {
+  position: relative;
+  :global {
+    .ant-form-item-explain {
+      position: absolute;
+      top: 40px;
+    }
+  }
+}

src/pages/user/register.tsx

@@ -16,6 +16,7 @@ import { PublicApi } from '@/services/api';
 import NiceForm from '@/components/NiceForm';
 import schemas from './schema';
 import { encryptedByAES } from '@/utils/cryptoAes';
+import PasswordInput from './components/PasswordInput'
 
 const { onFieldValueChange$, onFieldInputChange$, onFieldValidateEnd$ } = FormEffectHooks
 
@@ -104,7 +105,7 @@ const UserRegistry = () => {
   }, [])
 
   const fetchAgreement = () => {
-    let param = {
+    const param = {
       columnType: 2
     }
     //@ts-ignore
@@ -151,8 +152,8 @@ const UserRegistry = () => {
 
   const checkoutFile = (rule: any, value: any) => {
     if (value && value.length) {
-      let length = value.length
-      let obj = value[length - 1]
+      const length = value.length
+      const obj = value[length - 1]
       const isLt5M = obj.size / 1024 / 1024 < 5;
       if (isLt5M) {
         return Promise.resolve();
@@ -269,7 +270,8 @@ const UserRegistry = () => {
             schema={asyncSchema}
             actions={actions}
             components={{
-              CustomInput
+              CustomInput,
+              PasswordInput
             }}
             effects={($, actions) => {
               useLinkageValidateEffects()
@@ -337,4 +339,4 @@ const UserRegistry = () => {
   )
 }
 
-export default UserRegistry
\ No newline at end of file
+export default UserRegistry

src/pages/user/schema/index.ts

@@ -48,22 +48,31 @@ export const registerStep0Schema: ISchema = {
         },
         password: {
           type: 'string',
-          "x-rules": [
-            {
-              required: true,
-              message: '请输入密码'
-            },
-            {
-              pattern: PATTERN_MAPS.password,
-              message: '请输入正确的密码'
-            }
-          ],
+          "x-component": 'PasswordInput',
           "x-component-props": {
             type: 'password',
             placeholder: '请设置你的登录密码',
             size: 'large'
           }
         },
+        // password: {
+        //   type: 'string',
+        //   "x-rules": [
+        //     {
+        //       required: true,
+        //       message: '请输入密码'
+        //     },
+        //     {
+        //       pattern: PATTERN_MAPS.password,
+        //       message: '请输入正确的密码'
+        //     }
+        //   ],
+        //   "x-component-props": {
+        //     type: 'password',
+        //     placeholder: '请设置你的登录密码',
+        //     size: 'large'
+        //   }
+        // },
         confirmPassword: {
           type: 'string',
           "x-rules": [
@@ -312,4 +321,4 @@ export const forgetPwdSchema: ISchema = {
 export default {
   schema0: registerStep0Schema,
   schema1: registerStep1Schema
-}
\ No newline at end of file
+}

src/utils/numberFomat.ts

 
 export const numFormat = (num: number) => {
   if (num) {
-    let result = String(num)
+    const result = String(num)
     return result.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
   } else {
     return 0
@@ -19,17 +19,17 @@ export const numFormat = (num: number) => {
 export const priceFormat = (number, decimals = 2, dec_point = '.', thousands_sep = ',') => {
   number = (number + '').replace(/[^0-9+-Ee.]/g, '');
   let s: string[] = []
-  let n = !isFinite(+number) ? 0 : +number,
+  const n = !isFinite(+number) ? 0 : +number,
     prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
     sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
     dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
     toFixedFix = function (n, prec) {
-      var k = Math.pow(10, prec);
+      const k = Math.pow(10, prec);
       return '' + Math.ceil(n * k) / k;
     };
 
   s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
-  let re = /(-?\d+)(\d{3})/;
+  const re = /(-?\d+)(\d{3})/;
   while (re.test(s[0])) {
     s[0] = s[0].replace(re, "$1" + sep + "$2");
   }
@@ -39,4 +39,4 @@ export const priceFormat = (number, decimals = 2, dec_point = '.', thousands_sep
     s[1] += new Array(prec - s[1].length + 1).join('0');
   }
   return s.join(dec);
-}
\ No newline at end of file
+}