TrackOffical/pages/nfc/nfc.vue

<template>
	<view class="container">
		<uni-easyinput v-model="nfcWriteData" placeholder="请输入要写入NFC的数据" @input="input" />
		<view class="btn-box">
			<button class="btn" type="primary" @click="readData()">读取NFC</button>
			<button class="btn" type="primary" @click="writeData()">写入NFC</button>
		</view>
		<view class="btn-box">
			<button class="btn" type="primary" @click="getNfcState()">NFC状态</button>
			<button class="btn" type="warn" @click="writeAndLock()">写入并锁定</button>
		</view>
		<view class="btn-box">
			<button class="btn" type="warn" @click="setPassword()">设置密码</button>
			<button class="btn" type="warn" @click="delPassword()">清除密码</button>
		</view>
	</view>
</template>

<script>
	// import nfc from '../../utils/ouu-nfc.js'
	export default {
		data() {
			return {
				nfcWriteData: 'http://www.beswell.com'
			}
		},
		mounted() {
			console.log('[nfc] mounted')
			// nfc.listenNFCStatus();
		},
		onLoad() {
			console.log('[nfc] onLoad')
			this.$nfc.inputChanage(this.nfcWriteData)
		},
		onShow() {
			console.log('[nfc] onShow')
			uni.$off('NfcRead')
			uni.$on('NfcRead', this.onNfcRead)
		},
		onHide() {
			console.log('[nfc] onHide')
		},
		beforeDestroy() {
			console.log('[nfc] beforeDestroy')
			uni.$off('NfcRead')
		},
		methods: {
			input(data) {
				// console.log('input, data: ' + JSON.stringify(data))
				this.$nfc.inputChanage(data)
			},
			onNfcRead(data) {
				console.log('监听到事件来自 nfcRead, data: ' + JSON.stringify(data))
				// console.log(data)
				uni.showToast({
					title: `[${data.id}] '${data.data}'`,
					icon: 'none',
					duration: 2000
				})
			},
			writeData() {
				this.$nfc.writeData()
			},
			readData() {
				this.$nfc.readData()
			},
			setPassword() {
				this.$nfc.setPwdData()
			},
			delPassword() {
				this.$nfc.delPwdData()
			},
			getNfcState() {
				this.$nfc.getNfcState()
			},
			writeAndLock() {
				this.$nfc.writeAndLock()
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 15px;
		box-sizing: border-box;

		.btn-box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20px;

			.btn {
				width: 35%;
			}
		}
	}
</style>