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="padding: 10px 10px;">
			<view style="margin-bottom: 10px;">打卡时间范围：</view><view v-for="item in ruleList" style="font-size: 12px;padding-left: 10px;">{{item.startTime}} ~ {{item.endTime}}</view>
		</view>
		<view style="margin-top: 60px;" @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}}已打卡</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)"
					:show-foot="false" :show-head="false">
					<view slot="body" class="u-body-item u-flex">
							<image :src="val.picUrl"
								mode="aspectFill"></image>
						<view>
							<view class="u-body-item-desc">姓名:{{val.name}}</view>
							<view class="u-body-item-desc">打卡时间:{{val.time}}</view>
						</view>
					</view>
				</u-card>
			</uni-list>
			
		</view>
	</view>
</template>

<script>
	import { formatterDateTime } from "@/common/utils.js"
	var interval = null 
	export default {
		data() {
			return {
				applet:this.$url.data.applet,
				time: formatterDateTime(new Date(), 'h:min:s'),
				lnt:'',
				ingDate:['9:30','10:00','11:00'],
				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'}]
			}
		},
		onLoad() {
			this.getTime()
		},
		onHide() {
			clearInterval(interval)
		},
		onShow() {
			this.getTime()
		},
		methods: {
			close(){
				clearInterval(interval)
				uni.removeStorageSync("token")
				uni.redirectTo({
					url:'/pages/login/index'
				})
				
			},
			clickSign(){
				this.getLocation().then((res)=>{
					uni.chooseMedia({
						count:1,
						mediaType:['image'],
						sourceType:['camera'],
						camera:'front',
						success:(tempFiles)=>{
							console.log(tempFiles)
						}
					})
				})
			},
			getLocation() {
				uni.showLoading({
					title: "获取位置中...",
					mask: true
				})
				return new Promise((resolve, reject)=>{
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						geocode: true,
						success:(res)=> {
							uni.hideLoading();
							this.lnt = res.longitude + ',' + res.latitude;
							resolve()
						},
						fail(err) {
							uni.hideLoading();
							uni.showToast({
								title: "请检查位置信息状态！",
								icon: "none",
								mask: true,
								duration: 3000
							})
							reject()
						}
					})
				})
			},
			getTime() {
				interval = setInterval(()=> {
					this.time = formatterDateTime(new Date(), 'h:min:s')
				}, 1000)
			},
			previewOpen(e) {
				 uni.previewImage({
					urls:[e]
				})
			},
		},
		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>