Merge branch '20230331-生产合作方运维登录短信验证码接口改造' into 'release_20230331'

3.31 生产合作方运维登录短信验证码接口改造

See merge request eshop/fe_service_ebtp_frontend!199

src/pages/usercooper/login/components/Login/LoginItem.tsx

@@ -75,13 +75,12 @@ const LoginItem: React.FC<LoginItemProps> = (props) => {
     ...restProps
   } = props;
 
-  const onGetCaptcha = useCallback(async (mobile: string) => {
-    const result = await getFakeCaptcha(mobile);
-    if (result === false) {
-      return;
-    }
+  const onGetCaptcha = useCallback(async (values: any) => {
+    const result = await getFakeCaptcha(values);
+    if (result?.success) {
       message.success('获取验证码成功！');
       setTiming(true);
+    }
   }, []);
 
   useEffect(() => {
@@ -127,8 +126,8 @@ const LoginItem: React.FC<LoginItemProps> = (props) => {
                 className={styles.getCaptcha}
                 size="large"
                 onClick={() => {
-                  validateFields(['mobile']).then(values => {
-                    const value = values?.mobile;
+                  validateFields(['mobile', 'code', 'tmpToken']).then(values => {
+                    const value = { strmobileNumber: values?.mobile, code: values?.code, codeKey: values?.tmpToken };
                     onGetCaptcha(value);
                   })
                 }}

src/pages/usercooper/login/index.tsx

@@ -35,8 +35,9 @@ const Login: React.FC<LoginProps> = (props) => {
   const [type, setType] = useState<string>('account');
   const [dis, disSet] = useState<boolean>(false);
   const [imgUrl, setImgUrl] = useState<any>('');
-  const [tmpToken, setTmpToken] = useState<any>('');
+  // const [tmpToken, setTmpToken] = useState<any>('');
   const remainingTime = 3 //刷新token的剩余时间，单位小时
+  const [form] = Form.useForm();
 
   const genRandomString = (len: number) => {
     const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
@@ -48,7 +49,7 @@ const Login: React.FC<LoginProps> = (props) => {
   const changeCaptcha = () => {
     let tmpToken = genRandomString(16);
     let url = '/api/auth/captcha?token=' + tmpToken;
-    setTmpToken(tmpToken);
+    form.setFieldsValue({ tmpToken });
     setImgUrl(url);
   };
   useEffect(() => {
@@ -109,7 +110,7 @@ const Login: React.FC<LoginProps> = (props) => {
       })
     } else {
       disSet(true);
-      await CooperfakeAccountLogin({ ...values, tmpToken }).then((res) => {
+      await CooperfakeAccountLogin({ ...values }).then((res) => {
         if (res?.success) {
           if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
             refreshToken(res?.data)
@@ -137,7 +138,7 @@ const Login: React.FC<LoginProps> = (props) => {
         />
         合作方登录
       </div>
-      <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
+      <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit} from={form}>
         <Tab key="account" tab="账号密码登录">
           {status === 'error' && loginType === 'account' && !submitting && (
             <LoginMessage content="账号或密码错误" />
@@ -172,8 +173,21 @@ const Login: React.FC<LoginProps> = (props) => {
               },
             ]}
           />
+          <Form.Item name="tmpToken" hidden>
+            <Input />
+          </Form.Item>
           {START_ENV == 'sim' || START_ENV == 'PROD' ? (
             <>
+              <Row>
+                <Col span={12}>
+                  <Form.Item name="code" rules={[{ required: true, message: '请输入验证码' }]}>
+                    <Input size='large' placeholder="验证码" />
+                  </Form.Item>
+                </Col>
+                <Col span={12} style={{ lineHeight: '33.11px' }}>
+                  <Image src={imgUrl} preview={false} onClick={() => changeCaptcha()} />
+                </Col>
+              </Row>
               <Mobile
                 name="mobile"
                 placeholder="手机号"
@@ -191,7 +205,7 @@ const Login: React.FC<LoginProps> = (props) => {
               <Captcha
                 name="captcha"
                 placeholder="验证码"
-                countDown={60}
+                countDown={30}
                 getCaptchaButtonText=""
                 getCaptchaSecondText="秒"
                 rules={[

src/services/login.ts

@@ -118,9 +118,7 @@ export async function getPassword(params: any) { // 获取后台验证码接口
 export async function getFakeCaptcha(params: any) {
   return request('/api/notification/v1/notification/savaSmsByPhoneNew', {
     method: 'POST',
-    data: {
-      strmobileNumber: params
-    },
+    data: { ...params },
     requestType: 'json',
   });
 }