waterElectricityMinApp/pagesClockIn/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,
			}
		},
		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
				}
				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) {
				if (val == 1) {
					item.beginTime = e.detail.value
				} else {
					item.endTime = e.detail.value
				}
			},
			// 添加时段回调
			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 = '2021-11-22 ' + val + ':00'
				// console.log(tem);
				let date = new Date(tem);
				let time = date.getTime();
				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>