wit-uniapp/pages/index/Immediateinspection/Immediateinspection.vue

<template>
	<view class="">
		<view class="" style="width: 750rpx;height: 50rpx;">
			
		</view>
		<view class="topname">
			<view class="topname1" @click="goback">
				<u-icon name="arrow-left" color="#000000" size="36"></u-icon>
			</view>
			<view class="topname2">
				巡检打卡
			</view>
		</view>
		
		<view class="getuserInfo">
			<view class="getuserInfoimg">
				<u--image :src="src" width="120rpx" height="120rpx"></u--image>
			</view>
			<view class="getuserInfoname">
				<h3>{{getuserInfo.realName}}</h3>
				<view>安保组</view>
			</view>
			<view class="getuserInfophone">
				<view class="getuserInfophone1">
					<u-icon name="phone" color="#2979ff" size="36"></u-icon>
				</view>
				<view class="getuserInfophone2">{{getuserInfo.mobile}}</view>
			</view>
		</view>
		<!--打卡-->
		<view class="Punchin">
			<view class="dakaweizhi">
				<view class="dakaweizhi1">
					<u-icon name="map" color="#6DD400" size="36"></u-icon>
				</view>
				<view class="dakaweizhi2">当前打卡位置：{{Punchposition}}</view>
			</view>
			<view class="shexiangji" @click="Punchindata">
				<view class="shexiangji1">扫码打卡</view>
				<view class="shexiangji2">
					<u-icon name="camera" color="#ffffff" size="90"></u-icon>
				</view>
			</view>
		</view>
		<view class="dakajilv">今日打卡记录</view>
		<view class="u-listdata">
			<view style="padding:10rpx 0 0 30rpx">
				共有 <span style="color: red">{{totalnumber}}</span>条记录
			</view>
			<u-list @scrolltolower="scrolltolower" :pagingEnabled='true'>
				<u-list-item v-for="(item, index) in indexList" :key="index">
					<view class="companylist">
						<h3>{{item.position}}</h3>
						<view class="Currentamount">
							巡检时间:{{item.circuitTime}}
						</view>
					</view>
				</u-list-item>
			</u-list>

		</view>

		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
	import {
		getCurrentTime
	} from "@/utils/index";
	export default {
		data() {
			return {
				Punchposition: '',
				getuserInfo: {},
				pd: true,
				totalnumber: 0,
				indexList: [],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				dataForm: {
					page: 1,
					limit: 99999,
					circuitType: "",
					startDate: "",
					endDate: "",
					buildingId: "",
					storeyId: "",
					circuitPersonId: "",
				},
			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad() {
			this.getuserInfo = uni.getStorageSync('getuserInfo');
			//console.log('111111111111111111', this.getuserInfo)

			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			//	this.circuitPosition = this.$route.query.circuitPosition;
			this.dataForm.startDate = `${year}-${month}-${day}` + " 00:00:00";
			this.dataForm.endDate = `${year}-${month}-${day}` + " 23:59:59";
			this.dataForm.circuitPersonId = this.getuserInfo.id;
			//	this.dataForm.circuitType = this.userInfo.circuitType;
			//	console.log('111111111111111111',this.dataForm)
			this.getDataList();
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},

		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},
		methods: {
			goback() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			
			Punchindata() {

				uni.scanCode({
					//是否只能从相机扫码,不能从相册扫码
					onlyFromCamera: false,
					//规定扫码类型  字节跳动小程序不支持此参数
					// barcode就是一维码(条形码)  qrcode就是(er)维码
					// datamatrix就是Data Matrix码   pdf417就是PDF417条码
					scanType: ['barCode', 'qrCode', ],
					// 是否启动自动识别字符编码功能
					autoDecodeCharset: false,
					// 是否开启自动放大功能  仅 App-Android (3.5.4+) 支持
					autoZoom: false,
					// 是否支持手动输入条形码  仅飞书小程序（V3.14.0）支持
					barCodeInput: false,
					success: (res) => {
						//console.log('111111111111111111', JSON.parse(res.result))
						let lsdata = JSON.parse(res.result)
						this.Punchposition = lsdata.position;
						let postdata = {
							"buildingId": lsdata.buildingId, //楼宇id
							"storeyId": lsdata.storeyId, //楼层id
							//"houseId": lsdata.buildingId, //房间id
							"position": lsdata.position, //位置信息
							"circuitPersonId": this.getuserInfo.id, //巡检人员id

							"circuitTime": getCurrentTime(), //巡检时间
							//  "circuitType": this.getuserInfo.circuitType,//巡检类型
							"circuitType": '', //巡检类型
							"remark": lsdata.remark, //备注

						}

						this.$api.post('/circuitrecord', postdata)
							.then(res => {
								console.log('99999', res)
								if (res.data.code == 0) {
									this.$refs.uNotify.success('打卡成功')
									this.getDataListtwo();

								} else {
									this.$refs.uNotify.error('打卡失败')
								}
							})
					},
					fail: (error) => {
						this.$refs.uNotify.error(error)

					}
				})
			},
			getDataListtwo() {
				this.dataForm.page = 1;
				this.$api.get('/circuitrecord/page', this.dataForm)
					.then(res => {
						//console.log('111111111111111111',res.data.data)
						this.totalnumber = res.data.data.total;
						this.indexList = res.data.data.list;
					})
			},


			scrolltolower() {
				if (this.pd) {
					this.getalldata();
				} else {
					return
				}
			},
			getDataList() {

				this.$api.get('/circuitrecord/page', this.dataForm)
					.then(res => {
						//console.log('111111111111111111',res.data.data)
						this.totalnumber = res.data.data.total;
						if (res.data.data.list.length != 0) {
							this.indexList.push(...res.data.data.list);
							this.dataForm.page = this.dataForm.page + 1;
							this.pd = true;
						} else {
							uni.showToast({
								title: '暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd = false;
						}
					})
			},

		}
	}
</script>

<style lang="scss">
	.dakajilv {
		color: #666;
		font-size: 32rpx;
		padding-left: 30rpx;
	}

	.Currentamount {
		padding-left: 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #BCB3A7;

		span {
			color: #FA5555;
			padding-left: 9rpx;
		}
	}
	.topname {
		height: 44px;
		width: 750rpx;
		display: flex;
		align-items: center;
	}

	.topname1 {
		width: 50rpx;
		padding-left: 10rpx;
	}

	.topname2 {
		width: 700rpx;
		text-align: center;
		font-weight: bold;
	}
	.Callfee {
		width: 100rpx;
		height: 45rpx;
		text-align: center;
		line-height: 45rpx;
		color: #5C8FFF;
		border: 1px solid #5C8FFF;
		font-size: 22rpx;
		position: absolute;
		bottom: 10rpx;
		right: 10px;
		font-weight: bold;
	}

	.companylist {
		margin: 20rpx 30rpx;
		background: #fff;
		height: 140rpx;
		border-radius: 10px;
		position: relative;

		h3 {
			height: 70rpx;
			line-height: 70rpx;
			padding-left: 30rpx;
		}
	}

	.settled {
		background-color: #09C700;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.outstanding {
		background-color: #30D3A2;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}



	.billall {}

	.topbill {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		background-color: #e6e6e6;
	}

	.topbilledit {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.changetime1 {
		padding-right: 10rpx;
	}

	.shexiangji1 {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}

	.shexiangji {
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		background: #5C8FFF;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.dakaweizhi2 {
		color: #999;
		font-size: 26rpx;
	}

	.dakaweizhi {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 300rpx;
	}

	.Punchin {
		width: 690rpx;
		margin: 30rpx auto;
		background: #fff;
		height: 690rpx;
	}

	.getuserInfo {
		display: flex;
		align-items: center;
		width: 690rpx;
		margin: 0 auto;
		background: #fff;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.getuserInfoimg {
		margin-left: 20rpx;
		margin-right: 30rpx;
	}

	.getuserInfoname {
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 20rpx;

		h3 {
			color: #333;
			font-size: 32rpx;
		}

		view {
			color: #999;
			font-size: 24rpx;
		}
	}

	.getuserInfophone {
		height: 120rpx;
		display: flex;
		align-items: flex-start;
	}

	.getuserInfophone2 {
		color: #666;
		font-size: 28rpx;
	}
</style>