Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 899a62f

Browse files
mydearxymmydearxym
authored
refactor(membership): re-org (#1195)
1 parent 559301c commit 899a62f

File tree

12 files changed

+166
-102
lines changed

12 files changed

+166
-102
lines changed

‎src/containers/content/MembershipContent/InviteBox/QA.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const QA: FC<TProps> = ({ testid = 'membership-qa' }) => {
1212
<Wrapper testid={testid}>
1313
<Title>说明：</Title>
1414
<Desc>
15-
内侧阶段，所有新注册用户都会收到一个额外的朋友码，欢迎将它分享给身边的朋友。
15+
内侧阶段所有功能开放，此阶段注册的用户还会收到一个额外的朋友码，欢迎将它分享给身边的朋友。
1616
</Desc>
1717
<Br top={2} />
1818
<Desc>验证通过后将自动升级为高级账户，为期一年。</Desc>

‎src/containers/content/MembershipContent/InviteBox/index.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
Header,
1313
HandIcon,
1414
Title,
15+
Content,
1516
} from '../styles/invite_box'
1617
import { closeInviteBox } from '../logic'
1718

@@ -39,16 +40,18 @@ const InviteBox: FC<TProps> = ({ testid = 'membership-invite-box', show }) => {
3940
<Wrapper testid={testid}>
4041
<Header>
4142
<HandIcon src={`${ICON}/shape/handshake.svg`} />
42-
<Title>朋友码</Title>
43+
<Title>交个朋友</Title>
4344
</Header>
44-
<PinCodeWrapper>
45-
<ReactPinField
46-
ref={ref}
47-
length={6}
48-
onChange={(v) => console.log('v: ', v)}
49-
/>
50-
</PinCodeWrapper>
51-
<QA />
45+
<Content>
46+
<PinCodeWrapper>
47+
<ReactPinField
48+
ref={ref}
49+
length={6}
50+
onChange={(v) => console.log('v: ', v)}
51+
/>
52+
</PinCodeWrapper>
53+
<QA />
54+
</Content>
5255
</Wrapper>
5356
</Modal>
5457
)

‎src/containers/content/MembershipContent/QA.tsx‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
11
import { FC, memo } from 'react'
22

33
import { ICON } from '@/config'
4-
import { Wrapper, Header, Icon, Content, QTitle, ABody } from './styles/qa'
4+
import { ROUTE } from '@/constant'
5+
import Linker from '@/widgets/Linker'
6+
7+
import {
8+
Wrapper,
9+
Header,
10+
Icon,
11+
Content,
12+
QTitle,
13+
ABody,
14+
Bold,
15+
Ul,
16+
Li,
17+
} from './styles/qa'
518

619
type TProps = {
720
testid?: string
@@ -17,17 +30,44 @@ const QA: FC<TProps> = ({ testid = 'membership-qa' }) => {
1730
<Content>
1831
<QTitle>为什么要推出付费服务 ？</QTitle>
1932
<ABody>
20-
简单来讲，为了活下去。总体而言，免费服务和付费服务只有体验上的差别，没有内容上和访问限制上的区别对待。
33+
简单来讲，我们希望能够健康的生存下去，物质基础对于社区的维护与功能开发（尤其是这些高级功能）
34+
是不可缺少的。需要特别说明的是，免费服务和付费服务只有体验上的差别，
35+
<Bold>没有内容上和访问限制上的区别对待</Bold>
36+
，你也可以通过
37+
<Linker
38+
src={ROUTE.SUPPORT_US}
39+
external={false}
40+
text="其他渠道"
41+
inline
42+
left={4}
43+
right={4}
44+
/>
45+
支持我们。
2146
</ABody>
2247

23-
<QTitle>wip 是什么意思 ？</QTitle>
48+
<QTitle>这些功能都已经实现了吗 ？</QTitle>
2449
<ABody>
25-
wip(work in progress)
26-
表示目前正在开发中的功能，周期一般在一个月之内。如果已经购买包含此功能的会员服务，在开发完成后不会重复收费。
50+
Nope.
51+
很多高级功能还没有实现或目前还不完善，因此所有功能在内测阶段都是开放的，内测阶段结束后根据完成情况，所列出条目可能会有所调整。
2752
</ABody>
2853

29-
<QTitle>不小心手抖订阅后，可以退款吗 ？</QTitle>
30-
<ABody>当然可以，付费后若不满意，你可以在 7 天内随时退款。</ABody>
54+
<QTitle>不小心手抖，可以退款吗 ？</QTitle>
55+
<ABody>
56+
选择高级服务后的 15
57+
以内都是「试吃」阶段，你可以在这段时间内评估体验是否符合你的预期，再决定是否付费。
58+
</ABody>
59+
<QTitle>一些基本承诺</QTitle>
60+
<ABody>
61+
<Ul>
62+
<Li>这里遵循古典的互联网精神，尊重并践行 Open Web 的价值观。</Li>
63+
<Li>
64+
认同知识共享，不会在任何阶段，以任何形式参与或鼓励「卖课」。
65+
</Li>
66+
<Li>
67+
相信长期主义，会持续用技术、组织形式等各种手段守住社区下限。
68+
</Li>
69+
</Ul>
70+
</ABody>
3171
</Content>
3272
</Wrapper>
3373
)

‎src/containers/content/MembershipContent/Support.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
11
import { FC, Fragment, memo } from 'react'
22

3-
import { ICON, ICON_CMD } from '@/config'
3+
import { ICON } from '@/config'
44

55
import {
66
PkgItem,
77
PkgItemTitle,
88
PkgItemYesIcon,
9-
PkgItemNoIcon,
109
ArrowIcon,
1110
} from './styles/support'
1211

13-
const MarkIcon = ({ not }) => {
14-
return not ? (
15-
<PkgItemNoIcon src={`${ICON_CMD}/cross.svg`} />
16-
) : (
17-
<PkgItemYesIcon src={`${ICON_CMD}/check.svg`} />
18-
)
19-
}
20-
2112
type TProps = {
2213
active: boolean
2314
items: any // TODO:
@@ -35,7 +26,7 @@ const Support: FC<TProps> = ({ active, items, not, pkgType }) => (
3526
)}
3627
{items.map((item) => (
3728
<PkgItem key={item.title} active={active}>
38-
<MarkIcon not={not} />
29+
<PkgItemYesIcon />
3930
<PkgItemTitle not={not}>{item.title}</PkgItemTitle>
4031
</PkgItem>
4132
))}

‎src/containers/content/MembershipContent/index.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable jsx-a11y/accessible-emoji */
12
/*
23
*
34
* MembershipContent
@@ -10,8 +11,9 @@ import type { TMetric } from '@/spec'
1011
import { buildLog } from '@/utils/logger'
1112
import { pluggedIn } from '@/utils/mobx'
1213
import OrButton from '@/widgets/Buttons/OrButton'
13-
import Button from '@/widgets/Buttons/Button'
14+
// import Button from '@/widgets/Buttons/Button'
1415
import Checker from '@/widgets/Checker'
16+
import NoticeBar from '@/widgets/NoticeBar'
1517

1618
import type { TStore } from './store'
1719
import { PAY, PACKAGE } from './constant'
@@ -52,21 +54,21 @@ import {
5254
/* eslint-disable-next-line */
5355
const log = buildLog('C:MembershipContent')
5456

55-
const PayButton = ({ pkgType, payType }) => {
56-
if (pkgType === PACKAGE.GIRL) {
57-
return (
58-
<Button type="primary" ghost>
59-
验证
60-
</Button>
61-
)
62-
}
57+
// const PayButton = ({ pkgType, payType }) => {
58+
// if (pkgType === PACKAGE.GIRL) {
59+
// return (
60+
// <Button type="primary" ghost>
61+
// 验证
62+
// </Button>
63+
// )
64+
// }
6365

64-
return (
65-
<Button type="primary" ghost>
66-
{payType === PAY.YEARLY ? '扫码' : '试试看'}
67-
</Button>
68-
)
69-
}
66+
// return (
67+
// <Button type="primary" ghost>
68+
// {payType === PAY.YEARLY ? '扫码' : '试试看'}
69+
// </Button>
70+
// )
71+
// }
7072

7173
type TProps = {
7274
membershipContent?: TStore
@@ -87,7 +89,7 @@ const MembershipContentContainer: FC<TProps> = ({
8789
<Wrapper testid={testid}>
8890
<InnerWrapper metric={metric}>
8991
<BannerWrapper>
90-
<Title>Hi, mydearxym</Title>
92+
<Title>Hi，你好哇 👋</Title>
9193
<Desc>欢迎来到 CoderPlanets，选择一个适合你的会员类型吧</Desc>
9294
<PayButtonWrapper>
9395
<OrButton
@@ -149,7 +151,13 @@ const MembershipContentContainer: FC<TProps> = ({
149151
{item.pkgType === PACKAGE.FREE ? (
150152
<FreeNote>当前为免费账户无需支付</FreeNote>
151153
) : (
152-
<PayButton pkgType={item.pkgType} payType={payType} />
154+
<NoticeBar
155+
type="info"
156+
content="内测阶段开放"
157+
right={10}
158+
noBg
159+
/>
160+
// <PayButton pkgType={item.pkgType} payType={payType} />
153161
)}
154162
</PayBtnWrapper>
155163
</Dashboard>

‎src/containers/content/MembershipContent/store.ts‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,30 @@ const MembershipContent = T.model('MembershipContent', {
2929
yearlyPrice: '0',
3030
monthlyPrice: '0',
3131
illustration: PACKAGE.FREE,
32-
serviceItems: [{ title: '发布各种内容' }, { title: '创建子社区' }],
32+
serviceItems: [
33+
{ title: '发布各种内容' },
34+
{ title: '参与编辑公共内容' },
35+
{ title: '申请创建子社区' },
36+
{ title: '查看社区基础统计' },
37+
],
3338
},
3439
{
3540
pkgType: PACKAGE.ADVANCE,
36-
desc: '更好更全面的阅读、交互体验。优先参与社区规划共建',
37-
yearlyPrice: '59',
38-
monthlyPrice: '5.9',
41+
desc: '更好更全面的阅读、交互体验。更丰富的交流工具',
42+
yearlyPrice: '99',
43+
monthlyPrice: '9.9',
3944
illustration: PACKAGE.ADVANCE,
4045
serviceItems: [
4146
{ title: '主题设置' },
42-
{ title: '头像特殊标识' },
43-
{ title: '发起投票' },
47+
{ title: '自定义社区布局' },
48+
{ title: '自定义快速跳转' },
49+
{ title: '评论表情包' },
4450
{ title: '设置文章打赏' },
45-
// { title: '订阅栏分组' },
46-
{ title: '需求优先响应' },
51+
{ title: '发起投票' },
52+
{ title: '头像特殊标识' },
53+
{ title: '自定义背景' },
54+
{ title: '社区详细统计数据' },
55+
{ title: '免除广告' },
4756
],
4857
},
4958
{
@@ -53,35 +62,43 @@ const MembershipContent = T.model('MembershipContent', {
5362
monthlyPrice: '0',
5463
illustration: PACKAGE.GIRL,
5564
serviceItems: [
56-
{ title: '主题设置' },
57-
{ title: '头像特殊标识' },
65+
{ title: '女生头像标识' },
5866
{ title: '发起投票' },
59-
{ title: '设置文章打赏' },
60-
// { title: '订阅栏分组' },
6167
{ title: '需求优先响应' },
68+
{ title: '个别场景更高权重' },
69+
{ title: '不定期周边礼品' },
6270
],
6371
},
6472
{
6573
pkgType: PACKAGE.TEAM,
66-
desc: '全部功能。适合独立开发者、小团队等需要独立空间的场景',
67-
yearlyPrice: '199',
68-
monthlyPrice: '19.9',
74+
desc: '社区 SaaS 服务。适合独立开发者、小团队等需要独立社区的场景',
75+
yearlyPrice: '1999',
76+
monthlyPrice: '199.9',
6977
illustration: PACKAGE.TEAM,
7078
serviceItems: [
79+
{
80+
title: '看板等个性化版块',
81+
},
7182
{
7283
title: '自定义二级域名',
7384
},
85+
{
86+
title: '第三方平台集成',
87+
},
88+
{
89+
title: '设置自定义广告',
90+
},
7491
{
7592
title: '隐藏主站其他入口',
7693
},
7794
{
78-
title: '8 小时工单支持',
95+
title: 'Github 主页特别鸣谢',
7996
},
8097
{
81-
title: 'Github 主页鸣谢',
98+
title: '站内特别鸣谢',
8299
},
83100
{
84-
title: '站内鸣谢',
101+
title: '工作日客服支持',
85102
},
86103
],
87104
},

‎src/containers/content/MembershipContent/styles/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const Dashboard = styled.div<TActive>`
6464
padding-bottom: 30px;
6565
border: 2px solid;
6666
border-color: ${({ active }) =>
67-
active ? theme('banner.desc') : 'transparent'};
67+
active ? theme('button.primary') : 'transparent'};
6868
border-radius: 5px;
6969
box-shadow: ${({ active }) =>
7070
active ? '1px 1px 20px 0px rgb(37 37 37 / 42%)' : 'none'};

‎src/containers/content/MembershipContent/styles/invite_box/index.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,16 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
1111
color: ${theme('thread.articleDigest')};
1212
${css.flexColumn('align-center')};
1313
width: 100%;
14-
padding: 20px;
1514
`
1615
export const Header = styled.div`
1716
${css.flex('align-center')};
18-
margin-bottom: 22px;
17+
filter: ${theme('modal.subPanelShadow')};
18+
margin-bottom: 15px;
19+
padding-top: 12px;
20+
`
21+
export const Content = styled.div`
22+
background: ${theme('modal.subPanel')};
23+
padding-top: 20px;
1924
`
2025
export const HandIcon = styled(Img)`
2126
fill: ${theme('thread.articleTitle')};

‎src/containers/content/MembershipContent/styles/invite_box/qa.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
1111
${css.flexColumn('align-start')};
1212
width: 100%;
1313
margin-top: 30px;
14+
margin-bottom: 30px;
1415
padding: 0 25px;
1516
`
1617
export const Title = styled.div`

‎src/containers/content/MembershipContent/styles/qa.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,23 @@ export const Content = styled.div`
3232
export const QTitle = styled.div`
3333
font-size: 16px;
3434
color: ${theme('thread.articleTitle')};
35-
margin-bottom: 8px;
35+
margin-bottom: 15px;
3636
`
3737
export const ABody = styled.div`
3838
font-size: 14px;
3939
color: ${theme('thread.articleDigest')};
4040
margin-bottom: 30px;
41+
line-height: 1.6;
42+
`
43+
export const Ul = styled.ul`
44+
list-style: disc;
45+
margin-left: 16px;
46+
`
47+
export const Li = styled.li`
48+
margin-bottom: 3px;
49+
line-height: 1.6;
50+
`
51+
export const Bold = styled.span`
52+
color: ${theme('thread.articleTitle')};
53+
font-weight: bold;
4154
`

0 commit comments

Comments
 (0)