v3-lab-xcx/pages_supplier/gasRecycle/gasRecycle.vue

<!--供气回收记录-->
<template>
    <view id="gasRecycle">
		<view class="tabTitle">
			<view class="tabTitle_li" @tap="tabClick(index)"  :key="index" v-for="(item,index) in tabText">
				<view :class="{on:curTab==index}" class="tabTitle_text">{{item}}</view>
			    <view :class="{on:curTab==index}" class="tabTitle_across"></view>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-box">
		    <view class="for-big-box" v-for="(item,index) in dataList" :key="index">
		        <view class="for-time-p">{{item.createTimeApp}}</view>
		        <img class="for-back-img" src="@/images/basicsModules/for_min_bg.png">
				<!-- 供气 -->
		        <view class="for-box" @click="goInfo(item2)" v-for="(item2,index2) in item.taskVOList" :key="index2">
		        	<view class="for-title-box">
		        		<view class="viewColor1">供气</view>
						<view><text v-for="(item3,index3) in item2.detailListVO" :key="index3" v-if="index3<2">{{item3.airName}}-{{item3.configName}}*{{item3.bottleNumber}}<text>{{index3<1?' ':'...'}}</text></text></view>

					</view>
		        	<view class="for-address-box">
		        		<img src="@/images/basicsModules/icon_wtzg_sj.png">
		        		<view>{{item2.createTime}}</view>
		        	</view>
		        	<view class="for-time-box">
						<img src="@/images/basicsModules/icon_wtzg_xx.png">

		        		<view>{{item2.campus}}-{{item2.building}}-{{item2.room}}</view>
		        	</view>
		        </view>
				<!-- 回收 -->
				<view class="for-box" @click="goInfo(item4)" v-for="(item4,index4) in item.bottleStorageOutVOList" :key="index4">
					<view class="for-title-box">
						<view class="viewColor3">回收</view>
						<view><text v-for="(item5,index5) in item4.detailListVO" :key="index5" v-if="index5<2">{{item5.airName}}-{{item5.configName}}<text>{{index5<1?' ':'...'}}</text></text></view>

					</view>
					<view class="for-address-box">
						<img src="@/images/basicsModules/icon_wtzg_sj.png">
						<view>{{item4.createTime}}</view>
					</view>
					<view class="for-time-box">
						<img src="@/images/basicsModules/icon_wtzg_xx.png">

						<view>{{item4.campus}}-{{item4.building}}-{{item4.room}}</view>
					</view>
				</view>
				<!-- 问题 -->
				<view class="for-box" @click="goInfo(item6)" v-for="(item6,index6) in item.bottleStorageVOList" :key="index6">
					<view class="for-title-box">
						<view class="viewColor2">问题</view>
						<view><text v-for="(item7,index7) in item6.detailListVO" :key="index7" v-if="index7<2">{{item7.airName}}-{{item7.configName}}<text>{{index7<1?' ':'...'}}</text></text></view>

					</view>
					<view class="for-address-box">
						<img src="@/images/basicsModules/icon_wtzg_sj.png">
						<view>{{item6.createTime}}</view>
					</view>
					<view class="for-time-box">
						<img src="@/images/basicsModules/icon_wtzg_xx.png">

						<view>{{item6.campus}}-{{item6.building}}-{{item6.room}}</view>
					</view>
				</view>
		    </view>
			<view class="get-null-box" v-if="noData">暂无更多数据</view>
		</scroll-view>
	</view>
</template>

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

        name: "gasRecycle",
        data() {
            return {
				//列表请求参数
				getData:{
				    pageNum:1,
					pageSize:20,
					remarkStatus:0,//0 未处理, 1 已处理
				},
				userType:uni.getStorageSync('userType'),
				curTab:0,
				tabText:['待处理','已处理',],
                dataList:[],
				noData:false,
            }
        },
        onLoad() {
        },
        onShow() {

        },
		mounted(){
			this.getList()
		},
        methods: {
			//顶部tab点击
			tabClick(index) {
				this.curTab = index;
				this.getData.pageNum=1;
				this.getData.remarkStatus=index;
				this.dataList=[];
				this.getList();
			},
			goInfo(d){
				if(d.remark=='gq'){
					uni.redirectTo({
					    url:'/pages_supplier/gasRecycle/gasRecycleAirDetail?item='+encodeURIComponent(JSON.stringify(d))+'&status='+this.curTab
					});
				}else if(d.remark=='hs'){
					uni.redirectTo({
					    url:'/pages_supplier/gasRecycle/gasRecycleRecycleDetail?item='+encodeURIComponent(JSON.stringify(d))+'&status='+this.curTab
					});
				}else if(d.remark=='wt'){
					uni.redirectTo({
					    url:'/pages_supplier/gasRecycle/gasRecycleIssueDetail?item='+encodeURIComponent(JSON.stringify(d))+'&status='+this.curTab
					});
				}

			},
			//滚动加载事件
			scrollGet(){
			   this.getData.pageNum += 1;
			   this.getList();
			},
			//获取列表数据
			async getList(){
				let _this = this;
				const {data} = await gasRecycleList(_this.getData);
				if(data.code==200){
					let _this = this;
					let res=data.rows
					if(res && res.length>0){
						if(_this.getData.pageNum==1){
							_this.dataList=res;
						}else{
							_this.dataList=_this.dataList.concat(res);
						}
					}else{
						_this.noData=true;
					}

				}
			},

        }
    }
