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).getTime()
					let bl = false
					try {
						this.ruleList.forEach((rule) =>{
							let s = new Date(rule.startTime).getTime()
							let e = new Date(rule.endTime).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>