v3-lab-xcx/pages_student/gasBottle/examination/examinationSelect.vue

<!--资质申请-->
<template>
    <view id="transportPerson">
		<view class="search">
			<view class="search_t">
				<view class="search_n">
					<input v-model="params.searchValue" @blur="search()"   type="text" placeholder="请输入气体名称或供应商的关键字">
					<img  class="icon_img" src="@/images/basicsModules/icon_aqjc_ss.png"/>
				</view>
			</view>
			<!-- <view class="search_b">
				<text>气体名称</text>
				<text>气体级别</text>
				<text>气体规格</text>
			</view> -->
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-box">
		    <view class="list">
				<view class="list_li" v-for="(item,index) in listDetail">
					<view class="list_li_l">
						<view class="list_li_l_t">{{item.airName}}-{{item.configName}}</view>
						<view class="list_li_l_b">
							<img  src="@/images/basicsModules/icon_14.png">
							<text>{{item.companyName}}</text>
						</view>
					</view>
					<view class="list_li_r">
						<view class="minus"  @click="minus(item)"><img  src="@/pages_student/images/icon_zgsq_jian.png"></view>
						<input v-model="item.bottleNumber"  disabled  type="text" >
						<view class="add"  @click="add(item)"><img  src="@/pages_student/images/icon_zgsq_j.png"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-if="pageType==4">
			<img class="for-back-img" src="@/pages_student/images/img_ysrygl_zwsj.png">
			<view>暂无数据</view>
		</view>
		<view v-if="amount>0" class="sub_btn">
			<view class="sub_btn_l">已选择{{amount}}个气瓶</view>
			<view class="sub_btn_r" @click="submitForm()">提交</view>
		</view>
		<view v-if="amount==0" class="sub_btn2">
			<view class="sub_btn_l">暂未选择气瓶</view>
			<view class="sub_btn_r">提交</view>
		</view>
	</view>
</template>

<script>
	import { taskListGood } from '@/api/apiDemo/index.js'
    export default {

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

				pageType:0,
				//列表请求参数
				params:{
					searchValue:'',
				},
                listDetail:[],
				form:{

				},
				amount:0,
				status:null,//0添加1编辑
				id:null,
            }
        },
        onLoad(option) {
			this.status=option.status;
			this.id=option.id;

			if(option.form){
				this.form=JSON.parse(decodeURIComponent(option.form));
			}
        },
        onShow() {

        },
        methods: {
			search(){
				 this.getList();
			},
			minus(d) {
				let _this=this;
				 if(d.bottleNumber>0){
					 _this.amount=0;
					d.bottleNumber--;
					this.listDetail.forEach(function(item){
						_this.amount+=item.bottleNumber;
					})
				 }

			},
			add(d) {
				let _this=this;
				_this.amount=0;
				d.bottleNumber++;
				this.listDetail.forEach(function(item){
					_this.amount+=item.bottleNumber;
				})

			},
			//滚动加载事件
			scrollGet(){

			},
			//获取列表数据
			async getList(){
				    let _this = this;
				    const {data} = await taskListGood(this.params);
				    if(data.code==200){
						let res=data.rows;
						if(res){
							let arr=[];
							res.forEach(function(item){
								item.bottleNumber=0;
							})
							_this.listDetail=res;
							if(_this.status==0){//新增
								//如果有值回显
								if(uni.getStorageSync('listDetail')){
									arr=JSON.parse(decodeURIComponent(uni.getStorageSync('listDetail')));

									_this.listDetail.forEach(function(item){
										arr.forEach(function(item2){
											if(item.id==item2.id){
												item.bottleNumber=item2.bottleNumber;
												_this.amount+=item.bottleNumber
											}
										})
									})
								}
							}else if(_this.status==1){//编辑
								//如果有值回显
								if(uni.getStorageSync('listDetail')){
									arr=JSON.parse(decodeURIComponent(uni.getStorageSync('listDetail')));

									_this.listDetail.forEach(function(item){
										arr.forEach(function(item2){
											if(item.id==item2.airBottleConfigId){
												item.bottleNumber=item2.bottleNumber;
												_this.amount+=item.bottleNumber
											}
										})
									})
								}
							}
						}

				    }
				},
			//注册提交
			async submitForm(){
				let _this = this;
				if(_this.listDetail){
					let arr=[];
					_this.listDetail.forEach(function(item){
						if(item.bottleNumber>0){
							arr.push(item)
						}
					})
					uni.setStorageSync('listDetail',encodeURIComponent(JSON.stringify(arr)))
				}
				uni.redirectTo({
					url: '/pages_student/examination/examinationAdd?status='+this.status+'&id='+this.id+'&form='+encodeURIComponent(JSON.stringify(this.form)),
				});
			},

        },
		mounted(){
		   this.getList()

		},
    }
