project_patrolCheckIn/pages/my/myRenew/myRenew.vue

<template>
	<view class="myRenew">
		<view v-if="!isConnect" class="myRenew_main">
			<view class="myRenew_main-top">
				<p>更新巡更点信息时，需要保持手机与巡更点贴合~</p>
			</view>
			<view class="myRenew_main-content">
				<image src="../../../static/bg1.png" mode=""></image>
				<view class="myRenew_main-text">
					<p>请将手机贴至巡更点处~({{timeOutNum}}s)</p>
				</view>
				<view class="myRenew_main-text1">
					<p>巡更点</p>
				</view>
			</view>
		</view>

		<view v-else class="myRenew_main">
			<view class="myRenew_main-top">
				<p>已跟踪到巡更点，请选择更新的信息，请勿抬离手机~</p>
			</view>
			<view class="myRenew_main-list">
				<view class="order_item" v-for="(item,index) in data" :key="index">
					<view class="item-top">
						<view class="top-box-address">
							<p>{{item.positionName}}</p>
						</view>
						<view @click="handleChoose(item)" class="top-box-time">
							选择
						</view>
					</view>
				</view>

				<view class="line" style="margin-top: 30px;">
					<u-loadmore loadmoreText="没有更多了" line />
				</view>
				<view class="footer">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPositionPage
	} from '@/api/login.js'
	import NFCTool, {
		NFC_STATUS_ENUM
	} from '@/utils/nfcTool.js'
	export default {
		data() {
			return {
				content: 1,
				isLoading: false,
				searchData: {
					data: {},
					pageNumber: 1, // 页码
					pageSize: 15 // 每页条数
				},
				total: 0,
				data: [],
				isConnect: false,
				timeOutNum: 60,
			};
		},
		methods: {
			// 获取列表
			async fetchData() {
				uni.showLoading({
					title: '加载中...',
					icon: 'loading',
					mask: true
				})
				this.isLoading = true
				try {
					const res = await getPositionPage(this.searchData)
					uni.hideLoading()
					if (res.data.records && res.data.records.length > 0) {
						this.data = [...this.data, ...res.data.records]
					}
					this.total = res.data.total
					this.searchData.pageNumber++
				} finally {
					this.isLoading = false
					uni.hideLoading()
				}
			},
			// 选择
			handleChoose(item) {
				uni.showModal({
					title: '提示',
					content: `确定将当前巡更点的信息更新为 ${item.positionName} 吗？`,
					success: res => {
						if (res.confirm) {
							this.write(item);
						}
					}
				})
			},
			// 识别倒计时
			countDownFunc2() {
				let count = this.timeOutNum;
				if (count > 0) {
					this.timerId2 = setTimeout(() => {
						count--;
						this.timeOutNum = count;
						this.countDownFunc2();
					}, 1000);
				} else {
					clearTimeout(this.timerId2)
				}
			},
			// 回调
			NFCToolCallBack({
				status,
				tip,
				data
			}) {
				// console.log('NFCToolCallBack', status, tip, data)
				switch (status) {
					case NFC_STATUS_ENUM.INIT_ERROR:
						clearTimeout(this.timerId2)
						uni.showModal({
							title: '提示',
							content: tip,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/my/my'
									})
								}
							}
						})
						break;
					case NFC_STATUS_ENUM.TIMEOUT_ERROR:
						uni.showModal({
							title: '提示',
							content: 'NFC读取超时，是否重试?',
							success: res => {
								if (res.confirm) {
									this.timeOutNum = 60
									this.countDownFunc2()
									this.onStart()
								} else {
									uni.switchTab({
										url: '/pages/my/my'
									})
								}
							}
						})
						break;
					case NFC_STATUS_ENUM.WRITE_SUCCESS:
						this.isConnect = data?.isConnect;
						uni.redirectTo({
							url: '/pages/my/myRenewOk/myRenewOk',
						})
						break;
					case NFC_STATUS_ENUM.WRITING:
						this.isConnect = data?.isConnect;
						break;
					case NFC_STATUS_ENUM.WRITE_FAIL:
						this.isConnect = data?.isConnect;
						clearTimeout(this.timerId2)
						this.timeOutNum = 60
						uni.showModal({
							title: '提示',
							content: '未检测到巡更点，请保持手机与巡更点贴合',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									this.timeOutNum = 60
									this.countDownFunc2()
									this.onStart()
								}
							}
						})
						break;
					default:
						break;
				}
			},
			// 开始调用
			start() {
				this.nfcTool = new NFCTool(this.NFCToolCallBack, {
					timeOutNum: this.timeOutNum * 1000
				});
				this.onStart();
			},
			write(data) {
				// 调用 js 文件里面的方法
				this.nfcTool?.writeTag({
					id: data.encryptionCode,
					positionName: data.positionName
				})
			},
			onStart() {
				// 调用 js 文件里面的方法
				this.nfcTool?.startDiscovery({
					readyWrite: true
				})
			},
			/**
			 * 注销 NFCAdapter
			 */
			destroy() {
				// 调用 js 文件里面的方法
				this.nfcTool?.stopDiscovery();
				this.nfcTool = null;
			}
		},
		onLoad(options) {
			this.start();
		},
		onShow() {
			this.searchData.pageNumber = 1
			this.data = []
			this.fetchData()
			if (!this.isConnect) {
				this.countDownFunc2()
			}
		},
		onUnload() {
			clearTimeout(this.timerId2)
			this.destroy()
		},
		onHide() {
			this.destroy()
		},
		onReachBottom() {
			const {
				total,
				searchData: {
					pageNumber,
					pageSize
				}
			} = this
			if (total <= (pageNumber - 1) * pageSize) {
				return uni.$u.toast('没有更多了')
			}
			if (this.isLoading) return
			this.fetchData()
		},
	}
</script>

<style lang="scss">
	.myRenew {
		.myRenew_main {
			.myRenew_main-top {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 40px;
				font-weight: 400;
				color: #3A3C65B2;
				font-size: 14px;
				line-height: 21px;
			}

			.myRenew_main-content {
				position: relative;
				width: 100%;
				height: 530px;
				margin-bottom: 20px;

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.myRenew_main-text {
					position: fixed;
					top: 80px;
					height: 80px;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #1677FF;
					font-weight: 700;
					font-size: 24px;
				}

				.myRenew_main-text1 {
					position: fixed;
					top: 330px;
					right: 48px;
					color: #57597C;
				}
			}

			// 列表样式
			.myRenew_main-list {
				padding: 0 12px;

				.order_item {
					background: #fff;
					padding: 12px;
					margin-top: 14px;
					border-radius: 10px;

					&:last-child {
						margin-bottom: 40px;
					}

					.item-top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.top-box-address {
							font-weight: 500;
							font-size: 17px;
						}

						.top-box-time {
							padding: 5px 20px;
							border-radius: 15px;
							background: #F0F8FF;
							font-size: 14px;
							color: #1677FF;
						}
					}
				}
			}
		}

	}

	.footer {
		height: 20px;
	}
</style>