update: settle in

src/components/FormArtistInfo/FormAddress.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Form, Select } from '@arco-design/web-react';
+
+// 所在地区
+const FormAddress = () => {
+  const options = [
+    { label: '大陆', value: '大陆' },
+    { label: '港澳台', value: '港澳台' },
+    { label: '海外', value: '海外' },
+  ];
+  return (
+    <Form.Item
+      label="所在地区"
+      field="address"
+      rules={[{ required: true, message: '所在地区是必填项' }]}
+    >
+      <Select placeholder="请选择所在地区" options={options} />
+    </Form.Item>
+  );
+};
+
+export default FormAddress;

src/components/FormArtistInfo/FormArtistName.tsx

@@ -6,17 +6,14 @@ import styles from './style/FormArtistName.module.less';
 const FormArtistName = () => {
   return (
     <Form.Item
-      field="artistName"
-      rules={[{ required: true, message: '歌手名是必填项' }]}
+      className={styles.artistNameWrap}
+      label="Hi"
+      field="nickName"
+      labelCol={{ flex: '55px' }}
       wrapperCol={{ flex: 1 }}
+      rules={[{ required: true, message: '歌手名是必填项' }]}
     >
-      <div className={styles.artistName}>
-        <div className={styles.hi}>Hi</div>
-        <Input
-          className={styles.artistNameInp}
-          placeholder="请输入您的歌手名"
-        />
-      </div>
+      <Input className={styles.artistNameInp} placeholder="请输入您的歌手名" />
     </Form.Item>
   );
 };

src/components/FormArtistInfo/FormDescription.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Form, Input } from '@arco-design/web-react';
+
+const TextArea = Input.TextArea;
+
+// 艺人简介
+const FormDescription = () => {
+  return (
+    <Form.Item
+      label="艺人简介"
+      field="description"
+      rules={[{ required: true, message: '艺人简介是必填项' }]}
+    >
+      <TextArea
+        placeholder="请控制在20～2000字，可以按照以下形式书写：&#10;个人信息：XXX&#10;代表作品：XXX&#10;从艺历程：xxx&#10;…"
+        minLength={20}
+        maxLength={2000}
+        style={{ minHeight: 158 }}
+      />
+    </Form.Item>
+  );
+};
+
+export default FormDescription;

src/components/FormArtistInfo/FormPassword.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Form, Input } from '@arco-design/web-react';
+
+const InputPassword = Input.Password;
+
+// 登录密码
+const FormPassword = () => {
+  return (
+    <Form.Item
+      label="登录密码"
+      field="password"
+      rules={[{ required: true, message: '登录密码是必填项' }]}
+    >
+      <InputPassword
+        placeholder="请输入登录密码"
+        minLength={4}
+        maxLength={16}
+      />
+    </Form.Item>
+  );
+};
+
+export default FormPassword;

src/components/FormArtistInfo/FormStyle.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Form, Select } from '@arco-design/web-react';
+
+// 流派/风格
+const FormStyle = () => {
+  const options = [
+    { label: '爵士 Jazz', value: 'Jazz' },
+    { label: '摇滚', value: 'Rock' },
+  ];
+  return (
+    <Form.Item
+      label="流派/风格"
+      field="style"
+      rules={[{ required: true, message: '流派/风格是必填项' }]}
+    >
+      <Select placeholder="请选择流派/风格" options={options} />
+    </Form.Item>
+  );
+};
+
+export default FormStyle;

src/components/FormArtistInfo/FormType.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Form, Select } from '@arco-design/web-react';
+
+// 类型
+const FormType = () => {
+  const options = [
+    { label: '个人', value: '个人' },
+    { label: '团体', value: '团体' },
+  ];
+  return (
+    <Form.Item
+      label="类型"
+      field="type"
+      rules={[{ required: true, message: '类型是必填项' }]}
+    >
+      <Select placeholder="请选择类型" options={options} />
+    </Form.Item>
+  );
+};
+
+export default FormType;

