├── static
    ├── .gitkeep
    ├── css
    │   ├── fonts
    │   │   └── icons.ttf
    │   └── reset.css
    └── js
    │   └── adjustPage.js
├── README.md
├── .eslintignore
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── img
    └── calendar.png
├── src
    ├── assets
    │   └── logo.png
    ├── router
    │   └── index.js
    ├── main.js
    ├── App.vue
    ├── components
    │   └── page
    │   │   ├── index.vue
    │   │   └── calendarpage.vue
    └── common
    │   └── vhomed.js
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── index.html
├── .babelrc
├── .eslintrc.js
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # calendar
2 | 基于vue的移动端日历组件（酒店预订场景）
3 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | src/common/vhomed.js
4 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/img/calendar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tobyjwt/calendar/HEAD/img/calendar.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tobyjwt/calendar/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/static/css/fonts/icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tobyjwt/calendar/HEAD/static/css/fonts/icons.ttf


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserslist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import calendarpage from '../components/page/calendarpage.vue';
 4 | import index from '../components/page/index.vue';
 5 | Vue.use(Router);
 6 | 
 7 | export default new Router({
 8 |     routes: [
 9 |         {
10 |             path: '/',
11 |             component: index
12 |         },
13 |         {
14 |             path: '/calendarpage',
15 |             component: calendarpage
16 |         }
17 |     ]
18 | });
19 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html style="height: 100%">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>酒店住宿</title>
 6 |     <meta name="viewport"
 7 |           content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
 8 |     <link rel="stylesheet" type="text/css" href="static/css/reset.css"/>
 9 | </head>
10 | <body style="height: 100%">
11 | <div id="app"></div>
12 | <!-- built files will be auto injected -->
13 | <!--<script src="./static/js/adjustPage.js"></script>-->
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue';
 4 | import App from './App';
 5 | import router from './router';
 6 | import fastclick from 'fastclick';
 7 | import vhomed from './common/vhomed.js';
 8 | import axios from 'axios';
 9 | 
10 | Vue.use(vhomed);
11 | Vue.config.productionTip = false;
12 | // 消除手机端点击300ms延迟
13 | fastclick.attach(document.body);
14 | Vue.prototype.$ajax = axios;
15 | 
16 | /* eslint-disable no-new */
17 | new Vue({
18 |     el: '#app',
19 |     router,
20 |     template: '<App/>',
21 |     components: {App}
22 | });
23 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "presets": [
 3 |         [
 4 |             "env",
 5 |             {
 6 |                 "modules": false,
 7 |                 "targets": {
 8 |                     "browsers": [
 9 |                         "> 1%",
10 |                         "last 2 versions",
11 |                         "not ie <= 8"
12 |                     ]
13 |                 }
14 |             }
15 |         ],
16 |         "stage-2"
17 |     ],
18 |     "plugins": [
19 |         "transform-runtime"
20 |     ],
21 |     "env": {
22 |         "test": {
23 |             "presets": [
24 |                 "env",
25 |                 "stage-2"
26 |             ],
27 |             "plugins": [
28 |                 "istanbul"
29 |             ]
30 |         }
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: 'babel-eslint',
 4 |   parserOptions: {
 5 |     sourceType: 'module'
 6 |   },
 7 |   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 8 |   extends: 'standard',
 9 |   // required to lint *.vue files
10 |   plugins: [
11 |     'html'
12 |   ],
13 |   // add your custom rules here
14 |   'rules': {
15 |     // allow paren-less arrow functions
16 |     'arrow-parens': 0,
17 |     // allow async-await
18 |     'generator-star-spacing': 0,
19 |     // allow debugger during development
20 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
21 |     'semi': ['error', 'always'],
22 |     'indent':  ["warn", 4],
23 |     'space-before-function-paren': 0
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app">
 3 |         <router-view :info="info"></router-view>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         data() {
10 |             return {
11 |                 // 记录输入框数据
12 |                 info: {
13 |                     city: '',
14 |                     keyWord: '',
15 |                     checkInDate: '',
16 |                     checkOutDate: '',
17 |                     curHotel: {}
18 |                 }
19 |             };
20 |         },
21 |         created() {
22 |             this._initInfo();
23 |             this.$util.forbidScal();
24 |         },
25 |         methods: {
26 |             // 初始化输入框数据
27 |             _initInfo() {
28 |                 this.info.city = '深圳';
29 |                 let day = new Date();
30 |                 day.setDate(day.getDate() + 1);
31 |                 let checkInDate = day.getFullYear() + '-' + (day.getMonth() + 1) + '-' + day.getDate();
32 |                 day.setDate(day.getDate() + 1);
33 |                 let checkOutDate = day.getFullYear() + '-' + (day.getMonth() + 1) + '-' + day.getDate();
34 |                 this.info.checkInDate = checkInDate;
35 |                 this.info.checkOutDate = checkOutDate;
36 |             }
37 |         }
38 |     };
39 | </script>
40 | 
41 | <style>
42 |     #app {
43 |         background-color: #eeeeee;
44 |         height: 100%;
45 |         width: 100%;
46 |         overflow: hidden;
47 |     }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: './',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 80,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {
31 |       '/api': {
32 |         target: 'http://www.sojson.com',
33 |         changeOrigin: true,
34 |         pathRewrite: {
35 |           '^/api': ''
36 |         }
37 |       }
38 |     },
39 |     // CSS Sourcemaps off by default because relative paths are "buggy"
40 |     // with this option, according to the CSS-Loader README
41 |     // (https://github.com/webpack/css-loader#sourcemaps)
42 |     // In our experience, they generally work as expected,
43 |     // just be aware of this issue when enabling this option.
44 |     cssSourceMap: false
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/static/css/reset.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 3 |  * http://cssreset.com
 4 |  */
 5 | html, body, div, span, applet, object, iframe,
 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 7 | a, abbr, acronym, address, big, cite, code,
 8 | del, dfn, em, img, ins, kbd, q, s, samp,
 9 | small, strike, strong, sub, sup, tt, var,
