update: 入驻-表单

src/components/FormArtistInfo/FormArtistAvatar.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import AvatarPng from '@/assets/avatar.png';
+import UploadForm from './UploadForm';
+
+// 艺人头像
+const FormArtistAvatar = () => {
+  return (
+    <UploadForm
+      label="艺人头像"
+      field="avatar"
+      rules={[{ required: true, message: '艺人头像是必填项' }]}
+      pic={AvatarPng}
+      tip="上传您的头像，作为"
+    />
+  );
+};
+
+export default FormArtistAvatar;

src/components/FormArtistInfo/FormArtistName.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Form, Input } from '@arco-design/web-react';
+import styles from './style/FormArtistName.module.less';
+
+// 歌手名
+const FormArtistName = () => {
+  return (
+    <Form.Item
+      field="artistName"
+      rules={[{ required: true, message: '歌手名是必填项' }]}
+      wrapperCol={{ flex: 1 }}
+    >
+      <div className={styles.artistName}>
+        <div className={styles.hi}>Hi</div>
+        <Input
+          className={styles.artistNameInp}
+          placeholder="请输入您的歌手名"
+        />
+      </div>
+    </Form.Item>
+  );
+};
+
+export default FormArtistName;

src/components/FormArtistInfo/FormBackendScreenshot.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import UploadForm from './UploadForm';
+
+// 后台截图
+const FormBackendScreenshot = () => {
+  return (
+    <UploadForm
+      label="后台截图"
+      field="screenshot"
+      rules={[{ required: true, message: '后台截图是必填项' }]}
+      tip="提供一个其它平台音乐人管理后台实时截图"
+    />
+  );
+};
+
+export default FormBackendScreenshot;

src/components/FormArtistInfo/FormHomepageBackground.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import UploadForm from './UploadForm';
+
+// 主页背景
+const FormHomepageBackground = () => {
+  return (
+    <UploadForm
+      label="主页背景"
+      field="backgroundImage"
+      tip="上传您的头像，会在雀乐APP艺人主页展示"
+    />
+  );
+};
+
+export default FormHomepageBackground;

src/components/FormArtistInfo/UploadForm.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Form, Upload } from '@arco-design/web-react';
+import UploadDefaultPic from '@/assets/upload_default_pic.png';
+import styles from './style/UploadForm.module.less';
+
+interface UploadFormProps {
+  label: string;
+  field: string;
+  rules?: Record<string, boolean | string>[];
+  pic?: string;
+  tip: string;
+  subTip?: string;
+}
+
+// 上传图片组件
+const UploadForm = (props: UploadFormProps) => {
+  const { label, field, rules, pic, tip, subTip } = props;
+  return (
+    <Form.Item
+      label={label}
+      field={field}
+      rules={rules}
+      className={styles.uploadForm}
+    >
+      <Upload
+        action="/"
+        onChange={(fileList, file) => {
+          console.log(fileList, file);
+        }}
+      >
+        <div className={styles.uploadTrigger}>
+          <img src={pic || UploadDefaultPic} alt="pic" width={64} height={64} />
+          <div className={styles.infoWrap}>
+            <div className={styles.tip}>{tip || '上传'}</div>
+            <div className={styles.subTip}>
+              {subTip || '支持格式：.jpg .png，文件大小不能超过5MB'}
+            </div>
+          </div>
+        </div>
+      </Upload>
+    </Form.Item>
+  );
+};
+
+export default UploadForm;

src/components/FormArtistInfo/index.ts

@@ -0,0 +1,11 @@
+import FormArtistName from './FormArtistName';
+import FormArtistAvatar from './FormArtistAvatar';
+import FormHomepageBackground from './FormHomepageBackground';
+import FormBackendScreenshot from './FormBackendScreenshot';
+
+export {
+  FormArtistName,
+  FormArtistAvatar,
+  FormHomepageBackground,
+  FormBackendScreenshot,
+};

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

