)
192 |
193 | lastAlphabet = firstLetter
194 | })
195 |
196 | return (
197 |
198 | {cityWrap}
199 |
200 | )
201 | }
202 | }
203 |
204 | class Alphabet extends Component {
205 | render() {
206 | let alphabetStyle = {
207 | fontSize: '18px',
208 | color: '#484949',
209 | lineHeight: '2',
210 | backgroundColor: '#eee',
211 | textIndent: '15px',
212 | margin: '0 auto'
213 | }
214 | return (
215 |
216 | {this.props.alphabet}
217 |
218 | )
219 | }
220 | }
221 | class AlphabetCity extends Component {
222 | static get defaultProps() {
223 | return {
224 | onClick: function () {}
225 | }
226 | }
227 |
228 | constructor(props) {
229 | super(props)
230 | }
231 |
232 | onClick(event) {
233 | window.store.title = this.props.name
234 | window.store.city = this.props.name
235 |
236 | this.props.onClick(event)
237 | }
238 | render() {
239 | let alphabetCityStyle = {
240 | fontSize: '18px',
241 | color: '#999',
242 | lineHeight: '3',
243 | textIndent: '15px',
244 | borderBottom: '1px solid #d0d0d0'
245 | }
246 | let LinkTo = `/city/${this.props.cid}/tab/foods/`
247 | return (
248 |
249 |
250 |
251 |
252 | {this.props.name}
253 |
254 |
255 |
25 | {this.props.images.map((image, i) => {
26 | return (
27 | -
28 |
31 |
32 | )
33 | })}
34 |
35 | )
36 | }
37 | }
38 | export class SliderContainer extends Component {
39 | static get defaultProps() {
40 | return {
41 | start: 0,
42 | images: []
43 | }
44 | }
45 |
46 | constructor(props) {
47 | super(props)
48 | }
49 |
50 | render() {
51 | let imgCoverStyle = {
52 | position: 'fixed',
53 | width: '100%',
54 | height: '100%',
55 | background: 'rgba(0, 0, 0, .8)',
56 | zIndex: '999',
57 | top: '0',
58 | left: '0'
59 | }
60 | let backStyle = {
61 | background: 'url(../image/leftarrow.png) no-repeat 3% center',
62 | backgroundSize:'26px',
63 | color: '#fff',
64 | fontSize: '18px',
65 | textIndent: '26px',
66 | padding:'3%'
67 | }
68 | return (
69 |
73 | )
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/js/destination/atlas/Slider.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import Image from '../Image'
3 | import ReactSwipe from 'react-swipe'
4 |
5 | export default class Slider extends Component {
6 | static get defaultProps() {
7 | return {
8 | start: 0,
9 | images: []
10 | }
11 | }
12 |
13 | constructor(props) {
14 | super(props)
15 |
16 | this.state = {
17 | curIndex: this.props.start
18 | }
19 | }
20 |
21 | componentWillReceiveProps(nextProps) {
22 | console.log('next',nextProps);
23 | }
24 |
25 | onSlider(index) {
26 | this.setState({
27 | curIndex: index
28 | })
29 | }
30 | next() {
31 | this.refs.reactSwipe.next()
32 | }
33 |
34 | prev() {
35 | this.refs.reactSwipe.prev()
36 | }
37 | render() {
38 |
39 | let sliderStyle = {
40 | width: '100%',
41 | height: '100%'
42 | }
43 | let swipeOptions = {
44 | continuous: true,
45 | startSlide: this.state.curIndex,
46 | callback: this.onSlider.bind(this)
47 | }
48 | let imgWrapStyle = {
49 | width: '80%',
50 | position: 'absolute',
51 | left:'50%',
52 | top: '50%',
53 | WebkitTransform: 'translate(-50%,-50%)'
54 | }
55 | // arrow style
56 | let arrowWrap = {
57 | width: '100%',
58 | position: 'absolute',
59 | top: '50%',
60 | transform:'translateY(-50%)'
61 | }
62 | let arrowLeft = {
63 | position: 'absolute',
64 | left: '10px',
65 | width: '80px',
66 | height: '80px',
67 | background: 'url(../image/leftarrow.png) no-repeat center center',
68 | backgroundSize: '70%'
69 | }
70 | let arrowRight = {
71 | position: 'absolute',
72 | right: '10px',
73 | width: '80px',
74 | height: '80px',
75 | background: 'url(../image/rightarrow.png) no-repeat center center',
76 | backgroundSize: '70%'
77 | }
78 |
79 |
80 | let images = this.props.images.map((image,i) => {
81 | return (
82 |
83 |
84 |
85 | )
86 | })
87 |
88 | return (
89 |
90 |
91 |
92 | {images}
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
127 | {this.props.curIndex} / {this.props.allNum}
128 |
129 | )
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/js/destination/city/CityContainer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import RecommendTypeTab from './RecommendTypeTab'
3 | import RecommendTypeList from './RecommendTypeList'
4 | import config from '../../../commonConfig'
5 | import Loading from '../../util/loading'
6 | import fetch from 'isomorphic-fetch'
7 |
8 | export default class CityContainer extends Component {
9 | static get defaultProps() {
10 | return {
11 | }
12 | }
13 |
14 | constructor() {
15 | super()
16 | this.state = {
17 | code: 1,
18 | data: [],
19 | ifLoading:true
20 | }
21 | }
22 |
23 | componentDidMount() {
24 | this.fetch(this.props.params.cid, this.props.params.tid)
25 |
26 | }
27 |
28 | fetch(cid, tid) {
29 | fetch(config.FETCH_URL+`api/1/discovery/${cid}/${tid}/`)
30 | .then(response => response.json())
31 | .then(json => this.setStateByCode(json))
32 | .catch(e => console.log("Oops,error", e))
33 | }
34 |
35 | componentWillReceiveProps(nextProps) {
36 | this.setState({
37 | data: []
38 | })
39 | if(nextProps.params.tid){
40 | this.fetch(nextProps.params.cid, nextProps.params.tid)
41 | }
42 | if (!nextProps.params.aid && !nextProps.params.sid ) {
43 | window.store.title = window.store.city
44 | }
45 | }
46 |
47 | setStateByCode(json) {
48 | if(json.code != 0) {
49 | return
50 | }
51 |
52 | let atlasList = {}
53 |
54 | json.data.forEach(city => {
55 | atlasList[city.id] = city
56 | })
57 |
58 | window.store.atlasList = atlasList
59 |
60 | this.setState({
61 | code: json.code,
62 | data: json.data,
63 | ifLoading:false
64 | })
65 | }
66 |
67 | render() {
68 | let linkPrefix = `/city/${this.props.params.cid}`
69 | let container = (
70 |
71 |
72 |
73 |
74 |
75 | )
76 |
77 | if (this.props.params.aid) {
78 | container = (
79 |
80 | {this.props.children}
81 |
82 | )
83 | }
84 |
85 | if (this.props.params.sid) {
86 | container = (
87 |
88 | {this.props.children}
89 |
90 | )
91 | }
92 | // todo
93 | console.log('children',this.props.children)
94 | return (
95 |
96 | {container}
97 |
98 | )
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/js/destination/city/RecommendTypeTab.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { Link } from 'react-router'
3 |
4 | export default class RecommendTypeTab extends Component {
5 |
6 | static get defaultProps() {
7 | return {
8 | linkPrefix: '/city/0',
9 | currentTab: 'food',
10 | tabs: [
11 | {
12 | tab: 'foods',
13 | name: '好吃的',
14 | imgUrl: '../image/des-navfood-g.png',
15 | curImgUrl: '../image/des-navfood.png'
16 | },
17 | {
18 | tab: 'sceneries',
19 | name: '好玩的',
20 | imgUrl: '../image/des-navscenic-g.png',
21 | curImgUrl: '../image/des-navscenic.png'
22 | },
23 | {
24 | tab: 'shopping',
25 | name: '值得买',
26 | imgUrl: '../image/des-navshopping-g.png',
27 | curImgUrl: '../image/des-navshopping.png'
28 | }
29 | ]
30 | }
31 | }
32 | render() {
33 | let navWrapStyle = {
34 | width: '100%',
35 | display: '-webkit-flex',
36 | padding: '15px 0 10px 0',
37 | borderBottom:'1px solid #e1e0dc'
38 | }
39 | let navListStyle = {
40 | width: '100%'
41 | }
42 | let currentTab = this.props.currentTab
43 | let linkPrefix = this.props.linkPrefix
44 |
45 | const navs = this.props.tabs.map(function(tabItem, i) {
46 | let linkTo = `${linkPrefix}/tab/${tabItem.tab}`
47 | return (
48 |
49 |
50 |
55 |
56 |
57 | )
58 | })
59 |
60 | return (
61 |
64 | )
65 | }
66 | }
67 |
68 | class NavItem extends Component {
69 | static get defaultProps() {
70 | return {
71 | selected: false
72 | }
73 | }
74 |
75 | render() {
76 | let contentStyle = {
77 | width:'120px',
78 | margin:'0 auto'
79 | }
80 |
81 | let imgStyle = {
82 | width:'28px',
83 | height:'28px',
84 | verticalAlign:'middle'
85 | }
86 | let wordStyle = {
87 | fontSize:'18px',
88 | color:this.props.selected? '#d93600' : '#5d5d5d',
89 | paddingLeft:'28px',
90 | verticalAlign:'middle'
91 | }
92 | let navItemStyle = {
93 | WebkitFlex:'1',
94 | borderLeft:'1px solid #d1d0ce'
95 | }
96 | let curNavItemStyle = {
97 | WebkitFlex:'1',
98 | borderLeft:'1px solid #d1d0ce'
99 | }
100 |
101 | let underLineStyle = {
102 | position: 'relative',
103 | width: '100%',
104 | height: '2px',
105 | backgroundColor: '#d93600',
106 | top:'10px'
107 | }
108 |
109 | return (
110 |
111 |
112 |
113 |
{this.props.navTitle}
114 |
115 | {this.props.selected ?
: ''}
116 |
38 |
39 |
40 | )
41 |
42 | if (this.props.params.cid) {
43 | container = (
44 |
45 | {this.props.children}
46 |
47 | )
48 | }
49 |
50 | return (
51 |
52 |
53 |
54 |
55 |
56 | {container}
57 |
58 |
59 |
60 |
61 |
65 |
66 | {this.state.showSelectCity ? : ''}
67 |
68 | )
69 |
70 | }
71 | }
72 | FocusContainer.defaultProps = {
73 | focusImgInfo:[
74 | {
75 | cover_image: '../image/food1.jpg'
76 | }
77 | ]
78 | }
79 | class Search extends Component {
80 | static get defaultProps() {
81 | return {
82 | recommends: []
83 | }
84 | }
85 | constructor(props) {
86 | super(props)
87 | }
88 |
89 | render() {
90 | let containerStyle = {
91 | color:'#fff',
92 | backgroundColor:'rgba(0,0,0,.4)',
93 | position:'absolute',
94 | top:'60%',
95 | left:'50%',
96 | WebkitTransform:'translate(-50%,-50%)',
97 | padding:'14px 44px 8px 44px'
98 | }
99 |
100 | return (
101 |
102 |
103 |
104 |
105 |
106 | )
107 | }
108 | }
109 |
110 | class SearchTitle extends Component {
111 | render() {
112 | let titleStyle = {
113 | fontSize:'18px' }
114 | return (
115 | {this.props.title}
116 | )
117 | }
118 | }
119 |
120 | class SearchRecommend extends Component {
121 |
122 | render() {
123 | let recomentListStyle = {
124 | display: 'inline-block'
125 | }
126 | const recommends = this.props.recommends.map(function(recommend, i) {
127 | let LinkTo = `/city/${recommend.id}/tab/foods/`
128 | return (
129 |
130 |
131 |
132 |
133 |
134 | )
135 | })
136 | return (
137 | 热门城市：
138 | {recommends}
139 |
140 | )
141 | }
142 | }
143 | class RecomCityItem extends Component {
144 | static get defaultProps() {
145 | return {
146 | name: {}
147 | }
148 | }
149 | onClick(event) {
150 | window.store.title = this.props.name
151 | window.store.city = this.props.name
152 |
153 | this.props.onClick(event)
154 | }
155 | render() {
156 | let recomCityItemStyle = {
157 | display: 'inline-block',
158 | color: '#fff',
159 | padding: '0 6px'
160 | }
161 |
162 | return (
163 |
164 | {this.props.name}
165 |
166 | )
167 | }
168 | }
169 |
170 | class InputBox extends Component {
171 | render() {
172 | let inputBoxStyle = {
173 | position: 'relative'
174 | }
175 | let inputStyle = {
176 | width:'410px',
177 | height:'56px',
178 | margin:'12px 0',
179 | borderRadius:'5px',
180 | fontSize:'18px',
181 | paddingLeft:'15px'
182 |
183 | }
184 | let searchIconStyle = {
185 | position:'absolute',
186 | width: '34px',
187 | height: '34px',
188 | top:'22px',
189 | left:'380px'
190 | }
191 | let imgStyle = {
192 | width: '100%'
193 | }
194 | return (
195 |
196 |
197 |
198 |
199 |
200 |
24 |
25 |
26 |
27 | )
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/js/destination/strategy/StrategyContainer.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import config from '../../../commonConfig'
3 | import fetch from 'isomorphic-fetch'
4 |
5 |
6 | export default class StrategyContainer extends Component {
7 | static get defaultProps() {
8 | return {
9 | cid: 1,
10 | sid: 1
11 | }
12 | }
13 | constructor(props) {
14 | super(props)
15 | this.state = {
16 | code: 1,
17 | data: [],
18 | image_urls:[]
19 | }
20 | }
21 | componentDidMount() {
22 | fetch(config.FETCH_URL+`api/1/discovery/${this.props.cid}/strategies/${this.props.sid}/`)
23 | .then(response => response.json())
24 | .then(json => this.setStateByCode(json))
25 | .catch(e => console.log('Oops,error', e))
26 | }
27 | setStateByCode(json) {
28 | if(json.code != 0) {
29 | return
30 | }
31 |
32 | window.store.title = json.data.title
33 | this.setState({
34 | code: json.code,
35 | data: json.data,
36 | image_urls:json.data.image_urls
37 | })
38 | }
39 |
40 | render() {
41 | let mainStyle={
42 | width: '96%',
43 | padding: '20px 0',
44 | margin: '0 auto'
45 | }
46 | let sourceStyle = {
47 | fontSize: '14px',
48 | color:'#999',
49 | textAlign: 'center',
50 | padding:'20px 0 30px 0'
51 | }
52 | let forewordWrap = {
53 | color: '#484949',
54 | backgroundImage: 'url(../image/dashedcut.png)',
55 | backgroundRepeat: 'no-repeat',
56 | backgroundPosition: 'center center',
57 | backgroundSize: '90%',
58 | backgroundColor:'#fff'
59 | }
60 | let forewordFix = {
61 | fontSize: '22px',
62 | paddingLeft: '15px'
63 | }
64 | let forewordContent = {
65 | fontSize: '14px',
66 | lineHeight: '3',
67 | background: '#fff',
68 | padding: '0 10px',
69 | zIndex: '999'
70 | }
71 | let articleStyle = {
72 | fontSize: '16px',
73 | color: '#484949',
74 | textIndent: '20px'
75 | }
76 | let imgWrapStyle = {
77 | textAlign: 'center',
78 | margin: '25px 0'
79 | }
80 | let timeStyle = {
81 | textIndent: '6px',
82 | display: 'inline-block'
83 | }
84 | const images = this.state.image_urls.map((img, i) => {
85 | return (
86 | 
87 | )
88 | })
89 |
90 | return (
91 |
92 |
93 | {this.state.data.author}
94 | {this.state.data.create_time}
95 |
96 |
97 |
98 | 前言
99 | {this.state.data.abstract}
100 |
101 |
102 | {images}
103 |
104 |
{this.state.data.content}
105 |
10 |
11 | {this.props.children ?
12 | this.props.children:
13 |
14 | }
15 |
16 | )
17 | }
18 | }
19 |
20 |
21 | class Header extends Component {
22 | constructor(props) {
23 | super(props)
24 | this.state = {
25 | showSelectCity: false
26 | }
27 | }
28 |
29 | onLocationClick() {
30 | this.setState({
31 | showSelectCity: true
32 | })
33 | }
34 |
35 | render() {
36 | let headerStyle = {
37 | padding:'24px 24px 20px 24px',
38 | display:'-webkit-flex',
39 | WebkitJustifyContent: 'space-between',
40 | justifyContent: 'space-between',
41 | borderBottom:'2px solid #d93600'
42 | }
43 | return (
44 |
45 |
49 |
50 | )
51 | }
52 | }
53 |
54 |
55 | class HeaderTitle extends Component {
56 | handleClick() {
57 | window.history.go(-1)
58 | }
59 | render() {
60 |
61 | let backStyle = {
62 | width: '20px',
63 | height: '30px',
64 | display: 'inline-block'
65 | }
66 | let iconStyle = {
67 | width: '100%',
68 | height: '100%',
69 | verticalAlign:'middle'
70 | }
71 | let destinationiconStyle = {
72 | width:'38px',
73 | height: '28px',
74 | display: 'inline-block',
75 | margin:'0 18px'
76 | }
77 | let titleStyle = {
78 | fontSize: '22px',
79 | color: '#D93600',
80 | verticalAlign:'middle'
81 | }
82 | return (
83 |
84 |
85 | 
86 |
87 |
88 | 
89 |
90 |
91 |
{this.props.headerTitle}
92 |
111 |
113 |
114 | )
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/js/eyesonworld/Eyesonworld.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | require('../../less/eyesonworld/eyesonworld')
3 | import NavigationBar from '../util/navigationBar'
4 | import Header from './Header'
5 | import EyesContainer from './home/EyesContainer'
6 | import Footer from './Footer'
7 | import EyesDetail from './detail/EyesDetail'
8 | export default class Eyesonworld extends Component {
9 | constructor() {
10 | super()
11 | this.state = {
12 | headerTitle:'丽眼看世界'
13 | }
14 | }
15 | componentDidMount(){
16 | }
17 | headerTitle(title){
18 | this.setState({
19 | headerTitle: title
20 | })
21 | }
22 | render() {
23 | let allStyle = {
24 | height: '100%'
25 | }
26 | let wrapperStyle = {
27 | minHeight: '100%',
28 | backgroundColor: '#f3f2f0'
29 | }
30 | let mainStyle = {
31 | paddingBottom: '82px'
32 | }
33 | let container = (
34 |
35 | )
36 | if (this.props.params.cid) {
37 | container = (
38 |
39 |
40 |
41 | )
42 | }
43 | return (
44 |
53 | )
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/js/eyesonworld/Footer.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 |
3 | // Footer——————
4 | export default class Footer extends Component {
5 | render() {
6 | let wrapStyle = {
7 | paddingLeft:'80px',
8 | backgroundColor:'#000',
9 | marginTop: '-95px'
10 | }
11 | let titleStyle = {
12 | fontSize:'24px',
13 | color:'#fff',
14 | padding:'18px 0'
15 | }
16 | let stateStyle = {
17 | fontSize:'12px',
18 | color:'#fff',
19 | paddingBottom:'12px'
20 | }
21 | return (
22 |
23 |
风筝·云图联合出品
24 |
互联网违法和不良信息举报方式 电话：010 826771035 邮箱：buliang@shenzhenair.com
25 |
23 |
27 |
28 | )
29 | }
30 | }
31 |
32 | class HeaderTitle extends Component {
33 | static get defaultProps() {
34 | return {
35 | headerTitle: '丽眼看世界'
36 | }
37 | }
38 | handleClick() {
39 | window.history.go(-1)
40 | }
41 |
42 | render() {
43 | let backStyle = {
44 | width: '20px',
45 | height: '30px',
46 | display: 'inline-block'
47 | }
48 | let iconStyle = {
49 | width: '100%',
50 | height: '100%',
51 | display: 'inline-block',
52 | verticalAlign:'middle'
53 | }
54 | let destinationiconStyle = {
55 | width:'38px',
56 | height: '28px',
57 | display: 'inline-block',
58 | margin:'0 18px'
59 | }
60 | let titleStyle = {
61 | fontSize: '22px',
62 | color: '#D93600',
63 | verticalAlign:'middle'
64 | }
65 |
66 | return (
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | {this.props.headerTitle}
77 |
78 |
26 |
27 |
28 |
57 | {this.props.imgTitle}
58 |
59 | )
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/js/eyesonworld/LinkImg.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { Link } from 'react-router'
3 | import Image from './Image'
4 | export default class LinkImg extends Component {
5 | static get defaultProps() {
6 | return {
7 | url: '/',
8 | onClick: function() {}
9 | }
10 | }
11 |
12 | render() {
13 | return (
14 |
15 |
16 |
19 |
20 |
21 | )
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/js/game/index.js:
--------------------------------------------------------------------------------
1 | import fetch from 'isomorphic-fetch'
2 | import React, { Component, PropTypes } from 'react'
3 | import { Link } from 'react-router'
4 | import Swiper from '../util/swiper'
5 | import '../../less/index/swiper-3.3.1.min'
6 | import Loading from '../util/loading'
7 | import config from '../../commonConfig'
8 |
9 |
10 | export default class App extends Component {
11 | constructor() {
12 | super()
13 | this.state = {
14 | code: 1,
15 | data: {
16 | focus_pic: [],
17 | recommend: []
18 | }
19 | }
20 | this._gid = undefined
21 | this._fgid = undefined
22 | }
23 |
24 | componentDidMount() {
25 | fetch(config.API_GAME).then(response => response.json())
26 | .then(json => {
27 | if (json.code == 0) {
28 | this.setState({
29 | code: 0,
30 | data: json.data
31 | })
32 | }
33 | })
34 | .catch(e => console.log('Oop error', e))
35 | }
36 |
37 | componentWillReceiveProps(nextProps) {
38 | console.log('[APP componentWillReceiveProps]', nextProps.params)
39 | this._gid = nextProps.params.gid
40 | this._fgid = nextProps.params.fgid
41 | }
42 |
43 | get selectedGameUrl() {
44 | let url = undefined
45 | if (this._gid) {
46 | url = this.state.data.recommend.find(d => d.gid == this._gid).install_url
47 | }
48 | else if (this._fgid) {
49 | url = this.state.data.focus_pic.find(d => d.cid == this._fgid).target_link
50 | }
51 | // console.log('[App selectedGameUrl]', url)
52 | return url
53 | }
54 |
55 | render() {
56 | return (
57 |
58 |
59 |
60 | {this.props.children ?
61 |
:
62 |
63 |
64 |
65 |
66 | }
67 |
85 |
89 |
90 | )
91 | }
92 | }
93 |
94 |
95 | class HeaderTitle extends Component {
96 | handleClick() {
97 | window.history.go(-1)
98 | }
99 | render() {
100 |
101 | let backStyle = {
102 | width: '20px',
103 | height: '30px',
104 | display: 'inline-block'
105 | }
106 | let iconStyle = {
107 | width: '100%',
108 | height: '100%',
109 | verticalAlign:'middle'
110 | }
111 | let destinationiconStyle = {
112 | width:'38px',
113 | height: '28px',
114 | display: 'inline-block',
115 | margin:'0 18px'
116 | }
117 | let titleStyle = {
118 | fontSize: '22px',
119 | color: '#D93600',
120 | verticalAlign:'middle'
121 | }
122 | return (
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
{this.props.headerTitle}
132 |
156 |
157 | {
158 | this.props.silderImage.map((item, i) => {
159 | return (
160 |
161 |
162 |
163 |
164 |
165 | )
166 | })
167 | }
168 |
169 |
170 |
221 |
222 |
223 |
224 |
225 |
226 | { data.title }
227 |
228 |
229 |
230 | 类型:
231 | { data.type }
232 |
233 |
234 |
235 | 简介:
236 | { data.abstract }
237 |
238 |
239 |
246 | {games}
247 |
248 | )
249 | }
250 | }
251 |
252 |
253 | export class Game extends Component {
254 | render() {
255 | let divStyle = {
256 | width: '100%',
257 | margin: '0 auto'
258 | }
259 | let iframeStyle = {
260 | height: 800,
261 | minWidth: '100%',
262 | border: 0
263 | }
264 | // console.log("[Game render]", this.props.installUrl)
265 | return (
266 |
267 |
269 |
270 | )
271 | }
272 | }
273 |
--------------------------------------------------------------------------------
/js/media/cartoon.js:
--------------------------------------------------------------------------------
1 | import { render } from 'react-dom';
2 | import React, { Component, PropTypes } from 'react';
3 | import { Router,Route, hashHistory,Link} from 'react-router';
4 | import '../../less/media/cartoon';
5 | import VideoColumn from './videoColumn'
6 |
7 | export default class Cartoon extends Component {
8 | componentDidMount(){
9 | var mySwiper = new Swiper('.cartoon-swiper',{
10 | autoplay : 1000,
11 | pagination: '.swiper-pagination',
12 | paginationElement : 'li',
13 | autoplayStopOnLast : false,
14 | });
15 | }
16 | render(){
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | -
34 |
35 | 夕阳天使
36 |
37 | -
38 |
39 |
夕阳天使
40 |
41 | -
42 |
43 |
夕阳天使
44 |
45 | -
46 |
47 |
夕阳天使
48 |
49 |
50 |
51 |
52 |
53 | -
54 |
55 |
绝色武器
56 |
57 | -
58 |
59 |
绝色武器
60 |
61 | -
62 |
63 |
绝色武器
64 |
65 | -
66 |
67 |
绝色武器
68 |
69 |
70 |
71 |
72 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
46 |
47 |
48 |
49 |
52 |
53 |
54 |
55 |
56 |
57 |
60 |
61 |
62 |
63 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | -
73 |
74 |
77 |
完美世界
78 |
79 | -
80 |
81 |
84 |
完美世界
85 |
86 | -
87 |
88 |
91 |
完美世界
92 |
93 | -
94 |
95 |
98 |
完美世界
99 |
100 |
101 |
102 |
103 |
104 | -
105 |
106 |
107 | -
108 |
109 |
110 | -
111 |
112 |
113 | -
114 |
115 |
116 | -
117 |
118 |
119 | -
120 |
121 |
122 | -
123 |
124 |
125 |
126 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | -
34 |
35 | 七月半之恐怖
36 |
37 | -
38 |
39 |
七月半之恐怖
40 |
41 | -
42 |
43 |
七月半之恐怖
44 |
45 | -
46 |
47 |
七月半之恐怖
48 |
49 | -
50 |
51 |
七月半之恐怖
52 |
53 | -
54 |
55 |
七月半之恐怖
56 |
57 |
58 |
59 |
77 |
78 |
79 |
80 |
影音视频
81 |
82 |
83 |
84 | -
85 |
86 |
87 |
热播
88 |
89 |
90 | -
91 |
92 |
93 |
影音
94 |
95 |
96 | -
97 |
98 |
99 |
音乐电台
100 |
101 |
102 | -
103 |
104 |
105 |
动画片
106 |
107 |
108 |
109 |
110 |
121 |
122 | {this.props.children}
123 |
124 | )
125 | }
126 | }
--------------------------------------------------------------------------------
/js/media/musicplayer.js:
--------------------------------------------------------------------------------
1 | import { render } from 'react-dom';
2 | import React, { Component, PropTypes } from 'react';
3 | import { Router,Route, hashHistory,Link} from 'react-router';
4 | import '../../less/media/musicplay';
5 | let CLAudioPlayer = require('react-cl-audio-player');
6 | class Player extends Component {
7 | constructor(args) {
8 | super(args)
9 | this.state = {
10 | songs:[
11 | {
12 | url: '../image/music.mp3',
13 | cover: '../image/test5.jpg',
14 | artist: {
15 | name: 'Redfoo',
16 | song: '--New Thang',
17 | fromsource:'/来源：考拉电台',
18 | currentTime:'00',
19 | allTime:'00'
20 | }
21 | }
22 | ]
23 | }
24 | }
25 | render() {
26 | return (
27 |
28 | )
29 | }
30 | }
31 | class Radio extends Component {
32 | constructor(args) {
33 | super(args)
34 | }
35 | render(){
36 | return (
37 |
38 |
39 |
40 |
41 |
42 |
43 | -
44 |
45 |
46 |
47 |
北京欢乐时光
49 | 当前主播：刘德华
50 |
51 | -
52 |
53 |
54 |
55 |
北京欢乐时光
57 | 当前主播：刘德华
58 |
59 | -
60 |
61 |
62 |
63 |
北京欢乐时光
65 | 当前主播：刘德华
66 |
67 | -
68 |
69 |
70 |
71 |
北京欢乐时光
73 | 当前主播：刘德华
74 |
75 | -
76 |
77 |
78 |
79 |
北京欢乐时光
81 | 当前主播：刘德华
82 |
83 | -
84 |
85 |
86 |
87 |
北京欢乐时光
89 | 当前主播：刘德华
90 |
91 |
92 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
幸福别来无恙 第89期
111 |
当前主播：刘德华
112 |
113 |
114 |
115 |
116 |
117 |
13 |
14 | {this.props.message == undefined ? '人气新剧' : this.props.message}
15 |
16 | )
17 | }
18 | }
--------------------------------------------------------------------------------
/js/news/content.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { Link } from 'react-router'
3 | import TimeAgo from 'react-timeago'
4 | import Detail from './detail'
5 |
6 |
7 | export default class Content extends Component {
8 | render() {
9 | const newsItems = this.props.newsByCate.map(data => {
10 | if (data.image_urls.length == 1) {
11 | return
12 | }
13 | return
14 | })
15 | return (
16 |
17 | {newsItems}
18 |
19 | )
20 | }
21 | }
22 |
23 |
24 | class ItemMultiImg extends Component {
25 | render() {
26 | const data = this.props.news
27 | let t = new Date( data.publish_time )
28 | let imgs = data.image_urls.map((img, i)=> {
29 | if (i < 4) {
30 | return (
31 |
32 | 
33 |
34 | )
35 | }
36 | })
37 | return (
38 |
39 |
40 |
41 | {data.title}
42 |
43 |
46 |
47 | {data.src}
48 |
49 |
50 |
51 | {data.abstract}
52 |
53 |
54 |
67 |
68 |
69 |
70 | {data.title}
71 |
72 |
73 | {data.src} /
74 |
75 |
76 | {data.abstract}
77 |
78 |
79 |
80 |
81 |
82 |
83 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | {data.src}
21 | {formatted}
22 |
23 |
24 | {data.title}
25 |
26 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | 
68 |
69 |
资讯头条
70 |
71 |
76 |
77 |
78 | 
79 |
80 |
81 |
66 | Loading.....
67 |
68 | )
69 | if (this.props.params.nid != undefined) {
70 | ret = (
71 |
72 | {this.props.children}
73 |
74 | )
75 | }
76 | else {
77 | ret = (
78 |
79 |
80 | {this.props.children}
81 |
82 | )
83 | }
84 |
85 | return ret
86 | }
87 | }
88 |
89 |
90 | class NewsList extends Component {
91 | constructor() {
92 | console.log('[NewsList] constructor')
93 | super()
94 | this.state = {
95 | code: 1,
96 | data: [],
97 | ifLoading: true
98 | }
99 | }
100 |
101 | fetchMore() {
102 | console.log('[NewsList] fetchMore')
103 | if($(document).scrollTop() >= $(document).height() - $(window).height()) {
104 | let i = this.state.data.length - 1
105 | let data = this.state.data[i]
106 | if (data)
107 | this.fetchByCategory(this.props.params.cid, config.PAGE_SIZE, data.nid)
108 | }
109 | }
110 |
111 | componentDidMount() {
112 | console.log('[NewsList] componentDidMount', this.props.params.cid)
113 | this.fetchByCategory(this.props.params.cid)
114 | }
115 |
116 | componentWillUnmount() {
117 | console.log('[NewsList] componentWillUnmount')
118 | }
119 |
120 | componentWillReceiveProps(nextProps) {
121 | console.log('[NewsList] componentWillReceiveProps', nextProps.params.cid)
122 | if (nextProps.params.cid != this.props.params.cid) {
123 | this.fetchByCategory(nextProps.params.cid)
124 | }
125 | }
126 |
127 | fetchByCategory(category, pageSize=config.PAGE_SIZE, startIndex=0) {
128 | let url = `${config.API_NEWS}?cid=${category}&page_size=${pageSize}&start_index=${startIndex}`
129 | fetch(url).then(response => response.json())
130 | .then(json => this.setStateByCode(json))
131 | .catch(e => {
132 | console.log('Oops, error', e)
133 | this.setState({
134 | ifLoading: false
135 | })
136 | })
137 | }
138 |
139 | setStateByCode(json) {
140 | if (json.code == 0) {
141 | let data = this.state.data
142 | if (data.length == 0 || data[0].cid != json.data[0].cid) {
143 | data = json.data
144 | }
145 | else {
146 | data = data.concat(json.data)
147 | }
148 | this.setState({
149 | code: json.code,
150 | data: data,
151 | ifLoading: false
152 | })
153 | }
154 | else {
155 | console.log('Oops, error', json.code, json.message)
156 | }
157 | }
158 |
159 | render() {
160 | console.log('[NewsList] render', this.state.data)
161 | return (
162 |
163 |
164 |
165 |
166 |
167 | )
168 | }
169 | }
170 |
171 |
172 | class DetailIndex extends Component {
173 | constructor() {
174 | super()
175 |
176 | this.state = {
177 | code: 1,
178 | data: [],
179 | ifLoading: true
180 | }
181 | }
182 |
183 | fetchByNewsId(cid, nid) {
184 | let url = `${config.API_NEWS_DETAIL}${cid}/${nid}/`
185 | fetch(url).then(response => response.json())
186 | .then(json => this.setStateByCode(json))
187 | .catch(e => {
188 | console.log('Oops, error', e)
189 | this.setState({
190 | ifLoading: false
191 | })
192 | })
193 | }
194 |
195 | setStateByCode(json) {
196 | console.log('[Detail] setStateByCode')
197 | if (json.code != 0) {
198 | // # TODO
199 | console.log('Oops, error', json.message)
200 | this.setState({
201 | ifLoading: false
202 | })
203 | }
204 | else {
205 | this.setState({
206 | code: json.code,
207 | data: json.data,
208 | ifLoading: false
209 | })
210 | }
211 | }
212 |
213 | componentDidMount() {
214 | console.log('[Detail] componentDidMount', this.props)
215 | this.fetchByNewsId(this.props.location.query.cid, this.props.params.nid)
216 | }
217 |
218 | render() {
219 | console.log('[Detail] render', this.props.params.nid)
220 | return (
221 |
222 |
223 |
224 |
225 |
226 | )
227 | }
228 | }
229 |
230 |
231 | export { App, NewsList, DetailIndex }
232 |
--------------------------------------------------------------------------------
/js/social/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import { Link } from 'react-router'
3 | import config from '../../commonConfig'
4 |
5 | export default class App extends Component {
6 |
7 | render() {
8 | let ulStyle = {
9 | display: 'flex',
10 | margin: '200px'
11 | }
12 | let liStyel = {
13 | flex: 2,
14 | listStyleType:'none'
15 | }
16 | let liStyel1 = {
17 | flex: 1,
18 | listStyleType:'none'
19 | }
20 | let spanForImgStyle = {
21 | width:'100px',
22 | height: '100px',
23 | display: 'block'
24 | }
25 | let iconStyle = {
26 | width: '100%',
27 | height: '100%',
28 | verticalAlign:'middle'
29 | }
30 | let lineStyle = {
31 | height: '100px',
32 | width: '1px',
33 | borderLeft: '1px #9E9E9E solid'
34 | }
35 | return (
36 |
37 |
38 | {this.props.children ?
39 | this.props.children:
40 |
41 | -
42 |
43 |
44 |
45 |
46 |
47 |
48 | -
49 |
50 |
51 | -
52 |
53 |
54 |
55 |
56 | -
57 |
58 |
59 | -
60 |
61 |
62 |
63 |
64 |
65 | }
66 |
96 |
100 |
101 | )
102 | }
103 | }
104 |
105 |
106 | class HeaderTitle extends Component {
107 | handleClick() {
108 | window.history.go(-1)
109 | }
110 | render() {
111 |
112 | let backStyle = {
113 | width: '20px',
114 | height: '30px',
115 | display: 'inline-block'
116 | }
117 | let iconStyle = {
118 | width: '100%',
119 | height: '100%',
120 | verticalAlign:'middle'
121 | }
122 | let destinationiconStyle = {
123 | width:'38px',
124 | height: '28px',
125 | display: 'inline-block',
126 | margin:'0 18px'
127 | }
128 | let titleStyle = {
129 | fontSize: '22px',
130 | color: '#D93600',
131 | verticalAlign:'middle'
132 | }
133 | return (
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
{this.props.headerTitle}
143 |
162 |
164 |
165 | )
166 | }
167 | }
168 |
169 |
170 | export { Weibo }
171 |
--------------------------------------------------------------------------------
/js/stock/stocks.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import ReactDOM from 'react-dom'
3 | import '../../less/stock/stock'
4 | import { Link } from 'react-router'
5 |
6 | class StockDetails extends Component {
7 | constructor(args) {
8 | super(args);
9 | }
10 | render(){
11 | let stock_id = this.props.stockid;
12 | return (
13 |
14 |
16 |
17 | )
18 | }
19 | }
20 | class StockHeader extends Component {
21 | constructor(args) {
22 | super(args);
23 | this.state = {
24 |
25 | };
26 | }
27 | search(){
28 | let ifShow = {
29 | flagIndex:false,
30 | stock_num:this.refs.stockNumber.value
31 | }
32 | this.props.showDetail(ifShow);
33 | }
34 | backfun(){
35 | let ifShow = {
36 | flagIndex:true,
37 | }
38 | this.refs.stockNumber.value = '';
39 | this.props.showDetail(ifShow);
40 | }
41 | render(){
42 | return (
43 |
44 |
45 |
46 |
股票行情
47 |
48 |
49 |
50 |
51 |
52 | 
53 |
54 |
55 |
56 |
67 |
69 |
71 |
72 | )
73 | }
74 | }
75 | export default class Stock extends Component {
76 | constructor(props) {
77 | super(props)
78 | this.state = {
79 | flagIndex:true
80 | }
81 | }
82 | IfshowDetail(data){
83 | console.log(data);
84 | this.setState({
85 | flagIndex:data.flagIndex,
86 | stock_num:data.stock_num
87 | });
88 | }
89 | render(){
90 | let mai_data;
91 | let detail_data;
92 | if(this.state.flagIndex){
93 | mai_data = ;
94 | detail_data = '';
95 | }else{
96 | mai_data = '';
97 | detail_data = ;
98 | }
99 | return (
100 |
101 |
102 | { mai_data }
103 | { detail_data }
104 |
105 | )
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/js/util/loading.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import ReactDOM from 'react-dom'
3 | export default class Loading extends Component{
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | ifLoading:true
8 | };
9 | }
10 | componentWillReceiveProps(nextProps){
11 | this.setState({
12 | ifLoading:nextProps.ifLoading
13 | })
14 | }
15 | render(){
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
92 |
93 |
94 |
95 |
96 | - 首页
97 | - 资讯头条
98 | - 目的地
99 | - 社交
100 | - 空中电商
101 | - 影音娱乐
102 | - 股票行情
103 | - 接送机
104 | - 游戏
105 | - 深航女孩
106 | - 关于深航
107 |
108 |
79 |
80 |
,
123 | 
124 | ]
125 | return (
126 | 
194 | 
200 |
201 | {this.props.city}
202 |