13 | 我是nav导航
14 |
15 | )
16 | }
17 | }
18 |
19 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 我是 {this.props.match.path}的child
我也可以按需加载额
16 | )
17 | }
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/src/redux/reducers/cart.js:
--------------------------------------------------------------------------------
1 | import {
2 | UPDATE_CART_NUMBER,
3 | GET_CART_NUMBER,
4 | } from '../actionTypes'
5 |
6 | const initialState = {
7 | number:0
8 | }
9 |
10 | export default (state = initialState, action) => {
11 | switch (action.type) {
12 | case GET_CART_NUMBER:
13 | return { ...state, number: action.number }
14 | case UPDATE_CART_NUMBER:
15 | return { ...state, number: action.number }
16 | default:
17 | return state
18 | }
19 | }
--------------------------------------------------------------------------------
/src/redux/reducers/home.js:
--------------------------------------------------------------------------------
1 | import {
2 | UPDATE_CART_NUMBER,
3 | GET_CART_NUMBER,
4 | } from '../actionTypes'
5 |
6 | const initialState = {
7 | number:10
8 | }
9 |
10 | export default (state = initialState, action) => {
11 | switch (action.type) {
12 | case GET_CART_NUMBER:
13 | return { ...state, number: action.number }
14 | case UPDATE_CART_NUMBER:
15 | return { ...state, number: action.number }
16 | default:
17 | return state
18 | }
19 | }
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins:[
3 | // require('postcss-write-svg'),
4 | // require('postcss-px-to-viewport')({
5 | // viewportWidth: 750,
6 | // viewportHeight: 1334,
7 | // unitPrecision: 5,
8 | // viewportUnit: 'vw',
9 | // selectorBlackList: [],
10 | // minPixelValue: 1,
11 | // mediaQuery: false
12 | // }),
13 | // require('postcss-aspect-ratio-mini'),
14 | ]
15 | }
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/redux/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { createStore , applyMiddleware , combineReducers } from 'redux'
2 | import thunk from 'redux-thunk'
3 | import { routerReducer } from 'react-router-redux'
4 |
5 | import home from './home'
6 | import cart from './cart'
7 |
8 | const reducers = combineReducers({
9 | routing: routerReducer,
10 | home,
11 | cart,
12 | })
13 |
14 | // 创建 Redux 的 store 对象
15 | const store = createStore(
16 | reducers,
17 | applyMiddleware(thunk)
18 | )
19 |
20 | export default store
--------------------------------------------------------------------------------
/src/assets/common/js/config.js:
--------------------------------------------------------------------------------
1 | /*-------------------------------------------后台配置------------------------------------------------*/
2 | module.exports={
3 | //登陆页面
4 | loginUrl:'/login.html',
5 |
6 | //登陆成功后需要跳转到的页面
7 | homeUrl: '/index.html',
8 |
9 | //根接口
10 | baseApi:'/api/',
11 |
12 | //ajax 请求超时时间
13 | ajaxtimeout:12000,
14 |
15 | //发送验证码时间间隔
16 | msgTime:60,
17 |
18 | //隐藏显示时间
19 | containerShowTime:10,
20 |
21 | //pagesize 分页数量
22 | pageSize:20,
23 |
24 | wangwei:'123456'
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/src/pages/home/two.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | require('./home.scss')
4 |
5 | export default class Two extends React.Component {
6 | constructor(props, context) {
7 | super(props, context)
8 | this.state = {
9 | username: 'wei'
10 | }
11 | }
12 |
13 | render() {
14 | return (
15 | 我也可以按需加载额
16 |
21 | )
22 | }
23 | }
24 |
25 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React from 'react'
3 | import { render } from 'react-dom'
4 | import { Provider } from 'react-redux'
5 | import store from './redux/reducers'
6 | import App from './App'
7 | // ant css
8 | import 'antd/dist/antd.css'
9 |
10 | //公用样式文件
11 | require('common/css/base.scss')
12 |
13 | // 弹窗
14 | import popup from 'popup'
15 | import $ from 'jquery'
16 | import config from 'common/js/config'
17 | import util from 'common/js/util'
18 |
19 | window.popup = popup
20 | window.config = config
21 | window.util = util
22 | window.$ = $
23 |
24 |
25 | render(
26 |
17 | {this.state.username}
18 |
19 |
20 | 18 |
19 |
24 |
35 | )
36 | }
37 | }
38 |
39 |
--------------------------------------------------------------------------------
/src/assets/common/css/vars.scss:
--------------------------------------------------------------------------------
1 |
2 | // sass相关备注
3 |
4 | $C1:#333; //黑色主色调
5 | $C2:#f0f0f0; //border边线色调
6 | $C3:#F04848; // 主红色色调
7 |
8 |
9 |
10 |
11 |
12 | /*------------------css 1px解决方案-----------------------*/
13 | @mixin common-border-one ($type,$color) {
14 | content: '';
15 | position: absolute;
16 | @if $type == left {
17 | height:100%;
18 | width:1px;
19 | left:0;
20 | top:0;
21 | transform: scaleX(0.5);
22 | border-left: 1px solid $color;
23 | } @else if $type == right {
24 | height:100%;
25 | width:1px;
26 | right:0;
27 | top:0;
28 | transform: scaleX(0.5);
29 | border-right: 1px solid $color;
30 | } @else if $type == top {
31 | height:1px;
32 | width:100%;
33 | left:0;
34 | top:0;
35 | transform: scaleY(0.5);
36 | border-top: 1px solid $color;
37 | } @else {
38 | height:1px;
39 | width:100%;
40 | bottom:0;
41 | left:0;
42 | transform: scaleY(0.5);
43 | border-bottom: 1px solid $color;
44 | }
45 | z-index: 1;
46 | }
47 | @mixin common-border-all ($color,$radius) {
48 | position: absolute;
49 | top: -0.5px;
50 | left: -0.5px;
51 | width: 200%;
52 | height: 200%;
53 | content: '';
54 | border: 1px solid $color;
55 | border-radius: $radius;
56 | transform: scale(0.5);
57 | transform-origin: top left;
58 | z-index: -1;
59 | display:block;
60 | }
--------------------------------------------------------------------------------
/src/pages/home/one.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { renderRoutes } from 'react-router-config'
3 | import { Link } from 'react-router-dom'
4 |
5 |
6 | require('./home.scss')
7 |
8 | export default class One extends React.Component {
9 | constructor(props, context) {
10 | super(props, context)
11 | this.state = {
12 | username: 'wang'
13 | }
14 | }
15 | handler(e){
16 | console.log(this)
17 | }
18 |
19 | handlerone(e){
20 | console.log('000')
21 | let id = 0
22 | this.props.history.push(`/other/${id}`)
23 | }
24 |
25 | render() {
26 | return (
27 |
25 | {this.state.datas.map(item => (
26 |
27 | 姓名：{item.name}
28 | 性别：{item.sex}
29 | 爱好：{item.hobby}
30 |
31 |
32 | ))}
33 |
34 |
28 |
47 | )
48 | }
49 | }
50 |
51 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react 集成开发框架
2 |
3 | > * 使用知识点：
4 | > * react
5 | > * webpack 前端自动话打包工具
6 | > * react-router-dom
7 | > * react-redux
8 | > * redux
9 | > * babel
10 |
11 | ## 项目webpack 优化说明文档
12 | ## http://blog.seosiwei.com/detail/9
13 |
14 | ## react-router的4种异步加载方式
15 | ## http://blog.seosiwei.com/detail/10
16 |
17 | ## 基于react-router-config的路由拆分
18 | ## http://blog.seosiwei.com/detail/11
19 |
20 | ## 项目步骤
21 |
22 | 1.安装node.js
23 |
24 | 2.安装项目依赖包
25 |
26 | ```
27 | npm install
28 | 或
29 | yarn install
30 | ```
31 |
32 | 3.运行开发环境
33 |
34 | ```
35 | npm run dev
36 |
37 | ```
38 |
39 | 4.打包生产文件
40 |
41 | ```
42 | npm run build:dll //此命令一般只运行一次 请参考上面weboack构建优化文章说明
43 |
44 | npm run build
45 |
46 | ```
47 |
48 |
49 | ### 增加flow
50 | - 参考链接： flow使用请参考官网：https://flow.org/
51 |
52 |
53 | ```
54 | 使用flow检查的文件在顶部增加
55 | // @flow 或者 /* @flow */ 标识
56 |
57 | 检查全部文件
58 | npm run flow
59 |
60 | ```
61 |
62 | ### 如果Sublime要开启eslint的flow检测 需要做如下另个步骤
63 |
64 | - 1.安装 npm install babel-preset-flow --save-dev npm install flow-bin --save-dev
65 | - 2.sublime text安装 flow SublimeLinter-flow两个插件
66 | - 参考链接：https://flow.org/en/docs/editors/sublime-text/
67 |
68 |
69 | ### 新增eslint代码检查
70 | - sublime text 安装插件：SublimeLinter,SublimeLinter-contrib-eslint 插件
71 | 参考链接：
72 | - https://eslint.org/docs/user-guide/integrations
73 | - http://www.jianshu.com/p/e826e13c67ec
74 | - 提醒：提交代码之前会进行 eslint 检测，若检测不通过提交不了代码。
75 |
76 | ### DEMO图片
77 | 
78 |
79 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "plugins": [
4 | "react"
5 | ],
6 | "env": {
7 | "es6": true,
8 | "browser": true,
9 | "node": true,
10 | "commonjs": true,
11 | "worker": true,
12 | "amd": true,
13 | "mocha": true,
14 | "jest": true,
15 | "jquery": true,
16 | "serviceworker": true
17 | },
18 | "globals": {
19 | "popup": false,
20 | "config":true,
21 | "util":false
22 | },
23 | "settings": {
24 | "import/ignore": [
25 | "node_modules"
26 | ],
27 | "react": {
28 | "createClass": "createReactClass",
29 | "pragma": "React",
30 | "version": "16.0",
31 | "flowVersion": "0.59"
32 | },
33 | },
34 | "parserOptions": {
35 | "ecmaVersion": 6,
36 | "sourceType": "module",
37 | "ecmaFeatures": {
38 | "jsx": true
39 | }
40 | },
41 | "extends": [
42 | "eslint:recommended",
43 | "plugin:react/recommended"
44 | ],
45 | "rules": {
46 | "indent": [2, 4], //空格数
47 | "quotes": [2, "single"], //单双引号
48 | "linebreak-style": [2, "unix"],
49 | "semi": [2, "never"],
50 | "no-cond-assign": 2, //禁止条件表达式中出现赋值操作符
51 | "no-constant-condition": 2, //禁止在条件中使用常量表达式
52 | "no-control-regex":0, //正则
53 | "no-dupe-args": 2, //禁止函数参数同名
54 | "no-dupe-keys": 2, //禁止json中重复的key
55 | "no-duplicate-case": 2, //禁止switch同样的case条件
56 | "no-console": 0, //禁止出现console
57 | "no-debugger": 0, //禁止出现debugger
58 | "no-alert":0, //禁止出现alert
59 | "no-var": 0, //禁止出现没定义的var
60 | "no-empty":0, //禁止出现空语句块
61 | "no-trailing-spaces": 0, //禁用行尾空白
62 | "no-empty-character-class":2, //禁止在正则表达式中使用空字符集
63 | "no-ex-assign":2, //禁止对 catch 子句中的异常重新赋值
64 | "no-extra-boolean-cast":2, //禁止不必要的布尔类型转换
65 | "no-extra-semi":2, //禁用不必要的分号
66 | "no-func-assign":2, //禁止对 function 声明重新赋值
67 | "no-inner-declarations":2, //禁止在嵌套的块中出现变量声明或 function 声明
68 | "no-irregular-whitespace":2, //禁止在字符串和注释之外不规则的空白
69 | "no-obj-calls":2, //禁止将全局对象当作函数进行调用
70 | "no-sparse-arrays":2, //禁用稀疏数组
71 | "use-isnan":2, //要求使用 isNaN() 检查 NaN
72 | "valid-typeof":2, //强制 typeof 表达式与有效的字符串进行比较
73 | "eol-last": 0, //要求或禁止文件末尾存在空行
74 | "no-unused-vars": 0, //禁止出现未使用过的变量
75 | "no-underscore-dangle": 0,
76 | "no-lone-blocks": 0,
77 | "jsx-quotes": 1, //强制在 JSX 属性中一致地使用双引号或单引号
78 | "react/prop-types":0,
79 | }
80 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react16-webpack3.8-onepage-base-project",
3 | "version": "1.0.0",
4 | "description": "基础架子",
5 | "main": "index.js",
6 | "scripts": {
7 | "flow": "flow check --all",
8 | "dev": "cross-env PROT=8000 node build/webpack.dev.config.js",
9 | "test": "webpack -d --progress --hide-modules --colors --config build/webpack.test.config.js",
10 | "test:dll": "cross-env BUILD_TYPE=test webpack --progress --config build/webpack.dll.config.js",
11 | "build": "webpack --progress --colors --config build/webpack.product.config.js",
12 | "build:dll": "cross-env BUILD_TYPE=build webpack --progress --config build/webpack.dll.config.js",
13 | "eslint": "eslint src "
14 | },
15 | "pre-commit": [
16 | "eslint"
17 | ],
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/wangweianger/react16-webpack3.8-onepage-base-project.git"
21 | },
22 | "keywords": [
23 | "react",
24 | "react-router",
25 | "webpack",
26 | "redux"
27 | ],
28 | "author": "zane",
29 | "license": "ISC",
30 | "homepage": "http://blog.seosiwei.com/",
31 | "devDependencies": {
32 | "babel-cli": "^6.26.0",
33 | "babel-core": "^6.26.0",
34 | "babel-eslint": "^8.0.2",
35 | "babel-loader": "^7.1.2",
36 | "babel-plugin-syntax-dynamic-import": "^6.18.0",
37 | "babel-plugin-transform-object-rest-spread": "^6.26.0",
38 | "babel-polyfill": "^6.26.0",
39 | "babel-preset-env": "^1.6.1",
40 | "babel-preset-flow": "^6.23.0",
41 | "babel-preset-react": "^6.24.1",
42 | "bundle-loader": "^0.5.5",
43 | "cross-env": "^5.1.1",
44 | "css-loader": "^0.28.7",
45 | "eslint": "^4.10.0",
46 | "eslint-loader": "^1.9.0",
47 | "eslint-plugin-react": "^7.4.0",
48 | "extract-text-webpack-plugin": "^3.0.2",
49 | "file-loader": "^1.1.5",
50 | "flow-bin": "^0.59.0",
51 | "happypack": "^4.0.0",
52 | "html-webpack-plugin": "^2.30.1",
53 | "jquery": "^3.2.1",
54 | "node-sass": "^4.6.0",
55 | "open-browser-webpack-plugin": "^0.0.5",
56 | "pre-commit": "^1.2.2",
57 | "react": "^16.0.0",
58 | "react-dom": "^16.0.0",
59 | "react-loadable": "^5.3.1",
60 | "react-redux": "^5.0.6",
61 | "react-router-config": "^1.0.0-beta.4",
62 | "react-router-dom": "^4.2.2",
63 | "react-router-redux": "^4.0.8",
64 | "redux": "^3.7.2",
65 | "redux-thunk": "^2.2.0",
66 | "sass-loader": "^6.0.6",
67 | "string-replace-loader": "^1.3.0",
68 | "style-loader": "^0.19.0",
69 | "url-loader": "^0.6.2",
70 | "webpack": "^3.8.1",
71 | "webpack-cleanup-plugin": "^0.5.1",
72 | "webpack-dev-server": "^2.9.4",
73 | "webpack-dll-loader": "^0.0.1",
74 | "webpack-parallel-uglify-plugin": "^1.0.0",
75 | "zane-calendar": "^2.2.4"
76 | },
77 | "dependencies": {
78 | "antd": "^3.11.6"
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/pages/home/home.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import zaneDate from 'zane-calendar'
4 | import { DatePicker, Button, Checkbox } from 'antd'
5 |
6 | require('./home.scss')
7 |
8 | import { updateCartNumber } from 'actions'
9 |
10 | class Home extends React.Component {
11 | constructor(props, context) {
12 | super(props, context)
13 | this.state = {
14 | username: 'wangweianger00',
15 | begintime:'',
16 | }
17 | console.log(props)
18 | }
19 |
20 | componentDidMount(){
21 | zaneDate({
22 | elem:'#zane-calendar',
23 | done:(fulltime,begintime,endtime)=>{
24 | this.setState({
25 | begintime:begintime
26 | })
27 | }
28 | })
29 | }
30 |
31 | handleAlert(e){
32 | popup.alert({title:'Alert弹窗'})
33 | }
34 |
35 | handleConfirm(e){
36 | popup.confirm({title:'确定执行吗？',yes(){
37 | alert('执行了!')
38 | }})
39 | }
40 | handleAddNumber(){
41 | const { number,dispatch } = this.props
42 | dispatch(updateCartNumber(number+1))
43 | }
44 |
45 | onChange(e) {
46 | console.log(`checked = ${e.target.checked}`)
47 | }
48 |
49 | render() {
50 | const { number } = this.props
51 | return (
52 |
29 | 加载child /one/child 路由
30 | /one/child
31 |
32 |
33 |
34 | 加载动态路由
35 |
36 |
37 |
38 |
39 | {this.state.username}
40 |
41 |
42 | 40 |
41 |
43 | {renderRoutes(this.props.route.routes)}
44 |
45 |
46 |
53 |
83 | )
84 | }
85 | }
86 |
87 | // 获取购物车数量
88 | const mapStateToProps = (state) => {
89 | return {
90 | number:state.home.number
91 | }
92 | }
93 | export default connect(mapStateToProps)(Home)
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { connect } from 'react-redux'
3 | import {
4 | BrowserRouter as Router,
5 | Link
6 | } from 'react-router-dom'
7 | import { renderRoutes } from 'react-router-config'
8 |
9 | /*------------------------------react-loadable按需加载-------------------------------------------*/
10 | // import Loadable from 'react-loadable';
11 | // import Loading from './components/Loading'
12 | // const Home = Loadable({loader: () => import('./pages/home/home'),loading:Loading});
13 | // const One = Loadable({loader: () => import('./pages/home/one'),loading:Loading});
14 | // const Two = Loadable({loader: () => import('./pages/home/two'),loading:Loading});
15 | // const User = Loadable({loader: () => import('./pages/user/user'),loading:Loading});
16 |
17 | /*------------------------------bundle-loader按需加载---------------------------------------------*/
18 | // import Bundle from './components/Bundle'
19 | // import loadHome from 'bundle-loader?lazy!./pages/home/home'
20 | // import loadOne from 'bundle-loader?lazy!./pages/home/one'
21 | // import loadTwo from 'bundle-loader?lazy!./pages/home/two'
22 | // import loadUser from 'bundle-loader?lazy!./pages/user/user'
23 |
24 | // const Home = (props) => (
54 | redux中的number值为 { number }
55 |
56 |
57 |
58 | Checkbox
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
69 |
70 | 时间日历插件
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | {this.state.username}
79 |
80 |
81 |
82 | 79 |
80 |
59 |
68 |
69 |
72 | -
60 |
- Home 61 |
- One 62 |
- Two 63 |
- User 64 |
'
71 | str+=this.setting.maskHide?'':''
72 | str+='
'
78 | this.addendHtml(str)
79 | this.middle() //居中
80 | this.setting.callback()
81 |
82 | }
83 | /*iframe层*/
84 | PopLayer.prototype.iframe=function(json){
85 | util.showLoading()
86 | this.varLiang(json)
87 | var str=''
73 | if(this.setting.haveHeader){
74 | str+=this.setting.closeBut?'
'+this.setting.header+'
':''+this.setting.header+'
'
75 | }
76 | str+=''+this.setting.html+'
'
77 | str+=''
88 | str+=this.setting.maskHide?'':''
89 | str+=''
103 | this.addendHtml(str)
104 | var height=0
105 | if(this.setting.yesHtml){
106 | height=$('div.popup_main').height()-20
107 | }else{
108 | height=$('div.popup_main').height()
109 | }
110 | if(this.setting.haveHeader){
111 | $('div.content').css({height:(height-80)+'px'})
112 | }else{
113 | $('div.content').css({height:(height-50)+'px'})
114 | }
115 | var _this=this
116 | /*横竖屏切换时执行*/
117 | $(window).on('resize',function() {
118 | var heightTwo=0
119 | if(_this.setting.yesHtml){
120 | heightTwo=$('div.popup_main').height()-20
121 | }else{
122 | heightTwo=$('div.popup_main').height()
123 | }
124 | if(_this.setting.haveHeader){
125 | $('div.content').css({height:(heightTwo-80)+'px'})
126 | }else{
127 | $('div.content').css({height:(heightTwo-50)+'px'})
128 | }
129 | })
130 | setTimeout(function(){util.hideLoading()},1000)
131 | window.closeIframePopup=function(obj){
132 | $(obj).parents('div.popup').remove()
133 | if(json.callback){json.callback()}
134 | }
135 | }
136 |
137 | //信息层
138 | PopLayer.prototype.alert=function(json){
139 | this.varLiang(json)
140 | var str='
'
90 | if(this.setting.haveHeader){
91 | str+=this.setting.closeBut?'
'+this.setting.header+'
':''+this.setting.header+'
'
92 | }
93 | var isIos=navigator.userAgent.indexOf('Mac OS X')>-1
94 | var isIpad=navigator.userAgent.indexOf('iPad;')>-1
95 | if(isIos || isIpad){
96 | str+=''
97 | }else{
98 | str+='
'
99 | }
100 | str+='
'
101 | if(this.setting.yesHtml){str+=''+this.setting.yesHtml+'
'}
102 | str+=''
141 | str+=this.setting.maskHide?'':''
142 | str+='
'
150 | var This=this
151 | this.addendHtml(str)
152 | $('span.yes').click(function(){
153 | if(json.yes){
154 | This.dosomePopup(this,This.setting.yes)
155 | }else{
156 | This.closeThisPopup(this)
157 | }
158 | })
159 | this.middle() //居中
160 | }
161 | //确认层
162 | PopLayer.prototype.confirm=function(json){
163 | this.varLiang(json)
164 | var This=this
165 | var str=''
143 | if(this.setting.haveHeader){
144 | str+=this.setting.closeBut?'
\
145 | '+this.setting.header+'
':''+this.setting.header+'
'
146 | }
147 | str+=''+this.setting.title+'
'
148 | str+=''
149 | str+=''
166 | str+=this.setting.maskHide?'':''
167 | str+='
'
174 | this.addendHtml(str)
175 | $('span.yes').click(function(){
176 | This.dosomePopup(this,This.setting.yes)
177 | })
178 | $('span.no').click(function(){
179 | This.dosomePopup(this,This.setting.no)
180 | })
181 | this.middle() //居中
182 | }
183 | /*2s消失*/
184 | PopLayer.prototype.miss=function(json){
185 | this.varLiang(json)
186 | this.setting.haveHeader=true
187 | var str=''
168 | if(this.setting.haveHeader){
169 | str+='
'+this.setting.header+'
'
170 | }
171 | str+=''+this.setting.title+'
'
172 | str+=''
173 | str+=''
188 | str+='
'
191 | this.addendHtml(str)
192 | this.middle() //居中
193 | setTimeout(function(){
194 | $('div.popup-hide').remove()
195 | },this.setting.time)
196 | }
197 |
198 | //加载层
199 | PopLayer.prototype.loading=function(json){
200 | this.varLiang(json)
201 | if(json.title){
202 | this.setting.title= json.title
203 | }else{
204 | this.setting.title='加载中,请稍后...'
205 | }
206 | var str=''
189 | str+='
'+this.setting.title+'
'
190 | str+=''
207 | str+='
'
210 | this.addendHtml(str)
211 | this.middle() //居中
212 | }
213 | /*关闭加载层*/
214 | PopLayer.prototype.closeLoading=function(){
215 | $('div.popup-loading').remove()
216 | }
217 | /*关闭iframe层*/
218 | PopLayer.prototype.closeIframe=function(){
219 | $('.popup-iframe', parent.document).remove()
220 | }
221 |
222 | module.exports=new PopLayer()
223 |
224 |
225 |
226 |
227 |
228 |
--------------------------------------------------------------------------------
/src/assets/common/js/util.js:
--------------------------------------------------------------------------------
1 | //util 公共对象函数
2 | class util{
3 | //初始化对象
4 | constructor(){
5 | this.win=window.top
6 | this.UA=navigator.userAgent
7 | this.isPC=this.UA.indexOf('Windows NT')>-1
8 | this.isAndroid=this.UA.indexOf('Android')>-1
9 | this.isIos=this.UA.indexOf('Mac OS X')>-1
10 | this.isIphone=this.UA.indexOf('iPhone;')>-1
11 | this.isIpad=this.UA.indexOf('iPad;')>-1
12 | this.isIE7=this.UA.indexOf('MSIE 7.0;')>-1
13 | this.isIE8=this.UA.indexOf('MSIE 8.0;')>-1
14 | this.isIE9=this.UA.indexOf('MSIE 9.0;')>-1
15 | this.isIE10=this.UA.indexOf('MSIE 10.0;')>-1
16 | this.isIE11=this.UA.indexOf('Trident')>-1
17 | }
18 |
19 | /*封装的ajax函数
20 | *type 类型 get|post
21 | *url api地址
22 | *data 请求的json数据
23 | *nohideloading ajax执行完成之后是否隐藏遮罩
24 | *notimeout 是否有请求超时
25 | *complete ajax完成后执行（失败成功后都会执行）
26 | *beforeSend 请求发送前执行
27 | *success 成功之后执行
28 | *error 失败之后执行
29 | *goingError 是否执行自定义error回调
30 | *timeout ajax超时时间
31 | *isGoingLogin 是否跳转到登录界面
32 | */
33 | ajax(json){
34 | let This=this
35 | let noError=true
36 | let url=null
37 | let asyncVal=typeof(json.async)=='boolean'?json.async:true
38 | This.showLoading()
39 | //是否有请求超时
40 | if(!json.notimeout){
41 | var timeout=setTimeout(function(){
42 | This.hideLoading()
43 | // 请求超时
44 | noError=false
45 | asyncVal&&popup.alert({type:'msg',title:'您的网络太慢了哦,请刷新重试!'})
46 | }, json.timeout||config.ajaxtimeout)
47 | }
48 | // 增加时间戳参数
49 | if(json.url.indexOf('?')!=-1){
50 | url=json.url+'&_='+this.time()
51 | }else{
52 | url=json.url+'?_='+this.time()
53 | }
54 | return $.ajax({
55 | type: json.type||'post',
56 | url: url,
57 | data: json.data||'',
58 | datatype:'json',
59 | async: asyncVal,
60 | beforeSend:function(xhr){
61 | json.beforeSend&&json.beforeSend(xhr)
62 | },
63 | success:function(data){
64 | if(!json.nohideloading){ This.hideLoading()}
65 | clearTimeout(timeout)
66 | if(typeof(data)=='string'){
67 | This.error(JSON.parse(data),json)
68 | }else{
69 | This.error(data,json)
70 | }
71 | },
72 | complete:function(XMLHttpRequest){
73 | if(!json.nohideloading){ This.hideLoading()}
74 | clearTimeout(timeout)
75 | if(json.complete){json.complete(XMLHttpRequest)}
76 | },
77 | error:function(XMLHttpRequest){
78 | This.hideLoading()
79 | clearTimeout(timeout)
80 | if(noError){
81 | This._error(XMLHttpRequest,json)
82 | }
83 | }
84 | })
85 | }
86 |
87 | //file 文件上传
88 | fileAJAX(json){
89 | var This=this
90 | var noError=true
91 | $.ajax({
92 | type: json.type||'post',
93 | url: json.url,
94 | xhrFields: {
95 | withCredentials: true
96 | },
97 | crossDomain: true,
98 | data: json.data||'',
99 | datatype:'json',
100 | cache: false,
101 | contentType: false,
102 | processData: false,
103 | goingError:json.goingError||false,
104 | notimeout:json.notimeout||false,
105 | beforeSend:function(xhr){
106 | json.beforeSend&&json.beforeSend(xhr)
107 | },
108 | success:function(data){
109 | if(!json.nohideloading){ This.hideLoading()}
110 | clearTimeout(time)
111 | This.error(data,json)
112 | },
113 | error:function(XMLHttpRequest){
114 | if(!json.nohideloading){ This.hideLoading()}
115 | json.error(XMLHttpRequest,json)
116 | clearTimeout(time)
117 | if(noError){
118 | This._error(XMLHttpRequest,json)
119 | }
120 | },
121 | complete:function(XMLHttpRequest){
122 | if(!json.nohideloading){ This.hideLoading()}
123 | clearTimeout(time)
124 | if(json.complete){json.complete(XMLHttpRequest)}
125 | },
126 | })
127 | var time=setTimeout(function(){
128 | This.hideLoading()
129 | // 请求超时
130 | noError=false
131 | popup.alert({type:'msg',title:'您的网络太慢了哦,请刷新重试!'})
132 | }, json.timeout||config.ajaxtimeout)
133 | }
134 |
135 | /*FormData 上传文件函数
136 | filename : string input name 属性
137 | onlyOne : boolean 是否只上传一个文件
138 | data : Object ajax上次的data数据
139 | url ：string api地址
140 | checktype: array 默认['png','jpg'，'gif']
141 | nohideloading : boolean ajax执行完成之后是否隐藏遮罩
142 | timeout : number ajax超时时间
143 | goingError : boolean 是否执行自定义error回调
144 | isGoingLogin : boolean 是否跳转到登录界面
145 | success : function 成功之后的回调函数
146 | complete : function ajax完成后执行（失败成功后都会执行）
147 | error : function 失败之后执行
148 | */
149 | cerateFileFormData(json){
150 | var This=this
151 | var checktype=json.checktype||['jpg','png','gif']
152 | var filename=json.filename?json.filename:'filename'
153 | var html=''
208 | str+='
'+this.setting.title+'
'
209 | str+=''
154 | html+='