iot-applet/pages/general/general.vue

//单位普通人员
<template>
	<view style="background-color: #F3F3F3;min-height: 100vh;">
		<u-sticky>
			<view style="background-color: #3A71FF;height: 90px;">
				<image :src="applet+'/close.png'" style="width: 35px;height: 35px;margin-top: 40px;margin-left: 10px;"
					@tap="close"></image>
				<view style="text-align: center;color: #fff;position: absolute;top: 49px;left: 40%;font-size: 17px;">
					值班打卡</view>
			</view>
		</u-sticky>
		<view
			style="margin: 10px auto;border: 1px #b7b7b7 dashed;width: 80%;border-radius: 6px;padding: 10px;background-color: #eaeaea;">
			<view style="margin-bottom: 10px;text-align: center;">打卡时间范围</view>
			<view v-for="item in ruleList" style="font-size: 12px;text-align: center;margin-top: 10px;">
				{{item.startTime}} ~ {{item.endTime}}</view>
		</view>
		<view style="margin-top: 30px;" @click="clickSign">
			<view class="module CBlue">
				<view class="text">打卡</view>
				<view class="time">{{time}}</view>
			</view>
			<view style="margin: 10px 0;text-align: center;font-size: 12px;">提示：打卡需要您上传中控室的自拍照片</view>
		</view>
		<view style="text-align: center;font-size: 12px;margin-top: 20px;">
			<view v-for="item in ingDate" style="margin-top: 5px;">
				<image :src="applet+'/success.png'" style="width: 14px;height: 14px;margin-right: 5px;"></image>
				{{item.time}}已打卡
			</view>
		</view>
		<view style="padding: 10px 10px;">
			<view>
				<text>打卡记录</text>
			</view>
			<uni-list class="custom-list">
				<u-card class="custom-card" v-for="(val,index) in list" @click="previewOpen(val.picUrl)"
					:show-foot="false" :show-head="false">
					<view slot="body" class="u-body-item" style="display: flex;flex-wrap:nowrap;">
						<view>
							<image :src="val.picUrl" mode="aspectFill" style="width: 60px;height: 80px;"></image>
						</view>
						<view style="margin-left: 20px;line-height: 28px;margin-top: 11px;">
							<view>打卡时间:</view>
							<view>{{val.time}}</view>
						</view>
					</view>
				</u-card>
			</uni-list>

		</view>
	</view>
</template>

