smartSchoolClockApp/pages/setPunchTime/setPunchTime.vue

<template>
	<view class="container">
		<!-- 选择星期区域 -->
		<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.startTime" @change="bindTimeChange($event,1,item)">
								<view class="uni-input">
									<view class="input_time">
										{{item.startTime}}
									</view>
									<view class="input_icon">
										<img src="../../static/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/time.png">
									</view>
								</view>
							</picker>
						</view>
					</view>

				</uni-swipe-action-item>
			</uni-swipe-action>

			<!-- <view class="edit">
				编辑
			</view> -->

		</view>

		<!-- switch区域 -->
		<view class="switch">
			<view class="switch_title">
				除去法定节假日
			</view>
			<view class="switch_button">
				<switch color="#2A82E4" :checked="holiday" @change="switchChange" />
			</view>
		</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: [{
					startTime: "00:00",
					endTime: "00:00",
				}],
				// 是否同步法定节假日
				holiday: false,
				// 编辑打卡时间页面带过来的对象
				info: {},
				// 左滑配置
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#D43030'
					}
				}],
			}
		},
		onLoad(options) {
			if (options.flag == 1) {
				uni.setNavigationBarTitle({
					title: '添加打卡时间'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '编辑打卡时间'
				});
				this.info = JSON.parse(options.info)
				// console.log(this.info);
				this.list = this.info.list
				this.holiday = this.info.holiday
				this.selectedWeeks = this.info.selectedWeeks.map((ele) => {
					if (ele == '星期一') {
						return ele = 1
					}
					if (ele == '星期二') {
						return ele = 2
					}
					if (ele == '星期三') {
						return ele = 3
					}
					if (ele == '星期四') {
						return ele = 4
					}
					if (ele == '星期五') {
						return ele = 5
					}
					if (ele == '星期六') {
						return ele = 6
					}
					if (ele == '星期天') {
						return ele = 0
					}
				})
			}
		},
		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 temList = uni.getStorageSync("ruleTime") || []
								// console.log(temList);
								temList.push({
									selectedWeeks: this.selectedWeeks,
									list: this.list,
									holiday: this.holiday
								})
								uni.setStorageSync("ruleTime", temList)
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						} else if (res.cancel) {}
					}
				});

			},
			// 选择星期回调
			changeWeek(value) {
				// 把0变成7
				value = value.map((ele) => {
					if (ele == 0) {
						return ele = 7
					} else {
						return ele
					}
				})
				// 从小到大排序
				value.sort((a, b) => {
					return a - b
				})
				// 把数字转换成星期
				let arr = ["", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
				this.selectedWeeks = value.map((ele) => {
					return ele = arr[ele]
				})
			},
			// 选择时间段回调
			bindTimeChange(e, val, item) {
				if (val == 1) {
					item.startTime = e.detail.value
				} else {
					item.endTime = e.detail.value
				}
			},
			// 添加时段回调
			handleAddTime() {
				this.list.push({
					startTime: "00:00",
					endTime: "00:00",
				})
			},
			// switch改变回调
			switchChange(e) {
				// console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				this.holiday = e.detail.value
			},
			// 点击右侧删除按钮回调
			onClick(index) {
				// console.log(index);
				uni.showModal({
					title: '提示',
					content: '确定删除该打卡时间段吗？',
					success: (res) => {
						if (res.confirm) {
							this.list.splice(index, 1)
							uni.showToast({
								title: "删除成功",
								icon: 'success'
							})
						} else if (res.cancel) {}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 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;
			// }
		}

		.switch {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 0 20rpx;
			width: 690rpx;
			height: 86rpx;
			border-radius: 10rpx;
			background: #FFFFFF;

			.switch_title {
				flex: 5;
				font-size: 34rpx;
				font-weight: 500;
			}

			.switch_button {
				flex: 1;
			}
		}

		.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>