├── .gitignore
├── static
    ├── preview.png
    └── date-picker
    │   └── gif.gif
├── main.js
├── App.vue
├── pages.json
├── ReleaseNote.md
├── manifest.json
├── README.md
├── pages
    └── index
    │   └── index.vue
└── components
    └── date-picker
        └── date-picker.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | unpackage/*
3 | *.zip
4 | *.rar


--------------------------------------------------------------------------------
/static/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/uni-app-date-picker/HEAD/static/preview.png


--------------------------------------------------------------------------------
/static/date-picker/gif.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhangdaren/uni-app-date-picker/HEAD/static/date-picker/gif.gif


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | App.mpType = 'app'
 7 | 
 8 | const app = new Vue({
 9 |     ...App
10 | })
11 | app.$mount()
12 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export default {
 3 | 		onLaunch: function () {
 4 | 			console.log('App Launch')
 5 | 		},
 6 | 		onShow: function () {
 7 | 			console.log('App Show')
 8 | 		},
 9 | 		onHide: function () {
10 | 			console.log('App Hide')
11 | 		}
12 | 	}
13 | </script>
14 | 
15 | <style>
16 | 	/*每个页面公共css */
17 | </style>
18 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 3 | 		{
 4 | 			"path": "pages/index/index",
 5 | 			"style": {
 6 | 				"navigationBarTitleText": "uni-app datePicker"
 7 | 			}
 8 | 		}
 9 | 	],