src/components/FormArtistInfo/FormUserName.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Form, Input } from '@arco-design/web-react';
+
+// 后台登录名
+const FormUserName = () => {
+  return (
+    <Form.Item
+      label="后台登录名"
+      field="userName"
+      rules={[{ required: true, message: '后台登录名是必填项' }]}
+    >
+      <Input
+        placeholder="5位数以上字母+数字组合"
+        minLength={5}
+        maxLength={32}
+      />
+    </Form.Item>
+  );
+};
+
+export default FormUserName;

src/components/FormArtistInfo/index.ts

@@ -2,10 +2,22 @@ import FormArtistName from './FormArtistName';
 import FormArtistAvatar from './FormArtistAvatar';
 import FormHomepageBackground from './FormHomepageBackground';
 import FormBackendScreenshot from './FormBackendScreenshot';
+import FormAddress from './FormAddress';
+import FormStyle from './FormStyle';
+import FormType from './FormType';
+import FormDescription from './FormDescription';
+import FormUserName from './FormUserName';
+import FormPassword from './FormPassword';
 
 export {
   FormArtistName,
   FormArtistAvatar,
   FormHomepageBackground,
   FormBackendScreenshot,
+  FormAddress,
+  FormStyle,
+  FormType,
+  FormDescription,
+  FormUserName,
+  FormPassword,
 };

src/components/FormArtistInfo/style/FormArtistName.module.less