</script>

<style lang="stylus" scoped>
    #gasRecycle {
        height: 100%;
        width: 100%;
		flex :1;
        display flex;
        flex-direction column
        overflow hidden
		.tabTitle{
			display flex;
			width:100%;
			height: 100rpx;
			background: #fff;
			margin-bottom 16rpx;

			.tabTitle_li{
				width:146rpx;
				text-align center;
				margin-top: 16rpx;
				.tabTitle_text{
					display: inline-block;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 64rpx;
					&.on{
						color:#0183FA;
					}
				}
				.tabTitle_across{
					width: 50rpx;
					height: 6rpx;
					background: #0183FA;
					border-radius: 3rpx;
					margin-left 50rpx;
					display none;
					&.on{
						display block;
					}
				}

			}


		}
     .scroll-box{
        // flex:1;
         overflow-y scroll;

         .for-big-box:last-child{
             margin-bottom:180rpx;
         }
         .for-big-box{
             margin:0 20rpx 20rpx;
             overflow hidden
             border-bottom-left-radius :20rpx;
             border-bottom-right-radius :20rpx;
             .for-time-p{
                 background #fff
                 line-height:87rpx;
                 font-size:30rpx;
                 padding:0 22rpx;
                 border-top-left-radius:20rpx;
                 border-top-right-radius:20rpx;
             }
             .for-back-img{
                 height:30rpx;
                 width:710rpx;
             }
             .for-list-box:nth-child(3){
                 .min-for-title-box{
                     border:none;
                 }
             }

            	.for-box{
            		overflow hidden;
					background: #fff;
            		.for-title-box{
            			display:flex;
            			margin:0 26rpx 0;
            			border-top:1rpx solid #dedede;
            			padding-top:45rpx;
            			view:nth-child(1){
            				width:98rpx;
            				line-height:38rpx;
            				height:38rpx;
            				border-radius:6rpx;
            				font-size:20rpx;
            				text-align center;
            				margin-right:10rpx;
            			}
            			view:nth-child(2){
            				flex:1;
            				font-size:30rpx;
            				color:#333;
            				height:36rpx;
            				lin-height:36rpx;
            				margin-right:10rpx;
            				display:block;
            				overflow:hidden;
            				text-overflow:ellipsis;
            				white-space:nowrap;
            			}
            			view:nth-child(3){
            				font-size:30rpx;
            				color:#333;
            				height:36rpx;
            				lin-height:36rpx;
            				color:#D80000;
            			}
            			.viewColor1{
            			    background #ffe6e6;
            			    color:#ff5555;
            			}
            			.viewColor2{
            			    background #fef2dd;
            			    color:#f6a71d;
            			}
            			.viewColor3{
            			    background #e0f1e2;
            			    color:#30a23d;
            			}
            			.viewColor4{
            			    background #f2dddd;
            			    color:#a51919;
            			}
            			.viewColor5{
            			    background #e2f6f8;
            			    color:#3ac3d3;
            			}
            			.viewColor6{
            			    background #d9edfe;
            			    color:#0183fa;
            			}
            		}
            		.for-address-box{
            			display:flex;
            			margin:33rpx 26rpx 0;
            			img{
            				width:28rpx;
            				height:28rpx;
            				margin-right:20rpx;
            			}
            			view{
            				font-size:28rpx;
            				line-height:28rpx;
            				color:#666;
            			}
            		}
            		.for-time-box{
            			display:flex;
            			margin:26rpx 26rpx 0;
            			padding-bottom:32rpx;
            			img{
            				width:28rpx;
            				height:28rpx;
            				margin-right:20rpx;
            			}
            			view{
            				font-size:28rpx;
            				line-height:28rpx;
            				color:#666;
            			}
            		}
            	}
		 }
		 /*暂无数据*/
		 .get-null-box{
		     height:100rpx;
		     line-height:100rpx;
		     color:#999;
		     text-align center
		 }
     }
	}
</style>