v3-lab-xcx/pages_student/gasBottle/gasList/gasListBinding.vue

<!--气瓶列表-->
<template>
    <view id="gasRecycle">
		<view class="title">{{item.airName}}-{{item.configName}}</view>
		<view class="register_li">
			<view class="register_li_min">
				<view>*</view>
				<view>电子标签：</view>
				<input v-model="form.newTag"   type="text" placeholder="请输入电子标签ID">
				<img @click.stop="saoCode"  class="code_img" src="@/images/basicsModules/icon_aqjc_sm.png">
			</view>
		</view>
		<view  class="sub_btn" @click="getBinding()">确认绑定</view>
	</view>
</template>

<script>
	import { gasTagBinding } from '@/api/apiDemo/index.js'
    export default {
        name: "gasRecycle",
        data() {
            return {
				pageType:0,
				form:{
					id:'',
					newTag:'',
				},
				item:{},
            }
        },
        onLoad(option) {
			this.item=JSON.parse(decodeURIComponent(option.item));
			this.form.id=this.item.bottleStorageId;
        },
        onShow() {

        },
		mounted(){


		},
        methods: {
			async getBinding(){
				let _this=this;
				const {data} = await gasTagBinding(this.form);
				if(data.code==200){
					let res = data.data;
					if(data.code==200){
						uni.showToast({
							title: '绑定成功!',
							icon:"none",
							mask:true,
							duration: 2000
						});
						uni.redirectTo({
						     url: '/pages_student/gasList/gasListDetail?item='+encodeURIComponent(JSON.stringify(this.item))
						 });
					}else{
						_this.form.newTag='';
						uni.showModal({
									showCancel:false,
									confirmColor:'#0183FA',
							content: '该RFID已被绑定，请重新选择 RFID标签',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						});
					}
				}
			},
			//调用摄像头
			saoCode(){
				let _this = this;
			    uni.scanCode({
			        onlyFromCamera: true,
			        success: function (res) {
						_this.form.newTag=res.result;
						_this.getBinding();
			        }
			    });
			},
        }
    }
</script>

<style lang="stylus" scoped>
    #gasRecycle {
        height: 100%;
        width: 100%;
		flex :1;
        display flex;
        flex-direction column
        overflow hidden;
		.title{
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 100rpx;
			padding-left: 40rpx;
		}
		.register_li{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;
			.register_li_min{
				height: 100rpx;
				margin:0 26rpx;
				display flex;
				align-items center;
				/* border-bottom: 1px solid #F5F5F5; */
				.icon_img{
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
				view{
					//width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				view:nth-child(1){
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
				.code_img{
					width: 30rpx;
					height: 28rpx;
					margin-left: 26rpx;
				}
				>input{
					flex:1;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.binding{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #0183FA;
					line-height: 24rpx;
					margin-left: 24rpx;
				}


			}
			.issue_li{
				margin:34rpx 26rpx 0;
				display flex;
				border-bottom: 1px solid #F5F5F5;
				view:nth-child(1){
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
				view:nth-child(2){
					//width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				.issue_img{
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
					margin-left:250rpx;
				}
			}
		}

	 /* 按钮 */
	 .sub_btn{
	 	width: 650rpx;
	 	height: 100rpx;
	 	background: #0183FA;
	 	border-radius: 20rpx;
	 	font-size: 28rpx;
	 	font-family: PingFang SC;
	 	font-weight: 500;
	 	color: #FFFFFF;
	 	line-height: 100rpx;
	 	text-align: center;
	 	margin-left: 50rpx;
	 	position: fixed;
	 	bottom:30rpx;
	 }
	}
</style>