smartSchoolClockApp/pages/setPunchTime/setPunchTime.vue

<template>
	<view class="container">
		<view class="placeholder"></view>
		<!-- 选择星期区域 -->
		<view class="week_title">选择星期</view>
		<view class="week"><jlk-week :value="selectedWeeks" @change="changeWeek"></jlk-week></view>

		<!-- 选择打卡时间段区域 -->
		<view class="time_list">
			<view class="title">选择打卡时间段</view>
			<view class="add" @click="handleAddTime">添加时段</view>
		</view>

		<view class="list">
			<uni-swipe-action>
				<!-- 每一个时间段区域 -->
				<uni-swipe-action-item :auto-close="true" :right-options="options" @click="onClick(index)" v-for="(item, index) in list" :key="index">
					<view class="item">
						<view class="item_box">
							<picker mode="time" :value="item.beginTime" @change="bindTimeChange($event, 1, item)">
								<view class="uni-input">
									<view class="input_time">{{ item.beginTime }}</view>
									<view class="input_icon"><img src="../../static/imgs/time.png" /></view>
								</view>
							</picker>
						</view>
						--
						<view class="item_box">
							<picker mode="time" :value="item.endTime" @change="bindTimeChange($event, 2, item)">
								<view class="uni-input">
									<view class="input_time">{{ item.endTime }}</view>
									<view class="input_icon"><img src="../../static/imgs/time.png" /></view>
								</view>
							</picker>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>

		<view class="button" @click="handleSave">保存</view>
	</view>
</template>

