FE-V2-XCX/pages/gasBottle/stockList/gasListDetail.vue

<!--气瓶列表-->
<template>
    <view id="gasRecycle">
		<view class="title">{{form.gasName}}-{{form.levelName}}({{form.sizeName}})</view>
		<view class="register_li">
			<view class="register_li_min">
				<view>余量：</view>
				<input v-model="form.gasPressure" disabled  style="color: #D60000;" type="text" >
			</view>
			<view class="register_li_min">
				<view>学院：</view>
				<input v-model="form.collegeName" disabled  type="text" >
			</view>
			<view class="register_li_min">
				<view>实验地点：</view>
				<input v-model="form.subjectName" disabled  type="text" >
			</view>
			<view class="register_li_min"  style="border: none;">
				<view>电子标签：</view>
				<input v-model="form.beaconTag" disabled  type="text" >
				<view class="binding" @click="binding()">更换电子标签</view>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-box">
			<view class="small_title" @click="handleClick('useRecord')">使用记录</view>
		    <view class="register_li2" >
		    	<viwe class="register_li2_min" @tap="useRecordInfo(item)" v-for="(item,index) in form.dbUsageRecordList">
		    		<view class="register_li2_t">{{item.operator?item.operator:'--'}}</view>
		    		<view class="register_li2_b">
		    			<img src="@/pages_manage/images/Version3.0/icon_qpgl_syl.png">
		    			<view>使用量: {{item.usageAmount}}Mpa</view>
		    		</view>
					<view class="register_li2_b2">
						<img src="@/pages_manage/images/Version2.2/icon_wtzg_sj.png">
						<view>使用时间: {{item.usageStartTime==null?'':item.usageStartTime}}-{{item.usageEndTime==null?'':item.usageEndTime}}</view>
					</view>
		    	</viwe>
		    </view>
		</scroll-view>
		<view class="empty" v-if="form.dbUsageRecordList.length==0">
			<img class="for-back-img" src="@/pages_manage/images/Version3.0/img_ysrygl_zwsj.png">
			<view>暂无数据</view>
		</view>
		<view class="btn">
			<view class="btn_l" @click="handleClick('QRcode')">使用</view>
			<view class="btn_r" @click="handleClick('outStock')">申请出库</view>
		</view>
	</view>
</template>

<script>
	import {gasDetailRecord,airbottleStockFindById,airbottleStockFindByBeaconTag} from '@/api/index.js'
    export default {

        name: "gasRecycle",
        data() {
            return {

				pageType:0,
				//列表请求参数
				getData:{
				    pageNum:1,
					pageSize:10,
				},
				gasBottleLevel:uni.getStorageSync('gasBottleLevel'),//  气瓶级别
				gasBottleSpecification:uni.getStorageSync('gasBottleSpecification'), // 气瓶规格
				form:{
				},
                dataList:[],
				id:'',
				item:{},
				specificationName:{},
            }
        },
        onLoad(option) {
			if(option.id){
				this.id=option.id;
			}
			

        },
        onShow() {

        },
		mounted(){
		  this.getInfo();
		  this.getList();
		},
        methods: {
			
			//滚动加载事件
			scrollGet(){
			    if(this.getData.getType){
			        this.getData.pageNum += 1;
			        this.getList();
			    }
			},
			handleClick(doType) {
				let _this=this;
				if(doType=='outStock'){//申请出库
					uni.navigateTo({
					    url:'/pages/gasBottle/gasOutstock/gasOutstock?id='+this.form.id
					});
				}else if(doType=='QRcode'){//使用
					this.getBeaconTag();
				}
			
			},
			//校验当前信标是否可用
			async getBeaconTag(){
				let self=this;
				const {data} = await airbottleStockFindByBeaconTag({BeaconTag:self.form.beaconTag});
				if(data.code==200){
					uni.navigateTo({
						url:'/pages/gasBottle/gasUse/gasUse?beaconTag='+self.form.beaconTag
					});
				}else{
					
				}
			},
			//使用记录详情
			useRecordInfo(d){
				uni.navigateTo({
				    url:'/pages/gasBottle/stockList/useRecordDetail?id='+d.id
				});
			},
			//标签绑定
			binding(){
				uni.navigateTo({
				    url:'/pages/gasBottle/stockList/gasListBinding?form='+encodeURIComponent(JSON.stringify(this.form))
				});
			},
			//查询详情
			async getInfo(){
			  let self = this;
			  const {data} = await airbottleStockFindById({id:this.id});
			  if(data.code == 200){
				for(let b=0;b<this.gasBottleSpecification.length;b++){
					if(this.gasBottleSpecification[b].dictValue==data.data.size){
						data.data.sizeName=this.gasBottleSpecification[b].dictLabel
					}										
				}
				for(let t=0;t<this.gasBottleLevel.length;t++){
					if(this.gasBottleLevel[t].dictValue==data.data.level){
						data.data.levelName=this.gasBottleLevel[t].dictLabel
					}
				}
				  this.form=data.data;
			  }
			},

			//获取列表数据
			async getList(){
				let _this = this;
				const {data} = await gasDetailRecord(this.getData);
				if(data.code==200){
					let res=data.rows
					_this.dataList=res
					
				}
			},

        }
    }