10 | 	"globalStyle": {
11 | 		"navigationBarTextStyle": "black",
12 | 		"navigationBarTitleText": "uni-app",
13 | 		"navigationBarBackgroundColor": "#F8F8F8",
14 | 		"backgroundColor": "#F8F8F8"
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/ReleaseNote.md:
--------------------------------------------------------------------------------
 1 | # 历史更新记录
 2 | ======================================
 3 | 
 4 | ## v1.0.17(20191020)   
 5 | * 新增动态调整初始日期，调整startDate和endDate绑定的值即可，示例有做描述   
 6 |    
 7 | ## v1.0.16(20190928)   
 8 | * 修复H5确认按钮被覆盖的bug   
 9 |    
10 | ## v1.0.15(20190824)   
11 | * 新增singleDate模式，可以选择单个日期，赋值使用startDate，后面会支持选择今天之前的日期(架构需要做大的调整才行)
12 | * 修复非今年的星期有误的bug   
13 | 
14 | ## v1.0.14(20190613)   
15 | * 修复星期不对的问题(┑(￣Д ￣)┍,几个版本终于修复好)   
16 | * 小修小补，支持显示今天、明天、后天。   
17 |    
18 | ## v1.0.13(20190604)   
19 | * [新增] 主题颜色支持修改：修改date-picker.vue里$themeColor的值即可，暂未想到更好的方法，欢迎给意见~   
20 | * [新增] 支持回填数据，参数为startDate和endDate，仅支持字符串，如"2019-06-05"，已做好防错处理(如小于今天的情况，开始时间在结束时间之后的情况等)   
21 | * [新增] 支持修改总共显示多少天，参数daysCount，范围为60 < x < 360，考虑到性能，将最大天数限制在360天内   
22 | * 修复首月星期显示不对的问题   
23 |    
24 | ## v1.0.12(20190523)   
25 | * 修改完成按钮显示逻辑，根据是否选择日期来决定完成按钮显示状态，避免选择单个日期产生的bug(之前参考某网友建议，设置按钮为常开，现修改按钮为按需显示，与美图保持一致，特此说明。)   
26 | * 修改显示逻辑，支持onBackPress()事件
27 |    
28 | ## v1.0.11(20190523)   
29 | * 修复星期显示问题   
30 |    
31 | ## v1.0.10(20190523)   
32 | * 隐藏日期上面的星期显示（忙乱中忘记改回去了）   
33 |    
34 | ## v1.0.9(20190522)   
35 | * 回调里，新增日期的星期参数   
36 |    
37 | ## v1.0.8(20190522)   
38 | * 新增支持无界面、纯弹窗模式，代码如``` html<calendar :modal="true" :show="showCaledar"></calendar>```，modal设为true，通过属性show来控制显示/隐藏   
39 | * 修复最新小程序报错的问题(Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors)   
40 | * 修复多次弹出弹窗后，重置天数为1的问题   
41 | * 修复样式问题   
42 |    
43 | ## v1.0.7(20190521)   
44 | * 解决月星期显示不对的问题，感谢网友指正   
45 | * 适配最新自定义组件编译模式，如遇小程序/app不能正常使用时，请下载最新版   
46 |    
47 | ## v1.0.6(20190403)   
48 | * 解决日期显示禁用的重大bug（感谢976996406@qq.com反馈）   
49 | * 解决时间显示错误的问题。   
50 | * 近段时间有点忙，时间回显的功能看了看还需要点时间。   
51 |    
52 | ## v1.0.5(20190322)   
53 | * 小众问题修改   
54 |    
55 | ## v1.0.4   
56 | * 组件内view设置为flex布局，防止样式污染   
57 |    
58 | ## v1.0.3   
59 | * 回调参数修改   
60 |    
61 | ## v1.0.2   
62 | * 支持H5平台   
63 |    
64 | ## v1.0.1   
65 | * 增加change事件，回调函数里返回所选区间和入住的时间（即几晚）   
66 | * 限制只能点击确认按钮选择日期，点击遮罩或点击x都会重置时间到选择之前的数据   
67 |    
68 | ## v1.0.0   
69 | * 初次提交   
70 |    
71 |    
72 | ## Future   
73 | * 无标签式启动   
74 | * 配置参数：颜色
75 | * ps：因近段时间较忙，节后将尽快更新。


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "datePicker",
 3 | 	"appid": "",
 4 | 	"description": "",
 5 | 	"versionName": "1.0.0",
 6 | 	"versionCode": "100",
 7 | 	"transformPx": false,
 8 | 	"app-plus": {
 9 | 		"usingComponents": true,
10 | 		"nvueCompiler": "uni-app", //是否启用 uni-app 模式  
11 | 		/* 5+App特有相关 */
12 | 		"modules": {},
13 | 		/* 模块配置 */
14 | 		"distribute": {
15 | 			/* 应用发布信息 */
16 | 			"android": {
17 | 				/* android打包配置 */
18 | 				"permissions": [
19 | 					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
20 | 					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
21 | 					"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
22 | 					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
23 | 					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
24 | 					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
25 | 					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
26 | 					"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
27 | 					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
28 | 					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
29 | 					"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
30 | 					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
31 | 					"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
32 | 					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
33 | 					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
34 | 					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
35 | 					"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
36 | 					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
37 | 					"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
38 | 					"<uses-feature android:name=\"android.hardware.camera\"/>",
39 | 					"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
40 | 					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
41 | 				]
42 | 			},
43 | 			"ios": {},
44 | 			/* ios打包配置 */
45 | 			"sdkConfigs": {}
46 | 		}
47 | 	},
48 | 	/* SDK配置 */
49 | 	"quickapp": {},
50 | 	/* 快应用特有相关 */
51 | 	"mp-weixin": {
52 | 		/* 小程序特有相关 */
53 | 		"appid": "",
54 | 		"setting": {
55 | 			"urlCheck": true
56 | 		},
57 | 		"usingComponents": true
58 | 	}
59 | }
60 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # uni-app-date-picker
  2 | uni-app 酒店日期选择插件
  3 |    
  4 | 功能基本参照美团APP来实现的，期间因uniapp框架限制，判断代码只能长串写在标签上，导致元素也增了许多，性能和操控受影响，因而将滑动固定月份标题功能砍掉了，后续再考虑加入。
  5 |    
  6 | 说明：目前支持APP、微信小程序和H5平台。其他平台未测试，理论支持   
  7 | 
  8 |    
  9 | ##### 大更新：新增支持无界面、纯弹窗模式。
 10 | ##### 代码如：
 11 | ``` html<calendar :modal="true" :show="showCaledar"></calendar>```
 12 | ##### 使用方式：modal设为true，通过属性show来控制显示/隐藏   
 13 |    
 14 |    
 15 | 部分代码来源于：[https://github.com/zrxisme/date-for-wx](https://github.com/zrxisme/date-for-wx)。   
 16 |    
 17 | 反馈问题请描述所使用的平台和重现步骤，谢谢~~   
 18 |    
 19 |    
 20 | ---
 21 | ## 回调函数示例：
 22 | 
 23 | ``` html
 24 | <!-- 组件模式(有界面)  -->
 25 | <calendar @change="change"></calendar>
 26 |    
 27 |    
 28 | <!-- 弹窗模式(无界面) -->
 29 | <calendar @change="change2" :modal="true" :show="showCaledar"></calendar>
 30 | 
 31 | <text class="text-center dateStr">{{ dateStr }}</text>
 32 | <button class="btn" @tap="showCaledar = !showCaledar">显示/隐藏</button>
 33 | ``` 
 34 |    
 35 |    
 36 |    
 37 | ``` javascript
 38 | export default {
 39 | 	data() {
 40 | 		return {
 41 | 			showCaledar: false,
 42 | 			dateStr: ''
 43 | 		};
 44 | 	},
 45 | 	components: {
 46 | 		calendar
 47 | 	},
 48 | 	methods: {
 49 | 		change({ choiceDate, dayCount }) {
 50 | 			//参数解释
 51 | 			//1.choiceDate 时间区间（开始时间和结束时间）
 52 | 			//2.dayCount 共多少晚
 53 | 
 54 | 			console.log(choiceDate, dayCount);
 55 | 			console.log('入住从 ' + choiceDate[0].re + '  到 ' + choiceDate[1].re + '  共 ' + dayCount + ' 晚');
 56 | 		},
 57 | 		change2({ choiceDate, dayCount }) {
 58 | 			this.dateStr = '入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' + choiceDate[1].week + ')' + '  共 ' + dayCount + ' 晚 ';
 59 | 		}
 60 | 	}
 61 | }
 62 | ```
 63 |    
 64 |     
 65 | ---
 66 | ## 参数示例：
 67 | | 属性名 | 类型 | 默认值 | 说明 |
 68 | |---|---|---|---|
 69 | | modal | Boolean | false | 是否为弹窗模式，默认为false|
 70 | | show | Boolean | false | 是否显示弹窗(与modal一起使用)，默认为false|
 71 | | singleDate | Boolean | false | 表示是否只选择一个日期，默认为false |
 72 | | startDate | String | 今天 | 开始时间，默认为今天|
 73 | | endDate |String |明天 | 开始时间，默认为明天 |
 74 | | daysCount | String | 150天 | 显示的天数范围: 60 < x < 360(从今天算起) |
 75 | | change | EventHandle | | 选择日期后的回调事件，event.detail = {choiceDate: value1,dayCount:value2} |
 76 | 
 77 | ---
 78 | ## 效果图：
 79 | ![效果图](https://zhangdaren.github.io/uni-app-date-picker/static/date-picker/gif.gif)
 80 |    
 81 |    
 82 |    ## TODO
 83 | * 选中的日期可能会被挡掉
 84 | * 语种
 85 | * nvue版本
 86 | * 历史时间选择(优先级低)
 87 | -------------------------
 88 | 弹窗模式上，不能根据show变量来显示/隐藏
 89 | ------------------------
 90 | 
 91 | ---
 92 | ## 更新历史说明：   
 93 | ## v1.0.20(20201029)   
 94 | * 修复2021没有假日数据出错的问题
 95 | 
 96 | ## v1.0.19(20200110)   
 97 | * 增加法定节假日和补班的显示，替换之前的假日显示，更符合国情
 98 | * 优化dayCount为从今天开始算起 
 99 | 
100 | ## v1.0.18(20191107)   
101 | * 修复单个日期显示错误   
102 | * 修复app平台上弹窗模式，没有完成按钮   
103 | 


--------------------------------------------------------------------------------
/pages/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<view class="content">
  3 | 		<text class="text-center title">酒店日期选择插件</text>
  4 | 
  5 | 		<!-- 组件模式(有界面)  -->
  6 | 		<text class="text-center subTitle">1.组件模式(有界面)</text>
  7 | 		<calendar @change="change" :startDate="initStartDate" :endDate="initEndDate" :daysCount="daysCount"></calendar>
  8 | 		<button class="btn" @tap="setRandomDate()">随机设置日期</button>
  9 | 
 10 | 		<!-- 组件模式(有界面)  -->
 11 | 		<text class="text-center subTitle">2.组件模式(有界面)-->单个日期选择</text>
 12 | 		<calendar @change="change_single" startDate="2019-11-07" :daysCount="daysCount" :singleDate="singleDate"></calendar>
 13 | 
 14 | 
 15 | 		<!-- 弹窗模式(无界面) -->
 16 | 		<text class="text-center subTitle">3.弹窗模式(无界面)</text>
 17 | 		<text class="text-center desc">需要设置modal为true(默认为false), 通过show来控制隐藏还是显示</text>
 18 | 		<calendar @change="change2" :modal="true" :show="showCaledar"></calendar>
 19 | 		<text class="text-center dateStr">{{ dateStr }}</text>
 20 | 		<button class="btn" @tap="showCaledar = !showCaledar">显示/隐藏{{showCaledar}}</button>
 21 | 		
 22 | 	</view>
 23 | </template>
 24 | 
 25 | <script>
 26 | 	import calendar from '../../components/date-picker/date-picker';
 27 | 
 28 | 	export default {
 29 | 		data() {
 30 | 			return {
 31 | 				showCaledar: false,
 32 | 				dateStr: '',
 33 | 				daysCount: 130,
 34 | 				singleDate: true,
 35 | 
 36 | 				//初始日期
 37 | 				initStartDate: '2019-12-06',
 38 | 				initEndDate: '2019-12-07',
 39 | 			};
 40 | 		},
 41 | 		components: {
 42 | 			calendar
 43 | 		},
 44 | 		onLoad() {},
 45 | 		onBackPress() {
 46 | 			if (this.showCaledar !== false) {
 47 | 				this.showCaledar = false;
 48 | 				return true;
 49 | 			}
 50 | 		},
 51 | 		methods: {
 52 | 			change({
 53 | 				choiceDate,
 54 | 				dayCount
 55 | 			}) {
 56 | 				//参数解释
 57 | 				//1.choiceDate 时间区间（开始时间和结束时间）
 58 | 				//2.dayCount 共多少晚
 59 | 
 60 | 				// console.log(choiceDate, dayCount);
 61 | 				console.log('入住从 ' + choiceDate[0].re + '  到 ' + choiceDate[1].re + '  共 ' + dayCount + ' 晚');
 62 | 			},
 63 | 			change2({
 64 | 				choiceDate,
 65 | 				dayCount
 66 | 			}) {
 67 | 				this.dateStr =
 68 | 					'入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' + choiceDate[1].week +
 69 | 					')' + '  共 ' + dayCount + ' 晚 ';
 70 | 			},
 71 | 			change_single({
 72 | 				choiceDate,
 73 | 				dayCount
 74 | 			}) {
 75 | 				console.log(choiceDate, dayCount);
 76 | 			},
 77 | 			setRandomDate() {
 78 | 				this.initStartDate = '2019-12-' + parseInt(Math.random() * 29 + 1);
 79 | 				this.initEndDate = '2019-12-31';
 80 | 			}
 81 | 		}
 82 | 	};
 83 | </script>
 84 | 
 85 | <style>
 86 | 	view {
 87 | 		display: flex;
 88 | 	}
 89 | 
 90 | 	.content {
 91 | 		justify-content: center;
 92 | 		flex-direction: column;
 93 | 		padding: 0 20upx;
 94 | 	}
 95 | 
 96 | 	.sliderBox {
 97 | 		justify-content: center;
 98 | 		margin-right: 50upx;
 99 | 	}
100 | 
101 | 	.text-center {
102 | 		justify-content: center;
103 | 	}
104 | 
105 | 	.title {
106 | 		font-size: 48upx;
107 | 		/* font-weight: bold; */
108 | 		text-align: center;
109 | 		margin-top: 50upx;
110 | 	}
111 | 
112 | 	.subTitle {
113 | 		margin-top: 70upx;
114 | 		margin-bottom: 30upx;
115 | 		font-weight: bold;
116 | 	}
117 | 
118 | 	.desc {
119 | 		color: #999999;
120 | 		font-size: 30upx;
121 | 	}
122 | 
123 | 	.dateStr {
124 | 		font-size: 32upx;
125 | 		margin-top: 30upx;
126 | 	}
127 | 
128 | 	.rowBox {
129 | 		flex-direction: row;
130 | 		align-items: center;
131 | 		justify-content: center;
132 | 	}
133 | 
134 | 	.mrg50T {
135 | 		margin-top: 50upx;
136 | 	}
137 | 
138 | 	.tips {
139 | 		color: #999;
140 | 		font-size: 24upx;
141 | 		text-align: center;
142 | 		margin-top: 100upx;
143 | 	}
144 | 
145 | 	.btn {
146 | 		margin-top: 50upx;
147 | 	}
148 | </style>
149 | 


--------------------------------------------------------------------------------
/components/date-picker/date-picker.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 | 	<view>
   3 | 		<view class="order-time" @tap="showCalendar()" v-if="!modal">
   4 | 			<view class="time-viewer" v-if="singleDate">{{ choiceDate[0].year }}年{{ choiceDate[0].month }}月{{ choiceDate[0].day }}日</view>
   5 | 			<view class="time-viewer" v-else>
   6 | 				<text class="goInHotel">入住</text>
   7 | 				<text class="date-wrappper">{{ choiceDate[0].month }}月{{ choiceDate[0].day }}日</text>
   8 | 				<text class="goInHotel2" v-if="choiceDate[0].year + '' + choiceDate[0].month + '' + choiceDate[0].day == today">今天</text>
   9 | 				<text class="left-hotel">离店</text>
  10 | 				<text class="date-wrappper">{{ choiceDate[1].month }}月{{ choiceDate[1].day }}日</text>
  11 | 				<text
  12 | 					class="goInHotel2"
  13 | 					v-if="choiceDate[choiceDate.length - 1].year + '' + choiceDate[choiceDate.length - 1].month + '' + choiceDate[choiceDate.length - 1].day == tomorrow"
  14 | 				>
  15 | 					明天
  16 | 				</text>
  17 | 				<text class="sumCount">{{ dayCount2 }}</text>
  18 | 			</view>
  19 | 		</view>
  20 | 
  21 | 		<view class="calendar-layer" :animation="animationData" :class="isShow_H5 ? 'show' : 'hide'">
  22 | 			<!-- 遮罩层 -->
  23 | 			<view class="layer-white-space" @tap="hideCalendar(false)"></view>
  24 | 
  25 | 			<view class="layer-content" :class="{ choiceDate: choice === true || singleDate }">
  26 | 				<view class="layer-header">
  27 | 					<view class="layer-close" @tap="hideCalendar(false)"></view>
  28 | 					<text class="layer-title">选择日期</text>
  29 | 				</view>
  30 | 				<!--  -->
  31 | 				<view class="layer-body">
  32 | 					<view class="week-box">
  33 | 						<text class="week-box-item" v-for="(item, tmpIndex) in weekNameArr" :key="tmpIndex">{{ item }}</text>
  34 | 					</view>
  35 | 					<!--  -->
  36 | 					<scroll-view class="layer-list" scroll-y="true">
  37 | 						<view v-for="(monthData, index) in date" :key="index" class="month">
  38 | 							<view class="month-title" :class="'m-' + monthData[0].year + '-' + monthData[0].month" :style="'z-index:' + index">
  39 | 								{{ monthData[0].year + '年' + monthData[0].month + '月' }}
  40 | 							</view>
  41 | 							<view class="month-content">
  42 | 								<view
  43 | 									v-for="(data, index2) in monthData"
  44 | 									:key="index2"
  45 | 									class="day"
  46 | 									:data-index="index"
  47 | 									:data-indexs="index2"
  48 | 									:class="
  49 | 										data.re < today
  50 | 											? 'disabled'
  51 | 											: data.selected
  52 | 											? 'active' + (data.date == choiceDate[0].date ? ' begin' : data.date == choiceDate[1].date ? ' end' : '')
  53 | 											: ''
  54 | 									"
  55 | 									:style="index2 == 0 ? 'margin-left:' + weeks[index] * (100 / 7) + '%' : ''"
  56 | 									@tap="dayClick"
  57 | 								>
  58 | 									<view class="day-content">
  59 | 										<!-- <text class="day-subject">{{ data.week }}</text> -->
  60 | 
  61 | 										<text class="day-subject holiday" v-if="getDayType(data) === '假'">{{ getDayType(data) }}</text>
  62 | 										<text class="day-subject workday" v-else-if="getDayType(data) === '班'">{{ getDayType(data) }}</text>
  63 | 										<text class="day-subject" v-else>{{ getDayType(data) }}</text>
  64 | 
  65 | 										<text class="day-txt">{{ getDayName(monthData[0].year, data) }}</text>
  66 | 
  67 | 										<text class="day-tip" v-if="!singleDate">{{ data.act.tip }}</text>
  68 | 									</view>
  69 | 									<view class="beginTip" v-if="choice === false && !singleDate">请选择离店日期</view>
  70 | 									<view class="endTip" v-if="choice">{{ dayCount2 }}</view>
  71 | 								</view>
  72 | 							</view>
  73 | 						</view>
  74 | 					</scroll-view>
  75 | 				</view>
  76 | 				<!--  -->
  77 | 				<view class="layer-footer"><view class="submitBtn" @tap="submitbtn" v-if="choice === true || singleDate">完成</view></view>
  78 | 			</view>
  79 | 		</view>
  80 | 	</view>
  81 | </template>
  82 | 
  83 | <script>
  84 | export default {
  85 | 	data() {
  86 | 		return {
  87 | 			date: [],
  88 | 			weeks: [],
  89 | 			dayCount: 1,
  90 | 			dayCount2: '共1晚',
  91 | 			festival: {
  92 | 				'0101': '元旦',
  93 | 				'0214': '情人节',
  94 | 				'0308': '妇女节',
  95 | 				'0312': '植树节',
  96 | 				'0315': '消费者权益日',
  97 | 				'0401': '愚人节',
  98 | 				'0405': '清明节',
  99 | 				'0501': '劳动节',
 100 | 				'0504': '青年节',
 101 | 				'0512': '护士节',
 102 | 				'0601': '儿童节',
 103 | 				'0701': '建党节',
 104 | 				'0801': '建军节',
 105 | 				'0910': '教师节',
 106 | 				'0928': '孔子诞辰',
 107 | 				'1001': '国庆节',
 108 | 				'1006': '老人节',
 109 | 				'1024': '联合国日',
 110 | 				'1224': '平安夜',
 111 | 				'1225': '圣诞节'
 112 | 			},
 113 | 			holidayList: {
 114 | 				y2020: {
 115 | 					holidayName: {
 116 | 						'0101': '元旦',
 117 | 						'0124': '除夕',
 118 | 						'0125': '春节',
 119 | 						'0404': '清明',
 120 | 						'0501': '劳动',
 121 | 						'0625': '端午',
 122 | 						'1001': '国庆'
 123 | 					},
 124 | 					holiday: {
 125 | 						//元旦
 126 | 						'0101': true,
 127 | 						//春节
 128 | 						'0124': true,
 129 | 						'0125': true,
 130 | 						'0126': true,
 131 | 						'0127': true,
 132 | 						'0128': true,
 133 | 						'0129': true,
 134 | 						'0130': true,
 135 | 						//清明
 136 | 						'0404': true,
 137 | 						'0405': true,
 138 | 						'0406': true,
 139 | 						//劳动
 140 | 						'0501': true,
 141 | 						'0502': true,
 142 | 						'0503': true,
 143 | 						'0504': true,
 144 | 						'0505': true,
 145 | 						//端午
 146 | 						'0625': true,
 147 | 						'0626': true,
 148 | 						'0627': true,
 149 | 						//中秋 国庆
 150 | 						'1001': true,
 151 | 						'1002': true,
 152 | 						'1003': true,
 153 | 						'1004': true,
 154 | 						'1005': true,
 155 | 						'1006': true,
 156 | 						'1007': true,
 157 | 						'1008': true
 158 | 					},
 159 | 					workday: { '0119': true, '0201': true, '0426': true, '0509': true, '0628': true, '0927': true, '1010': true }
 160 | 				},
 161 | 				y2021:{
 162 | 					holidayName:{},
 163 | 					holiday:{},
 164 | 					workday:{},
 165 | 				}
 166 | 			},
 167 | 			haveOrder: [],
 168 | 			dateFlag: {},
 169 | 			choice: '',
 170 | 			today: '',
 171 | 			choiceDate: [],
 172 | 			choiceDateArr: [],
 173 | 			tomorrow: '',
 174 | 			afterTomorrow: '',
 175 | 			weekNameArr: ['日', '一', '二', '三', '四', '五', '六'],
 176 | 			animation: null,
 177 | 			animationData: null,
 178 | 			curScrollTop: 0,
 179 | 			monthTitleRectList: [],
 180 | 			fixedId: '',
 181 | 			layerTop: 0,
 182 | 			//用来重置的
 183 | 			bak_date: [],
 184 | 			bak_weeks: [],
 185 | 			bak_choiceDate: [],
 186 | 			bak_choiceDateArr: [],
 187 | 			bak_dayCount: 1,
 188 | 			isShow_H5: '', //用于表示H5平台显示隐藏状态
 189 | 			isShow_NoH5: false, //用于表示非H5平台显示隐藏状态
 190 | 			tmpWeekArr: {} //临时数组
 191 | 		};
 192 | 	},
 193 | 	props: {
 194 | 		startDate: {
 195 | 			type: String,
 196 | 			default: ''
 197 | 		},
 198 | 		endDate: {
 199 | 			type: String,
 200 | 			default: ''
 201 | 		},
 202 | 		modal: {
 203 | 			type: Boolean,
 204 | 			default: false //默认为有界面的
 205 | 		},
 206 | 		show: {
 207 | 			type: Boolean,
 208 | 			default: false //默认不显示
 209 | 		},
 210 | 		daysCount: {
 211 | 			type: Number,
 212 | 			default: 150 //默认显示150天
 213 | 		},
 214 | 		singleDate: {
 215 | 			type: Boolean,
 216 | 			default: false //默认为false
 217 | 		}
 218 | 	},
 219 | 	components: {},
 220 | 	created() {
 221 | 		this.init();
 222 | 	},
 223 | 	onLoad() {
 224 | 		this.init();
 225 | 	},
 226 | 	watch: {
 227 | 		show: function(newVal, oldVal) {
 228 | 			this.isShow_NoH5 ? this.hideCalendar() : this.showCalendar();
 229 | 		},
 230 | 		startDate: function(newVal, oldVal) {
 231 | 			console.log('--startDate');
 232 | 			this.dateData();
 233 | 		},
 234 | 		endDate: function(newVal, oldVal) {
 235 | 			console.log('--endDate');
 236 | 			this.dateData();
 237 | 		}
 238 | 	},
 239 | 	methods: {
 240 | 		//补0
 241 | 		pad(num, n) {
 242 | 			return Array(n - ('' + num).length + 1).join(0) + num;
 243 | 		},
 244 | 		init() {
 245 | 			// console.log(this.startDate, this.endDate);
 246 | 
 247 | 			//#ifndef H5
 248 | 			// 弹出层动画创建
 249 | 			this.animation = uni.createAnimation({
 250 | 				duration: 400, // 整个动画过程花费的时间，单位为毫秒
 251 | 				timingFunction: 'ease', // 动画的类型
 252 | 				delay: 0 // 动画延迟参数
 253 | 			});
 254 | 			//#endif
 255 | 
 256 | 			this.dateData();
 257 | 
 258 | 			if (this.modal) {
 259 | 				//如果是弹窗模式，那么初始时就派发change事件
 260 | 				this.$emit('change', {
 261 | 					choiceDate: this.choiceDate,
 262 | 					dayCount: this.dayCount
 263 | 				});
 264 | 			}
 265 | 		},
 266 | 		getDayType(data) {
 267 | 			return data.re != this.today && data.re != this.tomorrow && data.re != this.afterTomorrow ? data.act.subject : '';
 268 | 		},
 269 | 		getDayName(year, data) {
 270 | 			let name = data.day;
 271 | 			let yearData = this.holidayList['y' + year] || {};
 272 | 			let holidayName = yearData['holidayName'] || "";
 273 | 			var monthAndDay = data.month + '' + data.day;
 274 | 			if (holidayName[monthAndDay]) {
 275 | 				name = holidayName[monthAndDay];
 276 | 			} else if (data.re == this.today) {
 277 | 				name = '今天';
 278 | 			} else if (data.re == this.tomorrow) {
 279 | 				name = '明天';
 280 | 			} else if (data.re == this.afterTomorrow) {
 281 | 				name = '后天';
 282 | 			}
 283 | 			return name;
 284 | 		},
 285 | 		isHoliday(year, day) {
 286 | 			//判断是否为法定节假日
 287 | 			let yearData = this.holidayList['y' + year];
 288 | 			let result = false;
 289 | 			if (yearData) {
 290 | 				let holiday = yearData['holiday'];
 291 | 				result = holiday[day];
 292 | 			}
 293 | 			return result ? '假' : '';
 294 | 		},
 295 | 		isWorkday(year, day) {
 296 | 			//判断是否要补班
 297 | 			let yearData = this.holidayList['y' + year];
 298 | 			let result = false;
 299 | 			if (yearData) {
 300 | 				let workday = yearData['workday'];
 301 | 				result = workday[day];
 302 | 			}
 303 | 			return result ? '班' : '';
 304 | 		},
 305 | 		getLayerTop: function() {
 306 | 			return new Promise(resolve => {
 307 | 				//获取layer-list窗器的top
 308 | 				let view2 = uni.createSelectorQuery().select('.layer-list');
 309 | 				view2
 310 | 					.boundingClientRect(data => {
 311 | 						resolve(data.top);
 312 | 					})
 313 | 					.exec();
 314 | 			});
 315 | 		},
 316 | 		getMonthTitleRectList: function() {
 317 | 			return new Promise(resolve => {
 318 | 				//获取每个月的文字头的top
 319 | 				let view = uni.createSelectorQuery().selectAll('.month-title');
 320 | 				view.boundingClientRect(data => {
 321 | 					resolve(data);
 322 | 				}).exec();
 323 | 			});
 324 | 		},
 325 | 		getRectList: async function() {
 326 | 			if (!this.layerTop || this.layerTop < 0) this.layerTop = await this.getLayerTop();
 327 | 			var isInitRectData = true;
 328 | 			if (this.monthTitleRectList && this.monthTitleRectList.length > 0) {
 329 | 				if (this.monthTitleRectList[0].top == 0) {
 330 | 					this.monthTitleRectList = await this.getMonthTitleRectList();
 331 | 					isInitRectData = false;
 332 | 				}
 333 | 			} else {
 334 | 				isInitRectData = false;
 335 | 			}
 336 | 			if (isInitRectData == false) this.monthTitleRectList = await this.getMonthTitleRectList();
 337 | 		},
 338 | 		showCalendar: function() {
 339 | 			//存储未更新前的数据
 340 | 			this.bak_date = JSON.parse(JSON.stringify(this.date));
 341 | 			this.bak_weeks = JSON.parse(JSON.stringify(this.weeks));
 342 | 			this.bak_choiceDate = JSON.parse(JSON.stringify(this.choiceDate));
 343 | 			this.bak_choiceDateArr = JSON.parse(JSON.stringify(this.choiceDateArr));
 344 | 			this.bak_dayCount = this.dayCount;
 345 | 
 346 | 			///////////////////非非非h5平台适配//////////////////
 347 | 			//#ifndef H5
 348 | 			// 设置动画内容为：使用绝对定位显示区域，高度变为100%
 349 | 			this.animation
 350 | 				.bottom('0px')
 351 | 				.height('100%')
 352 | 				.step();
 353 | 			this.animationData = this.animation.export();
 354 | 			this.isShow_NoH5 = true;
 355 | 			//#endif
 356 | 
 357 | 			///////////////////h5平台适配//////////////////
 358 | 			//#ifdef H5
 359 | 			this.isShow_H5 = true;
 360 | 			//#endif
 361 | 		},
 362 | 		hideCalendar: function(isBtnClick) {
 363 | 			///////////////////非非非h5平台适配//////////////////
 364 | 			//#ifndef H5
 365 | 			// 设置动画内容为：使用绝对定位隐藏整个区域，高度变为0
 366 | 			this.animation
 367 | 				.bottom('-100%')
 368 | 				.height('0upx')
 369 | 				.step();
 370 | 			this.animationData = this.animation.export();
 371 | 			this.isShow_NoH5 = false;
 372 | 			//#endif
 373 | 
 374 | 			///////////////////h5平台适配//////////////////
 375 | 			//#ifdef H5
 376 | 			this.isShow_H5 = false;
 377 | 			//#endif
 378 | 
 379 | 			//SubmitisBtnClick判断是否为按钮点击
 380 | 			if (isBtnClick) return;
 381 | 
 382 | 			//非按钮点击则重置已选择的
 383 | 			this.dateFlag = {};
 384 | 			// this.choice = '';
 385 | 			this.dayCount = this.bak_dayCount;
 386 | 			this.dayCount2 = '共' + this.dayCount + '晚';
 387 | 			//
 388 | 			this.date = JSON.parse(JSON.stringify(this.bak_date));
 389 | 			this.weeks = JSON.parse(JSON.stringify(this.bak_weeks));
 390 | 			this.choiceDate = JSON.parse(JSON.stringify(this.bak_choiceDate));
 391 | 			this.choiceDateArr = JSON.parse(JSON.stringify(this.bak_choiceDateArr));
 392 | 			// console.log('h 4');
 393 | 		},
 394 | 		setData: function(obj) {
 395 | 			let that = this;
 396 | 			let keys = [];
 397 | 			let val, data;
 398 | 			Object.keys(obj).forEach(function(key) {
 399 | 				keys = key.split('.');
 400 | 				val = obj[key];
 401 | 				data = that.$data;
 402 | 				keys.forEach(function(key2, index) {
 403 | 					if (index + 1 == keys.length) {
 404 | 						that.$set(data, key2, val);
 405 | 					} else {
 406 | 						if (!data[key2]) {
 407 | 							that.$set(data, key2, {});
 408 | 						}
 409 | 					}
 410 | 					data = data[key2];
 411 | 				});
 412 | 			});
 413 | 		},
 414 | 		onScroll: function(e) {
 415 | 			//////暂时还有问题，效率也不太好，等后缀再优化
 416 | 			//<scroll-view class='layer-list' scroll-y="true" @scroll="onScroll">
 417 | 			//<view v-for="(monthData,index) in date" :key="index" class="month" :class="fixedId == ('m-' + monthData[0].year + '-' + monthData[0].month) ? 'fixed' : ''">
 418 | 			//
 419 | 			// this.getRectList();
 420 | 			//
 421 | 			// let scorllTop = e.detail.scrollTop;
 422 | 			// this.curScrollTop = scorllTop + this.layerTop;
 423 | 			//
 424 | 			// ///////////////////////////////////////////
 425 | 			// this.monthTitleRectList.forEach((item, i) => {
 426 | 			// 	if (this.curScrollTop > item.top - 70) {
 427 | 			// 		this.fixedId = item.id;
 428 | 			// 		///////////这里理应需要 节流 和 return，后面再处理/////////////
 429 | 			// 	}
 430 | 			// });
 431 | 		},
 432 | 		dateData: function() {
 433 | 			let dataAll = []; //总日历数据
 434 | 			let dataAll2 = []; //总日历数据
 435 | 			let dataMonth = []; //月日历数据
 436 | 			let date = new Date(); //当前日期
 437 | 			let getDateTime = date.getTime();
 438 | 			let year = date.getFullYear(); //当前年
 439 | 			let week = date.getDay(); //当天星期几
 440 | 			let weeks = [];
 441 | 			let month = date.getMonth() + 1; //当前月份
 442 | 			let day = date.getDate(); //当天
 443 | 			let daysCount = Math.min(this.daysCount, 60); //一共显示多少天
 444 | 			daysCount = Math.min(this.daysCount, 360); //最小60天，最大360天
 445 | 			daysCount += day;
 446 | 			let dayscNow = 0; //计数器
 447 | 			let monthList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; //月份列表
 448 | 			let nowMonthList = []; //本年剩余年份
 449 | 			this.today = '' + year + '-' + this.pad(month, 2) + '-' + this.pad(day, 2);
 450 | 			this.tomorrow = '' + year + '-' + this.pad(month, 2) + '-' + this.pad(day + 1, 2);
 451 | 			this.afterTomorrow = '' + year + '-' + this.pad(month, 2) + '-' + this.pad(day + 2, 2);
 452 | 
 453 | 			///////////////配置初始日期/////////////////
 454 | 			//ios上不支持-连接的日期时间，所以需要替换-为/
 455 | 			let startDate = this.startDate;
 456 | 			let endDate = this.endDate;
 457 | 			if (startDate) {
 458 | 				startDate = new Date(startDate.split('-').join('/'));
 459 | 				//如果起始时间小于当前时间，那么，超始时间就是当前时间，这里也不考虑分秒，所以这里简单处理。
 460 | 				if (startDate.getTime() < getDateTime) startDate = new Date();
 461 | 			} else {
 462 | 				startDate = new Date();
 463 | 			}
 464 | 
 465 | 			if (endDate) {
 466 | 				endDate = new Date(this.endDate.split('-').join('/'));
 467 | 				if (endDate.getTime() < getDateTime) endDate = new Date(startDate.getTime() + 24 * 3600 * 1000);
 468 | 			} else {
 469 | 				endDate = new Date(startDate.getTime() + 24 * 3600 * 1000);
 470 | 			}
 471 | 
 472 | 			//判断开始时间是否大于结束时间，大于则互换
 473 | 			if (startDate.getTime() > endDate.getTime()) [startDate, endDate] = [endDate, startDate];
 474 | 
 475 | 			let maxDate = new Date(getDateTime + daysCount * 24 * 3600 * 1000);
 476 | 			if (endDate.getTime() > maxDate.getTime()) {
 477 | 				let millisecond = endDate.getTime() - maxDate.getTime();
 478 | 				//如果结束时间大于
 479 | 				daysCount += parseInt(millisecond / (24 * 3600 * 1000)) + 7;
 480 | 				console.log('这里需要显示的天数', daysCount);
 481 | 			}
 482 | 			///////////////配置初始日期/////////////////
 483 | 
 484 | 			for (let i = month; i < 13; i++) {
 485 | 				nowMonthList.push(i);
 486 | 			}
 487 | 			let yearList = [year]; //年份最大可能
 488 | 			for (let i = 0; i < daysCount / 365 + 2; i++) {
 489 | 				yearList.push(year + i + 1);
 490 | 			}
 491 | 			let leapYear = function(Year) {
 492 | 				//判断是否闰年
 493 | 				if ((Year % 4 == 0 && Year % 100 != 0) || Year % 400 == 0) {
 494 | 					return true;
 495 | 				} else {
 496 | 					return false;
 497 | 				}
 498 | 			};
 499 | 			for (let i = 0; i < yearList.length; i++) {
 500 | 				//遍历年
 501 | 				let mList;
 502 | 				if (yearList[i] == year) {
 503 | 					//判断当前年份
 504 | 					mList = nowMonthList;
 505 | 				} else {
 506 | 					mList = monthList;
 507 | 				}
 508 | 				for (let j = 0; j < mList.length; j++) {
 509 | 					//循环月份
 510 | 					dataMonth = [];
 511 | 					let t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 512 | 					let t_days_thisYear = [];
 513 | 					if (yearList[i] == year) {
 514 | 						for (let m = 0; m < nowMonthList.length; m++) {
 515 | 							t_days_thisYear.push(t_days[mList[m] - 1]);
 516 | 						}
 517 | 						t_days = t_days_thisYear;
 518 | 					} else {
 519 | 						t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 520 | 					}
 521 | 
 522 | 					for (let k = 0; k < t_days[j]; k++) {
 523 | 						//循环每天
 524 | 						dayscNow++;
 525 | 						let nowData;
 526 | 						if (dayscNow < daysCount) {
 527 | 							//如果计数器没满
 528 | 							let days = this.pad(k + 1, 2);
 529 | 
 530 | 							var monthAndDay = this.pad(mList[j], 2) + '' + days;
 531 | 
 532 | 							// var subject = this.festival[monthAndDay];
 533 | 							var subject = this.isHoliday(yearList[i], monthAndDay) || this.isWorkday(yearList[i], monthAndDay) || '';
 534 | 
 535 | 							var none = false;
 536 | 							let newDateFormate = new Date(yearList[i] + '/' + mList[j] + '/' + (k + 1));
 537 | 							let thisDateTime = newDateFormate.getTime();
 538 | 							var selected = 0;
 539 | 							if (yearList[i] == year && mList[j] == month) {
 540 | 								//判断当年当月
 541 | 								// if (k + 1 >= day) {
 542 | 								// if (k + 1 == day) {
 543 | 								if (k == 0) {
 544 | 									let date = new Date(yearList[i] + '/' + mList[j] + '/' + (k + 1));
 545 | 									let weekss = date.getDay(); //获取每个月第一天是周几
 546 | 									weeks.push(weekss);
 547 | 								}
 548 | 								nowData = {
 549 | 									year: yearList[i],
 550 | 									month: this.pad(mList[j], 2),
 551 | 									act: {
 552 | 										subject: subject ? subject : '',
 553 | 										none,
 554 | 										tip: '',
 555 | 										defaultStr: 0
 556 | 									},
 557 | 									day: this.pad(k + 1, 2),
 558 | 									date: yearList[i] + '' + this.pad(mList[j], 2) + days,
 559 | 									selected,
 560 | 									re: yearList[i] + '-' + this.pad(mList[j], 2) + '-' + days,
 561 | 									dateTime: thisDateTime,
 562 | 									week: this.getWeek(weeks, month, year, yearList[i], mList[j], k + 1)
 563 | 								};
 564 | 								dataMonth.push(nowData);
 565 | 								// }
 566 | 							} else {
 567 | 								if (k == 0) {
 568 | 									let date = new Date(yearList[i] + '/' + mList[j] + '/' + (k + 1));
 569 | 									let weekss = date.getDay(); //获取每个月第一天是周几
 570 | 									weeks.push(weekss);
 571 | 								}
 572 | 								//其他情况
 573 | 								nowData = {
 574 | 									year: yearList[i],
 575 | 									month: this.pad(mList[j], 2),
 576 | 									act: {
 577 | 										subject: subject ? subject : '',
 578 | 										none,
 579 | 										tip: '',
 580 | 										defaultStr: 0
 581 | 									},
 582 | 									day: this.pad(k + 1, 2),
 583 | 									date: yearList[i] + '' + this.pad(mList[j], 2) + days,
 584 | 									selected,
 585 | 									re: yearList[i] + '-' + this.pad(mList[j], 2) + '-' + days,
 586 | 									dateTime: thisDateTime,
 587 | 									week: this.getWeek(weeks, month, year, yearList[i], mList[j], k + 1)
 588 | 								};
 589 | 								dataMonth.push(nowData);
 590 | 							}
 591 | 						} else {
 592 | 							break;
 593 | 						}
 594 | 					}
 595 | 					dataAll.push(dataMonth);
 596 | 				}
 597 | 			}
 598 | 			for (let i = 0; i < dataAll.length; i++) {
 599 | 				if (dataAll[i].length != 0) {
 600 | 					dataAll2.push(dataAll[i]);
 601 | 				}
 602 | 			}
 603 | 
 604 | 			//
 605 | 			let start_year = startDate.getFullYear();
 606 | 			let start_month = startDate.getMonth() + 1;
 607 | 			let start_day = startDate.getDate();
 608 | 			//
 609 | 			let end_year = endDate.getFullYear();
 610 | 			let end_month = endDate.getMonth() + 1;
 611 | 			let end_day = endDate.getDate();
 612 | 
 613 | 			//当前选中的起始时间坐标
 614 | 			let startIndex1 = start_year == year ? start_month - month : start_month + (12 - month);
 615 | 			let startIndex2 = start_day - 1;
 616 | 
 617 | 			//当前选中的结束时间坐标
 618 | 			let endIndex1 = end_year == year ? end_month - month : end_month + (12 - month);
 619 | 			let endIndex2 = end_day - 1;
 620 | 			//
 621 | 			dataAll2[startIndex1][startIndex2].selected = 1;
 622 | 			dataAll2[startIndex1][startIndex2].act.tip = '入住';
 623 | 			dataAll2[startIndex1][startIndex2].act.defaultStr = 1;
 624 | 			this.choiceDate.push(dataAll2[startIndex1][startIndex2]);
 625 | 
 626 | 			let islastDay = false; //是否为一个月最后一天，且结束日期是下月第一天
 627 | 			if (startIndex1 == endIndex1 && endIndex2 - startIndex2 == 1) {
 628 | 				if (dataAll2[startIndex1][startIndex2 + 1]) {
 629 | 					dataAll2[startIndex1][startIndex2 + 1].selected = 1;
 630 | 					dataAll2[startIndex1][startIndex2 + 1].act.tip = '离店';
 631 | 					dataAll2[startIndex1][startIndex2 + 1].act.defaultStr = 1;
 632 | 					this.choiceDate.push(dataAll2[startIndex1][startIndex2 + 1]);
 633 | 				} else {
 634 | 					islastDay = true;
 635 | 				}
 636 | 			} else {
 637 | 				islastDay = true;
 638 | 			}
 639 | 
 640 | 			if (islastDay) {
 641 | 				dataAll2[endIndex1][endIndex2].selected = 1;
 642 | 				dataAll2[endIndex1][endIndex2].act.tip = '离店';
 643 | 				dataAll2[endIndex1][endIndex2].act.defaultStr = 1;
 644 | 				this.choiceDate.push(dataAll2[endIndex1][endIndex2]);
 645 | 			}
 646 | 
 647 | 			//选择日期 //nextTick()居然app和其他平台表现不一，换回setTimeout
 648 | 			setTimeout(() => {
 649 | 				this.selectday(startIndex1, startIndex2);
 650 | 				this.selectday(endIndex1, endIndex2);
 651 | 			});
 652 | 
 653 | 			// console.log(dataAll2, weeks, this.today, this.tomorrow, this.afterTomorrow, this.choiceDate);
 654 | 			this.date = dataAll2;
 655 | 			this.weeks = weeks;
 656 | 			this.choiceDate = this.choiceDate;
 657 | 			this.choiceDateArr = this.choiceDate;
 658 | 			// console.log(this.choiceDate);
 659 | 		},
 660 | 		getWeek(weeks, firstMonth, thisYear, curYear, curMonth, day) {
 661 | 			/**
 662 | 			 * 获取周几
 663 | 			 * weeks 每个月第一天周几
 664 | 			 * firstMonth 当前第一个月是哪个月
 665 | 			 * thisYear 今年的年份
 666 | 			 * curYear 当前要取的是哪一年
 667 | 			 * curMonth 当前要取的是哪个月
 668 | 			 * day 要取哪一天的星期
 669 | 			 */
 670 | 			//注：这里取的是每月第一天的星期几，但是因为现在只从今天展示，所以第一个月的第一天的星期几是今天的星期几，而不会是1号的星期天。
 671 | 
 672 | 			//搞定不是本年的月份的星期的问题
 673 | 			let monthIndex = 0;
 674 | 			if (curYear > thisYear) {
 675 | 				monthIndex = (curYear - thisYear) * 12 + curMonth - firstMonth;
 676 | 			} else {
 677 | 				monthIndex = curMonth - firstMonth;
 678 | 			}
 679 | 
 680 | 			let firstDayWeek = weeks[monthIndex];
 681 | 			let key = curYear + '-' + curMonth;
 682 | 			if (!this.tmpWeekArr[key]) {
 683 | 				let tmpArr = [];
 684 | 				for (let i = firstDayWeek; i < this.weekNameArr.length; i++) {
 685 | 					tmpArr.push(this.weekNameArr[i]);
 686 | 				}
 687 | 				tmpArr = [...tmpArr, ...this.weekNameArr];
 688 | 				//缓存一下，就不必每次再取了
 689 | 				this.tmpWeekArr[key] = tmpArr;
 690 | 			}
 691 | 			let index = day % 7 || 7;
 692 | 			// if (curMonth == firstMonth) {
 693 | 			// 	index += firstDayWeek + 1;
 694 | 			// } else {
 695 | 			index--;
 696 | 			// }
 697 | 			return this.tmpWeekArr[key][index];
 698 | 		},
 699 | 		dayClick: function(e) {
 700 | 			let indexs = e.currentTarget.dataset.indexs;
 701 | 			let index = e.currentTarget.dataset.index;
 702 | 			// console.log('selectday ', indexs, index);
 703 | 			this.selectday(index, indexs, true);
 704 | 		},
 705 | 		selectday: function(index, indexs, isUserClick) {
 706 | 			// console.log("001", this.dateFlag, isUserClick)
 707 | 			//单个日期
 708 | 			if (this.singleDate) {
 709 | 				if (!isUserClick && JSON.stringify(this.dateFlag) != '{}') {
 710 | 					return;
 711 | 				}
 712 | 				this.dateFlag = {};
 713 | 			}
 714 | 			// console.log("002", indexs)
 715 | 			if (indexs == -1) {
 716 | 				return;
 717 | 			}
 718 | 			let curDate = this.date[index][indexs];
 719 | 			if (curDate.re < this.today) {
 720 | 				//如果是用户点击今天之前的日期的话，就返回
 721 | 				if (isUserClick) return;
 722 | 			}
 723 | 			// console.log("003", indexs)
 724 | 
 725 | 			curDate.selected = 1;
 726 | 			curDate.act.tip = '入住';
 727 | 			if (this.dateFlag.date && curDate.dateTime < this.dateFlag.date.dateTime) {
 728 | 				console.log('004');
 729 | 				var flagIndex = this.dateFlag.index;
 730 | 				var flagIndexs = this.dateFlag.indexs;
 731 | 				this.date[flagIndex][flagIndexs].selected = 0;
 732 | 				this.date[flagIndex][flagIndexs].act.tip = '';
 733 | 				this.dateFlag = {
 734 | 					date: curDate,
 735 | 					index: index,
 736 | 					indexs: indexs
 737 | 				};
 738 | 				this.choice = false;
 739 | 				this.dayCount = 1;
 740 | 				//
 741 | 				this.choiceDate[0] = curDate;
 742 | 			} else if (this.dateFlag && this.dateFlag.date) {
 743 | 				// console.log("005")
 744 | 				if (this.dateFlag.index == index && this.dateFlag.indexs == indexs) {
 745 | 					return;
 746 | 				}
 747 | 				curDate.act.tip = '离店';
 748 | 				//
 749 | 				// console.log("00555555")
 750 | 				//
 751 | 				var that = this;
 752 | 				var dateFlagDateTime = that.dateFlag.date.dateTime;
 753 | 				var choiceDateTime = that.date[index][indexs].dateTime;
 754 | 				that.choiceDateArr = [];
 755 | 				that.choiceDateArr.push(that.dateFlag.date);
 756 | 				var nonFlag = false;
 757 | 				var nonArr = [];
 758 | 				var count = 0;
 759 | 				this.date.forEach(function(dataItems) {
 760 | 					dataItems.forEach(function(dataItem) {
 761 | 						if (dataItem.dateTime > dateFlagDateTime && dataItem.dateTime < choiceDateTime) {
 762 | 							if (dataItem.act.none) {
 763 | 								nonFlag = true;
 764 | 								nonArr.push(dataItem.day);
 765 | 							}
 766 | 							that.choiceDateArr.push(dataItem);
 767 | 							dataItem.selected = 1;
 768 | 							count++;
 769 | 						}
 770 | 					});
 771 | 				});
 772 | 				that.choiceDateArr.push(that.date[index][indexs]);
 773 | 				//设置开始和结果两个日期
 774 | 				this.choiceDate[0] = that.choiceDateArr[0];
 775 | 
 776 | 				this.choiceDate[1] = that.choiceDateArr[that.choiceDateArr.length - 1];
 777 | 				//
 778 | 				if (nonFlag) {
 779 | 					var that = this;
 780 | 					this.date.forEach(function(dataItems) {
 781 | 						dataItems.forEach(function(dataItem) {
 782 | 							if (dataItem.dateTime != choiceDateTime) {
 783 | 								dataItem.act.tip = '';
 784 | 								dataItem.selected = 0;
 785 | 							} else {
 786 | 								dataItem.act.tip = '入住';
 787 | 							}
 788 | 						});
 789 | 					});
 790 | 					this.dateFlag = {
 791 | 						date: that.date[index][indexs],
 792 | 						index: index,
 793 | 						indexs: indexs
 794 | 					};
 795 | 					this.choiceDate[0] = that.date[index][indexs];
 796 | 					this.dayCount = 1;
 797 | 					var nonstr = '';
 798 | 					nonArr.forEach(function(nonitem, index) {
 799 | 						if (index != nonArr.length - 1) {
 800 | 							nonstr = nonstr + nonitem + '号,';
 801 | 						} else {
 802 | 							nonstr = nonstr + nonitem + '号';
 803 | 						}
 804 | 					});
 805 | 					uni.showModal({
 806 | 						title: '提示',
 807 | 						content: `${nonstr}无房`
 808 | 					});
 809 | 				} else {
 810 | 					this.dateFlag = {};
 811 | 					this.choice = true;
 812 | 					// console.log('count', count);
 813 | 					this.dayCount = count + 1;
 814 | 					this.dayCount2 = '共' + (count + 1) + '晚';
 815 | 				}
 816 | 			} else {
 817 | 				// console.log("006")
 818 | 				var that = this;
 819 | 				this.date.forEach(function(dataItems) {
 820 | 					dataItems.forEach(function(dataItem) {
 821 | 						dataItem.act.defaultStr = 0;
 822 | 						if (dataItem.dateTime != that.date[index][indexs].dateTime) {
 823 | 							dataItem.selected = 0;
 824 | 							dataItem.act.tip = '';
 825 | 						} else {
 826 | 							dataItem.act.tip = '入住';
 827 | 						}
 828 | 					});
 829 | 				});
 830 | 				this.dateFlag = {
 831 | 					date: curDate,
 832 | 					index: index,
 833 | 					indexs: indexs
 834 | 				};
 835 | 				this.choice = false;
 836 | 				this.dayCount = 1;
 837 | 				//
 838 | 				this.choiceDate[0] = curDate;
 839 | 				// console.log("this.choice ", this.choice)
 840 | 			}
 841 | 		},
 842 | 		submitbtn: function() {
 843 | 			this.choiceDate[0] = this.choiceDateArr[0];
 844 | 			this.choiceDate[1] = this.choiceDateArr[this.choiceDateArr.length - 1];
 845 | 			this.dayCount2 = '共' + this.dayCount + '晚';
 846 | 			this.hideCalendar(true);
 847 | 			/**派发事件
 848 | 			 * 参数：
 849 | 			 * 1.choiceDate 时间区间（开始时间和结束时间）
 850 | 			 * 2.dayCount 共多少晚
 851 | 			 */
 852 | 			this.$emit('change', {
 853 | 				choiceDate: this.singleDate ? this.choiceDate[0] : this.choiceDate, //如果是单个日期方式，则只导出数组第一个
 854 | 				dayCount: this.dayCount
 855 | 			});
 856 | 		}
 857 | 	}
 858 | };
 859 | </script>
 860 | 
 861 | <style lang="scss" scoped>
 862 | /*
 863 | * 主题颜色请修改这里
 864 | * 
 865 | * */
 866 | $themeColor: #f93f4a;
 867 | 
 868 | /**
 869 |  * 补班的日子的文字颜色
 870 |  */
 871 | $workdayColor: #0c978d;
 872 | 
 873 | /*  #ifndef  H5  */
 874 | view {
 875 | 	display: flex;
 876 | }
 877 | 
 878 | /*  #endif  */
 879 | 
 880 | /*  #ifdef  H5  */
 881 | uni-view {
 882 | 	display: flex;
 883 | }
 884 | 
 885 | /*  #endif  */
 886 | 
 887 | .layer-white-space {
 888 | 	position: fixed;
 889 | 	height: 100%;
 890 | 	width: 100%;
 891 | 	background-color: #ccc;
 892 | 	opacity: 0.5;
 893 | }
 894 | 
 895 | .layer-header {
 896 | 	height: 70upx;
 897 | 	align-items: center;
 898 | 	position: relative;
 899 | 
 900 | 	.layer-close {
 901 | 		width: 34upx;
 902 | 		height: 34upx;
 903 | 		position: absolute;
 904 | 
 905 | 		left: 25upx;
 906 | 		top: 50%;
 907 | 		transform: translateY(-50%);
 908 | 
 909 | 		//
 910 | 		&::before {
 911 | 			content: '';
 912 | 			width: 34upx;
 913 | 			height: 1upx;
 914 | 			background-color: $themeColor;
 915 | 			position: absolute;
 916 | 			top: 16upx;
 917 | 			left: 0;
 918 | 			transform: rotate(45deg);
 919 | 		}
 920 | 
 921 | 		&::after {
 922 | 			content: '';
 923 | 			width: 1upx;
 924 | 			height: 34upx;
 925 | 			background-color: $themeColor;
 926 | 			position: absolute;
 927 | 			top: 0;
 928 | 			left: 16upx;
 929 | 			transform: rotate(45deg);
 930 | 		}
 931 | 	}
 932 | 
 933 | 	.layer-title {
 934 | 		text-align: center;
 935 | 		flex: 1;
 936 | 		font-size: 36upx;
 937 | 	}
 938 | }
 939 | 
 940 | .calendar-layer {
 941 | 	position: fixed;
 942 | 	bottom: -100%;
 943 | 	left: 0;
 944 | 	height: 0;
 945 | 	width: 100%;
 946 | 	overflow: hidden;
 947 | 	z-index: 1111;
 948 | 
 949 | 	/*  #ifdef  H5  */
 950 | 	//h5使用css3动画
 951 | 	&.show {
 952 | 		bottom: 0;
 953 | 		height: 100%;
 954 | 		transition: bottom 0.4s;
 955 | 	}
 956 | 
 957 | 	//h5使用css3动画
 958 | 	&.hide {
 959 | 		bottom: -100%;
 960 | 		height: 100%;
 961 | 		transition: bottom 0.4s;
 962 | 	}
 963 | 
 964 | 	/*  #endif  */
 965 | }
 966 | 
 967 | .layer-content {
 968 | 	position: absolute;
 969 | 	height: 85%;
 970 | 	bottom: 0;
 971 | 	font-size: 26upx;
 972 | 	flex-direction: column;
 973 | 	background-color: #fff;
 974 | }
 975 | 
 976 | .layer-body {
 977 | 	flex-direction: column;
 978 | 	height: calc(100% - 70upx);
 979 | }
 980 | 
 981 | .layer-list {
 982 | 	// position: absolute;
 983 | 	// height:300upx;
 984 | 	width: 100%;
 985 | 	height: 100%;
 986 | 	// bottom: 0upx;
 987 | 	display: flex;
 988 | 	flex: 1;
 989 | 	flex-direction: column;
 990 | 	position: relative;
 991 | }
 992 | 
 993 | .layer-footer {
 994 | 	width: 100%;
 995 | 	height: 120upx;
 996 | 	align-items: center;
 997 | 	justify-items: center;
 998 | 	display: none;
 999 | 	z-index: 11;
1000 | }
1001 | 
1002 | .layer-content.choiceDate {
1003 | 	.layer-footer {
1004 | 		display: block;
1005 | 	}
1006 | 
1007 | 	.layer-body {
1008 | 		height: calc(100% - 70upx - 120upx);
1009 | 	}
1010 | }
1011 | 
1012 | .submitBtn {
1013 | 	height: 80upx;
1014 | 	line-height: 80upx;
1015 | 	color: #fff;
1016 | 	border-radius: 10upx;
1017 | 	margin: 20upx 50upx;
1018 | 	justify-content: center;
1019 | 	font-size: 32upx;
1020 | 	// background: linear-gradient(to right, #f5504f, #f43f4f);
1021 | 	background: $themeColor;
1022 | 	&:active {
1023 | 		transform: scale(0.98, 0.98);
1024 | 	}
1025 | }
1026 | 
1027 | .month {
1028 | 	width: 750upx;
1029 | 	flex-direction: column;
1030 | 	margin-bottom: 50upx;
1031 | 
1032 | 	.month-title {
1033 | 		font-size: 30upx;
1034 | 		text-align: center;
1035 | 		width: 100%;
1036 | 		height: 60upx;
1037 | 		line-height: 60upx;
1038 | 		justify-content: center;
1039 | 		border-bottom: 1upx solid #ddd;
1040 | 		background: #fff;
1041 | 	}
1042 | 
1043 | 	&.fixed {
1044 | 		.month-title {
1045 | 			position: fixed;
1046 | 			top: calc(15% + 70upx + 60upx);
1047 | 			z-index: 11;
1048 | 		}
1049 | 
1050 | 		&:first-child {
1051 | 			padding-top: 60upx;
1052 | 		}
1053 | 	}
1054 | 
1055 | 	// 		&:first-child {
1056 | 	// 			.month-title {
1057 | 	// 				border: 0;
1058 | 	// 			}
1059 | 	// 		}
1060 | 	&:last-child {
1061 | 		margin-bottom: 0;
1062 | 	}
1063 | 
1064 | 	.month-content {
1065 | 		flex-wrap: wrap;
1066 | 	}
1067 | }
1068 | 
1069 | .day {
1070 | 	width: calc(100% / 7);
1071 | 	text-align: center;
1072 | 	height: 90upx;
1073 | 	align-items: center;
1074 | 	justify-content: center;
1075 | 	position: relative;
1076 | 
1077 | 	.day-content {
1078 | 		flex-direction: column;
1079 | 		line-height: 1;
1080 | 	}
1081 | 
1082 | 	.day-txt {
1083 | 		width: 100%;
1084 | 		height: 1.2em;
1085 | 	}
1086 | 
1087 | 	.day-tip {
1088 | 		// margin-top: 5upx;
1089 | 		font-size: 20upx;
1090 | 		height: 1.2em;
1091 | 	}
1092 | 
1093 | 	.day-subject {
1094 | 		// margin-top: 5upx;
1095 | 		font-size: 14upx;
1096 | 		height: 1.2em;
1097 | 		&.workday {
1098 | 			color: $workdayColor;
1099 | 		}
1100 | 		&.holiday {
1101 | 			color: $themeColor;
1102 | 		}
1103 | 	}
1104 | 
1105 | 	&.disabled {
1106 | 		color: #ccc;
1107 | 	}
1108 | 
1109 | 	&.active {
1110 | 		background: rgba($themeColor, 0.1);
1111 | 	}
1112 | 
1113 | 	.beginTip {
1114 | 		display: none;
1115 | 		//////////////////////////////
1116 | 		/*  #ifndef  H5  */
1117 | 		width: 115upx;
1118 | 		margin-top: -70upx;
1119 | 		/*  #endif  */
1120 | 		//////////////////////////////
1121 | 		/*  #ifdef  H5  */
1122 | 		width: 130upx;
1123 | 		margin-top: -74upx;
1124 | 		/*  #endif  */
1125 | 		//////////////////////////////
1126 | 		position: absolute;
1127 | 		background: rgba(0, 0, 0, 0.6);
1128 | 		border-radius: 5upx;
1129 | 		text-align: center;
1130 | 		padding: 6upx 10upx;
1131 | 		font-size: 16upx;
1132 | 		z-index: 33;
1133 | 
1134 | 		&::after {
1135 | 			content: '';
1136 | 			position: absolute;
1137 | 			/*  #ifndef  H5  */
1138 | 			left: 35%;
1139 | 			top: 28upx;
1140 | 			border: 5upx solid transparent;
1141 | 			border-top: 6upx solid rgba($color: #000000, $alpha: 0.6);
1142 | 			/*  #endif  */
1143 | 
1144 | 			/*  #ifdef  H5  */
1145 | 			left: 35%;
1146 | 			top: 37upx;
1147 | 			border: 8upx solid transparent;
1148 | 			border-top: 10upx solid rgba($color: #000000, $alpha: 0.6);
1149 | 			/*  #endif  */
1150 | 		}
1151 | 	}
1152 | 
1153 | 	.endTip {
1154 | 		display: none;
1155 | 		background: rgba($color: #000000, $alpha: 0.6);
1156 | 		position: absolute;
1157 | 		border-radius: 5upx;
1158 | 		text-align: center;
1159 | 		padding: 6upx 10upx;
1160 | 		// min-width: 70upx;
1161 | 		//////////////////////////////
1162 | 		/*  #ifndef  H5  */
1163 | 		margin-top: -70upx;
1164 | 		/*  #endif  */
1165 | 		//////////////////////////////
1166 | 		/*  #ifdef  H5  */
1167 | 		margin-top: -74upx;
1168 | 		/*  #endif  */
1169 | 		//////////////////////////////
1170 | 		font-size: 16upx;
1171 | 		left: 12%;
1172 | 		z-index: 33;
1173 | 
1174 | 		&::after {
1175 | 			content: '';
1176 | 			position: absolute;
1177 | 
1178 | 			/*  #ifndef  H5  */
1179 | 			left: 35%;
1180 | 			top: 28upx;
1181 | 			border: 5upx solid transparent;
1182 | 			border-top: 6upx solid rgba($color: #000000, $alpha: 0.6);
1183 | 			/*  #endif  */
1184 | 
1185 | 			/*  #ifdef  H5  */
1186 | 			left: 35%;
1187 | 			top: 37upx;
1188 | 			border: 8upx solid transparent;
1189 | 			border-top: 10upx solid rgba($color: #000000, $alpha: 0.6);
1190 | 			/*  #endif  */
1191 | 		}
1192 | 	}
1193 | 
1194 | 	&.begin,
1195 | 	&.end {
1196 | 		background: $themeColor;
1197 | 		color: #fff;
1198 | 	}
1199 | 
1200 | 	&.begin {
1201 | 		border-radius: 8upx 0 0 8upx;
1202 | 
1203 | 		.beginTip {
1204 | 			display: block;
1205 | 		}
1206 | 	}
1207 | 
1208 | 	&.end {
1209 | 		border-radius: 0 8upx 8upx 0;
1210 | 
1211 | 		.endTip {
1212 | 			display: block;
1213 | 		}
1214 | 	}
1215 | }
1216 | 
1217 | /* ///////////////////////////////////////// */
1218 | .week-box {
1219 | 	height: 60upx;
1220 | 	line-height: 60upx;
1221 | 	border-bottom: 1upx solid #ddd;
1222 | 	background: #fff;
1223 | 	position: relative;
1224 | 	z-index: 11;
1225 | }
1226 | 
1227 | .week-box-item {
1228 | 	width: calc(100% / 7);
1229 | 	text-align: center;
1230 | 
1231 | 	&:first-child,
1232 | 	&:last-child {
1233 | 		color: $themeColor;
1234 | 	}
1235 | }
1236 | 
1237 | /* ///////////////////order-time////////////////////// */
1238 | .order-time {
1239 | 	position: relative;
1240 | 	width: 100%;
1241 | 	padding: 25upx 15upx;
1242 | }
1243 | 
1244 | .time-viewer {
1245 | 	align-items: center;
1246 | }
1247 | 
1248 | .order-time::after {
1249 | 	position: absolute;
1250 | 	content: '';
1251 | 	width: 100%;
1252 | 	bottom: 0;
1253 | 	left: 0;
1254 | 	border-top: 1upx solid #eee;
1255 | 	transform-origin: 0 100%;
1256 | 	transform: scaleY(0.5);
1257 | }
1258 | 
1259 | .goInHotel {
1260 | 	margin-left: 20upx;
1261 | 	font-size: 26upx;
1262 | 	color: gray;
1263 | }
1264 | 
1265 | .goInHotel2 {
1266 | 	font-size: 26upx;
1267 | 	color: gray;
1268 | }
1269 | 
1270 | .date-wrappper {
1271 | 	position: relative;
1272 | 	padding: 0 10upx;
1273 | 	font-size: 32upx;
1274 | 	color: black;
1275 | }
1276 | 
1277 | .left-hotel {
1278 | 	margin-left: 40upx;
1279 | 	font-size: 26upx;
1280 | 	color: gray;
1281 | }
1282 | 
1283 | .order-time .sumCount {
1284 | 	color: #6495ed;
1285 | 	float: right;
1286 | 	margin-right: 15upx;
1287 | 	font-size: 26upx;
1288 | }
1289 | </style>
1290 | 


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