10 | b, u, i, center,
11 | dl, dt, dd, ol, ul, li,
12 | fieldset, form, label, legend,
13 | table, caption, tbody, tfoot, thead, tr, th, td,
14 | article, aside, canvas, details, embed,
15 | figure, figcaption, footer, header,
16 | menu, nav, output, ruby, section, summary,
17 | time, mark, audio, video, input {
18 |     margin: 0;
19 |     padding: 0;
20 |     border: 0;
21 |     font-size: 100%;
22 |     font-weight: normal;
23 |     vertical-align: baseline;
24 | }
25 | 
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, menu, nav, section {
29 |     display: block;
30 | }
31 | 
32 | body {
33 |     line-height: 1;
34 | }
35 | 
36 | blockquote, q {
37 |     quotes: none;
38 | }
39 | 
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 |     content: none;
43 | }
44 | 
45 | table {
46 |     border-collapse: collapse;
47 |     border-spacing: 0;
48 | }
49 | 
50 | /* custom */
51 | a {
52 |     color: #7e8c8d;
53 |     text-decoration: none;
54 |     -webkit-backface-visibility: hidden;
55 | }
56 | 
57 | li {
58 |     list-style: none;
59 | }
60 | 
61 | ::-webkit-scrollbar {
62 |     width: 5px;
63 |     height: 5px;
64 | }
65 | 
66 | ::-webkit-scrollbar-track-piece {
67 |     background-color: rgba(0, 0, 0, 0.2);
68 |     -webkit-border-radius: 6px;
69 | }
70 | 
71 | ::-webkit-scrollbar-thumb:vertical {
72 |     height: 5px;
73 |     background-color: rgba(125, 125, 125, 0.7);
74 |     -webkit-border-radius: 6px;
75 | }
76 | 
77 | ::-webkit-scrollbar-thumb:horizontal {
78 |     width: 5px;
79 |     background-color: rgba(125, 125, 125, 0.7);
80 |     -webkit-border-radius: 6px;
81 | }
82 | 
83 | html, body {
84 |     width: 100%;
85 | }
86 | 
87 | body {
88 |     -webkit-text-size-adjust: none;
89 |     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
90 | }
91 | 
92 | @font-face {
93 |   font-family: 'iconfont';
94 |   src:  url('./fonts/icons.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
95 | }
96 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "calendar",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "jinwt <380793594@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "node build/dev-server.js",
10 |     "build": "node build/build.js",
11 |     "lint": "eslint --ext .js,.vue src"
12 |   },
13 |   "dependencies": {
14 |     "better-scroll": "^0.4.0",
15 |     "fastclick": "^1.0.6",
16 |     "flatpickr": "^3.0.6",
17 |     "vue": "^2.3.3",
18 |     "vue-router": "^2.6.0"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^7.1.2",
22 |     "axios": "^0.18.0",
23 |     "babel-core": "^6.22.1",
24 |     "babel-eslint": "^7.1.1",
25 |     "babel-loader": "^7.1.1",
26 |     "babel-plugin-transform-runtime": "^6.22.0",
27 |     "babel-preset-env": "^1.3.2",
28 |     "babel-preset-stage-2": "^6.22.0",
29 |     "babel-register": "^6.22.0",
30 |     "chalk": "^2.0.1",
31 |     "connect-history-api-fallback": "^1.3.0",
32 |     "copy-webpack-plugin": "^4.0.1",
33 |     "css-loader": "^0.28.0",
34 |     "cssnano": "^3.10.0",
35 |     "eslint": "^3.19.0",
36 |     "eslint-config-standard": "^6.2.1",
37 |     "eslint-friendly-formatter": "^3.0.0",
38 |     "eslint-loader": "^1.7.1",
39 |     "eslint-plugin-html": "^3.0.0",
40 |     "eslint-plugin-promise": "^3.4.0",
41 |     "eslint-plugin-standard": "^2.0.1",
42 |     "eventsource-polyfill": "^0.9.6",
43 |     "express": "^4.14.1",
44 |     "extract-text-webpack-plugin": "^2.0.0",
45 |     "file-loader": "^0.11.1",
46 |     "flatpickr": "^3.0.6",
47 |     "friendly-errors-webpack-plugin": "^1.1.3",
48 |     "html-webpack-plugin": "^2.28.0",
49 |     "http-proxy-middleware": "^0.17.3",
50 |     "node-sass": "^4.5.3",
51 |     "opn": "^5.1.0",
52 |     "optimize-css-assets-webpack-plugin": "^2.0.0",
53 |     "ora": "^1.2.0",
54 |     "rimraf": "^2.6.0",
55 |     "sass-loader": "^6.0.6",
56 |     "semver": "^5.3.0",
57 |     "shelljs": "^0.7.6",
58 |     "style-loader": "^0.18.2",
59 |     "url-loader": "^0.5.8",
60 |     "vue-loader": "^12.1.0",
61 |     "vue-style-loader": "^3.0.1",
62 |     "vue-template-compiler": "^2.3.3",
63 |     "webpack": "^2.6.1",
64 |     "webpack-bundle-analyzer": "^2.2.1",
65 |     "webpack-dev-middleware": "^1.10.0",
66 |     "webpack-hot-middleware": "^2.18.0",
67 |     "webpack-merge": "^4.1.0"
68 |   },
69 |   "engines": {
70 |     "node": ">= 4.0.0",
71 |     "npm": ">= 3.0.0"
72 |   },
73 |   "browserslist": [
74 |     "> 1%",
75 |     "last 2 versions",
76 |     "not ie <= 8"
77 |   ]
78 | }
79 | 


