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.

Commit0fff854

Browse files
committed
feat(Billing): Basic UI
1 parent728ddff commit0fff854

File tree

14 files changed

+342
-5
lines changed

14 files changed

+342
-5
lines changed

‎components/SectionLabel/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ SectionLabel.propTypes = {
6565
withAdder:PropTypes.bool,
6666
onAdd:PropTypes.func,
6767
adderText:PropTypes.string,
68+
// addonNode: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
6869
}
6970

7071
SectionLabel.defaultProps={
@@ -74,6 +75,7 @@ SectionLabel.defaultProps = {
7475
withAdder:false,
7576
onAdd:debug,
7677
adderText:'添加',
78+
// addonNode: '',
7779
}
7880

7981
exportdefaultSectionLabel

‎containers/UpgradePackges/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ class UpgradePackgesContainer extends React.Component {
9797
<Supportnotitems={platinumUserItems}/>
9898
</ItemsWrapper>
9999
<TitleDivider/>
100-
<Buttontype="red">软妹 69/98 元</Button>
100+
<Buttontype="red">￥69 元</Button>
101101
</Dashboard>
102102
<Dashboard>
103103
<PkgTitle>赞助商</PkgTitle>
@@ -108,7 +108,7 @@ class UpgradePackgesContainer extends React.Component {
108108
<Supportitems={platinumUserItems}/>
109109
</ItemsWrapper>
110110
<TitleDivider/>
111-
<Buttontype="red">软妹 997 元</Button>
111+
<Buttontype="red">￥1999 元</Button>
112112
</Dashboard>
113113
</ContentWrapper>
114114
</Wrapper>

‎containers/UserBilling/index.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/*
2+
*
3+
* UserBilling
4+
*
5+
*/
6+
7+
importReactfrom'react'
8+
import{inject,observer}from'mobx-react'
9+
10+
import{ICON_CMD}from'../../config'
11+
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'
24+
25+
import{makeDebugger,storePlug}from'../../utils'
26+
import*aslogicfrom'./logic'
27+
28+
/* eslint-disable no-unused-vars */
29+
constdebug=makeDebugger('C:UserBilling')
30+
/* eslint-enable no-unused-vars */
31+
32+
classUserBillingContainerextendsReact.Component{
33+
componentWillMount(){
34+
const{ userBilling}=this.props
35+
logic.init(userBilling)
36+
}
37+
38+
render(){
39+
return(
40+
<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+
95+
<br/>
96+
<SectionLabel
97+
title="付费历史"
98+
iconSrc={`${ICON_CMD}/bill_history.svg`}
99+
desc="没有查询到付费记录, 欢迎升级体验。"
100+
/>
101+
</Wrapper>
102+
)
103+
}
104+
}
105+
106+
exportdefaultinject(storePlug('userBilling'))(observer(UserBillingContainer))

‎containers/UserBilling/logic.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// import R from 'ramda'
2+
3+
import{makeDebugger,$solver,asyncErr,ERR}from'../../utils'
4+
importSR71from'../../utils/network/sr71'
5+
6+
// import S from './schema'
7+
8+
constsr71$=newSR71()
9+
letsub$=null
10+
11+
/* eslint-disable no-unused-vars */
12+
constdebug=makeDebugger('L:UserBilling')
13+
/* eslint-enable no-unused-vars */
14+
15+
letstore=null
16+
17+
exportfunctionupgradeHepler(){
18+
store.upgradeHepler()
19+
}
20+
21+
exportfunctionsponsorHepler(){
22+
store.sponsorHepler()
23+
}
24+
25+
// ###############################
26+
// Data & Error handlers
27+
// ###############################
28+
29+
constDataSolver=[]
30+
constErrSolver=[
31+
{
32+
match:asyncErr(ERR.CRAPHQL),
33+
action:({ details})=>{
34+
debug('ERR.CRAPHQL -->',details)
35+
},
36+
},
37+
{
38+
match:asyncErr(ERR.TIMEOUT),
39+
action:({ details})=>{
40+
debug('ERR.TIMEOUT -->',details)
41+
},
42+
},
43+
{
44+
match:asyncErr(ERR.NETWORK),
45+
action:({ details})=>{
46+
debug('ERR.NETWORK -->',details)
47+
},
48+
},
49+
]
50+
51+
exportfunctioninit(_store){
52+
if(store)returnfalse
53+
store=_store
54+
55+
debug(store)
56+
if(sub$)sub$.unsubscribe()
57+
sub$=sr71$.data().subscribe($solver(DataSolver,ErrSolver))
58+
}

‎containers/UserBilling/schema.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
importgqlfrom'graphql-tag'
2+
3+
constsimpleMutation=gql`
4+
mutation($id: ID!) {
5+
post(id: $id) {
6+
id
7+
}
8+
}
9+
`
10+
constsimpleQuery=gql`
11+
query($filter: filter!) {
12+
post(id: $id) {
13+
id
14+
}
15+
}
16+
`
17+
18+
constschema={
19+
simpleMutation,
20+
simpleQuery,
21+
}
22+
23+
exportdefaultschema

‎containers/UserBilling/store.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
* UserBilling store
3+
*
4+
*/
5+
6+
import{typesast,getParent}from'mobx-state-tree'
7+
// import R from 'ramda'
8+
9+
import{markStates,makeDebugger}from'../../utils'
10+
/* eslint-disable no-unused-vars */
11+
constdebug=makeDebugger('S:UserBilling')
12+
/* eslint-enable no-unused-vars */
13+
14+
constUserBilling=t
15+
.model('UserBilling',{})
16+
.views(self=>({
17+
getroot(){
18+
returngetParent(self)
19+
},
20+
}))
21+
.actions(self=>({
22+
upgradeHepler(){
23+
self.root.upgradeHepler()
24+
},
25+
sponsorHepler(){
26+
self.root.sponsorHepler()
27+
},
28+
markState(sobj){
29+
markStates(sobj,self)
30+
},
31+
}))
32+
33+
exportdefaultUserBilling
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
importstyledfrom'styled-components'
2+
3+
// import Img from '../../../components/Img'
4+
import{theme}from'../../../utils'
5+
6+
exportconstWrapper=styled.div`
7+
display: flex;
8+
flex-direction: column;
9+
`
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+
`
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// import React from 'react'
2+
// import { shallow } from 'enzyme'
3+
4+
// import UserBilling from '../index'
5+
6+
describe('TODO <UserBilling />',()=>{
7+
it('Expect to have unit tests specified',()=>{
8+
expect(true).toEqual(true)
9+
})
10+
})
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
* UserBilling store test
3+
*
4+
*/
5+
6+
// import R from 'ramda'
7+
8+
// import UserBilling from '../index'
9+
10+
it('TODO: store test UserBilling',()=>{
11+
expect(1+1).toBe(2)
12+
})

‎containers/UserContent/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@
77
importReactfrom'react'
88
import{inject,observer}from'mobx-react'
99

10+
importUserPublishedfrom'../UserPublished'
11+
importUserBillingfrom'../UserBilling'
1012
importUserSettingsfrom'../UserSettings'
1113
importUserStaredfrom'../UserStared'
1214
importUserFavoritedfrom'../UserFavorited'
13-
importUserPublishedfrom'../UserPublished'
1415

1516
import{Affix,Tabber}from'../../components'
1617

@@ -64,7 +65,7 @@ const TabberContent = ({ active }) => {
6465
return<UserStared/>
6566
}
6667
caseUSER_THREAD.BILLING:{
67-
return<h2>BILLING</h2>
68+
return<UserBilling/>
6869
}
6970
caseUSER_THREAD.SETTINGS:{
7071
return<UserSettings/>

0 commit comments

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