SmartStorage/pages/rfidBinding/rfidBinding.vue

<template>
	<view class="hole-page">
		<view class="upper-bgd">
			<h4 style="font-size: 16px; font-weight: normal;">RFID标签绑定</h4>
			<uni-data-select
			  v-model="powerVal"
			  :localdata="powerRange"
			  placeholder="请选择功率"
			  @change="powerChange"
			  :clear="false"
			></uni-data-select>
		</view>
		<view class="lower-rfid" v-show="showStats">
			<view class="stat-cont">
				<view class="cont-upper">
					<h4 style="font-size: 14px;">识别数据</h4>
					<view 
						style="color: #3198FF; font-size: 12px;"
						@click="clearStat"
					>
						<uni-icons type="trash" size="12" style="color: #3198FF;"></uni-icons>
						清空数据
					</view>
				</view>
				<view class="cont-lower">
					<view>
						<h4>物资名称</h4>
						<span>{{ bindStats.typeName }}</span>
					</view>
					<view>
						<h4>物资规格</h4>
						<span>{{ bindStats.typeCode }}</span>
					</view>
					<view>
						<h4>物资编号</h4>
						<span>{{ bindStats.maCode }}</span>
					</view>
					<view>
						<h4>物资状态</h4>
						<span>{{ bindStats.sdStatus }}</span>
					</view>
					<!-- <view>
						<h4>本次维修时间</h4>
						<span>5</span>
					</view>
					<view>
						<h4>下次维修时间</h4>
						<span>6</span>
					</view>
					<view>
						<h4>所属工程名称</h4>
						<span>7</span>
					</view>
					<view>
						<h4>领料单位名称</h4>
						<span>8</span>
					</view> -->
				</view>
			</view>
		</view>
		<view class="btns-area">
			<view @click="startVeri">开始识别</view>
			<view @click="toggleBind">绑定</view>
		</view>
	</view>
</template>

<script>
	const rfidMod = uni.requireNativePlugin('BNS-RfidRed')
	export default {
		data() {
			return {
				showStats: false,
				rfidCode: '',
				maId: '',
				maCode: '',
				powerVal: 0,
				powerRange: [
					
				],
				bindStats: {}
			}
		},
		methods: {
			startVeri () {
				let that = this
				let goVeri = rfidMod.redTag()
				console.log(goVeri);
				if (goVeri.code == 1001) {
					that.rfidCode = goVeri.res
					uni.showToast({
						icon: 'none',
						title: '识别成功',
						success: () => {
							// 调用编码获取设备信息
							that.$api.fetchMaterialOutStore.searchRfid({
								rfidCode: goVeri.res
							}).then(res => {
								console.log(res);
								if (res.data.code == 200) {
									that.bindStats = res.data.data[0]
									that.maCode = res.data.data[0].maCode
									that.maId = res.data.data[0].maId
									that.showStats = true
								}
							}).catch(err => {
								console.log(err);
							})
						}
					})
				} else if (goVeri.code == 1000) {
					that.showLoading = false
					uni.showToast({
						icon: 'none',
						title: '获取设备信息失败，请重新扫描！'
					})
				}
			},
			toggleBind () {
				let that = this
				if (that.maCode == '' || that.maId == '') {
					uni.showToast({
						icon: 'none',
						title: '未识别到绑定设备！'
					})
				} else {
					that.$api.rfidBinding.bindRfid({
						rfidCode: that.rfidCode,
						maId: that.maId,
						maCode: that.maCode,
					}).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg,
								success: () => {
									uni.switchTab({
										url: '/pages/workSpace/workSpace'
									})
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}).catch(err => {
						console.log(err);
					})
				}
			},
			clearStat () {
				let that = this
				that.rfidCode = ''
				that.maCode = ''
				that.maId = ''
				that.showStats = false
			},
			powerChange (e) {
				console.log(e);
				const ctrlPower = rfidMod.setPower(e)
				console.log(ctrlPower);
				uni.showToast({
					icon: 'none',
					title: ctrlPower.res
				})
			}
		},
		onLoad() {
			// 初始化rfid识别
			rfidMod.initUHF()
			// 筛入频率
			for (let i = 5; i <= 30; i++) {
				this.powerRange.push({
					value: i,
					text: String(i)
				})
			}
		}
	}
</script>

<style lang="scss">
	.hole-page{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: url('/static/workspace-bgd.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		.upper-bgd{
			width: 100%;
			height: 20%;
			box-sizing: border-box;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			h4{
				color: #fff;
			}
			.uni-select[data-v-6b64008e] {
				background-color: #fff;
			}
		}
		.lower-rfid{
			flex: 1;
			margin-top: -3%;
			border-radius: 25rpx;
			box-sizing: border-box;
			padding: 0 25rpx;
			.stat-cont{
				width: 100%;
				box-sizing: border-box;
				padding: 15rpx;
				.cont-upper{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
				}
				.cont-lower{
					width: 100%;
					display: flex;
					flex-direction: column;
					view{
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						h4{
							width: 35%;
							font-weight: normal;
							font-size: 14px;
							color: #929292;
						}
						span{
							font-size: 14px;
						}
					}
				}
			}
		}
		.btns-area{
			position: absolute;
			width: 70%;
			left: 15%;
			bottom: 5%;
			height: 15%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			view{
				width: 100%;
				box-sizing: border-box;
				padding: 15rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #3888FF;
				color: #fff;
				font-size: 14px;
				border-radius: 25rpx;
			}
		}
	}
</style>