waterElectricityMinApp/pagesClockIn/home/home.vue

<template>
	<view class="container">
		<view class="placeholder"></view>
		<!-- 头部学生信息区域 -->
		<view class="header">
			<view class="img"><img :src="userInfo.headImage || '../static/imgs/headImage.png'" /></view>
			<view class="msg">
				<view class="name">{{ userInfo.name || '用户' }}</view>
				<view class="major">{{ userInfo.college || '南昌交通学院' }}</view>
			</view>
		</view>

		<!-- 主体打卡区域 -->
		<view class="body">
			<!-- 卡片区域 -->
			<view class="card" v-if="list.length">
				<!-- 每一个卡片区域 -->
				<view :class="activeid == item.id ? 'active_box' : 'item'" v-for="item in list" :key="item.id" @click="handleClick(item)">
					<view class="item_box">
						<view class="title">{{ item.ruleName }}</view>
						<view class="time">{{ item.timeRange }}</view>
						<view class="type">
							<img v-if="item.status == 4" src="./imgs/success.png" />
							<span v-if="item.status == 4">{{ format_time(item.updateTime) }}</span>
							<span v-if="item.status == 4">已打卡</span>
							<span v-if="item.status == 3">已超时</span>
							<span v-if="item.status == 1 || item.status == 2">未打卡</span>
						</view>
					</view>
				</view>
			</view>
			<!-- list数组为空时的占位盒子 -->
			<view class="card" v-else></view>

			<!-- 打卡区域 -->
			<view :class="{ clock: flags, active: !flags }" @click="handlePunch(contrastObj)">
				<view class="info" v-if="flags">打卡</view>
				<view class="info" v-else>无法打卡</view>
				<view class="time">{{ nowTime }}</view>
			</view>

			<!-- 提示信息位置 -->
			<view class="address" v-if="flags">{{ address }}</view>

			<view class="address" v-else>{{ notes }}</view>
		</view>

		<!-- 底部导航栏区域 -->
		<view class="tab_bar">
			<navigator open-type="redirect" url="/pagesClockIn/home/home" class="tab_box">
				<img v-if="pageUrl == 'pagesClockIn/home/home'" src="../static/imgs/home_active.png" />
				<img v-else src="../static/imgs/home.png" />
				<view v-if="pageUrl == 'pagesClockIn/home/home'" class="tab_title_active">首页</view>
				<view v-else class="tab_title">首页</view>
			</navigator>
			<navigator open-type="redirect" url="/pagesClockIn/stat/stat" class="tab_box">
				<img v-if="pageUrl == 'pagesClockIn/stat/stat'" src="../static/imgs/stat_active.png" />
				<img v-else src="../static/imgs/stat.png" />
				<view v-if="pageUrl == 'pagesClockIn/stat/stat'" class="tab_title_active">统计</view>
				<view v-else class="tab_title">统计</view>
			</navigator>
			<navigator open-type="redirect" v-if="showTab" url="/pagesClockIn/my/my" class="tab_box">
				<img v-if="pageUrl == 'pagesClockIn/my/my'" src="../static/imgs/my_active.png" />
				<img v-else src="../static/imgs/my.png" />
				<view v-if="pageUrl == 'pagesClockIn/my/my'" class="tab_title_active">我的</view>
				<view v-else class="tab_title">我的</view>
			</navigator>
		</view>

		<!-- 认证结果弹窗 -->
		<uni-popup ref="popup" :is-mask-click="false">
			<view class="popup-content">
				<view class="title">
					<view class="icon"><img src="./imgs/success2.png" /></view>
					<view class="title_info">打卡成功</view>
				</view>
				<view class="time">{{ nowTime_pop }}</view>
				<view class="popup_button" @click="handleGoHome">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var QQMapWX = require('../util/qqmap-wx-jssdk1.1/qqmap-wx-jssdk')