--------------------------------------------------------------------------------
/static/js/adjustPage.js:
--------------------------------------------------------------------------------
 1 | // 考虑到有些应用只要用到页面适配不需要用到homed.js中的方法,古单独提出此部分
 2 | (function (doc, win) {
 3 |     var docEl = doc.documentElement;
 4 | 
 5 |     // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale
 6 |     (function () {
 7 |         var dpr = scale = '',
 8 |             isIPhone = win.navigator.appVersion.match(/iphone/gi),
 9 |             devicePixelRatio = win.devicePixelRatio;
10 | 
11 |         if (isIPhone) {
12 |             // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
13 |             if (devicePixelRatio >= 3) {
14 |                 dpr = 3;
15 |             } else if (devicePixelRatio >= 2) {
16 |                 dpr = 2;
17 |             } else {
18 |                 dpr = 1;
19 |             }
20 |         } else {    // 其他设备下，仍旧使用1倍的方案
21 |             dpr = 1;
22 |         }
23 |         scale = 1 / dpr;
24 | 
25 |         var metaEl = "";
26 |         metaEl = doc.createElement('meta');
27 |         metaEl.setAttribute('name', 'viewport');
28 |         metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
29 |         if (docEl.firstElementChild) {
30 |             docEl.firstElementChild.appendChild(metaEl);
31 |         } else {
32 |             var wrap = doc.createElement('div');
33 |             wrap.appendChild(metaEl);
34 |             doc.write(wrap.innerHTML);
35 |         }
36 |     })();
37 | 
38 |     var isMobile = navigator.userAgent.toLowerCase().match(/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile|micromessenger/i);
39 |     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
40 |         clientWidth = docEl.clientWidth,    // 此处放在外层防止input唤起页面重新计算font-size
41 |         clientHeight = docEl.clientHeight,
42 |         min = Math.min(clientWidth, clientHeight),
43 |         recalc = function () {
44 |             if (!!isMobile) {
45 |                 // 移动端按640标准（以iphone5标准开发，iphone5上1rem == 100px）设置字体
46 |                 var fontSize = Math.floor(min / 64) * 10;
47 |                 docEl.style.fontSize = fontSize + 'px';
48 |             } else { // 此处为兼容pc端手动调整的，不影响手机上效果(pc上1px任然为1px)
49 |                 docEl.style.fontSize = '100px';
50 |             }
51 |             // 页面横竖屏切换时让页面向上滚动到顶部，解决fixed定位浮动bug
52 |             window.scrollTo(0, 0);
53 |         };
54 | 
55 |     // 如果浏览器不支持addEventListener方法，终止运行
56 |     if (!doc.addEventListener) return;
57 |     win.addEventListener(resizeEvt, recalc, false); // 页面调试(横竖屏)时重新设置字体
58 |     doc.addEventListener('DOMContentLoaded', recalc, false); // 页面dom结构加载完设置字体
59 | })(document, window);
60 | 


