smartSchoolClockApp/pages/punchLocation/punchLocation.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">
						<view class="icon"><img src="../../static/imgs/location2.png" /></view>
						<view class="place">
							<view class="top">{{ item.name }}</view>
							<view class="center">地址：{{ item.name }}</view>
							<view class="bottom">范围：{{ item.radius }}米</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'
					}
				}
			]
		}
	},
	onLoad(options) {
		if (options.locations) {
			this.list = JSON.parse(options.locations)
			uni.setStorageSync('chooseList', this.list)
		}
	},
	onShow() {
		uni.removeStorageSync('flag_place')
		let arr = uni.getStorageSync('chooseList')
		if (arr) {
			this.list = arr
		}
		if (arr.lenght == 0) {
			uni.setStorageSync('flag_place', true)
		}
	},
	methods: {
		// 点击添加打卡位置回调
		handleAdd() {
			// 获取用户位置权限
			// uni.authorize({
			// 	scope: 'scope.userLocation',
			// 	success: () => {
			// 		uni.navigateTo({
			// 			url: `/pages/addLocation/addLocation`
			// 		})
			// 	},
			// 	fail() {
			// 		uni.showModal({
			// 			title: '提示',
			// 			content: '请先开启定位权限，否则将无法使用定位功能',
			// 			cancelText: '不授权',
			// 			confirmText: '授权',
			// 			success: function(res) {
			// 				if (res.confirm) {
			// 					uni.openSetting({
			// 						success(res) {}
			// 					})
			// 				}
			// 			}
			// 		})
			// 	}
			// })
			uni.navigateTo({
				url: `/pages/addLocation/addLocation`
			})
		},
		// 点击右侧删除按钮回调
		onClick(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_place', true)
						}
						uni.setStorageSync('chooseList', this.list)
					}
				}
			})
		}
	}
}
</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;
			align-items: center;
			margin: 0 auto;
			margin-bottom: 20rpx;
			width: 690rpx;
			height: 137rpx;
			border-radius: 14rpx;
			background-color: #fff;

			.icon {
				margin-top: 10rpx;
				width: 75rpx;
				text-align: center;

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

			.place {
				width: 540rpx;

				.top {
					font-size: 32rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.center {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.bottom {
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.right {
				width: 75rpx;
				text-align: center;

				img {
					width: 15rpx;
					height: 28rpx;
				}
			}
		}
	}
}

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