@@ -1,20 +1,27 @@
-.artistName {
-  width: 100%;
-  display: flex;
-  align-items: center;
+.artistNameWrap {
   border-bottom: 1px solid #ededed;
+  padding-bottom: 16px;
+  box-sizing: border-box;
+
+  &:global(.arco-form-item-error) {
+    padding-bottom: 0;
+  }
+
+  &:global(.arco-form-item) {
+    margin-bottom: 53px;
+  }
+
+  // 不展示必填符号
+  :global(.arco-form-item-symbol) {
+    display: none;
+  }
+
+  // label样式
+  :global(.arco-form-label-item > label) {
     font-family: PingFang SC;
     font-size: 24px;
     font-weight: 600;
-  line-height: 20px;
-  padding: 17px 22px;
-  box-sizing: border-box;
     color: #4e5969;
-
-  .hi {
-    margin-right: 24px;
-    height: 32px;
-    line-height: 32px;
   }
 
   .artistNameInp {
@@ -29,7 +36,7 @@
       color: #c9cdd4;
       font-family: PingFang SC;
       font-size: 20px;
-      font-weight: 400;
+      font-weight: lighter;
     }
   }
 }

src/pages/settle-in/components/StepArtistInfo/index.tsx

@@ -1,28 +1,39 @@
 import React, { useState } from 'react';
-import {
-  Typography,
-  Radio,
-  Message,
-  Form,
-  Input,
-  Button,
-  Select,
-  Upload,
-} from '@arco-design/web-react';
+import { Radio, Message, Form, Button } from '@arco-design/web-react';
 import {
   FormArtistName,
   FormArtistAvatar,
   FormHomepageBackground,
   FormBackendScreenshot,
+  FormAddress,
+  FormStyle,
+  FormType,
+  FormDescription,
+  FormUserName,
+  FormPassword,
 } from '@/components/FormArtistInfo';
 import styles from './style/index.module.less';
 
-const { Title } = Typography;
-const FormItem = Form.Item;
+const { useForm, useWatch, Item: FormItem } = Form;
 
 function StepArtistInfo() {
-  const [form] = Form.useForm();
-  const [agree, setAgree] = useState(false);
+  const [form] = useForm();
+  const agree = useWatch('agree', form);
+
+  const handleSubmit = () => {
+    form
+      .validate()
+      .then((values) => {
+        console.log(111, values);
+        if (!agree) {
+          Message.warning('请阅读并同意《雀乐音乐用户服务协议》');
+          return;
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
 
   return (
     <Form
@@ -31,74 +42,39 @@ function StepArtistInfo() {
       autoComplete="off"
       labelCol={{ flex: '103px' }}
       wrapperCol={{ flex: '468px' }}
-      onValuesChange={(v, vs) => {
-        console.log(v, vs);
-      }}
-      onSubmit={(v) => {
-        console.log(v);
-      }}
+      // onValuesChange={(v, vs) => {
+      //   console.log(v, vs);
+      // }}
+      // onSubmit={handleSubmit}
     >
+      {/* 歌手名 */}
       <FormArtistName />
-      <div className={styles.heightHolder} />
+      {/* 艺人头像 */}
       <FormArtistAvatar />
+      {/* 主页背景 */}
       <FormHomepageBackground />
+      {/* 后台截图 */}
       <FormBackendScreenshot />
-      <FormItem
-        label="所在地区"
-        field="clipPic"
-        rules={[{ required: true, message: '所在地区是必填项' }]}
-      >
-        <Select placeholder="please enter your age" />
-      </FormItem>
-      <FormItem
-        label="流派/风格"
-        field="style"
-        rules={[{ required: true, message: '流派/风格是必填项' }]}
-      >
-        <Select placeholder="please enter your age" />
-      </FormItem>
-      <FormItem
-        label="类型"
-        field="style2"
-        rules={[{ required: true, message: '类型是必填项' }]}
-      >
-        <Select placeholder="please enter your age" />
-      </FormItem>
-      <FormItem
-        label="艺人简介"
-        field="artistIntro"
-        rules={[{ required: true, message: '艺人简介是必填项' }]}
-      >
-        <Input placeholder="please enter your age" />
-      </FormItem>
-      <FormItem
-        label="后台登录名"
-        field="loginName"
-        rules={[{ required: true, message: '后台登录名是必填项' }]}
-      >
-        <Input placeholder="please enter your age" />
-      </FormItem>
-      <FormItem
-        label="登录密码"
-        field="loginPwd"
-        rules={[{ required: true, message: '登录密码是必填项' }]}
-      >
-        <Input placeholder="please enter your age" />
-      </FormItem>
-      <FormItem
-        wrapperCol={{ offset: 3 }}
-        field="agree"
-        rules={[
-          { required: true, message: '请先同意《雀乐音乐用户服务协议》' },
-        ]}
-      >
+      {/* 所在地区 */}
+      <FormAddress />
+      {/* 流派/风格 */}
+      <FormStyle />
+      {/* 类型 */}
+      <FormType />
+      {/* 艺人简介 */}
+      <FormDescription />
+      {/* 后台登录名 */}
+      <FormUserName />
+      {/* 登录密码 */}
+      <FormPassword />
+      <FormItem label=" " field="agree">
         <Radio>
           <span className={styles.policyName}>同意</span>
           <span className={styles.policyName}>《雀乐音乐用户服务协议》</span>
         </Radio>
       </FormItem>
       <FormItem wrapperCol={{ span: 24 }} className={styles.submitWrap}>
-        <Button type="primary" htmlType="submit">
+        <Button type="primary" onClick={handleSubmit}>
           提交申请
         </Button>
       </FormItem>

src/pages/settle-in/components/StepArtistInfo/style/index.module.less

@@ -9,10 +9,6 @@
   margin-bottom: 54px;
   box-sizing: border-box;
 
-  .heightHolder {
-    height: 33px;
-  }
-
   .submitWrap {
     text-align: center;
     margin-top: 20px;

src/pages/settle-in/components/StepPolicy/index.tsx

@@ -13,7 +13,7 @@ function StepPolicy({ onNext }: StepPolicyProps) {
 
   const handleNext = () => {
     if (!agree) {
-      Message.info('请阅读并同意《用户服务协议》');
+      Message.warning('请阅读并同意《用户服务协议》');
     } else {
       onNext?.();
     }