v3-lab-xcx/pages_student/gasBottle/useRegister/useRegister.vue

<!--使用登记-->
<template>
    <view id="gasRecycle">
		<view class="title">{{form.airName}}-{{form.configName}}</view>
		<view class="register_li">
			<view class="register_li_min">
				<view>实验地点：</view>
				<input v-model="form.location" disabled  type="text" >
			</view>
			<view class="register_li_min" style="border: none;">
				<view>编号：</view>
				<input v-model="form.airNumber" disabled  type="text" >
			</view>
		</view>
		<view class="register_li2" v-if="pageType==0 || pageType==1">
			<view class="register_li_min" v-if="pageType==0">
				<view>*</view>
				<view>当前压力：</view>
				<input v-model="form.currentPressure" disabled  type="text" >
			</view>
			<view class="register_li_min" v-if="pageType==1">
				<view>*</view>
				<view>实际气压：</view>
				<input v-model="form.beforeUse"  type="text" >
			</view>
			<view class="up-img-box">
				<view class="asterisk">*</view>
			    <view class="title-view">气表照片：</view>
			    <view class="img-max-box">
			        <view class="img-box" v-for="(item,index) in imgList" :key="index">
			            <img class="img-data" :src="baseUrl+item">
			            <img class="position-img" src="@/images/basicsModules/icon_ssp_closure.png" @click="delImg(index)">
			        </view>
			        <img class="add-button" src="@/images/basicsModules/icon_07.png" @click="selectImage" v-if="imgList.length<1">
			        <img class="add-button" src="@/pages_student/images/img_sydj_sltp.png" >
			    </view>
			</view>
		</view>
		<view class="empty" v-if="pageType==2">
			<img class="add-button" src="@/pages_student/images/icon_sydj_sqyqzg.png" >
			<view>请您在申请用气资格后再使用气瓶</view>
		</view>
		<view class="empty" v-if="pageType==3">
			<img class="add-button" src="@/pages_student/images/icon_xgzl_shz.png" >
			<view>该气瓶正在使用中，请重新选择气瓶</view>
		</view>
		<view class="empty" v-if="pageType==4">
			<img class="add-button" src="@/pages_student/images/icon_sydj_yubz.png" >
			<view>气压余量不足，请使用其他气瓶</view>
		</view>
		<view v-if="pageType==0" class="sub_btn2" @click="handleClick('inconformity')">余量不符</view>
		<view v-if="pageType==0" class="sub_btn" @click="submitForm(1)">确认使用</view>
		<view v-if="pageType==1" class="sub_btn" @click="submitForm(2)">提交余量不符并使用</view>
		<view v-if="pageType==2" class="sub_btn" @click="handleClick('useGasApply')">申请用气资格</view>
		<view v-if="pageType==3" class="sub_btn" @click="handleClick('QRcode')">重新扫描</view>

	</view>
</template>

