smartSchoolClockApp/pages/punchTime/punchTime.vue

<template>
	<view class="container">
		<view class="placeholder"></view>
		<!-- 头部添加打卡时间区域 -->
		<view class="add">
			<view class="icon" @click="handleAdd"><img src="../../static/imgs/add.png" /></view>
			<view class="title" @click="handleAdd">添加打卡时间</view>
			<view class="none"></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="box" @click="handleEdit(item, index)">
						<view class="left">
							<view class="week">
								<view class="key">星期</view>
								<view class="value">
									<span v-for="(item_week, index_week) in item.dayOfWeeks" :key="index_week">{{ arr[item_week] }}</span>
								</view>
							</view>
							<view class="week">
								<view class="key">时段</view>
								<view class="value">
									<span v-for="(item_time, index_time) in item.periods" :key="index_time">
										{{ format_time(item_time.beginTime) }}-{{ format_time(item_time.endTime) }}
									</span>
								</view>
							</view>
						</view>
						<view class="right"><img src="../../static/imgs/right.png" /></view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 时间数组
			list: [],
			// 左滑选项配置
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#D43030'
					}
				}
			],
			// 星期映射数组
			arr: ['', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
		}
	},
	onLoad(options) {
		if (options.time) {
			if (JSON.parse(options.time) != '未设置') {
				this.list = JSON.parse(options.time)
				uni.setStorageSync('ruleTime', this.list)
			}
		}
	},
	onShow() {
		uni.removeStorageSync('flag')
		let ruleTime = uni.getStorageSync('ruleTime')
		if (ruleTime) {
			this.list = ruleTime
		}
		if (ruleTime.lenght == 0) {
			uni.setStorageSync('flag', true)
		}
	},
	methods: {
		// 点击添加打卡时间回调 跳转到添加页面
		handleAdd() {
			uni.navigateTo({
				url: `/pages/setPunchTime/setPunchTime?flag=1`
			})
		},
		// 点击每一个时间段回调 跳转到编辑页面
		handleEdit(item, index) {
			let info = JSON.stringify(item)
			uni.navigateTo({
				url: `/pages/setPunchTime/setPunchTime?flag=2&info=${info}&index=${index}`
			})
		},
		// 点击右侧删除按钮回调
		onClick(index) {
			// console.log(index);
			uni.showModal({
				title: '提示',
				content: '确定删除该打卡时间吗？',
				success: res => {
					if (res.confirm) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						this.list.splice(index, 1)
						if (this.list.length == 0) {
							uni.setStorageSync('flag', true)
						}
						uni.setStorageSync('ruleTime', this.list)
					} else if (res.cancel) {
					}
				}
			})
		},
		// 格式化时间
		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: 20rpx;
	}

	.add {
		display: flex;
		margin: 0 auto;
		width: 690rpx;
		height: 87rpx;
		line-height: 87rpx;
		border-radius: 14rpx;
		background-color: #fff;

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

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

		.title {
			flex: 3;
			font-size: 30rpx;
			color: #0082fc;
		}

		.none {
			flex: 5;
		}
	}

	.list {
		margin-top: 20rpx;
		padding-bottom: 30rpx;

		.box {
			display: flex;
			margin: 0 auto;
			margin-bottom: 20rpx;
			width: 690rpx;
			height: 132rpx;
			border-radius: 14rpx;
			background-color: #fff;
			overflow: hidden;

			.left {
				display: flex;
				flex-direction: column;
				margin-left: 17rpx;
				width: 492rpx;

				.week {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 24rpx;

					.key {
						flex: 1;
						margin-left: 8rpx;
						color: #a6a6a6;
					}

					.value {
						flex: 5;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;

						span {
							margin-right: 10rpx;
						}
					}
				}
			}

			.right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 198rpx;

				img {
					margin-right: 20rpx;
					width: 20rpx;
					height: 30rpx;
				}
			}
		}
	}
}

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