Assitent/pages/checkPoint/checkPointDetail.vue

<template>
	<view class="warp">
		<uni-card :title="'序号: ' + ciDetail.cicode" :extra="'ID: ' + ciDetail.ciid">
			<view style="margin: 20rpx 0;">
				<uni-tag :circle="true" text="系统位置" type="success" size="small"
					style="font-weight: bold; margin-right: 30rpx;" />
				<!-- <text style="padding-right: 36rpx;">检查点位置</text> -->
				<text style="padding-right: 20rpx;"> 经度 {{ ciDetail.position.longitude }} </text>
				<text>纬度 {{ ciDetail.position.latitude }}</text>
			</view>
			<view style="margin: 20rpx 0;">
				<uni-tag :circle="true" text="当前位置" type="warning" size="small"
					style="font-weight: bold; margin-right: 30rpx;" />
				<!-- <text style="padding-right: 65rpx;">当前位置</text> -->
				<text style="padding-right: 20rpx;">经度 {{ curPos.longitude }} </text>
				<text>纬度 {{ curPos.latitude }}</text>
			</view>
			<view style="text-align: center; margin-top: 10rpx;">
				<button @click="getCurPos()" class="mini-btn" type="primary" size="mini"
					style="margin-right: 50rpx;">获取位置</button>
				<button @click="savePos()" class="mini-btn" type="primary" size="mini">上报位置</button>
			</view>
		</uni-card>

		<uni-section title="NFC列表" type="line">
			<uni-list v-if="nfcList.length > 0">
				<!-- <uni-list-item v-for="(item, index) in nfcList" :key="item.id" :title="item.id" :note="item.data"> -->
				<uni-list-item v-for="(item, index) in nfcList" :key="item" :title="item">
					<!-- 自定义 footer-->
					<template v-slot:footer>
						<button @click="delNfc(index)" class="mini-btn" type="warn" size="mini"
							style="height: 60rpx;">删除</button>
					</template>
				</uni-list-item>
			</uni-list>
			<view v-else style="text-align: center;">
				<text>NFC列表为空</text>
			</view>
		</uni-section>

		<view style="text-align: center; margin-top: 30rpx;">
			<button @click="readNfc()" class="mini-btn" type="primary" size="mini" style="margin-right: 50rpx;">读取
				NFC</button>
			<button @click="saveControlInfo()" class="mini-btn" type="primary" size="mini">上报 NFC</button>
		</view>

		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	// import nfc from '../../utils/ouu-nfc.js'
	import {
		IdRequest,
		Position,
		AssControlInfoSaveRequest,
		AssControlInfoGpsSaveRequest
	} from "@/grpc/app_api_pb.js"

	export default {
		components: {},
		data() {
			return {
				ciId: 0,
				ciDetail: {
					cicode: '',
					ciid: '',
					position: {
						longitude: '',
						latitude: ''
					},
					nfccodelistList: []
				},
				nfcList: [],
				curPos: {
					longitude: '',
					latitude: ''
				},
				msgType: 'success',
				messageText: '',
			}
		},
		computed: {},
		mounted() {
			console.log('[checkPointDetail] mounted')
		},
		onLoad(option) {
			console.log('[checkPointDetail] onLoad')
			// console.log(option.ciId)
			if (option.ciId > 0) {
				// nfc.listenNFCStatus()

				this.ciId = option.ciId
				this.getAssControlInfoDetail()
				this.getCurPos()
			}
		},
		onShow() {
			console.log('[checkPointDetail] onShow')
			uni.$off('NfcRead')
			uni.$on('NfcRead', this.onNfcRead)
		},
		onHide() {
			console.log('[checkPointDetail] onHide')
		},
		beforeDestroy() {
			console.log('[checkPointDetail] beforeDestroy')
			uni.$off('NfcRead')
		},
		methods: {
			//msgType: success 成功 / warn 警告 / error 失败 / info 消息
			messageToggle(messageText = '操作成功', msgType = 'success') {
				this.msgType = msgType
				this.messageText = messageText
				this.$refs.message.open()
			},
			getAssControlInfoDetail() {
				// 创建请求参数并赋值
				var request = new IdRequest()
				request.setId(this.ciId)
				// 调用客户端相应的grpc方法，发送grpc请求，并接受后台发送回来的返回值
				this.$client.assControlInfoDetail(request, {}, (err, response) => {
					if (err) {
						console.log(`[assControlInfoDetail] err: code = ${err.code}` +
							`, message = "${err.message}"`)
						this.messageToggle('获取检查点信息失败', 'error')
					} else {
						// console.log(response)
						let res = response.toObject()
						console.log(res)
						this.ciDetail = res

						this.nfcList.length = 0
						this.nfcList = res.nfccodelistList
					}
				});
			},
			getCurPos() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude)
						console.log('当前位置的纬度：' + res.latitude)
						that.curPos.longitude = res.longitude
						that.curPos.latitude = res.latitude
					}
				});
			},
			savePos() {
				// 创建请求参数并赋值
				var request = new AssControlInfoGpsSaveRequest()
				request.setCiid(this.ciId)
				var position = new Position()
				position.setLongitude(this.curPos.longitude)
				position.setLatitude(this.curPos.latitude)
				request.setPosition(position)
				// 调用客户端相应的grpc方法，发送grpc请求，并接受后台发送回来的返回值
				this.$client.assControlInfoGpsSave(request, {}, (err, response) => {
					if (err) {
						console.log(`[assControlInfoGpsSave] err: code = ${err.code}` +
							`, message = "${err.message}"`)
						this.messageToggle('上报位置信息失败', 'error')
					} else {
						// console.log(response)
						// let res = response.toObject()
						// console.log(res)
						this.getAssControlInfoDetail()
						this.messageToggle('上报位置信息成功')
					}
				});
			},
			readNfc() {
				this.$nfc.readData()
			},
			onNfcRead(data) {
				console.log('监听到事件来自 nfcRead, data: ' + JSON.stringify(data))

				let length = this.nfcList.length
				let find = false
				for (let i = 0; i < length; i++) {
					// if (this.nfcList[i].id === data.id) {
					if (this.nfcList[i] === data.id) {
						find = true
					}
				}

				if (!find) {
					// this.nfcList.push(data)
					this.nfcList.push(data.id)
					console.log(this.nfcList)
				} else {
					uni.showToast({
						title: 'NFC标签 [' + data.id + '] 已存在',
						icon: 'none',
						duration: 2000
					})
				}
			},
			delNfc(index) {
				let that = this
				uni.showModal({
					title: '操作提示',
					content: '确定删除该记录吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.nfcList.splice(index, 1)
							that.messageToggle('删除成功')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			saveControlInfo() {
				// 创建请求参数并赋值
				var request = new AssControlInfoSaveRequest()
				request.setCiid(this.ciId)
				request.setNfccodelistList(this.nfcList)
				// 调用客户端相应的grpc方法，发送grpc请求，并接受后台发送回来的返回值
				this.$client.assControlInfoSave(request, {}, (err, response) => {
					if (err) {
						console.log(`[assControlInfoSave] err: code = ${err.code}` +
							`, message = "${err.message}"`)
						this.messageToggle('上报NFC信息失败', 'error')
					} else {
						console.log(response)
						// let res = response.toObject()
						// console.log(res)
						this.messageToggle('上报NFC信息成功')
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.padding {
		padding: 0 20rpx;
	}
</style>