Compare commits
3 Commits
main
...
feature/ar
| Author | SHA1 | Date |
|---|---|---|
 fadeaway
|
1511c2f7ea | 6 months ago |
|
fadeaway
|
51f03e76f6 | 6 months ago |
|
fadeaway
|
7ada70eca2 | 6 months ago |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 436 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 687 B |
@ -0,0 +1,54 @@
|
||||
.wrap {
|
||||
min-height: 100vh;
|
||||
background-color: #000;
|
||||
background-image: url(/img/artists-settle-in/home_bg.jpg);
|
||||
background-position: center;
|
||||
background-size: auto 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.wrap .cont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wrap .cont .contBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: -78px;
|
||||
}
|
||||
|
||||
.wrap .cont .contBox .sloganTitle {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.wrap .cont .contBox .slogan {
|
||||
height: 67.2px;
|
||||
line-height: 67.2px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 48px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 38px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrap .cont .contBox .btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 222px;
|
||||
height: 59px;
|
||||
border-radius: 38px;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { Layout, Typography, Button } from '@arco-design/web-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
import Header from '@/components/ArtistsSettleIn/Header';
|
||||
|
||||
import styles from './home.module.css';
|
||||
|
||||
const Content = Layout.Content;
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
function Home() {
|
||||
const router = useRouter();
|
||||
|
||||
const handleClick = () => {
|
||||
router.push('/artists-settle-in/sign-up');
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout className={styles.wrap}>
|
||||
<Header mode="dark" />
|
||||
<Content className={styles.cont}>
|
||||
<section className={styles.contBox}>
|
||||
<Paragraph className={styles.sloganTitle}>雀乐音乐人</Paragraph>
|
||||
<Title className={styles.slogan}>一起 记录独立音乐</Title>
|
||||
<Button shape="round" type="primary" size="large" className={styles.btn} onClick={handleClick}>
|
||||
成为雀乐音乐人
|
||||
</Button>
|
||||
</section>
|
||||
</Content>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@ -0,0 +1,16 @@
|
||||
.formWrap {
|
||||
width: 800px;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 38px;
|
||||
padding-left: 30px;
|
||||
padding-right: 47px;
|
||||
margin-bottom: 54px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.formWrap .submitWrap {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@ -0,0 +1,112 @@
|
||||
'use client';
|
||||
|
||||
import { Radio, Message, Form, Button } from '@arco-design/web-react';
|
||||
|
||||
import {
|
||||
FormArtistName,
|
||||
FormArtistAvatar,
|
||||
FormHomepageBackground,
|
||||
FormBackendScreenshot,
|
||||
FormAddress,
|
||||
FormStyle,
|
||||
FormType,
|
||||
FormDescription,
|
||||
FormUserName,
|
||||
FormPassword,
|
||||
} from '@/components/ArtistsSettleIn/FormArtistInfo';
|
||||
|
||||
import styles from './index.module.css';
|
||||
|
||||
import { apiArtistsSignUp } from '@/services';
|
||||
|
||||
const { useForm, useWatch, Item: FormItem } = Form;
|
||||
|
||||
function StepArtistInfo() {
|
||||
const [form] = useForm();
|
||||
const agree = useWatch('agree', form);
|
||||
|
||||
const handleSubmit = () => {
|
||||
form
|
||||
.validate()
|
||||
.then(async (values) => {
|
||||
if (!agree) {
|
||||
Message.warning('请阅读并同意《雀乐音乐用户服务协议》');
|
||||
return;
|
||||
}
|
||||
const { address, avatar, backgroundImage, description, nickName, password, screenshot, style, type, userName } =
|
||||
values;
|
||||
|
||||
const oParam = {
|
||||
address,
|
||||
avatar: avatar?.[0]?.response?.data?.fullUrl,
|
||||
backgroundImage: backgroundImage?.[0]?.response?.data?.fullUrl,
|
||||
// bandUserId: '',
|
||||
description,
|
||||
nickName,
|
||||
password,
|
||||
screenshot: screenshot?.[0]?.response?.data?.fullUrl,
|
||||
style,
|
||||
type,
|
||||
userName,
|
||||
};
|
||||
|
||||
const res = await apiArtistsSignUp(oParam);
|
||||
if (res.code === 200) {
|
||||
// setTotal(res.data.total);
|
||||
// setsongList(res.data.rows);
|
||||
Message.success('申请成功');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form
|
||||
form={form}
|
||||
className={styles.formWrap}
|
||||
autoComplete="off"
|
||||
labelCol={{ flex: '103px' }}
|
||||
wrapperCol={{ flex: '468px' }}
|
||||
// onValuesChange={(v, vs) => {
|
||||
// console.log(v, vs);
|
||||
// }}
|
||||
// onSubmit={handleSubmit}
|
||||
>
|
||||
{/* 歌手名 */}
|
||||
<FormArtistName />
|
||||
{/* 艺人头像 */}
|
||||
<FormArtistAvatar />
|
||||
{/* 主页背景 */}
|
||||
<FormHomepageBackground />
|
||||
{/* 后台截图 */}
|
||||
<FormBackendScreenshot />
|
||||
{/* 所在地区 */}
|
||||
<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" onClick={handleSubmit}>
|
||||
提交申请
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default StepArtistInfo;
|
||||
@ -0,0 +1,39 @@
|
||||
.policy {
|
||||
width: 800px;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 38px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.policy .policyTitle {
|
||||
font-family: PingFang SC;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
padding-left: 34px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.policy .policyCont {
|
||||
padding-left: 34px;
|
||||
padding-right: 68px;
|
||||
color: #4e5969;
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.nextStep {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.nextStep .policyName {
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useState } from 'react';
|
||||
|
||||
import { Layout, Typography } from '@arco-design/web-react';
|
||||
|
||||
import Footer from '@/components/ArtistsSettleIn/Footer';
|
||||
import Header from '@/components/ArtistsSettleIn/Header';
|
||||
|
||||
import StepArtistInfo from './components/StepArtistInfo';
|
||||
import StepPolicy from './components/StepPolicy';
|
||||
import styles from './sign-up.module.css';
|
||||
|
||||
const Content = Layout.Content;
|
||||
const { Title } = Typography;
|
||||
|
||||
function SignUp() {
|
||||
const [step, setStep] = useState('1');
|
||||
const handle2Step2 = useCallback(() => setStep('2'), []);
|
||||
return (
|
||||
<Layout className={styles.wrap}>
|
||||
<Header />
|
||||
<Content className={styles.cont}>
|
||||
<section className={styles.contBox}>
|
||||
<Title className={styles.welcome}>欢迎入驻雀乐音乐人</Title>
|
||||
{step === '1' && <StepPolicy onNext={handle2Step2} />}
|
||||
{step === '2' && <StepArtistInfo />}
|
||||
</section>
|
||||
</Content>
|
||||
<Footer />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default SignUp;
|
||||
@ -0,0 +1,32 @@
|
||||
.wrap {
|
||||
min-height: 100vh;
|
||||
color: #1d2129;
|
||||
}
|
||||
|
||||
.wrap .cont {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f2f3f7;
|
||||
}
|
||||
|
||||
.wrap .cont .contBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 800px;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
padding-top: 33px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.wrap .cont .contBox .welcome {
|
||||
width: 100%;
|
||||
font-family: Alibaba PuHuiTi 2;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 33.6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 25 KiB |
@ -0,0 +1,56 @@
|
||||
@import '@unocss/reset/tailwind.css';
|
||||
@unocss all;
|
||||
@font-face {
|
||||
font-family: 'D-DINExp';
|
||||
src: url('/fonts/D-DINExp.otf') format('opentype');
|
||||
}
|
||||
|
||||
:root {
|
||||
--body-bg-color: #fff;
|
||||
--primary-color: #c43737;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--body-bg-color);
|
||||
font-family:
|
||||
'D-DINExp',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'PingFang SC',
|
||||
'Helvetica Neue',
|
||||
STHeiti,
|
||||
'Microsoft Yahei',
|
||||
Tahoma,
|
||||
Simsun,
|
||||
sans-serif;
|
||||
/* padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom); */
|
||||
}
|
||||
|
||||
input {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: [rgba(0, 0, 0, 0.7)];
|
||||
}
|
||||
|
||||
textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
import { Metadata, Viewport } from 'next';
|
||||
|
||||
import { Toaster } from '@/components/ui/toaster';
|
||||
|
||||
import { Mounted, Dialog } from '@/components';
|
||||
|
||||
import '@arco-design/web-react/dist/css/arco.min.css';
|
||||
import './globals.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
template: '%s - 雀乐音乐人',
|
||||
default: '雀乐音乐人',
|
||||
},
|
||||
description:
|
||||
'雀乐是由一群喜欢并热爱独立音乐的人共同创建的，我们致力于传播来自世界各地的独立音乐。我们秉着音乐里独立自主的精神表达内核，希望把雀乐建设成为泛华语地区最好的独立音乐传播平台。',
|
||||
icons: {
|
||||
icon: '/favicon.ico',
|
||||
},
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: 'device-width',
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
minimumScale: 1,
|
||||
userScalable: false,
|
||||
viewportFit: 'cover',
|
||||
};
|
||||
|
||||
export default function ArtistsSettleInLayout({ children }: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<html lang="zn-ch">
|
||||
<body>
|
||||
{children}
|
||||
<Toaster />
|
||||
<Dialog />
|
||||
<Mounted />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="w-[100vw] h-[100vh] flex justify-center items-center">
|
||||
<div>正在加载……</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 28px 28px 33px;
|
||||
background: #101011;
|
||||
color: #ffffff99;
|
||||
|
||||
/* :global(.arco-typography) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:global(.arco-link),
|
||||
:global(.arco-typography) {
|
||||
color: #ffffff99;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16.8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.arco-link) {
|
||||
&:hover {
|
||||
color: rgba(#ffffff99, 0.8);
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
.mb0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.footerItem {
|
||||
color: #ffffff99;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16.8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footerItemLink:hover {
|
||||
color: rgba(255, 255, 249, 0.8);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.splitLine {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.msg {
|
||||
margin-top: 4px;
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
import React, { memo } from 'react';
|
||||
|
||||
import { Layout, Typography, Space, Link } from '@arco-design/web-react';
|
||||
import { FooterProps } from '@arco-design/web-react/es/Layout/interface';
|
||||
import cs from 'classnames';
|
||||
|
||||
import styles from './index.module.css';
|
||||
|
||||
const LayoutFooter = Layout.Footer;
|
||||
const { Paragraph, Text } = Typography;
|
||||
|
||||
function Footer(props: FooterProps = {}) {
|
||||
const { className, ...restProps } = props;
|
||||
return (
|
||||
<LayoutFooter className={cs(styles.footer, className)} {...restProps}>
|
||||
<Paragraph className={cs(styles.nav, styles.mb0, styles.footerItem)}>
|
||||
<Link
|
||||
hoverable={false}
|
||||
href="https://www.indie.cn/"
|
||||
target="_blank"
|
||||
className={cs(styles.footerItem, styles.footerItemLink)}
|
||||
>
|
||||
雀乐
|
||||
</Link>
|
||||
<span className={styles.splitLine}> | </span>
|
||||
<Link hoverable={false} className={cs(styles.footerItem, styles.footerItemLink)}>
|
||||
音乐商城
|
||||
</Link>
|
||||
<span className={styles.splitLine}> | </span>
|
||||
<Link hoverable={false} className={cs(styles.footerItem, styles.footerItemLink)}>
|
||||
联系我们
|
||||
</Link>
|
||||
</Paragraph>
|
||||
<Space className={styles.msg}>
|
||||
<Link
|
||||
hoverable={false}
|
||||
href="https://beian.miit.gov.cn/#/Integrated/index"
|
||||
target="_blank"
|
||||
className={cs(styles.footerItem, styles.footerItemLink)}
|
||||
>
|
||||
粤ICP备2024190175号-1
|
||||
</Link>
|
||||
<Link
|
||||
hoverable={false}
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch"
|
||||
target="_blank"
|
||||
className={cs(styles.footerItem, styles.footerItemLink)}
|
||||
>
|
||||
粤公网安备44030002002777号
|
||||
</Link>
|
||||
<Text className={styles.footerItem}>深圳雀乐文化科技有限责任公司</Text>
|
||||
<Text className={styles.footerItem}>Shenzhen QueYue Culture Technology Co., Ltd.</Text>
|
||||
</Space>
|
||||
</LayoutFooter>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Footer);
|
||||
@ -0,0 +1,20 @@
|
||||
'use client';
|
||||
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;
|
||||
@ -0,0 +1,19 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
|
||||
import UploadForm from './UploadForm';
|
||||
|
||||
// 艺人头像
|
||||
const FormArtistAvatar = () => {
|
||||
return (
|
||||
<UploadForm
|
||||
label="艺人头像"
|
||||
field="avatar"
|
||||
rules={[{ required: true, message: '艺人头像是必填项' }]}
|
||||
pic="/img/artists-settle-in/avatar.png"
|
||||
tip="上传您的头像，作为"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormArtistAvatar;
|
||||
@ -0,0 +1,24 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
|
||||
import { Form, Input } from '@arco-design/web-react';
|
||||
|
||||
import styles from './style/FormArtistName.module.css';
|
||||
|
||||
// 歌手名
|
||||
const FormArtistName = () => {
|
||||
return (
|
||||
<Form.Item
|
||||
className={styles.artistNameWrap}
|
||||
label="Hi"
|
||||
field="nickName"
|
||||
labelCol={{ flex: '55px' }}
|
||||
wrapperCol={{ flex: 1 }}
|
||||
rules={[{ required: true, message: '歌手名是必填项' }]}
|
||||
>
|
||||
<Input className={styles.artistNameInp} placeholder="请输入您的歌手名" />
|
||||
</Form.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormArtistName;
|
||||
@ -0,0 +1,18 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
|
||||
import UploadForm from './UploadForm';
|
||||
|
||||
// 后台截图
|
||||
const FormBackendScreenshot = () => {
|
||||
return (
|
||||
<UploadForm
|
||||
label="后台截图"
|
||||
field="screenshot"
|
||||
rules={[{ required: true, message: '后台截图是必填项' }]}
|
||||
tip="提供一个其它平台音乐人管理后台实时截图"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormBackendScreenshot;
|
||||
@ -0,0 +1,11 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
|
||||
import UploadForm from './UploadForm';
|
||||
|
||||
// 主页背景
|
||||
const FormHomepageBackground = () => {
|
||||
return <UploadForm label="主页背景" field="backgroundImage" tip="上传您的主页背景，会在雀乐 APP 艺人主页展示" />;
|
||||
};
|
||||
|
||||
export default FormHomepageBackground;
|
||||
@ -0,0 +1,17 @@
|
||||
'use client';
|
||||
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,19 @@
|
||||
'use client';
|
||||
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,19 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
|
||||
import { Form, Select } from '@arco-design/web-react';
|
||||
|
||||
// 类型
|
||||
const FormType = () => {
|
||||
const options = [
|
||||
{ label: '个人', value: 0 },
|
||||
{ label: '团体', value: 1 },
|
||||
];
|
||||
return (
|
||||
<Form.Item label="类型" field="type" rules={[{ required: true, message: '类型是必填项' }]}>
|
||||
<Select placeholder="请选择类型" options={options} />
|
||||
</Form.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormType;
|
||||
@ -0,0 +1,15 @@
|
||||
'use client';
|
||||
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;
|
||||
@ -0,0 +1,23 @@
|
||||
import FormAddress from './FormAddress';
|
||||
import FormArtistAvatar from './FormArtistAvatar';
|
||||
import FormArtistName from './FormArtistName';
|
||||
import FormBackendScreenshot from './FormBackendScreenshot';
|
||||
import FormDescription from './FormDescription';
|
||||
import FormHomepageBackground from './FormHomepageBackground';
|
||||
import FormPassword from './FormPassword';
|
||||
import FormStyle from './FormStyle';
|
||||
import FormType from './FormType';
|
||||
import FormUserName from './FormUserName';
|
||||
|
||||
export {
|
||||
FormArtistName,
|
||||
FormArtistAvatar,
|
||||
FormHomepageBackground,
|
||||
FormBackendScreenshot,
|
||||
FormAddress,
|
||||
FormStyle,
|
||||
FormType,
|
||||
FormDescription,
|
||||
FormUserName,
|
||||
FormPassword,
|
||||
};
|
||||
@ -0,0 +1,65 @@
|
||||
.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;
|
||||
color: #4e5969;
|
||||
} */
|
||||
}
|
||||
|
||||
/* .artistNameWrap .arco-form-item-error {
|
||||
padding-bottom: 0 !important;
|
||||
} */
|
||||
|
||||
/* .artistNameWrap .arco-form-item {
|
||||
margin-bottom: 53px !important;
|
||||
} */
|
||||
|
||||
/* 不展示必填符号 */
|
||||
/* .artistNameWrap .arco-form-item-symbol {
|
||||
display: none !important;
|
||||
} */
|
||||
|
||||
/* label样式 */
|
||||
/* .artistNameWrap .arco-col.arco-form-label-item > label {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
font-family: PingFang SC !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 600 !important;
|
||||
color: #4e5969 !important;
|
||||
} */
|
||||
|
||||
.artistNameWrap .artistNameInp {
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #4e5969;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.artistNameWrap .artistNameInp:placeholder-shown {
|
||||
color: #c9cdd4;
|
||||
font-family: PingFang SC;
|
||||
font-size: 20px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
.uploadForm .uploadEle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uploadForm .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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uploadForm .uploadTrigger .infoWrap {
|
||||
flex: 1;
|
||||
margin-left: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uploadForm .uploadTrigger .infoWrap .tip {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
color: #1d2129;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.uploadForm .uploadTrigger .infoWrap .subTip {
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
color: #86909c;
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header.light {
|
||||
background-color: #fff;
|
||||
}
|
||||
.header.dark {
|
||||
/* background-color: #000; */
|
||||
}
|
||||
|
||||
.header .cont {
|
||||
width: 1200px;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header .brand {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header .brand .brandName {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.header.light .brand .brandName {
|
||||
color: #333;
|
||||
}
|
||||
.header.dark .brand .brandName {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header .avatar {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
margin-right: -12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header .avatar .loginText {
|
||||
font-size: 14px;
|
||||
margin-right: 9px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
|
||||
.header.light .avatar .loginText {
|
||||
color: #1d2129;
|
||||
}
|
||||
.header.light .avatar:hover .loginText {
|
||||
color: rgba(#1d2129, 0.8);
|
||||
}
|
||||
.header.dark .avatar .loginText {
|
||||
color: #fff;
|
||||
}
|
||||
.header.dark .avatar:hover .loginText {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
'use client';
|
||||
|
||||
import React, { memo } from 'react';
|
||||
|
||||
import { Layout, Avatar } from '@arco-design/web-react';
|
||||
import { IconUser } from '@arco-design/web-react/icon';
|
||||
import cs from 'classnames';
|
||||
import Image from 'next/image';
|
||||
|
||||
import styles from './index.module.css';
|
||||
|
||||
interface HeaderProps {
|
||||
mode?: 'light' | 'dark';
|
||||
}
|
||||
|
||||
const LayoutHeader = Layout.Header;
|
||||
|
||||
function Header({ mode }: HeaderProps) {
|
||||
return (
|
||||
<LayoutHeader className={cs(styles.header, mode === 'dark' ? styles.dark : styles.light)}>
|
||||
<div className={styles.cont}>
|
||||
<div className={styles.brand}>
|
||||
<Image
|
||||
width={30}
|
||||
height={30}
|
||||
src={mode === 'dark' ? '/img/artists-settle-in/logo.svg' : '/img/artists-settle-in/logo_black.svg'}
|
||||
alt="雀乐"
|
||||
/>
|
||||
<h5 className={styles.brandName}>雀乐音乐人</h5>
|
||||
</div>
|
||||
<div className={styles.avatar}>
|
||||
<div className={styles.loginText}>登录</div>
|
||||
<Avatar size={32}>
|
||||
<IconUser />
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutHeader>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Header);
|
||||
@ -0,0 +1,18 @@
|
||||
import { getAuthorization } from '@/utils';
|
||||
|
||||
/**
|
||||
* @description 音乐人-提交申请
|
||||
*/
|
||||
export const apiArtistsSignUp = async (data: any) => {
|
||||
const token = await getAuthorization();
|
||||
const response = await fetch('/queyueapi/user/artist/register', {
|
||||
headers: {
|
||||
Authorization: token || '',
|
||||
'Content-Type': 'application/json',
|
||||
Connection: 'keep-alive',
|
||||
},
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return await response.json();
|
||||
};
|
||||
Loading…
Reference in new issue