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

			<!-- 每一个时间段区域 -->
			<view class="item" v-for="(item,index) in list" :key="index">
				<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>

			<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>
</template>

<script>
	import JlkWeek from '@/uni_modules/jlk-week/components/jlk-week/jlk-week.vue';
	export default {
		components: {
			JlkWeek
		},
		data() {
			return {
				selectedWeeks: [],
				startTime: "09:00",
				endTime: "12:00",
				list: [{
						startTime: "09:00",
						endTime: "12:00",
					},
					{
						startTime: "00:00",
						endTime: "00:00",
					},
				]
			}
		},
		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)
			},
		}
	}
</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;
			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;
			}
		}
	}

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