var qqmapsdk
export default {
	data() {
		return {
			// 用户信息
			userInfo: {},
			// 打卡规则列表
			list: [],
			// 当前时间
			nowTime: '',
			// 弹窗当前时间
			nowTime_pop: '',
			// 当前定位位置信息
			address: '',
			// 定时器标识
			timer: null,
			// 提示信息
			notes: '',
			// 当前显示的是哪个规则id
			activeid: null,
			// 当前时间的时间戳
			timestamp: null,
			// 当前显示的规则具体信息
			contrastObj: {},
			// 当前用户定位经度
			myLng: 0,
			// 当前用户定位纬度
			myLat: 0,
			// 签到点中心经度
			centerLng: 0,
			// 签到点中心纬度
			centerLat: 0,
			// 签到半径
			radius: 0,
			// 距离签到点的距离
			distance: 0,
			// 是否可以打卡的标识
			flags: false,
			// 当前页面的路由地址
			pageUrl: '',
			// 是否显示底部 我的 导航栏
			showTab: false,
			// 是否需要拍摄场景照片
			takePicture: true,
			// 刷新定位定时器
			timer2: null
		}
	},
	onLoad() {
		// 获取用户的个人信息数据
		this.getUserInfo()
		// 实例化API核心类
		qqmapsdk = new QQMapWX({
			// 申请的key
			key: 'X57BZ-ZISE3-KTN3O-3P45H-C3J7Q-D5B67'
		})
		// 获取当前系统时间
		this.getNowTime()
	},
	onShow() {
		this.getPageUrl()
		// 获取当前时间的时间戳
		this.getTimestamp()
		// 获取当前位置的详细信息
		this.getLocationData()
	},
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer)
		}
		if (this.timer2) {
			clearInterval(this.timer2)
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		uni.removeStorageSync('manager')
		uni.removeStorageSync('sub-administrator')
		qqmapsdk = new QQMapWX({
			// 申请的key
			key: 'X57BZ-ZISE3-KTN3O-3P45H-C3J7Q-D5B67'
		})
		if (this.timer2) {
			clearInterval(this.timer2)
		}
		this.getNowTime()
		this.getTimestamp()
		this.getUserInfo()
		this.getLocationData()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1500)
	},
	methods: {
		getPageUrl() {
			// 获取当前打开过的页面路由数组
			let routes = getCurrentPages()
			// 获取当前页面路由，也就是最后一个打开的页面路由
			let curRoute = routes[routes.length - 1].route
			this.pageUrl = curRoute
		},
		// 获取当前时间
		getNowTime() {
			if (this.timer) {
				clearInterval(this.timer)
			}
			this.timer = setInterval(() => {
				let date = new Date()
				let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
				this.nowTime = hours + ':' + minutes + ':' + seconds
			}, 1000)
		},
		// 获取当前时间的时间戳
		getTimestamp() {
			let dates = new Date()
			let times = dates.getTime()
			this.timestamp = times
		},
		// 获取用户详细信息
		async getUserInfo() {
			let res = await this.$myRequest_clockIn({
				url: `/attendance/api/system/user/detail`
			})
			// console.log(res);
			if (res.code == 200) {
				this.userInfo = res.data
				uni.setStorageSync('userInfo', this.userInfo)
				if (this.userInfo.roles) {
					let temList = []
					this.userInfo.roles.forEach((ele) => {
						temList.push(ele.id)
					})
					let flag = temList.includes('2' || 2)
					let flag2 = temList.includes('3' || 3)
					if (flag) {
						uni.setStorageSync('manager', flag)
					} else {
						uni.removeStorageSync('manager')
					}
					if (flag2) {
						uni.setStorageSync('sub-administrator', flag2)
					} else {
						uni.removeStorageSync('sub-administrator')
					}

					let flag_show = uni.getStorageSync('manager')
					let flag_show2 = uni.getStorageSync('sub-administrator')

					if (flag_show || flag_show2) {
						this.showTab = true
					} else {
						this.showTab = false
					}
				}
			}
		},
		// 获取当前定位位置信息
		getLocationData() {
			uni.getSetting({
				success: (res) => {
					if (!res.authSetting['scope.userLocation']) {
						uni.authorize({
							scope: 'scope.userLocation',
							success: (res) => {
								// 授权成功
								this.getAddress()
							},
							fail: () => {
								uni.showModal({
									content: '获取定位权限失败将会影响使用部分功能，是否去设置打开？',
									confirmText: '确认',
									cancelText: '取消',
									success: (res) => {
										if (res.confirm) {
											uni.openSetting({
												success: (res) => {
													console.log(res)
													this.getLocationData()
												}
											})
										} else {
											uni.showToast({
												title: '获取定位权限失败',
												icon: 'none'
											})
										}
									}
								})
							}
						})
					} else {
						this.getAddress()
					}
				}
			})
		},
		getAddress() {
			uni.showLoading({
				title: '定位中，请稍后',
				mask: true
			})
			qqmapsdk.reverseGeocoder({
				success: (res) => {
					// console.log(res);
					if (res.status == 0) {
						// 获取详细地址信息 经纬度
						this.address = res.result.address
						this.myLat = res.result.location.lat
						this.myLng = res.result.location.lng
						// 获取当天的打卡列表数组
						this.getRulesList()
					} else {
						uni.showToast({
							title: '请求定位失败',
							icon: 'none'
						})
					}
				},
				fail: (error) => {
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							this.myLat = res.latitude
							this.myLng = res.longitude
							this.address = '未知地址'
							this.getRulesList()
						}
					})
				}
			})
		},
		// 获取打卡规则列表
		async getRulesList() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/list/today'
			})
			// console.log(res);
			if (res.code == 200) {
				if (res.data.length == 0) {
					this.flags = false
					this.notes = '无打卡任务无需打卡'
				} else {
					this.flags = true
					this.list = res.data
					this.activeid = this.list[0].id
					this.takePicture = this.list[0].takePicture
					this.contrastObj = this.list[0]
					this.changeType()
				}
			}
		},

		// 对比信息改变打卡的状态显示
		changeType() {
			if (this.contrastObj.status == 4) {
				this.flags = false
				this.notes = '已打卡，无需再次打卡'
			} else {
				// 没有到打卡时间 或者 超过打卡时间 的状态
				if (this.timestamp < this.contrastObj.beginTime || this.timestamp > this.contrastObj.endTime) {
					this.flags = false
					this.notes = '不在打卡时间段内，无法打卡'
				}
				// 到了打卡时间,判断是否在打卡范围内
				else {
					if (this.contrastObj.locations.length) {
						let temList = []
						temList = this.contrastObj.locations.map((ele) => {
							this.centerLat = ele.lat
							this.centerLng = ele.lng
							this.radius = ele.radius
							let red1 = (this.myLat * Math.PI) / 180.0
							let red2 = (this.centerLat * Math.PI) / 180.0
							let a = red1 - red2
							let b = (this.myLng * Math.PI) / 180.0 - (this.centerLng * Math.PI) / 180.0
							let R = 6378137
							let distance = R * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(red1) * Math.cos(red2) * Math.pow(Math.sin(b / 2), 2)))
							this.distance = distance.toFixed(2) * 1

							if (this.distance <= this.radius) {
								return 1
							} else {
								return 2
							}
						})
						let temFlag = temList.indexOf(1)
						if (temFlag == -1) {
							this.flags = false
							this.notes = `不在管理员设定范围内，无法打卡,距离打卡点${this.distance}米,管理员设定的范围为${this.radius}米`
						} else {
							this.flags = true
						}
					}
				}
				this.updateLocation()
			}
		},

		// 每5秒更新当前定位
		updateLocation() {
			if (this.timer2) {
				clearInterval(this.timer2)
			}
			this.timer2 = setInterval(() => {
				qqmapsdk.reverseGeocoder({
					success: (res) => {
						if (res.status == 0) {
							// 获取详细地址信息 经纬度
							this.address = res.result.address
							this.myLat = res.result.location.lat
							this.myLng = res.result.location.lng
							this.getTimestamp()
							this.changeType()
						} else {
							uni.showToast({
								title: '请求定位失败',
								icon: 'none'
							})
						}
					},
					fail: (error) => {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								this.myLat = res.latitude
								this.myLng = res.longitude
								this.address = '未知地址'
								this.getTimestamp()
								this.changeType()
							}
						})
					}
				})
			}, 5000)
		},

		// 点击每一个打卡规则回调
		handleClick(item) {
			if (this.timer2) {
				clearInterval(this.timer2)
			}
			// console.log(item);
			this.getTimestamp()
			this.contrastObj = item
			this.activeid = item.id
			this.takePicture = item.takePicture
			this.changeType()
		},
		// 点击打卡按钮回调
		handlePunch(info) {
			if (this.flags) {
				if (this.timer2) {
					clearInterval(this.timer2)
				}

				let obj = JSON.stringify(info)

				if (this.takePicture) {
					uni.navigateTo({
						url: `/pagesClockIn/location/location?obj=${obj}`
					})
				} else {
					this.handleUploading()
				}
			}
		},

		// 打卡请求
		async handleUploading() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/update',
				method: 'put',
				header: {
					Authorization: uni.getStorageSync('token'),
					platform: 2,
					'Accept-Language': 'zh-CN,zh;q=0.9'
				},
				data: {
					id: this.contrastObj.id,
					lat: this.myLat,
					lng: this.myLng,
					location: this.address
				}
			})
			// console.log(res);
			if (res.code == 200) {
				this.getNowTimePop()
				this.$refs.popup.open()
			}
		},
		// 点击 我知道了按钮 跳回首页
		handleGoHome() {
			this.$refs.popup.close()
			uni.reLaunch({
				url: '/pagesClockIn/home/home'
			})
		},
		getNowTimePop() {
			let date = new Date()
			let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
			let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
			this.nowTime_pop = hours + ':' + minutes + ':' + seconds
		},
		// 格式化时间
		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 {
	width: 100vw;
	height: 100vh;
	background-color: #f2f2f2;

	.placeholder {
		height: 20rpx;
	}

	.header {
		display: flex;
		margin: 0 30rpx 30rpx 30rpx;
		width: 690rpx;
		height: 130rpx;
		background-color: #fff;

		.img {
			margin: 30rpx;
			width: 70rpx;
			height: 70rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.msg {
			margin: 30rpx 0;
			height: 70rpx;
			line-height: 36rpx;

			.name {
				font-size: 32rpx;
				font-weight: 400;
			}

			.major {
				font-size: 24rpx;
				font-weight: 400;
				color: #a6a6a6;
			}
		}
	}

	.body {
		margin: 0 30rpx;
		width: 690rpx;
		height: 75vh;
		background-color: #fff;

		.card {
			padding-top: 30rpx;
			white-space: nowrap;
			height: 160rpx;
			overflow-x: auto;

			.active_box {
				display: inline-block;
				margin: 0 15rpx;
				width: 300rpx;
				height: 130rpx;
				line-height: 12rpx;
				border-radius: 8rpx;
				font-weight: 400;
				background-color: #e6e6e6;
				border: 1rpx solid #0094fc;

				.item_box {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					height: 130rpx;
					padding-left: 30rpx;

					.title {
						line-height: 30rpx;
						font-size: 28rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.time {
						font-size: 24rpx;
					}

					.type {
						font-size: 24rpx;
						color: #808080;

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

			.item {
				display: inline-block;
				margin: 0 15rpx;
				width: 300rpx;
				height: 130rpx;
				line-height: 12rpx;
				border-radius: 8rpx;
				font-weight: 400;
				background-color: #e6e6e6;

				.item_box {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					height: 130rpx;
					padding-left: 30rpx;

					.title {
						line-height: 30rpx;
						font-size: 28rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.time {
						font-size: 24rpx;
					}

					.type {
						font-size: 24rpx;
						color: #808080;

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

		.clock {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: auto;
			margin-top: 145rpx;
			width: 300rpx;
			height: 300rpx;
			border-radius: 150rpx;
			text-align: center;
			color: #fff;
			background: linear-gradient(180deg, #00acfc 0%, #0082fc 100%);

			.info {
				height: 58rpx;
				font-size: 40rpx;
				font-weight: 700;
			}

			.time {
				height: 41rpx;
				font-size: 28rpx;
				font-weight: 400;
			}
		}

		.active {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: auto;
			margin-top: 145rpx;
			width: 300rpx;
			height: 300rpx;
			border-radius: 150rpx;
			text-align: center;
			color: #fff;
			background: linear-gradient(180deg, #cccccc 0%, #b3b3b3 100%);

			.info {
				height: 58rpx;
				font-size: 40rpx;
				font-weight: 700;
			}

			.time {
				height: 41rpx;
				font-size: 28rpx;
				font-weight: 400;
			}
		}

		.address {
			padding: 0 10rpx;
			margin-top: 34rpx;
			line-height: 35rpx;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #808080;
		}
	}

	.tab_bar {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 750rpx;
		height: 128rpx;
		border-top: 1rpx solid #ccc;
		background-color: #fff;

		.tab_box {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			img {
				margin-bottom: 10rpx;
				width: 54rpx;
				height: 48rpx;
			}

			.tab_title {
				font-size: 20rpx;
			}

			.tab_title_active {
				font-size: 20rpx;
				color: #0082fc;
			}
		}
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 630rpx;
		height: 376rpx;
		border-radius: 33rpx;
		background-color: #fff;

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

			.icon {
				width: 40rpx;
				height: 40rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.title_info {
				margin-left: 8rpx;
				font-size: 36rpx;
				font-weight: 800;
				color: #0082fc;
			}
		}

		.time {
			font-size: 32rpx;
		}

		.popup_button {
			width: 50%;
			text-align: center;
			font-size: 32rpx;
			color: #0082fc;
		}
	}
}
</style>