parent
7ada70eca2
commit
51f03e76f6
|
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,10 @@
|
|||||||
|
import clientHttp from '@/utils/request/client';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 音乐人-提交申请
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const apiArtistsSignUp = async (params: any) => {
|
||||||
|
const result = await clientHttp.post('/user/artist/register', params);
|
||||||
|
return result;
|
||||||
|
};
|
||||||
Loading…
Reference in new issue