--------------------------------------------------------------------------------
/src/components/page/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="mainpage">
 3 |         <ul class="input-box">
 4 |             <li class="input-box-item">
 5 |                 <span>入住日期</span>
 6 |                 <router-link class="input-box-item-content" to="/calendarpage" tag="div" type="text">
 7 |                     {{info.checkInDate}}
 8 |                     <span class="today" v-show="showTodayText(info.checkInDate)">今天</span>
 9 |                 </router-link>
10 |             </li>
11 |             <li class="input-box-item">
12 |                 <span>离店日期</span>
13 |                 <router-link class="input-box-item-content" to="/calendarpage" tag="div" type="text">
14 |                     {{info.checkOutDate}}
15 |                 </router-link>
16 |             </li>
17 |         </ul>
18 |     </div>
19 | </template>
20 | 
21 | <script>
22 |     export default {
23 |         props: {
24 |             info: {}
25 |         },
26 |         components: {},
27 |         methods: {
28 |             showTodayText(str) {
29 |                 let today = new Date();
30 |                 let dateArr = str.split('-');
31 |                 if (today.getFullYear().toString() === dateArr[0] && (today.getMonth() + 1).toString() === dateArr[1] && today.getDate().toString() === dateArr[2]) {
32 |                     return true;
33 |                 }
34 |                 return false;
35 |             }
36 |         }
37 |     };
38 | </script>
39 | 
40 | <style lang="scss">
41 |     #mainpage {
42 |         margin: 0.3rem;
43 |         padding: 0.35rem;
44 |         background-color: #FFFFff;
45 |         border: solid #F0F0F0 1px;
46 |         border-radius: 5px;
47 |         color: #6a6f77;
48 |         .input-box {
49 |             /*margin-top: 10px;*/
50 |             .input-box-item {
51 |                 margin-bottom: 0.16rem;
52 |                 height: 0.8rem;
53 |                 line-height: 0.8rem;
54 |                 display: flex;
55 |                 font-size: 0.3rem;
56 |                 span {
57 |                     flex-basis: 1.3rem;
58 |                     text-align: center;
59 |                     color: #999999;
60 |                 }
61 |                 .input-box-item-content {
62 |                     position: relative;
63 |                     appearance: none;
64 |                     outline: none;
65 |                     flex-grow: 1;
66 |                     margin-left: 0.25rem;
67 |                     padding-left: 0.25rem;
68 |                     height: 0.8rem;
69 |                     border-radius: 4px;
70 |                     background-color: #f4f4f4;
71 |                     color: #4c4c4c;
72 |                     .today {
73 |                         float: right;
74 |                         padding-right: 0.2rem;
75 |                         color: #4c4c4c;
76 |                     }
77 |                 }
78 |             }
79 |         }
80 |         .submit {
81 |             margin-bottom: 12px;
82 |             border-radius: 5px;
83 |             height: 0.8rem;
84 |             line-height: 0.8rem;
85 |             background-color: #F28300;
86 |             font-size: 0.3rem;
87 |             color: #FFFFff;
88 |             text-align: center;
89 |         }
90 |     }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/src/common/vhomed.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by 38079 on 2017/8/17.
 3 |  */
 4 | let vhomed = {
 5 | };
 6 | vhomed.install = function (Vue, options) {
 7 |     // 调整页面
 8 |     (function (doc, win) {
 9 |         let docEl = doc.documentElement;
10 | 
11 |         // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale
12 |         (function () {
13 |             let dpr = 1;
14 |             let scale = 1;
15 |             let isIPhone = win.navigator.appVersion.match(/iphone/gi);
16 |             let devicePixelRatio = win.devicePixelRatio;
17 | 
18 |             if (isIPhone) {
19 |                 // iOS下，对于2和3的屏，用2、3倍的方案，其余的用1倍方案
20 |                 if (devicePixelRatio >= 3) {
21 |                     dpr = 3;
22 |                 } else if (devicePixelRatio >= 2) {
23 |                     dpr = 2;
24 |                 }
25 |             }
26 |             scale = 1 / dpr;
27 | 
28 |             let metaEl = '';
29 |             metaEl = doc.createElement('meta');
30 |             metaEl.setAttribute('name', 'viewport');
31 |             metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',user-scalable=no');
32 |             if (docEl.firstElementChild) {
33 |                 docEl.firstElementChild.appendChild(metaEl);
34 |             } else {
35 |                 let wrap = doc.createElement('div');
36 |                 wrap.appendChild(metaEl);
37 |                 doc.write(wrap.innerHTML);
38 |             }
39 |             let divElBasement = doc.createElement('div');
40 |             divElBasement.setAttribute('id', 'basement');
41 |             let bodyEl = doc.body;
42 |             bodyEl.appendChild(divElBasement);
43 |         })();
44 | 
45 |         let isMobile = navigator.userAgent.match(/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile|micromessenger/i);
46 |         let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
47 |         let clientWidth = docEl.clientWidth;   // 此处放在外层防止input唤起页面重新计算font-size
48 |         let clientHeight = docEl.clientHeight;
49 |         let min = Math.min(clientWidth, clientHeight);
50 |         let recalc = function () {
51 |             /* eslint-enable */
52 |             if (isMobile) {
53 |                 // 移动端按750标准（以iphone5标准开发，iphone5上1rem == 100px）设置字体
54 |                 let fontSize = Math.floor(min / 75) * 10;
55 |                 docEl.style.fontSize = fontSize + 'px';
56 |             } else { // 此处为兼容pc端手动调整的，不影响手机上效果(pc上1px任然为1px)
57 |                 docEl.style.fontSize = '100px';
58 |             }
59 |             // 页面横竖屏切换时让页面向上滚动到顶部，解决fixed定位浮动bug
60 |             window.scrollTo(0, 0);
61 |         };
62 | 
63 |         // 如果浏览器不支持addEventListener方法，终止运行
64 |         if (!doc.addEventListener) return;
65 |         win.addEventListener(resizeEvt, recalc, false); // 页面调试(横竖屏)时重新设置字体
66 |         doc.addEventListener('DOMContentLoaded', recalc, false); // 页面dom结构加载完设置字体
67 |     })(document, window);
68 |     Vue.prototype.$util = {
69 |         // 禁用缩放手势
70 |         forbidScal: function () {
71 |             document.addEventListener('touchstart', function (event) {
72 |                 if (event.touches.length > 1) {
73 |                     event.preventDefault();
74 |                 }
75 |             });
76 |             let lastTouchEnd = 0;
77 |             document.addEventListener('touchend', function (event) {
78 |                 let now = (new Date()).getTime();
79 |                 if (now - lastTouchEnd <= 300) {
80 |                     event.preventDefault();
81 |                 }
82 |                 lastTouchEnd = now;
83 |             }, false);
84 |         }
85 |     };
86 | };
87 | export default vhomed;
88 | 
89 | 