</script>

<style lang="stylus" scoped>
    #gasRecycle {
        height: auto;
        width: 100%;
		flex :1;
        display flex;
        flex-direction column
        overflow hidden;
		padding-bottom: 220rpx;
		.empty{
			text-align: center;
			margin-top: 46rpx;
			>img{
				width: 336rpx;
				height: 222rpx;
				margin-left: 208rpx;
			}
			>view{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #E0E0E0;
				line-height: 30rpx;
				margin-top: 48rpx;
			}
		}
		.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;
				}
				>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;
				}
			}
		}
        .scroll-box{
        // flex:1;
         overflow-y scroll;
		 margin-top: 20rpx;
		 .small_title{
		 	font-size: 30rpx;
		 	font-family: PingFang SC;
		 	font-weight: 500;
		 	color: #333333;
		 	line-height: 80rpx;
		 	margin: 0 40rpx;
		 	display: flex;
		 	justify-content: space-between;
		 	align-items: center;
		 	>img{
		 		width: 24rpx;
		 		height: 24rpx;
		 	}
		 }
     	.register_li2{
			overflow: hidden
     		background #fff;
     		border-radius:20rpx;
     		margin:0 20rpx 0;
     		padding:0 20rpx;
     		box-sizing: border-box;

     		.register_li2_min{

     			.register_li2_t{
     				font-size: 28rpx;
     				font-family: PingFang SC;
     				font-weight: 500;
     				color: #333333;
     				line-height: 28rpx;
     				margin-top: 28rpx;
     			}
     			.register_li2_b{
     				display: flex;
     				justify-content: flex-start;
     				align-items: center;
     				margin-top: 42rpx;
     				padding-bottom: 28rpx;
     				>img{
     					width: 28rpx;
     					height: 28rpx;
     					margin-right: 10rpx;
     				}
     				>view{
     					font-size: 26rpx;
     					font-family: PingFang SC;
     					font-weight: 500;
     					color: #666666;
     					line-height: 26rpx;
     				}
     				>view:nth-child(1){
     					width: 200rpx;
     				}
     				>view:nth-child(2){
     					flex: 1;
     				}
     			}
				.register_li2_b2{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding-bottom: 28rpx;
					border-bottom: 1rpx solid #f5f5f5;
					>img{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
					>view{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 26rpx;
					}
					>view:nth-child(1){
						width: 200rpx;
					}
					>view:nth-child(2){
						flex: 1;
					}
				}
     		}

     	}
     }
	 /* 按钮 */
	 .btn{
	 	display: flex;
	 	position: fixed;
	 	bottom: 40rpx;
	 	left: 50rpx;
	 	.btn_l{
	 		width: 324rpx;
	 		height: 100rpx;
	 		background: #F28E26;
	 		border-radius: 50rpx 0rpx 0rpx 50rpx;
	 		font-size: 28rpx;
	 		font-family: PingFang SC;
	 		font-weight: 500;
	 		color: #FFFFFF;
	 		line-height: 100rpx;
	 		text-align: center;
	 	}
	 	.btn_r{
	 		width: 324rpx;
	 		height: 100rpx;
	 		background: #0183FA;
	 		border-radius: 0rpx 50rpx 50rpx 0rpx;
	 		font-size: 28rpx;
	 		font-family: PingFang SC;
	 		font-weight: 500;
	 		color: #FFFFFF;
	 		line-height: 100rpx;
	 		text-align: center;
	 	}
	 }
	}
</style>