<script>
	import {
		formatterDateTime
	} from "@/common/utils.js"
	import config from "../../uni_modules/uview-ui/libs/config/config"
	var interval = null
	export default {
		data() {
			return {
				pageInfo: {
					page: 1,
					limit: 20,
					userId: uni.getStorageSync("user_id"),
					unitId: uni.getStorageSync("dept_id")
				},
				applet: this.$url.data.applet,
				time: formatterDateTime(new Date(), 'h:min:s'),
				date: formatterDateTime(new Date(), 'Y-M-D'),
				lnt: '',
				ingDate: [],
				list: [],
				//ruleList:[{startTime:'2023-07-20 08:00:00',endTime:'2023-07-20 16:00:00'},{startTime:'2023-07-20 08:00:00',endTime:'2023-07-20 16:00:00'},{startTime:'2023-07-20 08:00:00',endTime:'2023-07-20 16:00:00'}]
				ruleList: [],
				serverTime: '',
				form: {},
				taskId: ''
			}
		},
		onLoad() {
			this.getTime()
			this.initRuleList()
			this.getRecordByToday()
			this.loadData()
		},
		onHide() {
			clearInterval(interval)
		},
		onShow() {
			this.getTime()
		},
		methods: {
			initRuleList() {
				this.$http.get("/fire-customer/sign/getRuleByUnitIdAndDate", {
					unitId: uni.getStorageSync("dept_id"),
					date: this.date
				}, {}).then(res => {
					this.ruleList = res.data
				})
			},
			getRecordByToday() {
				//获取今天打卡记录
				this.$http.get("/fire-customer/sign/getRecordByUserIdAndDate", {
					userId: uni.getStorageSync("user_id"),
					unitId: uni.getStorageSync("dept_id"),
					date: this.date
				}, {}).then(res => {
					this.ingDate = res.data
					this.ingDate.forEach(ingDate => {
						this.ruleList.forEach((rule, index) => {
							if (ingDate.taskId == rule.id) {
								// this.ruleList[index].bb = true
								rule.bb = true
							}
						})
					})
				})
			},
			loadData() {
				this.$http.get("/fire-customer/sign/record/user/page", this.pageInfo, {}).then(res => {
					this.list = this.list.concat(res.data.records)
				})
			},
			clickSign() {
				this.$http.get("/fire-customer/sign/getServerTime", {}, {}).then(res => {
					this.serverTime = res.data
					let n = new Date(res.data.replace(/-/g, '/')).getTime()
					let bl = false
					try {
						this.ruleList.forEach((rule) => {
							let s = new Date(rule.startTime.replace(/-/g, '/')).getTime()
							let e = new Date(rule.endTime.replace(/-/g, '/')).getTime()
							if (s <= n && n <= e) {
								if (rule.bb) {
									uni.showToast({
										icon: 'none',
										title: '该时间段已打卡，请勿重复打卡'
									})
									bl = true
									return false
								}
								//rule.bb = true
								this.taskId = rule.id
								bl = true
								this.getDw()
								throw new Error("停止循环");
							}
						})
					} catch (e) {
						throw e;
					}
					if (!bl) {
						uni.showToast({
							icon: "none",
							title: "不在打卡时间范围！请到点打卡！"
						})
						return false
					}
				})
			},
			getDw() {
				this.getLocation()
				this.getCam()
			},
			getCam() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['camera'],
					camera: 'front',
					success: (e) => {
						uni.showLoading({
							title: "上传图片...",
							mask: true
						})
						let te = e.tempFiles[0].tempFilePath
						//"{"code":200,"success":true,"data":"https://keningfile.oss-cn-shenzhen.aliyuncs.com/knFire/image/20230724/20230724180751_446.jpg","msg":"操作成功"}"
						this.$http.upload('/fire-customer/knAliOss/uploadVadioFile', te, {}).then(res => {
							let ddd = JSON.parse(res.data)
							this.form.picUrl = ddd.data
							this.form.locate = this.lnt
							this.form.time = this.serverTime
							this.form.userId = uni.getStorageSync("user_id")
							this.form.unitId = uni.getStorageSync("dept_id")
							this.form.date = this.date
							this.form.taskId = this.taskId
							this.$http.post('/fire-customer/sign/addRecord', this.form, {}).then(
							res => {
								uni.hideLoading()
								this.getRecordByToday()
								this.pageInfo.page = 1;
								this.list = [];
								this.loadData();
							})
						}).catch(e => {
							uni.hideLoading()
							uni.showToast({
								icon: 'error',
								title: '请重试..'
							})
						})

					}
				})
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					geocode: true,
					success: (res) => {
						this.lnt = res.longitude + ',' + res.latitude;
					}
				})
			},
			getTime() {
				interval = setInterval(() => {
					this.time = formatterDateTime(new Date(), 'h:min:s')
				}, 1000)
			},
			previewOpen(e) {
				uni.previewImage({
					urls: [e]
				})
			},
			close() {
				clearInterval(interval)
				uni.removeStorageSync("token")
				uni.redirectTo({
					url: '/pages/login/index'
				})

			}
		},
		onPullDownRefresh() {
			this.pageInfo.page = 1;
			this.list = [];
			this.loadData();
			this.getRecordByToday()
			//下拉刷新
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.pageInfo.page = this.pageInfo.page + 1;
			this.loadData();
			//加载更多
		},
		onUnload() {
			clearInterval(interval)
		}
	}
</script>

<style scoped lang="scss">
	.CBlue {
		background-image: linear-gradient(#7cc9ff, #1771d7);
		box-shadow: 0 8px 8px #b0d2f3;
	}

	.module {
		overflow: hidden;
		margin: 20upx auto;
		width: 260upx;
		height: 260upx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
	}

	.module .text {
		font-size: 20px;
		margin: 80upx auto 10upx;
	}

	.custom-list {
		background: #f1f1f4;

		.custom-card {
			//margin: 12rpx 24rpx !important;
			position: relative;

			.card-nav {
				position: absolute;
				float: right;
				top: 40%;
				right: 35rpx;
			}
		}
	}

	.u-body-title {
		font-size: 32rpx;
		color: #333;
	}

	.u-body-item {
		padding: 0rpx;
	}

	.u-body-item-desc {
		font-size: 28rpx;
		color: #555;
		padding: 0rpx;
	}

	.u-body-item image {
		width: 160rpx;
		flex: 0 0 160rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 0rpx;
		margin-right: 12rpx;
	}

	.u-margin-right-12 {
		margin-right: 12rpx;
		border: 0;
	}
</style>