</script>

<style lang="stylus" scoped>
    #transportPerson {
        height: 100%;
        width: 100%;
		flex :1;
        display flex;
        flex-direction column
        overflow hidden;

		/* 搜索 */
		.search{
			.search_t{
				background: #FFFFFF;
				padding: 20rpx;
				box-sizing: border-box;
				.search_n{
					width: 710rpx;
					height: 80rpx;
					border: 1px solid #E0E0E0;
					border-radius: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:0 40rpx;
					box-sizing: border-box;
					>input{
						width: 640rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #CCCCCC;
						line-height: 30rpx;
					}
					>img{
						width: 30rpx;
						height: 30rpx;
					}
				}

			}
			.search_b{
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20rpx 0;
				>text{
					display: inline-block;
					width: 200rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 30rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 60rpx;
					text-align: center;
					margin-right: 20rpx;
				}
			}
		}
        .scroll-box{
        // flex:1;
         overflow-y scroll;
		 padding-top: 30rpx;
		 padding-bottom: 180rpx;
		 .list{
			 background: #FFFFFF;
			 border-radius: 20rpx;
			 margin: 0 20rpx;
			 padding: 0 20rpx;
			 box-sizing: border-box;
			 .list_li{
				 height: 180rpx;
				 display: flex;
				 justify-content: space-between;
				 padding: 0 20rpx;
				 box-sizing: border-box;
				 border-bottom:1px solid #f5f5f5;
				 .list_li_l{
					 flex: 1;
					 .list_li_l_t{
						 font-size: 28rpx;
						 font-family: PingFang SC;
						 font-weight: 500;
						 color: #333333;
						 line-height: 28rpx;
						 margin-top: 44rpx;
					 }
					 .list_li_l_b{
						 display: flex;
						 justify-content: flex-start;
						 margin: 42rpx 0 34rpx 0;
						 >img{
							 width: 28rpx;
							 height: 30rpx;
							 margin-right: 18rpx;
						 }
						 >text{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 24rpx;
						 }
					 }
				 }
				.list_li_r{
					 width: 222rpx;
					 display: flex;
					 justify-content: space-between;
					 align-items: center;
					 .minus{
						 width: 96rpx;
						 height: 96rpx;
						 >img{
							width: 36rpx;
							height: 36rpx;
							margin-top: 30rpx;
							margin-left: 30rpx;
						 }
					 }
					 .add{
						 width: 96rpx;
						 height: 96rpx;
						>img{
							width: 36rpx;
							height: 36rpx;
							margin-top: 30rpx;
							margin-left: 30rpx;
						}
					 }
					 >input{
						 text-align: center;
						 width: 90rpx;
						 font-size: 28rpx;
						 font-family: PingFang SC;
						 font-weight: 500;
						 color: #333333;
						 line-height: 36rpx;
					 }
				}

			 }
		 }
     }
		.empty{
			text-align: center;
			margin-top: 316rpx;
			>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;
			}
		}
		/* 按钮 */
		.sub_btn{
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx 0 40rpx;
			box-sizing: border-box;
			z-index: 1000;
			.sub_btn_l{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 120rpx;
				flex: 1;
			}
			.sub_btn_r{
				width: 200rpx;
				height: 70rpx;
				background: #0183FA;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 70rpx;
				text-align: center;
			}
		}
		.sub_btn2{
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx 0 40rpx;
			box-sizing: border-box;
			z-index: 1000;
			.sub_btn_l{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #CCCCCC;
				line-height: 120rpx;
				flex: 1;
			}
			.sub_btn_r{
				width: 200rpx;
				height: 70rpx;
				background: #E0E0E0;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 70rpx;
				text-align: center;
			}
		}
	}
</style>