{title}
12 | {stateVal === 1 ? yes : no}
13 |
14 | }
15 | onClick={() => onSwitch(keyVal)}
16 | />
17 | )
18 |
--------------------------------------------------------------------------------
/store/reducers/2-01-loansFilter.js:
--------------------------------------------------------------------------------
1 | import { LOANS_FILTER } from '@actions'
2 | import { addDefault } from '@utils'
3 |
4 | const TITLE = [{ title: '综合排序', key: 'sort' }, { title: '全部类型', key: 'type' }, { title: '不限额度', key: 'limit' }]
5 |
6 | export default (state = null, action) => {
7 | switch (action.type) {
8 | case LOANS_FILTER:
9 | return {
10 | ...state,
11 | currentTitle: TITLE,
12 | selectList: addDefault(TITLE, action.payload.selectList),
13 | }
14 | default:
15 | return state
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/store/reducers/3-02-cardsFilter.js:
--------------------------------------------------------------------------------
1 | import { CARDS_FILTER } from '@actions'
2 | import { addDefault } from '@utils'
3 |
4 | const TITLE = [{ title: '全部银行', key: 'bank' }, { title: '所有卡型', key: 'use' }, { title: '不限等级', key: 'level' }]
5 |
6 | export default (state = null, action) => {
7 | switch (action.type) {
8 | case CARDS_FILTER:
9 | return {
10 | ...state,
11 | currentTitle: TITLE,
12 | selectList: addDefault(TITLE, action.payload.selectList),
13 | }
14 | default:
15 | return state
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig is awesome: http://EditorConfig.org
2 | # EditorConfig 帮助开发者在不同的编辑器和IDE中保持一致的代码风格
3 | # 为了支持该文件保存后自动执行，请先下载该 EditorConfig for Vs Code
4 |
5 | # top-most EditorConfig file
6 | root = true
7 |
8 | # 应用于所有文件
9 | [*]
10 |
11 | charset = utf-8
12 |
13 | # 首行缩进
14 | indent_style = space
15 | indent_size = 2
16 |
17 | # 关于换行符的介绍 http://blog.csdn.net/timberwolf_2012/article/details/28687477
18 | end_of_line = lf
19 | # 在文件的最后需要有换行回车
20 | insert_final_newline = true
21 | # 去除每行末尾的空白符
22 | trim_trailing_whitespace = true
23 |
24 | [*.json]
25 | indent_size = 4
26 |
--------------------------------------------------------------------------------
/static/styles/common/antd-mobile-config/config.less:
--------------------------------------------------------------------------------
1 | // 主题样式修改 https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
2 |
3 | @hd: 0.02rem;
4 | @color-text-base: #333;
5 | @brand-primary: #4c8dfc;
6 | @brand-primary-tap: #4681e6;
7 | @primary-button-fill-tap: #4681e6;
8 | @input-font-size: 0.28rem;
9 | @font-size-heading: 0.28rem;
10 | @h-spacing-sm: 0.1rem;
11 | @h-spacing-md: 0.2rem;
12 | @h-spacing-lg: 0.3rem;
13 | @v-spacing-xs: 0.05rem;
14 | @v-spacing-sm: 0.1rem;
15 | @v-spacing-md: 0.2rem;
16 | @v-spacing-lg: 0.3rem;
17 | @v-spacing-xl: 0.4rem;
18 |
--------------------------------------------------------------------------------
/store/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | import fetchOnce from './0-01-fetchOnce'
3 | import home from './1-01-home'
4 | import hotSearch from './1-02-hotSearch'
5 | import mySearch from './1-03-mySearch'
6 | import loansFilter from './2-01-loansFilter'
7 | import cardsHome from './3-01-cardsHome'
8 | import cardsFilter from './3-02-cardsFilter'
9 | import user from './4-01-user'
10 |
11 | export default combineReducers({
12 | fetchOnce,
13 | home,
14 | hotSearch,
15 | mySearch,
16 | loansFilter,
17 | cardsHome,
18 | cardsFilter,
19 | user,
20 | })
21 |
--------------------------------------------------------------------------------
/components/0-06-ErrorFetch.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Icon } from 'antd-mobile'
3 |
4 | export default class extends React.Component {
5 | componentDidMount() {
6 | console.info(this.props.err)
7 | }
8 | render() {
9 | return (
10 |
11 |
15 | )
16 | }
17 | }
18 |
19 |
--------------------------------------------------------------------------------
/components/0-15-DetailFoot.js:
--------------------------------------------------------------------------------
1 | import { Btn } from '@components'
2 |
3 | export default ({ isFavorite, onLike, onApply }) => (
4 | 无法显示页面
13 | 抱歉，服务器获取数据失败，请稍后再试！
14 |
5 | { isFavorite ? '已收藏' : '收藏' }}
10 | onClick={onLike}
11 | />
12 | 马上申请}
16 | onClick={onApply}
17 | />
18 |
19 | )
20 |
--------------------------------------------------------------------------------
/components/0-04-Nav.js:
--------------------------------------------------------------------------------
1 | import { ActiveLink } from '@components'
2 | import uuid from 'uuid/v4'
3 |
4 | const config = [
5 | {
6 | ico: 'i-home', text: '首页', href: '/index', as: '/',
7 | },
8 | {
9 | ico: 'i-loan', text: '贷款', href: '/1-loan/1-home', as: '/loan',
10 | },
11 | {
12 | ico: 'i-card', text: '信用卡', href: '/2-card/1-home', as: '/card',
13 | },
14 | {
15 | ico: 'i-user', text: '我的', href: '/3-me/1-home', as: '/me',
16 | },
17 | ]
18 |
19 | export default () => (
20 |
21 | {config.map(item =>
23 | )
24 |
--------------------------------------------------------------------------------
/components/0-02-Btn.js:
--------------------------------------------------------------------------------
1 | import { WrapLink } from '@components'
2 |
3 | export default ({
4 | ver, hor, btnClass, path, icoClass, con, ...rest
5 | }) => (
6 |
8 | {
9 | list.slice(0, 4).map((item, index) => (
10 |
16 |
19 | ))
20 | }
21 |
22 | )
23 |
--------------------------------------------------------------------------------
/.next/bundles/pages/_error.js:
--------------------------------------------------------------------------------
1 |
2 | window.__NEXT_REGISTER_PAGE('/_error', function() {
3 | var comp = module.exports=webpackJsonp([14],{454:function(e,t,l){e.exports=l(455)},455:function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var c=l(69),n=a(c),r=l(1),u=a(r),f=l(9);t.default=function(){return u.default.createElement("div",{className:"flex column ai-center jc-center plr25 ptb20 h-full"},u.default.createElement(n.default,{type:"cross-circle-o",className:"w100 h100",style:{fill:"#F13642"}}),u.default.createElement("div",{className:"font32 c333 ptb20"},"404"),u.default.createElement("div",{className:"font28 c999"},"访问的页面不存在，请 ",u.default.createElement(f.WrapLink,{href:"/",className:"font30 c-main"},"返回首页")))}}},[454]);
4 | return { page: comp.default }
5 | })
6 |
--------------------------------------------------------------------------------
/components/4-02-ChangeList.js:
--------------------------------------------------------------------------------
1 | import uuid from 'uuid/v4'
2 |
3 | export default ({
4 | title, types, stateVal, keyVal, onChange,
5 | }) => (
6 | types && types.length > 0 ?
7 |
8 |
: null
19 | )
20 |
--------------------------------------------------------------------------------
/components/1-03-LoanTypes.js:
--------------------------------------------------------------------------------
1 | import uuid from 'uuid/v4'
2 | import { WrapLink } from '@components'
3 |
4 | export default ({ list = [{ id: 0, title: '不限额度', description: '想贷就贷' }] }) => (
5 | {title}
9 |
10 |
18 |
11 |
14 |
17 | {types[types.findIndex(item => item.id === parseInt(stateVal, 0)) > -1 ? types.findIndex(item => item.id === parseInt(stateVal, 0)) : 0].name}
12 |
13 |
6 | {
7 | list.map((item, index) => (
8 |
14 |
21 | ))
22 | }
23 |
24 | )
25 |
--------------------------------------------------------------------------------
/components/1-04-SearchItem.js:
--------------------------------------------------------------------------------
1 | import uuid from 'uuid/v4'
2 | import { Btn } from '@components'
3 |
4 | export default ({
5 | title, list, onClick, border,
6 | }) => (
7 |
15 | {item.title}
16 |
17 |
18 | {item.description}
19 |
20 |
8 |
28 | )
29 |
--------------------------------------------------------------------------------
/static/scripts/hd.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(normal,e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]); flex(false,100, 1);
2 |
--------------------------------------------------------------------------------
/static/styles/common/base/plugin.scss:
--------------------------------------------------------------------------------
1 | // 插件样式的覆盖调整
2 | .am-list-item .am-input-extra {
3 | max-height: none;
4 | }
5 |
6 | .am-modal-close {
7 | top: 0.2rem;
8 | }
9 |
10 | .am-number-keyboard-wrapper table tr .am-number-keyboard-item {
11 | vertical-align: middle;
12 | }
13 |
14 | .change-input {
15 | .am-list-item.am-input-item {
16 | height: 0.5rem;
17 | min-height: 0.5rem;
18 | padding-left: 0.2rem;
19 | background: #ededed;
20 | border-radius: 0.04rem;
21 | .am-list-line {
22 | padding-right: 0.15rem;
23 | .am-input-label {
24 | color: #999;
25 | }
26 | .am-input-extra {
27 | font-size: 0.24rem;
28 | color: #666;
29 | }
30 | }
31 | }
32 | }
33 |
34 | .home-banner .slider-frame {
35 | height: 37.6vw!important;
36 | max-height: 3.76rem!important;
37 | }
38 |
39 | .am-steps-small .am-steps-item-title {
40 | font-size: 0.3rem;
41 | }
42 |
43 | .am-steps-label-vertical .am-steps-item-content {
44 | margin-top: 0.06rem;
45 | }
46 |
--------------------------------------------------------------------------------
/.next/dist/pages/_error.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _icon = require('antd-mobile/lib/icon');
8 |
9 | var _icon2 = _interopRequireDefault(_icon);
10 |
11 | var _react = require('react');
12 |
13 | var _react2 = _interopRequireDefault(_react);
14 |
15 | var _index = require('../components/index.js');
16 |
17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18 |
19 | exports.default = function () {
20 | return _react2.default.createElement('div', { className: 'flex column ai-center jc-center plr25 ptb20 h-full' }, _react2.default.createElement(_icon2.default, { type: 'cross-circle-o', className: 'w100 h100', style: { fill: '#F13642' } }), _react2.default.createElement('div', { className: 'font32 c333 ptb20' }, '404'), _react2.default.createElement('div', { className: 'font28 c999' }, '\u8BBF\u95EE\u7684\u9875\u9762\u4E0D\u5B58\u5728\uFF0C\u8BF7 ', _react2.default.createElement(_index.WrapLink, { href: '/', className: 'font30 c-main' }, '\u8FD4\u56DE\u9996\u9875')));
21 | };
--------------------------------------------------------------------------------
/store/reduxPage.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware, compose } from 'redux'
2 | import thunkMiddleware from 'redux-thunk'
3 | import logger from 'redux-logger'
4 | import withRedux from 'next-redux-wrapper'
5 | import apiMiddleware from './middleware/api'
6 | import rootReducers from './reducers'
7 |
8 | const composeEnhancers = compose // eslint-disable-line
9 |
10 | // 产品模式
11 | function configureStorePro(initialState) {
12 | const middlewares = [thunkMiddleware, apiMiddleware]
13 | const store = createStore(
14 | rootReducers,
15 | initialState,
16 | compose(applyMiddleware(...middlewares)),
17 | )
18 | return store
19 | }
20 |
21 | // 开发模式
22 | function configureStoreDev(initialState) {
23 | const middlewares = [thunkMiddleware, apiMiddleware, logger]
24 | const store = createStore(
25 | rootReducers,
26 | initialState,
27 | composeEnhancers(applyMiddleware(...middlewares)),
28 | )
29 | return store
30 | }
31 |
32 | const initStore = process.env.NODE_ENV === 'production' ? configureStorePro : configureStoreDev
33 |
34 | export default com => withRedux(initStore)(com)
35 |
36 | // export default initStore
37 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') // eslint-disable-line
2 |
3 | const { ANALYZE } = process.env
4 | const pro = process.env.NODE_ENV === 'production'
5 | const test = process.env.NODE_TEST === 'test'
6 |
7 | // 开发模式下的页面缓存
8 | // SSR页面缓存配置 https://github.com/zeit/next.js/blob/canary/examples/ssr-caching/server.js
9 |
10 | const onDemandEntries = {
11 | // period (in ms) where the server will keep pages in the buffer
12 | maxInactiveAge: 25 * 1000,
13 | // number of pages that should be kept simultaneously without being disposed
14 | pagesBufferLength: 2,
15 | }
16 |
17 | module.exports = {
18 | useFileSystemPublicRoutes: false,
19 | assetPrefix: pro ? (test ? '' : 'http://public.duduapp.net/finance/static') : '',
20 | ...(!pro && !test && { onDemandEntries }),
21 | exportPathMap: () => ({
22 | '/': { page: '/' },
23 | }),
24 | webpack: (config) => {
25 | if (ANALYZE) {
26 | config.plugins.push(new BundleAnalyzerPlugin({
27 | analyzerMode: 'server',
28 | analyzerPort: 7777,
29 | openAnalyzer: true,
30 | }))
31 | }
32 | return config
33 | },
34 | }
35 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | .next
8 | .next/
9 | outCDN
10 |
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | *.pid.lock
16 |
17 | # Directory for instrumented libs generated by jscoverage/JSCover
18 | lib-cov
19 |
20 | # Coverage directory used by tools like istanbul
21 | coverage
22 |
23 | # nyc test coverage
24 | .nyc_output
25 |
26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
27 | .grunt
28 |
29 | # Bower dependency directory (https://bower.io/)
30 | bower_components
31 |
32 | # node-waf configuration
33 | .lock-wscript
34 |
35 | # Compiled binary addons (http://nodejs.org/api/addons.html)
36 | build/Release
37 |
38 | # Dependency directories
39 | node_modules/
40 | jspm_packages/
41 |
42 | # Typescript v1 declaration files
43 | typings/
44 |
45 | # Optional npm cache directory
46 | .npm
47 |
48 | # Optional eslint cache
49 | .eslintcache
50 |
51 | # Optional REPL history
52 | .node_repl_history
53 |
54 | # Output of 'npm pack'
55 | *.tgz
56 |
57 | # Yarn Integrity file
58 | .yarn-integrity
59 |
60 | # dotenv environment variables file
61 | .env
62 |
63 |
--------------------------------------------------------------------------------
/utils/03-http.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | // axios config https://github.com/axios/axios#request-config
3 | // const myApi = 'https://www.easy-mock.com/mock/58fff6e5739ac1685205acb1/data/'
4 |
5 | // 'http://jr.duduapp.net/api/' : 'http://192.168.1.116/api/'
6 | const pro = process.env.NODE_ENV === 'production'
7 | const test = process.env.NODE_TEST === 'test'
8 |
9 | const callApi = (url, method, data, isServer = false, options = {}) => {
10 | const opts = { ...options }
11 | return axios(Object.assign({}, {
12 | baseURL: isServer ? ((pro && !test) ? 'http://jr.duduapp.net/api/' : 'http://jr.duduapp.net/api/') : '/api/',
13 | url,
14 | method,
15 | params: method === 'get' ? data : {}, // 添加在请求URL后面的参数
16 | data: method !== 'get' ? data : {}, // 适用于 PUT POST PATCH
17 | withCredentials: true, // 请求时是否携带cookie
18 | }, opts)).then(data => data.data)
19 | }
20 |
21 | export default {
22 | callApi,
23 | get: (url, data = {}, isServer) => callApi(url, 'get', data, isServer),
24 | put: (url, data = {}, isServer) => callApi(url, 'put', data, isServer),
25 | post: (url, data = {}, isServer) => callApi(url, 'post', data, isServer),
26 | delete: (url, data = {}, isServer) => callApi(url, 'delete', data, isServer),
27 | }
28 |
--------------------------------------------------------------------------------
/static/styles/common/custom/animation.scss:
--------------------------------------------------------------------------------
1 | // 公用的动画样式
2 | // https://daneden.github.io/animate.css/
3 |
4 | .bounceIn {
5 | animation-name: bounceIn;
6 | animation-duration: .75s;
7 | }
8 |
9 | @keyframes bounceIn {
10 | from, 20%, 40%, 60%, 80%, to {
11 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
12 | }
13 |
14 | 0% {
15 | opacity: 0;
16 | transform: scale3d(.3, .3, .3);
17 | }
18 |
19 | 20% {
20 | transform: scale3d(1.1, 1.1, 1.1);
21 | }
22 |
23 | 40% {
24 | transform: scale3d(.9, .9, .9);
25 | }
26 |
27 | 60% {
28 | opacity: 1;
29 | transform: scale3d(1.03, 1.03, 1.03);
30 | }
31 |
32 | 80% {
33 | transform: scale3d(.97, .97, .97);
34 | }
35 |
36 | to {
37 | opacity: 1;
38 | transform: scale3d(1, 1, 1);
39 | }
40 | }
41 |
42 | // 旋转
43 | .rotate {
44 | animation: rotate360 1s linear infinite;
45 | }
46 | @keyframes rotate360 {
47 | from {
48 | transform: rotate(0);
49 | }
50 | to {
51 | transform: rotate(360deg);
52 | }
53 | }
54 |
55 | .transition {
56 | transition: all 1s;
57 | transition-timing-function:ease-in;
58 | }
59 |
60 | .search-btn-ani {
61 | transition: margin-right 0.3s, opacity 0.3s;
62 | transition-delay: 0.1s;
63 | }
64 |
--------------------------------------------------------------------------------
/components/1-01-Message.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Carousel } from 'antd-mobile'
3 | import uuid from 'uuid/v4'
4 | import { Btn } from '@components'
5 |
6 | export default ({ list = ['欢迎来到嘟嘟e贷'] }) => (
7 | {title}
9 |
10 | {
11 | list.map(item => (
12 |
19 | {item.content ? item.content.substring(0, 9) : item.substring(0, 9)}
20 |
21 | }
22 | onClick={() => onClick(item.content || item)}
23 | />
24 | ))
25 | }
26 |
27 |
8 |
26 | {list.map(item => (
27 |
36 | 我要贷}
44 | />
45 |
46 | )
47 |
--------------------------------------------------------------------------------
/pages/3-me/5-about.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { setShare } from '@utils'
3 | import { Layout } from '@components'
4 |
5 | export default class extends Component {
6 | componentDidMount() {
7 | setShare({
8 | title: '嘟嘟e贷',
9 | desc: '关于我们',
10 | })
11 | }
12 | render() {
13 | return (
14 |
32 | {item}
33 |
34 | ))}
35 |
16 |
25 |
17 |
18 |
19 |
20 |
21 |
24 | 线
22 | 一站式专业贷款服务平台
23 |
26 | 官方邮箱：xc@duduapp.net
27 | 商务合作：13253595612 28 |
29 |
30 | 27 | 商务合作：13253595612 28 |
39 | {children}
40 |
41 | )
42 | }
43 | }
44 |
45 |
--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
1 | import Document, { Head, Main, NextScript } from 'next/document'
2 |
3 | const pro = process.env.NODE_ENV === 'production'
4 | const test = process.env.NODE_TEST === 'test'
5 | const path = pro ? (test ? '' : 'http://public.duduapp.net/finance/static') : ''
6 |
7 | export default class MyDocument extends Document {
8 | static getInitialProps({ renderPage }) {
9 | const {
10 | html, head, errorHtml, chunks,
11 | } = renderPage()
12 | return {
13 | html, head, errorHtml, chunks,
14 | }
15 | }
16 | render() {
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
33 |
34 | { title }
35 |
36 | { children }
37 |
38 | )
39 | }
40 | }
41 |
42 | // export default ({ children, title = 'This is the default title' }) => (
43 | //
44 | //
45 | // { title }
46 | //
47 | // { children }
48 | //
49 | // )
50 |
--------------------------------------------------------------------------------
/static/styles/common/custom/color.scss:
--------------------------------------------------------------------------------
1 | // 公用的颜色样式
2 | // 字体色
3 |
4 | // #aaa 到 #eee
5 | $base-color-list: a, b, c, d, e;
6 | @each $i in $base-color-list {
7 | .c-#{$i}#{$i}#{$i} {
8 | color: #{'#'}#{$i}#{$i}#{$i}
9 | }
10 | }
11 |
12 | // #333 主标题
13 | // #999 副标题
14 | // #666 内容文字
15 | @for $i from 1 through 3 {
16 | .c#{$i*3}#{$i*3}#{$i*3} {
17 | color: #{'#'}#{$i*3}#{$i*3}#{$i*3}
18 | }
19 | }
20 |
21 | // 网站基础颜色
22 | $color-list: (
23 | main: #4c8dfc,
24 | second: #ff764c,
25 | inverse: #c8dcff,
26 | big-blue: #e7feff,
27 | body: #f3f3f3,
28 | border: #ededed,
29 | tip: #ff8a2b,
30 | white: #fff,
31 | );
32 | @each $key, $val in $color-list {
33 | .c-#{$key} {
34 | color: $val;
35 | }
36 | .bg-#{$key} {
37 | background-color: $val;
38 | }
39 | }
40 | .bg-ccc {
41 | background-color: #ccc;
42 | }
43 | .bg-light-yellow {
44 | background-color: #f8f3d4;
45 | }
46 | .c-me-star {
47 | color: #ffbf17;
48 | }
49 | .c-me-invite {
50 | color: #3ac992;
51 | }
52 | .c-me-about {
53 | color: #f29d52;
54 | }
55 |
56 | .box {
57 | max-width: 10rem;
58 | margin-left: auto;
59 | margin-right: auto;
60 | }
61 |
62 | .border-top {
63 | border-top: 1px solid #ddd;
64 | }
65 |
66 | .border-bottom {
67 | border-bottom: 1px solid #ddd;
68 | &:last-child {
69 | border-bottom: none;
70 | }
71 | }
72 |
73 | .border-bottom-one {
74 | border-bottom: 1px solid #ddd;
75 | }
76 |
77 | .border-right {
78 | border-right: 1px solid #ddd;
79 | }
80 |
81 | input::placeholder {
82 | color: #999
83 | }
84 | input:disabled {
85 | background: none;
86 | color: #4c8dfc;
87 | }
88 |
--------------------------------------------------------------------------------
/store/middleware/api.js:
--------------------------------------------------------------------------------
1 | import { CALL_API, http } from '@utils'
2 |
3 | export default store => next => (action) => {
4 | const callAPI = action[CALL_API]
5 | if (typeof callAPI === 'undefined') {
6 | return next(action)
7 | }
8 |
9 | // 注意，总共五个参数
10 | let { endpoint } = callAPI
11 | const {
12 | types, params, method = 'get', options,
13 | } = callAPI
14 |
15 | if (typeof endpoint === 'function') {
16 | endpoint = endpoint(store.getState())
17 | }
18 | if (typeof endpoint !== 'string') {
19 | throw new Error('Specify a string endpoint URL.')
20 | }
21 | if (!Array.isArray(types) || types.length !== 3) {
22 | throw new Error('Expected an array of three action types.')
23 | }
24 | if (!types.every(type => typeof type === 'string')) {
25 | throw new Error('Expected action types to be strings.')
26 | }
27 | const actionWith = (data) => {
28 | const finalAction = Object.assign({}, action, data)
29 | delete finalAction[CALL_API]
30 | return finalAction
31 | }
32 | const [requestType, successType, failureType] = types
33 | // 开始请求
34 | next(actionWith({ type: requestType }))
35 | // 异步处理
36 | return http.callApi(endpoint, method, params, options).then((response) => {
37 | // 根据我司数据接口特点特此改造
38 | if (response.code === 200 && response.success) {
39 | next(actionWith({
40 | type: successType,
41 | response: response.data,
42 | }))
43 | } else {
44 | next(actionWith({
45 | type: failureType,
46 | err: response.msg || '请求错误',
47 | }))
48 | }
49 | }).catch((err) => {
50 | next(actionWith({
51 | type: failureType,
52 | err,
53 | }))
54 | })
55 | }
56 |
--------------------------------------------------------------------------------
/store/actions/index.js:
--------------------------------------------------------------------------------
1 | import { CALL_API } from '@utils'
2 |
3 | // 异步动作生成函数
4 | const requestTypes = ['_REQUEST', '_SUCCESS', '_FAIL']
5 | function createRequestTypes(base) {
6 | return requestTypes.map(item => base + item)
7 | }
8 |
9 | // 请求一次
10 | export const FETCH_ONCE = 'FETCH_ONCE'
11 | export const fetchOnce = () => ({
12 | type: FETCH_ONCE,
13 | })
14 |
15 | // 首页
16 | // 获取首页数据
17 | export const HOME = 'HOME'
18 | export const getHome = payload => ({
19 | type: HOME,
20 | payload,
21 | })
22 |
23 | // 获取热门搜索
24 | export const HOT_SEARCH = 'HOT_SEARCH'
25 | export const getHotSearch = payload => ({
26 | type: HOT_SEARCH,
27 | payload,
28 | })
29 |
30 | // 本地获取我的近期搜索
31 | export const GET_MY_SEARCH = 'GET_MY_SEARCH'
32 | export const getMySearch = payload => ({
33 | type: GET_MY_SEARCH,
34 | payload,
35 | })
36 |
37 | // 贷款
38 | // 贷款过滤条件
39 | export const LOANS_FILTER = 'LOANS_FILTER'
40 | export const getLoansFilter = payload => ({
41 | type: LOANS_FILTER,
42 | payload,
43 | })
44 |
45 | // 信用卡
46 | // 信用卡首页数据
47 | export const CARDS_HOME = 'CARDS_HOME'
48 | export const getCardsHome = payload => ({
49 | type: CARDS_HOME,
50 | payload,
51 | })
52 |
53 | // 信用卡过滤条件
54 | export const CARDS_FILTER = 'CARDS_FILTER'
55 | export const getCardsFilter = payload => ({
56 | type: CARDS_FILTER,
57 | payload,
58 | })
59 |
60 | // 个人中心
61 | // 获取用户信息
62 | export const USER = 'USER'
63 | export const getUser = payload => ({
64 | type: USER,
65 | payload,
66 | })
67 |
68 | // 退出登陆
69 | export const LOGOUT = 'LOGOUT'
70 | export const getOut = () => ({ type: LOGOUT })
71 |
72 | // 模板
73 | // export const EXAMPLE = createRequestTypes('EXAMPLE')
74 | // export const getExample = (id) => ({
75 | // [CALL_API]: {
76 | // types: EXAMPLE,
77 | // endpoint: `loans_filter`,
78 | // params: { id }， // 可选
79 | // method: 'put', // 可选，默认get
80 | // toast: ['处理中', '处理成功', '处理失败'], // 可选
81 | // options: { headers: { Authorization: `Bearer ${token}` } } // 可选
82 | // },
83 | // })
84 |
--------------------------------------------------------------------------------
/.next/manifest.js:
--------------------------------------------------------------------------------
1 | !function(e){function n(r){if(s[r])return s[r].exports;var t=s[r]={i:r,l:!1,exports:{}},o=!0;try{e[r].call(t.exports,t,t.exports,n),o=!1}finally{o&&delete s[r]}return t.l=!0,t.exports}var r=window.webpackJsonp;window.webpackJsonp=function(s,o,a){for(var u,l,c,i=0,d=[];i
18 |
19 | {text || '加载中...'}
20 |
21 | )
22 | ```
23 | - redux，初始化的redux数据，统一写在每个page的getInitialProps生命周期里，它的特点是可以在服务端渲染和客户端渲染中都能使用。更多细节都在源码里，欢迎交流探讨。
24 | - 部署上线，这是个同构项目，需要配置服务器node环境，在 server.js 文件里，笔者开启了服务端页面缓存，但对于有用户数据的页面则是选择了关闭缓存，避免串号问题，另外在 next.config.js 文件里，通过设置 assetPrefix ，将所有静态资源放入CDN中，进一步提高网站首屏渲染速度。CDN 中的静态资源需要手动导出，运行 `npm run export`，资源将被打包到根目录下的 outCDN 中。
25 | ## License
26 | MIT
27 |
--------------------------------------------------------------------------------
/static/styles/common/custom/size.scss:
--------------------------------------------------------------------------------
1 | // scss 语法参考 http://www.w3cplus.com/sassguide/syntax.html
2 | // 公用的间距样式
3 | // 通用的padding margin值 从0.05rem到0.3rem 步进为5
4 | @for $i from 1 through 6 {
5 | .ptb#{$i * 5}, .pt#{$i * 5} {
6 | padding-top: $i * 5 * 0.01rem
7 | }
8 | .ptb#{$i * 5}, .pb#{$i * 5} {
9 | padding-bottom: $i * 5 * 0.01rem;
10 | }
11 | .plr#{$i * 5}, .pl#{$i * 5} {
12 | padding-left: $i * 5 * 0.01rem;
13 | }
14 | .plr#{$i * 5}, .pr#{$i * 5} {
15 | padding-right: $i * 5 * 0.01rem;
16 | }
17 | .mt#{$i * 5} {
18 | margin-top: $i * 5 * 0.01rem;
19 | }
20 | .mb#{$i * 5} {
21 | margin-bottom: $i * 5 * 0.01rem;
22 | }
23 | .ml#{$i * 5} {
24 | margin-left: $i * 5 * 0.01rem;
25 | }
26 | .mr#{$i * 5} {
27 | margin-right: $i * 5 * 0.01rem;
28 | }
29 | }
30 |
31 | .mr12 {
32 | margin-right: 0.12rem;
33 | }
34 | .mb50 {
35 | margin-bottom: 0.5rem;
36 | }
37 |
38 | //通用的字体大小 从 8 到 48，步进为2
39 | @for $i from 4 through 24 {
40 | .font#{$i * 2} {
41 | font-size: $i * 2 * 0.01rem;
42 | }
43 | }
44 |
45 | .font56 {
46 | font-size: 0.56rem;
47 | }
48 |
49 | // 宽度，高度
50 | // 宽高，从0.2rem 到 1.2rem, 步进为2px
51 | @for $i from 10 through 60 {
52 | .h#{$i * 2} {
53 | height: $i * 2 * 0.01rem;
54 | }
55 | .w#{$i * 2} {
56 | width: $i * 2 * 0.01rem;
57 | }
58 | }
59 | .w130 {
60 | width: 1.3rem;
61 | }
62 | .w140 {
63 | width: 1.4rem;
64 | }
65 | .w160 {
66 | width: 1.6rem;
67 | }
68 | .w182 {
69 | width: 1.82rem;
70 | }
71 | .w200 {
72 | width: 2rem;
73 | }
74 | .w-100 {
75 | width: 100%;
76 | }
77 |
78 | .h-100 {
79 | height: 100%;
80 | }
81 |
82 | .h-full {
83 | height: 100vh;
84 | min-height: 9.6rem
85 | }
86 |
87 | // radius，从0.02rem 到 0.12rem, 步进为 0.02
88 | @for $i from 1 through 6 {
89 | .r#{$i * 2} {
90 | border-radius: $i * 2 * 0.01rem;
91 | }
92 | }
93 | .r35 {
94 | border-radius: 0.35rem;
95 | }
96 | // 为了实现左右圆角
97 | .r100 {
98 | border-radius: 1rem;
99 | }
100 | .circle {
101 | border-radius: 50%;
102 | }
103 |
--------------------------------------------------------------------------------
/components/0-05-WithData.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { ErrorFetch } from '@components'
3 | import reduxPage from '@reduxPage'
4 | import {
5 | fetchOnce,
6 | getHome,
7 | getHotSearch,
8 | getLoansFilter,
9 | getCardsHome,
10 | getCardsFilter,
11 | } from '@actions'
12 | import { http } from '@utils'
13 |
14 | const util = require('util')
15 |
16 | const wrap = ChildComponent =>
17 | class extends React.Component {
18 | // ctx 里都有什么
19 | // err req res pathname query asPath isServer
20 | static async getInitialProps(ctx) {
21 | const {
22 | store, pathname, query, asPath,
23 | } = ctx
24 | if (!store.getState().fetchOnce) {
25 | try {
26 | const homeFetch = await http.callApi('home', 'get', {}, ctx)
27 | const searchFetch = await http.callApi('search', 'get', {}, ctx)
28 | const loansFilterFetch = await http.callApi('loans_filter', 'get', {}, ctx)
29 | const cardsFetch = await http.callApi('cards', 'get', {}, ctx)
30 | const cardsFilterFetch = await http.callApi('cards_filter', 'get', {}, ctx)
31 |
32 | const homeData = homeFetch.data
33 | const searchData = searchFetch.data
34 | const loansFilterData = loansFilterFetch.data
35 | const cardsData = cardsFetch.data
36 | const cardsFilterData = cardsFilterFetch.data
37 |
38 | store.dispatch(fetchOnce())
39 | store.dispatch(getHome(homeData))
40 | store.dispatch(getHotSearch(searchData))
41 | store.dispatch(getLoansFilter(loansFilterData))
42 | store.dispatch(getCardsHome(cardsData))
43 | store.dispatch(getCardsFilter(cardsFilterData))
44 | } catch (error) {
45 | // ctx.res.statusCode = 404
46 | // ctx.res.end('Not found')
47 | const err = util.inspect(error)
48 | return { err }
49 | }
50 | }
51 | return { pathname, query, asPath }
52 | }
53 | render() {
54 | if (this.props.err) {
55 | return
13 |
56 |
57 |
14 |
52 |
18 | })
23 |
24 |
23 |
25 |
51 |
26 | {data.name}
27 |
28 | {
29 | data.isLoan ?
30 |
31 |
32 | {data.interest_rate_method}费率：{data.interest_rate}%
33 |
34 |
:
35 |
36 | {
37 | data.cash_withdrawal_ratio &&
38 | 提现：{data.cash_withdrawal_ratio}%
39 | }
40 | {
41 | data.free_of_interest_period_end &&
42 | 免息：{data.free_of_interest_period}天
43 | }
44 |
45 | }
46 | {
47 | data.created_at &&
48 | {data.type === 'favorite' ? '收藏' : '浏览'}时间：{distanceInWordsToNow(data.created_at, { locale: cn })}前
49 | }
50 |
53 |
54 |
55 |
6 |
12 |
23 |
70 | )
71 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-ssr",
3 | "version": "1.0.0",
4 | "description": "react ssr",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "node server.js",
8 | "build": "rimraf .next && next build",
9 | "export": "rimraf outCDN && next export -o outCDN",
10 | "start": "cross-env NODE_ENV=production node server.js",
11 | "start-test": "cross-env NODE_ENV=production NODE_TEST=test node server.js",
12 | "analyze": "cross-env ANALYZE=1 next build",
13 | "css": "npm run css:build && npm run css:clean",
14 | "css:build": "webpack --config webpack-handle-css.js --progress --color",
15 | "css:clean": "rimraf static/styles/antd_mobile_min.js static/styles/app_min.js",
16 | "css:dev": "webpack --config webpack-handle-css.js --watch --progress --color"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/minooo/react-ssr.git"
21 | },
22 | "keywords": [
23 | "react",
24 | "next",
25 | "redux",
26 | "antd-mobile"
27 | ],
28 | "author": "minooo",
29 | "license": "ISC",
30 | "bugs": {
31 | "url": "https://github.com/minooo/react-ssr/issues"
32 | },
33 | "homepage": "https://github.com/minooo/react-ssr#readme",
34 | "dependencies": {
35 | "antd-mobile": "^2.1.2",
36 | "axios": "^0.17.1",
37 | "babel-eslint": "^8.0.3",
38 | "babel-plugin-import": "^1.6.3",
39 | "babel-plugin-module-resolver": "^3.0.0",
40 | "chart.js": "^2.7.1",
41 | "cookie": "^0.3.1",
42 | "date-fns": "^1.29.0",
43 | "eslint": "^4.13.1",
44 | "eslint-config-airbnb": "^16.1.0",
45 | "eslint-import-resolver-babel-module": "^4.0.0",
46 | "eslint-import-resolver-webpack": "^0.8.3",
47 | "eslint-plugin-babel": "^4.1.2",
48 | "eslint-plugin-import": "^2.7.0",
49 | "eslint-plugin-jsx-a11y": "^6.0.2",
50 | "eslint-plugin-react": "^7.4.0",
51 | "koa": "^2.4.1",
52 | "koa-route": "^3.2.0",
53 | "koa-session": "^5.5.1",
54 | "lodash": "^4.17.4",
55 | "lru-cache": "^4.1.1",
56 | "next": "^4.2.3",
57 | "next-redux-wrapper": "^1.3.5",
58 | "react": "^16.2.0",
59 | "react-dom": "^16.2.0",
60 | "react-redux": "^5.0.6",
61 | "redux": "^3.7.2",
62 | "redux-logger": "^3.0.6",
63 | "redux-thunk": "^2.2.0",
64 | "uuid": "^3.1.0",
65 | "webpack": "^3.10.0"
66 | },
67 | "devDependencies": {
68 | "babel-core": "^6.26.0",
69 | "babel-loader": "^7.1.2",
70 | "babel-plugin-transform-decorators-legacy": "^1.3.4",
71 | "babel-plugin-transform-runtime": "^6.23.0",
72 | "css-loader": "^0.28.7",
73 | "extract-text-webpack-plugin": "^3.0.2",
74 | "file-loader": "^1.1.6",
75 | "less": "^2.7.3",
76 | "less-loader": "^4.0.5",
77 | "node-sass": "^4.7.2",
78 | "postcss-loader": "^2.0.9",
79 | "sass-loader": "^6.0.6",
80 | "style-loader": "^0.19.1",
81 | "url-loader": "^0.6.2",
82 | "webpack-bundle-analyzer": "^2.9.1"
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/pages/3-me/3-favorite.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { connect } from 'react-redux'
3 | import Router from 'next/router'
4 | import cookie from 'cookie'
5 | import reduxPage from '@reduxPage'
6 | import { http, setShare } from '@utils'
7 | import { getUser } from '@actions'
8 | import {
9 | Layout,
10 | ErrorFetch,
11 | ScrollLoad,
12 | MeProductList,
13 | } from '@components'
14 |
15 | const util = require('util')
16 | @reduxPage
17 | @connect(({ user }) => ({ user }))
18 |
19 | export default class extends Component {
20 | static async getInitialProps(ctx) {
21 | // err req res pathname query asPath isServer
22 | const {
23 | store, req, res, isServer,
24 | } = ctx
25 |
26 | try {
27 | let allCookie
28 | let token
29 | if (req) {
30 | allCookie = req.headers.cookie
31 | token = cookie.parse(String(allCookie)).userToken
32 | } else {
33 | allCookie = document.cookie
34 | token = cookie.parse(String(allCookie)).userToken
35 | }
36 |
37 | // 检测token是否有效
38 | const response = await http.get('user_info', { token }, isServer)
39 | if (response.code === 200 && response.success) {
40 | store.dispatch(getUser(response.data.user))
41 | } else {
42 | res.writeHead(301, {
43 | Location: '/login',
44 | })
45 | res.end()
46 | res.finished = true
47 | }
48 | } catch (error) {
49 | const err = util.inspect(error)
50 | return { err }
51 | }
52 | return null
53 | }
54 | state = {
55 | dataParam: null,
56 | }
57 | componentWillMount() {
58 | if (this.props.err) {
59 | Router.replace('/3-me/2-login', '/login')
60 | }
61 | }
62 | componentDidMount() {
63 | if (this.props.user.phone) {
64 | this.setParam()
65 | }
66 | setShare({
67 | title: '我在嘟嘟e贷',
68 | desc: '我的收藏',
69 | })
70 | }
71 | componentWillReceiveProps(nextProps) {
72 | if (!this.props.user.phone && nextProps.user.phone) {
73 | this.setParam()
74 | }
75 | }
76 | setParam = () => {
77 | const docCookie = document.cookie
78 | const token = cookie.parse(String(docCookie)).userToken
79 | this.setState(() => ({ dataParam: { token } }))
80 | }
81 | render() {
82 | const { dataParam } = this.state
83 | const { err } = this.props
84 | if (err) {
85 | return {list[0].name}
13 | {list[0].description}
14 |
20 | })
21 |
22 |
21 |
24 |
30 |
46 |
52 |
68 |
69 | {list[1].name}
31 |
32 |
45 | {list[1].description}
33 |
42 | })
43 |
44 |
43 | {list[2].name}
53 |
54 |
67 | {list[2].description}
55 |
64 | })
65 |
66 |
65 | 热门
: null}
12 |
13 |
68 |
14 |
63 |
18 |
23 |
24 |
23 |
25 |
62 |
26 | {data.name}
27 |
28 | {
29 | data.isLoan ?
30 |
31 |
32 | {data.interest_rate_method}费率：{data.interest_rate}%
33 |
34 |
:
35 |
36 | {
37 | data.cash_withdrawal_ratio &&
38 | 提现：{data.cash_withdrawal_ratio}%
39 | }
40 | {
41 | data.free_of_interest_period_end &&
42 | 免息：{data.free_of_interest_period_end}天
43 | }
44 |
45 | }
46 | {
47 | data.isLoan && data.apply_material_name && data.apply_material_name.length > 0 &&
48 |
49 | {
50 | data.apply_material_name.map((item, index) => (
51 |
55 | {item}
56 |
57 | ))
58 | }
59 |
60 | }
61 |
64 |
67 | {data.apply_num}人申请
65 | { data.isLoan && {clipBigNum(data.sum_start)}-{clipBigNum(data.sum_end)}
}
66 | {data.description}
69 |
96 |
106 |
97 | this.textarea = ele}
99 | rows={5}
100 | count={100}
101 | onChange={this.onChange}
102 | placeholder="亲，请留下您的宝贵意见。"
103 | />
104 |
105 | this.scrollDiv = ele}
85 | >
86 | {children}
87 | {listData.length > 0 && listData.map(item =>
108 | )
109 | }
110 | }
111 |
112 | /*
113 | * 示例用法
114 | * className listClass dataParam take noDataIco 为非必需参数
115 | {renderRow(item)}
)}
88 | {
89 | netBad ?
90 |
91 |
:
94 | (dataNoMore ?
95 | (
96 | listData.length > 0 ?
97 | 抱歉，网络请求错误，请稍后再试！
92 | 重新加载
93 |
62 | {
63 | currentTitle && currentTitle.length > 0 && currentTitle.map((item, index) => (
64 | {item.title}}
71 | onClick={() => this.onTitleClick(item.key, index)}
72 | />
73 | ))
74 | }
75 | {
76 | focus !== -1 && currentSelectList &&
77 |
114 | }
115 | {
116 | focus !== -1 &&
117 |
86 | {
87 | currentSelectList.list && currentSelectList.list.length > 0 &&
88 | currentSelectList.list.map(item => (
89 | doc.key === currentSelectList.key && doc.id === item.id) ? 'c-main' : 'c666'}`}
97 | >{item.title}
98 |
:
99 |
100 |
108 | }
109 | onClick={() => this.onSelectClick(currentSelectList.key, item.id, item.title, item.banner)}
110 | />
111 | ))
112 | }
113 | doc.key === currentSelectList.key && doc.id === item.id) ? 'c-main' : 'c666'}`}
103 | >
104 | {item.title}
105 |
106 | {item.description}
107 |
53 |
124 |
125 |
54 |
56 | {cardsHome.recommends && cardsHome.recommends.length > 2 && 今日推荐
55 |
59 | 全部}
67 | />
68 |
69 | 银行中心
60 |
70 | {
71 | cardsHome.banks && cardsHome.banks.length > 0 && cardsHome.banks.slice(0, 5).map(item => (
72 |
79 |
84 | ))
85 | }
86 |
87 |
80 | })
81 |
82 | {item.name}
83 |
81 |
88 | {
89 | cardsHome.banks && cardsHome.banks.length > 4 && cardsHome.banks.slice(5, 10).map(item => (
90 |
97 |
102 | ))
103 | }
104 |
105 |
106 |
98 |
99 |
100 | {item.name}
101 |
99 |
107 | 全部}
115 | />
116 |
117 | {
118 | cardsHome.cards && cardsHome.cards.length > 0 && cardsHome.cards.slice(0, 3).map((item, index) => (
119 | 热卡排行
108 |
142 |
153 | }
154 |
150 | })
151 |
152 |
151 |
60 | 全部贷款产品}
122 | />
123 | {/* 热门信用卡 */}
124 | 全部信用卡产品}
140 | />
141 |
146 |
147 |
72 | {/* banner图 */}
73 |
83 | {
84 | home.tui_loans_banner && home.tui_loans_banner.length > 0 && home.tui_loans_banner.map(item => (
85 |
90 | })
91 |
92 | ))
93 | }
94 |
95 | {/* 消息轮播 */}
96 |
100 |
101 | {/* 各种贷款额度 */}
102 |
91 |
97 |
99 | 热门贷款推荐
107 | {
108 | home.hot_loans && home.hot_loans.map((item, index) => (
109 |
110 |
113 | ))
114 | }
115 | 热门信用卡推荐
125 | {
126 | home.hot_cards && home.hot_cards.map((item, index) => (
127 |
128 |
131 | ))
132 | }
133 |
142 |
145 | 嘟嘟e贷出品
143 | DD Finance
144 |
95 |
153 |
154 |
99 | {/*
107 |
108 | {user.name ? user.name : user.phone}
106 |
109 | {
110 | list.map(item => (
111 |
117 |
126 | ))
127 | }
128 |
133 |
141 |
142 |
143 |
144 |
118 |
119 | {item.text[0]}
120 |
121 |
122 | {item.text[1]}
123 |
124 |
125 |
134 |
137 |
138 |
139 |
140 |
145 | 退出登录}
149 | onClick={this.onLogout}
150 | />
151 |
152 |
135 |
136 |
137 |
139 |
181 |
182 |
183 |
184 |
140 |
145 |
141 |
142 |
143 |
144 | -
146 |
174 | this.onSwitchAgree(e)}>
175 | 我已阅读并同意
176 |
177 |
178 |
179 |
180 |
132 | this.search = ele}
134 | placeholder="请输入您要找的产品名称"
135 | style={{ paddingLeft: '0.6rem', lineHeight: '0.54rem' }}
136 | className="block h54 r6 bg-input pr20 reset equal c333"
137 | type="search"
138 | onInput={this.onChange}
139 | onFocus={this.onFocus}
140 | onBlur={this.onBlur}
141 | onKeyPress={this.onKeyPress}
142 | />
143 |
149 |
156 |
157 |
158 | {
159 | hasSearched && cards.length === 0 && loans.length === 0 &&
160 |
195 |
161 | 很抱歉，没有找到
162 | {
163 | this.search.value.trim() ?
164 | 与{this.search.value.trim()}相关的结果。 :
165 | '相关结果。'
166 | }
167 | 请尝试其他关键词。
168 |
169 | }
170 | {
171 | cards.length === 0 && loans.length === 0 && mySearch && mySearch.length > 0 &&
172 | 搜索结果-贷款
180 | }
181 | {
182 | loans.length > 0 && loans.map(item => (
183 | 搜索结果-信用卡
188 | }
189 | {
190 | cards.length > 0 && cards.map(item => (
191 |
167 | 根据您的贷款需求，我们将为您智能匹配适合的产品
168 |
169 | }
170 | {
171 | !isResult &&
172 |
173 |
186 | }
187 | {
188 | !isResult &&
189 |
174 |
183 | 贷款金额
175 | this.loanSize = ele}
179 | className="block equal reset text-right pl30 pr5 font28 c-main"
180 | />
181 | 元
182 |
209 | {
210 | (results && results.length > 0) ?
211 | results.map(item =>
215 | }
216 | {
217 | isResult &&
218 |
121 |
213 |
125 |
129 |
130 |
126 | })
127 |
128 |
127 |
131 |
134 |
135 |
136 | {detail.name || '标题'}
132 | {detail.description || '描述'}
133 |
137 |
139 | 基本信息
138 |
140 | {
141 | detail.organization &&
142 |
166 |
167 |
168 |
143 |
146 | }
147 | 发卡组织:
144 | {detail.organization}
145 |
148 |
151 | {
152 | detail.level &&
153 | 币彩蛋种:
149 | {detail.currency || '人民币'}
150 |
154 |
157 | }
158 | {
159 | detail.free_of_interest_period &&
160 | 等彩蛋级:
155 | {detail.level}
156 |
161 |
164 | }
165 | 免 息 期:
162 | {detail.free_of_interest_period}
163 |
169 |
171 | 优惠特权
170 |
172 | {
173 | detail.privilege ?
174 |
175 | : '即将来袭，敬请期待！'
176 | }
177 |
178 |
179 |
180 |
181 |
183 | 费用信息
182 |
184 | {
185 | detail.yearFee &&
186 |
210 |
211 |
212 |
187 |
190 | }
191 | {
192 | detail.cash_withdrawal_ratio &&
193 | 年大彩蛋费:
188 | {detail.yearFee}
189 |
194 |
197 | }
198 | {
199 | detail.repayment_staging &&
200 | 提大彩蛋现:
195 | {detail.cash_withdrawal_ratio}%
196 |
201 |
204 | }
205 | 还款及分期:
202 | {detail.repayment_staging}
203 |
206 |
209 | 积 分 规 则:
207 | {detail.integral_rule || '近期推出'}
208 |
238 |
398 |
239 |
264 |
265 |
240 |
263 |
241 |
256 | {
257 | detail.apply_material_name && detail.apply_material_name.length > 0 &&
258 |
242 |
250 |
243 | })
244 |
245 |
244 |
246 |
249 | {detail.name}
247 | {detail.description}
248 |
253 | {detail.apply_num}人申请
254 |
255 |
259 | {detail.apply_material_name.map(item =>
261 | }
262 | {item}
)}
260 |
266 |
279 |
280 |
267 |
270 | {detail.cycle}
268 | 办理周期
269 |
271 |
274 | {detail.payment_method}
272 | 还款方式
273 |
275 |
278 | {detail.interest_rate}%
276 | 参考{detail.interest_rate_method}利率
277 |
281 |
359 |
360 |
361 |
282 |
319 |
283 | this.money = ele}
289 | value={money}
290 | onChange={this.onMoneyChange}
291 | onBlur={this.onBlur}
292 | >
293 | 贷款
294 |
295 |
299 |
296 | 金额范围 {clipBigNum(detail.sum_start)}-{clipBigNum(detail.sum_end)}
297 |
298 |
300 |
305 |
314 |
318 |
306 | {selectVal}}
311 | />
312 |
313 | 期限
307 |
315 | 贷款期限 {cycleRangeText}
316 |
317 |
320 |
321 |
358 |
322 |
333 |
334 |
328 |
331 |
332 | {clipPrice(+finalMoney + (finalMoney * rate * this.monthNum(selectVal)))}
329 | 总还款
330 |
335 |
357 |
336 |
337 | 到账金额：{finalMoney}
338 |
339 |
340 |
341 |
342 | 利息和费用：
343 | {
344 | clipPrice(finalMoney * rate * this.monthNum(selectVal))
345 | }
346 |
347 |
348 |
349 |
350 |
351 | 月还款：{
352 | clipPrice((+finalMoney + (finalMoney * rate * this.monthNum(selectVal))) / this.monthNum(selectVal))
353 | }
354 |
355 |
356 |
362 |
364 | 申请流程
363 |
365 | {
366 | applyFlowpath && applyFlowpath.length > 0 && applyFlowpath.map((item, index) => (
367 |
379 |
368 |
376 | ))
377 | }
378 |
369 |
374 | {index !== applyFlowpath.length - 1 && }
375 |
370 | 
371 |
372 | {item.step_name}
373 |
380 |
382 |
388 | {
389 | detail.customer_tel &&
390 |
395 | }
396 |
397 | 申请条件
381 |