Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit77616b9

Browse files
committed
refactor(UserBilling): some words, some splits
1 parentea9e2f3 commit77616b9

File tree

4 files changed

+153
-109
lines changed

4 files changed

+153
-109
lines changed
Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
importReactfrom'react'
2+
import{SectionLabel,Button}from'../../components'
3+
4+
import{ICON_CMD}from'../../config'
5+
6+
import{
7+
PlanWrapper,
8+
PlanDivider,
9+
PlanTitle,
10+
PlanDesc,
11+
PurchaseButton,
12+
DescLine,
13+
MoreLink,
14+
BadPrice,
15+
GoodPrice,
16+
}from'./styles/upgrade_menu'
17+
18+
import{upgradeHepler,sponsorHepler}from'./logic'
19+
20+
constUpgradeMenu=()=>(
21+
<React.Fragment>
22+
<SectionLabel
23+
title="账单概况"
24+
iconSrc={`${ICON_CMD}/bill.svg`}
25+
desc="当前账户为免费账户，欢迎升级账户以获得更好的体验/服务, 同时支持社区的发展。"
26+
/>
27+
28+
<PlanWrapper>
29+
<PlanTitle>高级用户</PlanTitle>
30+
<PlanDesc>
31+
<DescLine>
32+
<BadPrice>￥102.4</BadPrice> /<GoodPrice>￥69</GoodPrice>
33+
无限期有效
34+
</DescLine>
35+
<DescLine>将获得区别于免费用户的 10+ 项功能/服务</DescLine>
36+
<DescLine>
37+
<MoreLink>更多高级用户详情..</MoreLink>
38+
</DescLine>
39+
</PlanDesc>
40+
<PurchaseButton>
41+
<Buttontype="primary"ghostonClick={upgradeHepler}>
42+
升级成高级用户
43+
</Button>
44+
</PurchaseButton>
45+
</PlanWrapper>
46+
<PlanDivider/>
47+
<PlanWrapper>
48+
<PlanTitle>赞助商</PlanTitle>
49+
<PlanDesc>
50+
<DescLine>
51+
<BadPrice>￥2999起</BadPrice> /<GoodPrice>￥1999起</GoodPrice>
52+
每年
53+
</DescLine>
54+
<DescLine>无限期高级用户，每年的企业/产品推广等</DescLine>
55+
<DescLine>
56+
<MoreLink>更多赞助商服务详情..</MoreLink>
57+
</DescLine>
58+
</PlanDesc>
59+
<PurchaseButton>
60+
<Buttontype="primary"ghostonClick={upgradeHepler}>
61+
升级成赞助商
62+
</Button>
63+
</PurchaseButton>
64+
</PlanWrapper>
65+
<PlanDivider/>
66+
<PlanWrapper>
67+
<PlanTitle>打赏用户</PlanTitle>
68+
<PlanDesc>
69+
<DescLine>
70+
<BadPrice>￥15</BadPrice> /<GoodPrice>￥10.24</GoodPrice>
71+
每年
72+
</DescLine>
73+
<DescLine>打赏任意金额可解锁全部主题</DescLine>
74+
<DescLine>
75+
<MoreLink>关于打赏细则...</MoreLink>
76+
</DescLine>
77+
</PlanDesc>
78+
<PurchaseButton>
79+
<Buttontype="primary"ghostonClick={sponsorHepler}>
80+
打赏一下
81+
</Button>
82+
</PurchaseButton>
83+
</PlanWrapper>
84+
</React.Fragment>
85+
)
86+
87+
exportdefaultUpgradeMenu

‎containers/UserBilling/index.js‎

Lines changed: 5 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,9 @@ import { inject, observer } from 'mobx-react'
99

1010
import{ICON_CMD}from'../../config'
1111

12-
import{SectionLabel,Button}from'../../components'
13-
import{
14-
Wrapper,
15-
PlanWrapper,
16-
PlanDivider,
17-
PlanTitle,
18-
PlanDesc,
19-
PurchaseButton,
20-
DescLine,
21-
BadPrice,
22-
GoodPrice,
23-
}from'./styles'
12+
import{SectionLabel}from'../../components'
13+
import{Wrapper}from'./styles'
14+
importUpgradeMenufrom'./UpgradeMenu'
2415