--------------------------------------------------------------------------------
/src/components/page/calendarpage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="calendar">
  3 |         <div class="calendar-header" v-if="needBlank">
  4 |             <div class="back" @click="goBack()"><span class="back-icon">亃</span>返回</div>
  5 |             <div class="title">日历</div>
  6 |         </div>
  7 |         <!--星期面板-->
  8 |         <div class="week">
  9 |             <div class="week-day weekend-day">日</div>
 10 |             <div class="week-day">一</div>
 11 |             <div class="week-day">二</div>
 12 |             <div class="week-day">三</div>
 13 |             <div class="week-day">四</div>
 14 |             <div class="week-day">五</div>
 15 |             <div class="week-day weekend-day">六</div>
 16 |         </div>
 17 |         <div class="calendar-content" ref="calendarWraper" :class="{blank: needBlank}">
 18 |             <div style="">
 19 |                 <div class="calendar-content-item" v-for="month in allMonthData">
 20 |                     <div class="calendar-content-title">{{month.year}}年{{month.month}}月</div>
 21 |                     <ul class="calendar-content-day">
 22 |                         <li class="day-item" @click="selectDate(month, day)"
 23 |                             :class="{holiday: day.isWeekend || (typeof day.showDate) !== 'number', disable: day.isDisable}" v-for="day in month.date">
 24 |                             <p class="day-item-num"
 25 |                                :class="{CheckInDate: day.isCheckInDate,themeBackground: day.isCheckInDate || day.isCheckOutDate, CheckOutDate: day.isCheckOutDate}">
 26 |                                 {{day.showDate}}</p>
 27 |                             <p class="check-block holiday" v-show="day.isCheckInDate">入住</p>
 28 |                             <p class="check-block holiday" v-show="day.isCheckOutDate">离店</p>
 29 |                             <p class="restDay" v-show="day.isRestDay && !day.isWeekend">休</p>
 30 |                         </li>
 31 |                     </ul>
 32 |                 </div>
 33 |             </div>
 34 |         </div>
 35 |     </div>
 36 | </template>
 37 | 
 38 | <script>
 39 |     import BScroll from 'better-scroll';
 40 |     export default {
 41 |         props: {
 42 |             info: {},
 43 |             needBlank: true
 44 |         },
 45 |         data() {
 46 |             return {
 47 |                 allMonthData: [],
 48 |                 checkInDate: {},
 49 |                 checkOutDate: {},
 50 |                 restDayList: {}
 51 |             };
 52 |         },
 53 |         created() {
 54 |             // 需要显示节假日需要更新节假日信息，没有找到合适的节假日接口，这部分以后更新
 55 |             this.getAllMonthData(12);
 56 |             this.initRestDayList();
 57 |             let checkInMonth = this.info.checkInDate.split('-')[1];
 58 |             let checkInDate = this.info.checkInDate.split('-')[2];
 59 |             let checkOutMonth = this.info.checkOutDate.split('-')[1];
 60 |             let checkOutDate = this.info.checkOutDate.split('-')[2];
 61 |             for (let month of this.allMonthData) {
 62 |                 if ((month.month + '') === checkInMonth) {
 63 |                     for (let date of month.date) {
 64 |                         if ((date.showDate + '') === checkInDate) {
 65 |                             date.isCheckInDate = true;
 66 |                             this.checkInDate = {
 67 |                                 month: month,
 68 |                                 date: date
 69 |                             };
 70 |                             break;
 71 |                         }
 72 |                     }
 73 |                 }
 74 |                 if ((month.month + '') === checkOutMonth) {
 75 |                     for (let date of month.date) {
 76 |                         if ((date.showDate + '') === checkOutDate) {
 77 |                             date.isCheckOutDate = true;
 78 |                             this.checkOutDate = {
 79 |                                 month: month,
 80 |                                 date: date
 81 |                             };
 82 |                             break;
 83 |                         }
 84 |                     }
 85 |                     break;
 86 |                 }
 87 |             }
 88 |             this.$nextTick(function () {
 89 |                 this._initScroll();
 90 |             });
 91 |         },
 92 |         methods: {
 93 |             goBack() {
 94 |                 window.history.go(-1);
 95 |             },
 96 |             getMonthData(year, month) {
 97 |                 let ret = [];
 98 |                 if (!year || !month) {
 99 |                     let today = new Date();
100 |                     year = today.getFullYear();
101 |                     month = today.getMonth() + 1;
102 |                 }
103 |                 let firstDay = new Date(year, month - 1, 1);
104 |                 let firstWeekDay = firstDay.getDay();
105 |                 let firstDayWeekDay = firstDay.getDay();
106 |                 let preMonthDayCount = firstDayWeekDay - 1;
107 |                 let lastDay = new Date(year, month, 0);
108 |                 let lastDate = lastDay.getDate();
109 |                 for (let i = 0; i < 38; i++) {
110 |                     let date = i - preMonthDayCount;
111 |                     let showDate = date;
112 |                     if (date <= 0) {
113 |                         showDate = '';
114 |                     } else if (date > lastDate) {
115 |                         continue;
116 |                     }
117 |                     let isWeekend = false;
118 |                     if ((showDate + firstWeekDay) % 7 === 0 || (showDate + firstWeekDay) % 7 === 1) {
119 |                         isWeekend = true;
120 |                     }
121 |                     let isRestDay = false;
122 |                     ret.push({
123 |                         showDate: showDate,
124 |                         isWeekend: isWeekend,
125 |                         isCheckInDate: false,
126 |                         isCheckOutDate: false,
127 |                         isRestDay: isRestDay
128 |                     });
129 |                 }
130 |                 return ret;
131 |             },
132 |             getAllMonthData(num) {
133 |                 let todayData = new Date();
134 |                 let thisYear = todayData.getFullYear();
135 |                 let thisMonth = todayData.getMonth() + 1;
136 |                 let temp = [];
137 |                 for (let i = 0; i < num; i++) {
138 |                     if (thisMonth > 12) {
139 |                         thisYear += 1;
140 |                         thisMonth = 1;
141 |                     }
142 |                     temp[i] = {
143 |                         year: thisYear,
144 |                         month: thisMonth,
145 |                         date: this.getMonthData(thisYear, thisMonth)
146 |                     };
147 |                     thisMonth += 1;
148 |                 }
149 |                 // 第一个月今天之前的日期不可点击
150 |                 for (let i of temp[0].date) {
151 |                     let today = new Date();
152 |                     if (i.showDate >= today.getDate()) {
153 |                         break;
154 |                     }
155 |                     i.isDisable = true;
156 |                 }
157 |                 this.allMonthData = temp;
158 |             },
159 |             _initScroll() {
160 |                 this.itemScoll = new BScroll(this.$refs.calendarWraper, {
161 |                     click: true,
162 |                     probeType: 1
163 |                 });
164 |             },
165 |             initRestDayList() {
166 |                 let param = '';
167 |                 param = 2018;
168 |                 this.$ajax.get('http://apps.homed.me/payTest/trans.php', {
169 |                     params: {
170 |                         year: param
171 |                     }
172 |                 }).then(res => {
173 |                     let holiday = JSON.parse(res.data.result.data.holidaylist);
174 |                     for (let i in holiday) {
175 |                         let arr = holiday[i].startday.split('-');
176 |                         for (let m in this.allMonthData) {
177 |                             if (this.allMonthData[m].year.toString() !== arr[0] || this.allMonthData[m].month.toString() !== arr[1]) {
178 |                             } else {
179 |                                 for (let n in this.allMonthData[m].date) {
180 |                                     if (this.allMonthData[m].date[n].showDate.toString() === arr[2]) {
181 |                                         this.allMonthData[m].date[n].showDate = holiday[i].name.substring(0, 2);
182 |                                     }
183 |                                 }
184 |                             }
185 |                         }
186 |                     }
187 |                 });
188 |             },
189 |             selectDate(month, day) {
190 |                 if (day.isDisable) {
191 |                     return;
192 |                 }
193 |                 if (this.checkInDate.date.isCheckInDate && this.checkOutDate.date.isCheckOutDate) {
194 |                     this.checkInDate.date.isCheckInDate = false;
195 |                     this.checkOutDate.date.isCheckOutDate = false;
196 |                     day.isCheckInDate = true;
197 |                     this.checkInDate = {
198 |                         date: day,
199 |                         month: month
200 |                     };
201 |                 } else if (this.checkInDate.date.isCheckInDate && !this.checkOutDate.date.isCheckOutDate) {
202 |                     // 判断点击是改变入住日期还是离店日期，年，年相等判断月，月相等判断日
203 |                     if (month.year > this.checkInDate.month.year || ((month.year === this.checkInDate.month.year) && (month.month > this.checkInDate.month.month)) || ((month.year === this.checkInDate.month.year) && (month.month === this.checkInDate.month.month) && day.showDate > this.checkInDate.date.showDate)) {
204 |                         day.isCheckOutDate = true;
205 |                         day.isCheckInDate = false;
206 |                         this.checkOutDate = {
207 |                             date: day,
208 |                             month: month
209 |                         };
210 |                     } else {
211 |                         this.checkInDate.date.isCheckInDate = false;
212 |                         day.isCheckInDate = true;
213 |                         this.checkInDate = {
214 |                             date: day,
215 |                             month: month
216 |                         };
217 |                     }
218 |                 }
219 |                 if (this.checkInDate.date.isCheckInDate && this.checkOutDate.date.isCheckOutDate) {
220 |                     this.info.checkInDate = this.checkInDate.month.year + '-' + this.checkInDate.month.month + '-' + this.checkInDate.date.showDate;
221 |                     this.info.checkOutDate = this.checkOutDate.month.year + '-' + this.checkOutDate.month.month + '-' + this.checkOutDate.date.showDate;
222 |                     window.history.go(-1);
223 |                 }
224 |             }
225 |         }
226 |     };
227 | </script>
228 | 
229 | <style lang="scss">
230 |     .calendar {
231 |         .calendar-header {
232 |             border-bottom: solid 1px #EEEEEE;
233 |             background-color: #F28300;
234 |             padding-top: 0.48rem;
235 |             height: 0.8rem;
236 |             line-height: 0.8rem;
237 |             font-size: 0.36rem;
238 |             font-family: PingFang-SC-Bold;
239 |             color: #FFFFFF;
240 |             .back {
241 |                 position: absolute;
242 |                 padding-left: 0.27rem;
243 |                 width: 1rem;
244 |                 font-size: 0.32rem;
245 |                 .back-icon {
246 |                     font-family: iconfont;
247 |                 }
248 |             }
249 |             .title {
250 |                 text-align: center;
251 |             }
252 |         }
253 |         .week {
254 |             display: flex;
255 |             background-color: #FFFFff;
256 |             height: 0.5rem;
257 |             line-height: 0.5rem;
258 |             .week-day {
259 |                 flex: 1;
260 |                 color: #111111;
261 |                 font-size: 0.24rem;
262 |                 text-align: center;
263 |             }
264 |             .weekend-day {
265 |                 color: #F28300;
266 |             }
267 |         }
268 |         .blank {
269 |             margin-top: 1.28rem;
270 |         }
271 |         .calendar-content {
272 |             position: absolute;
273 |             top: 0.5rem;
274 |             bottom: 0;
275 |             width: 100%;
276 |             overflow: hidden;
277 |             font-size: 0.29rem;
278 |             .calendar-content-item {
279 |                 .calendar-content-title {
280 |                     width: 100%;
281 |                     text-align: center;
282 |                     height: 0.5rem;
283 |                     line-height: 0.5rem;
284 |                 }
285 |                 .calendar-content-day {
286 |                     background: #ffffff;
287 |                     overflow: hidden;
288 |                     .holiday {
289 |                         color: #F28300;
290 |                     }
291 |                     .day-item {
292 |                         position: relative;
293 |                         float: left;
294 |                         width: 14.2%;
295 |                         height: 1.27rem;
296 |                         text-align: center;
297 |                         .day-item-num {
298 |                             margin: 0.42rem auto 0;
299 |                             height: 0.58rem;
300 |                             width: 0.58rem;
301 |                             line-height: 0.58rem;
302 |                         }
303 |                         .CheckInDate, .CheckOutDate {
304 |                             border-radius: 0.14rem;
305 |                             color: #ffffff;
306 |                             background-color: #F28300;
307 |                         }
308 |                         .check-block {
309 |                             display: block;
310 |                             height: 0.27rem;
311 |                             line-height: 0.27rem;
312 |                             font-size: 0.2rem;
313 |                         }
314 |                         .restDay {
315 |                             position: absolute;
316 |                             top: 0.2rem;
317 |                             right: 0;
318 |                             font-size: 0.18rem;
319 |                             color: #F28300;
320 |                         }
321 |                     }
322 |                     .disable {
323 |                         color: gray;
324 |                     }
325 |                 }
326 |             }
327 |         }
328 |     }
329 | </style>
330 | 


--------------------------------------------------------------------------------