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(item.id)"
					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" @change="switchChange" />
			</view>
		</view>

		<view class="button">
			保存
		</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",
					},
					{
						startTime: "00:00",
						endTime: "00:00",
					},
				],
				info: {},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#D43030'
					}
				}],
			}
		},
		onLoad(options) {
			if (options.flag == 1) {
				uni.setNavigationBarTitle({
					title: '添加打卡时间'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '编辑打卡时间'
				});
				this.selectedWeeks = [0, 1]
				// this.info=JSON.parse(options.info)
				// console.log(this.info);
				// let temList=this.info.time.split("、")
				// console.log(temList);
			}
		},
		methods: {
			changeWeek(value) {
				console.log(value);
				this.selectedWeeks = value
			},
			bindTimeChange(e, val, item) {
				console.log(e);
				console.log(val);
				console.log(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",
				})
			},
			switchChange(e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
			},
			// 点击右侧删除按钮回调
			onClick(id) {
				console.log(id);
				uni.showModal({
					title: '提示',
					content: '确定删除该打卡时间段吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title: "删除成功",
								icon: 'success'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</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>