2516
import{makeDebugger,storePlug}from'../../utils'
2617
import*aslogicfrom'./logic'
@@ -38,63 +29,10 @@ class UserBillingContainer extends React.Component {
3829
render(){
3930
return(
4031
<Wrapper>
41-
<SectionLabel
42-
title="账单概况"
43-
iconSrc={`${ICON_CMD}/bill.svg`}
44-
desc="当前账户为免费账户，欢迎升级账户以获得更好的体验/服务, 同时支持社区的发展。"
45-
/>
46-
47-
<PlanWrapper>
48-
<PlanTitle>高级用户</PlanTitle>
49-
<PlanDesc>
50-
<DescLine>
51-
<BadPrice>￥102.4</BadPrice> /<GoodPrice>￥69</GoodPrice>
52-
无限期有效
53-
</DescLine>
54-
<DescLine>将获得区别于免费用户的 10+ 项功能/服务</DescLine>
55-
</PlanDesc>
56-
<PurchaseButton>
57-
<Buttontype="primary"ghostonClick={logic.upgradeHepler}>
58-
升级成高级用户
59-
</Button>
60-
</PurchaseButton>
61-
</PlanWrapper>
62-
<PlanDivider/>
63-
<PlanWrapper>
64-
<PlanTitle>赞助商</PlanTitle>
65-
<PlanDesc>
66-
<DescLine>
67-
<BadPrice>￥2999起</BadPrice> /<GoodPrice>￥1999起</GoodPrice>
68-
无限期有效
69-
</DescLine>
70-
<DescLine>高级用户所有功能，以及企业/产品推广等</DescLine>
71-
</PlanDesc>
72-
<PurchaseButton>
73-
<Buttontype="primary"ghostonClick={logic.upgradeHepler}>
74-
升级成赞助商
75-
</Button>
76-
</PurchaseButton>
77-
</PlanWrapper>
78-
<PlanDivider/>
79-
<PlanWrapper>
80-
<PlanTitle>打赏用户</PlanTitle>
81-
<PlanDesc>
82-
<DescLine>
83-
<BadPrice>￥15</BadPrice> /<GoodPrice>￥10.24</GoodPrice>
84-
无限期有效
85-
</DescLine>
86-
<DescLine>打赏任意金额可解锁全部主题</DescLine>
87-
</PlanDesc>
88-
<PurchaseButton>
89-
<Buttontype="primary"ghostonClick={logic.sponsorHepler}>
90-
打赏一下
91-
</Button>
92-
</PurchaseButton>
93-
</PlanWrapper>
94-
32+
<UpgradeMenu/>
9533
<br/>
9634
<SectionLabel
97-
title="付费历史"
35+
title="历史账单"
9836
iconSrc={`${ICON_CMD}/bill_history.svg`}
9937
desc="没有查询到付费记录, 欢迎升级体验。"
10038
/>
Lines changed: 3 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,11 @@
11
importstyledfrom'styled-components'
22

33
// import Img from '../../../components/Img'
4-
import{theme}from'../../../utils'
4+
//import { theme } from '../../../utils'
55

66
exportconstWrapper=styled.div`
77
display: flex;
88
flex-direction: column;
99
`
10-
exportconstPlanWrapper=styled.div`
11-
display: flex;
12-
align-items: flex-start;
13-
padding: 5px 10px;
14-
margin-top: 10px;
15-
`
16-
exportconstPlanDivider=styled.div`
17-
border-bottom: 1px solid;
18-
border-color:${theme('tabs.bottomLine')};
19-
margin: 10px 0;
20-
`
21-
exportconstPlanTitle=styled.div`
22-
color:${theme('thread.articleTitle')};
23-
font-weight: bold;
24-
width: 150px;
25-
font-size: 0.9rem;
26-
margin-top: 2px;
27-
`
28-
exportconstPlanDesc=styled.div`
29-
color:${theme('thread.articleDigest')};
30-
flex-grow: 1;
31-
display: flex;
32-
flex-direction: column;
33-
`
34-
exportconstPurchaseButton=styled.div`
35-
margin-top: 2px;
36-
width: 130px;
37-
text-align: center;
38-
`
39-
exportconstDescLine=styled.div`
40-
font-size: 0.9rem;
41-
margin-bottom: 3px;
42-
`
43-
exportconstBadPrice=styled.span`
44-
text-decoration: line-through;
45-
color: tomato;
46-
`
47-
exportconstGoodPrice=styled.span`
48-
color: yellowgreen;
49-
font-weight: bold;
50-
`
10+
11+
exportconstholder=1
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
importstyledfrom'styled-components'
2+
3+
// import Img from '../../../components/Img'
4+
import{theme}from'../../../utils'
5+
6+
exportconstPlanWrapper=styled.div`
7+
display: flex;
8+
align-items: flex-start;
9+
padding: 5px 10px;
10+
margin-top: 10px;
11+
`
12+
exportconstPlanDivider=styled.div`
13+
border-bottom: 1px solid;
14+
border-color:${theme('tabs.bottomLine')};
15+
margin: 10px 0;
16+
`
17+
exportconstPlanTitle=styled.div`
18+
color:${theme('thread.articleTitle')};
19+
font-weight: bold;
20+
width: 150px;
21+
font-size: 0.9rem;
22+
margin-top: 2px;
23+
`
24+
exportconstPlanDesc=styled.div`
25+
color:${theme('thread.articleDigest')};
26+
flex-grow: 1;
27+
display: flex;
28+
flex-direction: column;
29+
`
30+
exportconstPurchaseButton=styled.div`
31+
margin-top: 2px;
32+
width: 130px;
33+
text-align: center;
34+
`
35+
exportconstDescLine=styled.div`
36+
font-size: 0.9rem;
37+
margin-bottom: 3px;
38+
`
39+
exportconstMoreLink=styled.a`
40+
color:${theme('markdown.link')};
41+
font-size: 0.8rem;
42+
43+
&:hover {
44+
font-weight: bold;
45+
text-decoration: underline;
46+
color:${theme('markdown.link')};
47+
}
48+
`
49+
50+
exportconstBadPrice=styled.span`
51+
text-decoration: line-through;
52+
color: tomato;
53+
opacity: 0.8;
54+
`
55+
exportconstGoodPrice=styled.span`
56+
color: yellowgreen;
57+
font-weight: bold;
58+
`

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp