update: settle in

main
fadeaway 6 months ago
parent 72ff7112b6
commit ddb3d8f06e

@ -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;

@ -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>
);
};

@ -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="请控制在202000字可以按照以下形式书写&#10;个人信息XXX&#10;代表作品XXX&#10;从艺历程xxx&#10;…"
minLength={20}
maxLength={2000}
style={{ minHeight: 158 }}
/>
</Form.Item>
);
};
export default FormDescription;

@ -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;

@ -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;

@ -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;

@ -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;

@ -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,
};

@ -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;
}
}
}

@ -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>

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

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

Loading…
Cancel
Save