@@ -0,0 +1,35 @@
+.artistName {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ededed;
+  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 {
+    padding: 0;
+    border: none;
+    font-size: 20px;
+    font-weight: 600;
+    color: #4e5969;
+    background-color: transparent;
+
+    &:placeholder-shown {
+      color: #c9cdd4;
+      font-family: PingFang SC;
+      font-size: 20px;
+      font-weight: 400;
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+@import '@/style/variable.less';
+@import '@/style/common.less';
+
+.uploadForm {
+  :global(.arco-upload) {
+    width: 100%;
+  }
+
+  .uploadTrigger {
+    width: 100%;
+    background-color: #fff;
+    color: #1d2129;
+    border: 1px dashed var(--color-fill-4);
+    padding: 18px 24px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    .center();
+
+    .infoWrap {
+      flex: 1;
+      margin-left: 18px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .tip {
+        font-family: PingFang SC;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        text-align: left;
+        color: #1d2129;
+        margin-bottom: 4px;
+      }
+
+      .subTip {
+        font-family: PingFang SC;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        text-align: left;
+        color: #86909c;
+      }
+    }
+  }
+}

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

@@ -7,7 +7,14 @@ import {
   Input,
   Button,
   Select,
+  Upload,
 } from '@arco-design/web-react';
+import {
+  FormArtistName,
+  FormArtistAvatar,
+  FormHomepageBackground,
+  FormBackendScreenshot,
+} from '@/components/FormArtistInfo';
 import styles from './style/index.module.less';
 
 const { Title } = Typography;
@@ -23,7 +30,7 @@ function StepArtistInfo() {
       className={styles.formWrap}
       autoComplete="off"
       labelCol={{ flex: '103px' }}
-      wrapperCol={{ span: 16 }}
+      wrapperCol={{ flex: '468px' }}
       onValuesChange={(v, vs) => {
         console.log(v, vs);
       }}
@@ -31,37 +38,11 @@ function StepArtistInfo() {
         console.log(v);
       }}
     >
-      <FormItem
-        field="artistName"
-        rules={[{ required: true, message: '歌手名是必填项' }]}
-        wrapperCol={{ flex: 1 }}
-      >
-        <div className={styles.artistName}>
-          <div className={styles.hi}>Hi</div>
-          <Input
-            className={styles.artistNameInp}
-            placeholder="请输入您的歌手名"
-          />
-        </div>
-      </FormItem>
+      <FormArtistName />
       <div className={styles.heightHolder} />
-      <FormItem
-        label="艺人头像"
-        field="avatar"
-        rules={[{ required: true, message: '艺人头像是必填项' }]}
-      >
-        <Input placeholder="please enter your age" />
-      </FormItem>
-      <FormItem label="主页背景" field="mainBg">
-        <Input placeholder="please enter your age" />
-      </FormItem>
-      <FormItem
-        label="后台截图"
-        field="clipPic"
-        rules={[{ required: true, message: '后台截图是必填项' }]}
-      >
-        <Input placeholder="please enter your age" />
-      </FormItem>
+      <FormArtistAvatar />
+      <FormHomepageBackground />
+      <FormBackendScreenshot />
       <FormItem
         label="所在地区"
         field="clipPic"

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

@@ -7,42 +7,7 @@
   padding-left: 30px;
   padding-right: 47px;
   margin-bottom: 54px;
-
-  .artistName {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid #ededed;
-    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 {
-      padding: 0;
-      border: none;
-      font-size: 20px;
-      font-weight: 600;
-      color: #4e5969;
-      background-color: transparent;
-
-      &:placeholder-shown {
-        color: #c9cdd4;
-        font-family: PingFang SC;
-        font-size: 20px;
-        font-weight: 400;
-      }
-    }
-  }
+  box-sizing: border-box;
 
   .heightHolder {
     height: 33px;

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

@@ -4,6 +4,7 @@
   border-radius: 16px;
   padding-top: 39px;
   padding-bottom: 38px;
+  box-sizing: border-box;
 
   .policyTitle {
     font-family: PingFang SC;

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

@@ -14,6 +14,7 @@
     display: flex;
     flex-direction: column;
     width: 800px;
+    box-sizing: border-box;
     flex: 1;
     padding-top: 33px;
     padding-bottom: 40px;