<script>
import JlkWeek from '@/uni_modules/jlk-week/components/jlk-week/jlk-week.vue'
export default {
	components: {
		JlkWeek
	},
	data() {
		return {
			// 选中的星期
			selectedWeeks: [],
			// 打卡时间段列表
			list: [
				{
					beginTime: '00:00',
					endTime: '00:00'
				}
			],
			// 编辑打卡时间页面带过来的对象
			info: {},
			// 左滑配置
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#D43030'
					}
				}
			],
			// 添加时间 编辑时间 标识
			flag: null,
			// 时间列表索引
			index: null,
			// 判断时间筛选框是否点击过
			clickType: false
		}
	},
	onLoad(options) {
		this.flag = options.flag
		if (this.flag == 1) {
			uni.setNavigationBarTitle({
				title: '添加打卡时间'
			})
		} else {
			uni.setNavigationBarTitle({
				title: '编辑打卡时间'
			})
			this.index = options.index
			this.info = JSON.parse(options.info)
			// console.log(this.info);
			this.list = this.info.periods
			this.list.forEach(ele => {
				ele.beginTime = this.format_time(ele.beginTime)
				ele.endTime = this.format_time(ele.endTime)
			})
			this.selectedWeeks = this.info.dayOfWeeks.map(ele => {
				if (ele == 7) {
					return (ele = 0)
				} else {
					return ele
				}
			})
		}
	},
	methods: {
		// 保存按钮回调
		handleSave() {
			if (!this.selectedWeeks.length) {
				uni.showToast({
					title: '请选择需要打卡的星期',
					icon: 'none'
				})
				return
			}
			if (!this.list.length) {
				uni.showToast({
					title: '请添加需要打卡的时间段',
					icon: 'none'
				})
				return
			}
			if (!this.clickType && this.flag == 1) {
				uni.showToast({
					title: '打卡开始时间和结束时间不能相同',
					icon: 'none'
				})
				return
			}
			uni.showModal({
				title: '提示',
				content: `确定保存吗`,
				success: res => {
					if (res.confirm) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						setTimeout(() => {
							let temArr = []
							temArr = this.list
							temArr.forEach(ele => {
								ele.beginTime = this.formatTime(ele.beginTime)
								ele.endTime = this.formatTime(ele.endTime)
							})

							let temArr_week = []
							temArr_week = this.selectedWeeks.map(ele => {
								if (ele == 0) {
									return (ele = 7)
								} else {
									return ele
								}
							})
							let temList = uni.getStorageSync('ruleTime') || []
							// 编辑时间
							if (this.flag == 2) {
								temList.splice(this.index, 1, {
									dayOfWeeks: temArr_week,
									periods: temArr
								})
							} else {
								// 添加时间
								temList.push({
									dayOfWeeks: temArr_week,
									periods: temArr
								})
							}
							uni.setStorageSync('ruleTime', temList)
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				}
			})
		},
		// 选择星期回调
		changeWeek(value) {
			// 把0变成7
			value = value.map(ele => {
				if (ele == 0) {
					return (ele = 7)
				} else {
					return ele
				}
			})
			// 从小到大排序
			value.sort((a, b) => {
				return a - b
			})
			this.selectedWeeks = value
		},
		// 选择时间段回调
		bindTimeChange(e, val, item) {
			// console.log(e.detail.value);
			this.clickType = true
			if (val == 1) {
				item.beginTime = e.detail.value
			} else {
				item.endTime = e.detail.value
			}
			let timeFlag = this.compareTime(item.beginTime, item.endTime)
			if (!timeFlag) {
				uni.showModal({
					content: '打卡结束时间不能小于或等于开始时间',
					showCancel: false
				})
			}
		},
		// 如果time2大于time1 返回true 否则 返回false
		compareTime(time1, time2) {
			if (this.time_to_sec(time2) - this.time_to_sec(time1) > 0) {
				return true
			}
			return false
		},
		//将时分转为时间戳
		time_to_sec(time) {
			if (time !== null) {
				var s = ''
				var hour = time.split(':')[0]
				var min = time.split(':')[1]
				s = Number(hour * 3600) + Number(min * 60)
				return s
			}
		},
		// 添加时段回调
		handleAddTime() {
			this.list.push({
				beginTime: '00:00',
				endTime: '00:00'
			})
		},
		// 点击右侧删除按钮回调
		onClick(index) {
			uni.showModal({
				title: '提示',
				content: '确定删除该打卡时间段吗？',
				success: res => {
					if (res.confirm) {
						this.list.splice(index, 1)
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}
				}
			})
		},
		// 格式化时间
		formatTime(val) {
			let tem = '2023/01/12 ' + val + ':00'
			// console.log(tem);
			let date = new Date(tem)
			// let time = date.getTime();
			let time = Date.parse(date)
			return time
		},
		// 格式化时间
		format_time(timestamp) {
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var date = new Date(timestamp)
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
			var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			let strDate = h + m
			return strDate
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-width: 100vw;
	min-height: 100vh;
	background-color: #f2f2f2;

	.placeholder {
		height: 33rpx;
	}

	.week_title {
		margin-left: 35rpx;
		font-size: 34rpx;
		font-weight: 500;
	}

	.week {
		margin: 0 auto;
		margin-top: 12rpx;
		width: 690rpx;
		height: 107rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.time_list {
		display: flex;
		align-items: center;
		margin: 0 auto;
		margin-top: 32rpx;
		width: 690rpx;
		height: 60rpx;
		font-weight: 500;

		.title {
			flex: 4;
			font-size: 34rpx;
		}

		.add {
			flex: 1;
			text-align: end;
			font-size: 24rpx;
			color: #3396fb;
		}
	}

	.list {
		margin: 0 auto;
		margin-top: 13rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		width: 690rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			margin: 0 20rpx 20rpx 20rpx;
			width: 650rpx;
			height: 60rpx;

			.item_box {
				width: 291rpx;
				height: 60rpx;
				border-radius: 8rpx;
				border: 1rpx solid #cccccc;

				.uni-input {
					display: flex;
					align-items: center;
					width: 291rpx;
					height: 60rpx;

					.input_time {
						flex: 2;
						margin-left: 34rpx;
						font-size: 28rpx;
						color: #707070;
					}

					.input_icon {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}
			}
		}

		// .edit {
		// 	margin-left: 20rpx;
		// 	padding-top: 10rpx;
		// 	width: 70rpx;
		// 	height: 60rpx;
		// 	color: #3396FB;
		// 	font-size: 24rpx;
		// 	font-weight: 500;
		// }
	}

	.button {
		margin: 0 auto;
		margin-top: 50rpx;
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		border-radius: 16rpx;
		background-color: #3396fb;
	}
}

// 选择星期区域圆角效果
::v-deep .weeks-outer {
	border-radius: 10rpx;
}

// 解决左滑区域突出问题
::v-deep .uni-swipe_button-group {
	margin-bottom: 20rpx;
}
</style>