vue之封装预约类组件

vue之封装预约类组件

预约类时间段选择组件的开发思路：

0. 展示所有数据，【禁用】的展示【灰色】，【没选中】的展示【白色】，【选中的】时间范围展示【红色】
1. 点击两次，锁定时间范围。
2. 如果有跨越了禁用时间段的话，则重新选择。
3. 【禁用的时间范围】 和  【全部的时间范围】，后端会返回。
4. 插件会返回选择的时间。
1
2
3
4
5

<template>

	<view class="item" v-bind:class="{active:item.active,disabled:item.disabled}" v-for="(item, index) in list"
		:key="index" v-on:click="clickItem(item,index)">
		<view style="display: flex;justify-content: space-between;">
			<view>
				{{item.time}}
			</view>
			<view v-if="item.disabled">
				该条已被<text style="color: white;">{{item.bookedBy}}</text>预约
			</view>
		</view>
	</view>

</template>
<!-- 预约类时间段选择组件的开发思路：
	0.  展示所有数据，【禁用】的展示【灰色】，【没选中】的展示【白色】，【选中的】时间范围展示【红色】
	1. 点击两次，锁定时间范围。
	2. 如果有跨越了禁用时间段的话，则重新选择。
	3. 【禁用的时间范围】 和  【全部的时间范围】，后端会返回。
	4. 插件会返回选择的时间。

 -->
<script>
	export default {
		// props接收两个值，禁用的时间段和全部的时间段
		props: {
			// 禁用的时间
			checkTime: {
				type: Array
			},
			// 所有的时间
			allTime: {
				type: Array
			},

		},
		data() {
			return {
				// 用data接收props传来的值，不要直接操作props 
				
				
				// list用于存储传来的【全部的时间】，以下是传来数据的格式
				// "time": "08:00-08:30", "disabled": false, "active": false
				list: this.allTime,
				// 【禁用的时间】
				disabledList: this.checkTime,
				
				
				// item 点击的次数
				clickNumber: 0,
				// 点击item，把下标存到数组。
				indexArr: [],
			}
		},
		created() {
			this.initTime();
		},
		computed: {
			// 计算属性，用于返回给父组件，选值的范围。
			timeList() {
				let list = []
				this.list.forEach(item => {
					if (item.active) {
						list.push(item)
					}
				})
				let obj = {
					start: '',
					end: ''
				}
				if (list.length) {
					obj.start = list[0].time.split('-')[0]
					obj.end = list[list.length - 1].time.split('-')[1];
				}
				//console.log("computed监听",obj)
				return obj;
			}
		},
		methods: {
			// 通过传来的数据构建时间数组
			initTime() {
				// 根据【所有时间】和【禁用时间】，确定列表
				this.list.forEach(item => {
					this.disabledList.forEach(vitem => {
						// 判断是否有list的time和disabled的time一致
						// 有的话，则需要禁用掉
						const hasTime = item.time == vitem.time
						if (hasTime) {
							item.disabled = true
						}
					})
				})
			},
			clickItem(item, index) {
				// 如果是disable状态，直接不让点击
				if (item.disabled) {
					return
				}
				
				// 点击次数增加，用于记录点击的次数
				this.clickNumber++;
				// 记录第一次点击，且把数组的index值，存到indexArr 里面
				if (this.clickNumber == 1) {
					this.indexArr.push(index)
				}
				// 记录第二次点击，且把数组的index值，存到indexArr 里面
				if (this.clickNumber == 2) {
					this.indexArr.push(index)
				}

				console.log(this.indexArr)

				// 记录第三次点击，且把数组的index值，存到indexArr 里面
				// 记录第三次的值，是为了下面重置第三次为第一次。
				// 用于接下来的循环
				if (this.clickNumber == 3) {
					this.indexArr = [index]
				}
				
				// 给index排序
				this.indexArr = this.indexArr.sort((a, b) => a - b);
				
				
				// 如果点击的次数正好是第三次的时候
				// 点击次数重置为1
				// 我们的目的是点击两次，锁定时间范围，所以三次以上的，可以重置上面的步骤。
				if (this.clickNumber % 3 == 0) {
					// 重置成点击一次的状态。
					this.clickNumber = 1;
					// list中的active设置成false
					this.list.forEach(v => v.active = false);
					// 当前点击的item,设置active是true
					item.active = true
				}
				// 验证，如果选择多个的时候，跨着disabled，则不让选择。
				// 如果选择的，没有跨着disabled，则都给选择上。
				this.getCheckList(item)
			},
			getCheckList(vitem) {
				try {
					console.log("getCheckList", this.list, this.indexArr)
					this.list.forEach((item, idx) => {
						// this.indexArr 存两个值
						const [start, end] = this.indexArr
						if (idx >= start && idx <= end) {
							// 遍历List,如果有disabled的抛出异常。
							// 如果没有，则把区间内的赋值active
							if (item.disabled) {
								throw new Error("包含disabled状态数据")
							}
							item.active = true
						}
					})
				} catch (err) {
					// 抛出异常----选中的区间内有disabled的item的时候。
					
					// list 重置
					this.list.forEach(v => v.active = false);
					// 当前item为选中状态
					vitem.active = true;
				}
				vitem.active = true;
				// 返回给父组件
				this.$emit('getTime', this.timeList)
			}
		}
	}
</script>

<style>
	.item {
		line-height: 40px;
		background: #fff;
		border-bottom: 1px solid #D2D2D2;
	}

	.item.active {
		background: darkred;
		color: black;
	}

	.item.disabled {
		background: #888888;
		color: white;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

<TimeSelection @getTime='getTime' ref="child" :allTime="timeSelectList"
				:checkTime="timeSelectDisabledList" />



getTime(val) {
				console.log("getTime组件选择后的结果", val)
			},



// 后端返回所有的时间段列表
timeSelectList: [],
// 已选时间段列表
timeSelectDisabledList: [],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15