<script>
	import { useRegisterDetail,useRegisterAdd } from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {

        name: "gasRecycle",
        data() {
            return {
				baseUrl:config.base_url,
				pageType:0,
				//列表请求参数
				getData:{
				    pageNum:1,
					pageSize:20,
					isCg:0,
					zgStatus:"",
				    getType:true,
				    nullDataType:true,
				},
				userType:uni.getStorageSync('userType'),
				form:{

				},
                dataList:[],
				imgList:[],
				specificationName:{},
				currentStatus:null,
				electronicTag:'333',
            }
        },
        onLoad(option) {
               	this.electronicTag=option.code;
               },
        onShow() {

        },
		mounted(){
		  this.getInfo()
			/* uni.showModal({
				showCancel:false,
				confirmColor:'#0183FA',
				content: '该气瓶最低安全气压值为1mPA，当前气压值即将达到安全值，请您使用气瓶中随时观察气压，避免发生风险。',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					}
				}
			}); */
		},
        methods: {
			//点击事件
			handleClick(doType) {
				let _this=this;
			   if(doType=='inconformity'){//余量不符
				 _this.pageType=1;
			   }else if(doType=='QRcode'){//重新扫描
				   uni.scanCode({
				   	onlyFromCamera: true,
				   	success: function (res) {
				   		_this.electronicTag=res.result
				   	}
				   });

			   }else if(doType=='useGasApply'){//申请用气资格
				   uni.redirectTo({
				   	 url:'/pages_student/useGasApply/useGasApplyAdd?status=0'
				   })
			   }
			},

			// 图片上传
			selectImage(index) {
			    let self = this;
			    if(self.imgList.length>1){
			        uni.showToast({
			            title: '最多上传1张图片',
			            icon:"none",
			            mask:true,
			            duration: 2000
			        });
			        return
			    }
			    wx.chooseImage({
			        count: 1,
			        sizeType: ["original", "compressed"],
			        sourceType: ["album", "camera"],
			        success: function(res) {
			            let tempFilePaths = res.tempFilePaths[0];
			            self.uploadImg(tempFilePaths,index);
			        }
			    });
			},
			async uploadImg(tempFilePaths,index){
			    var self = this;
			    uni.showLoading({
			        title: '上传中',
			        mask: true
			    });
			    uni.uploadFile({
			        url: config.base_url+'/base/file/upload', //仅为示例，非真实的接口地址
			        header:{'Authorization':uni.getStorageSync('token')},
			        filePath: tempFilePaths,
			        name: 'file',
			        formData: {
			            'user': 'test'
			        },
			        success: (uploadFileRes) => {
			            let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){

							self.imgList.push(res.data.url);

						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
			//删除图片
			delImg(index){
			    this.imgList.splice(index,1);
			},
			async getInfo(){
				let _this=this;
				const {data} = await useRegisterDetail({electronicTag:_this.electronicTag});
				if(data.code==200){
					let res = data.data;
					_this.form=res;
					_this.specificationName=JSON.parse(res.specificationName)
					if(res.currentStatus==1){//正常状态
						_this.pageType=0
					}else if(res.currentStatus==2){//余量不足
						_this.pageType=4
					}else if(res.currentStatus==3){//用户没有用气资格
						_this.pageType=2
					}else if(res.currentStatus==4){//气瓶正在使用中
						_this.pageType=3
					}
				}
			},
			//提交
			async submitForm(type){
				let _this = this;
				if(_this.imgList.length<=0){
					uni.showToast({
						title: '请选择气表图片!',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				let obj={
					bottleName:_this.form.airName,
					beforeUse:_this.form.currentPressure,
					beforeUsePic:_this.imgList.join(','),
					isSurplus:0,
					location:_this.form.location,
					storageId:_this.form.id,
				}
				if(type==1){//确认使用
					obj.isSurplus=0
				}else if(type==2){//余量不符
					obj.isSurplus=1
					obj.beforeUse=_this.form.beforeUse
				}

				const {data} = await useRegisterAdd(obj);
				if(data.code == 200){
				    uni.showToast({
				        title: '提交成功',
				        icon:"none",
				        mask:true,
				        duration: 2000
				    });
				    setTimeout(function(){
				       uni.redirectTo({
				            url: '/pages_student/gasManage/gasManage'
				        });
				    },2000);
				}

			},
        }
    }
</script>

<style lang="stylus" scoped>
    #gasRecycle {
        height: auto;
        width: 100%;
		flex :1;
        display flex;
        flex-direction column;
        overflow hidden;
		padding-bottom: 220rpx;
		.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{
				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;
					line-height: 100rpx;
				}
				>input{
					flex:1;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

		}
		.register_li2{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;
			.register_li_min{
				margin:0 26rpx;
				display flex;
				align-items center;
				border-bottom: 1px solid #F5F5F5;
				.icon_img{
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
				view:nth-child(1){
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
				view{
					//width:140rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 100rpx;
				}
				>input{
					flex:1;
					text-align: right;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
			/* 照片 */
			.up-img-box{
			    display flex
			    margin:34rpx 26rpx;
				.asterisk{
					padding-top:30rpx;
					color:red;
					line-height:28rpx;
					margin-right: 12rpx;
				}
			    .title-view{
			        width:150rpx;
			        line-height:80rpx;
			        font-size: 30rpx;
			        color:#333;
			    }
			    .img-max-box{
			        width:480rpx;
					display: flex;
			        .img-box{
			            display inline-block
			            height:150rpx;
			            width:150rpx;
			            position relative
			            margin:0 20rpx 20rpx 0;
			            .img-data{
			                height:150rpx;
			                width:150rpx;
			            }
			            .position-img{
			                position absolute
			                right:0;
			                top:0;
			                width:36rpx;
			                height:36rpx;
			            }
			        }
			        .add-button{
			            display inline-block
			            height:150rpx;
			            width:150rpx;
						margin-right: 20rpx;
			        }
			    }
			}

		}
		/* 按钮 */
		.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;
			z-index: 1000;
		}
		.sub_btn2{
			width: 650rpx;
			height: 100rpx;
			border: 2rpx solid #0072DB;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0183FA;
			line-height: 100rpx;
			text-align: center;
			margin-left: 50rpx;
			position: fixed;
			bottom:158rpx;
			z-index: 1000;
		}
		/* 空 */
		.empty{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx 0;
			padding:20rpx 0;
			box-sizing: border-box;

			>img{
				width: 100rpx;
				height: 100rpx;
				margin-top: 124rpx;
				margin-left: 300rpx;
			}
			>view{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;
				text-align: center;
				margin-top: 42rpx;
				padding-bottom: 106rpx;
			}
		}
	}
</style>