yxk_h5_master/pages/wms/outsourcingStockOut/index.vue

<template>
	<view class="content">
		
		<view v-for="(item,index) in listCards" :key="index" class="example-box" style="position: relative;flex: 1;" @click="toDetail(index,item)">
			<dev-block :title="item.title" :titleHtml='item.titleHtml' :note="item.note" :extra="item.extra" :tagType="item.tagType"
			 :contentList="item.contentList" ></dev-block>
			<uni-icons type="scan" size="25" color='#5c91e4' class='scan_icon'></uni-icons>
		</view>
		<uni-load-more  :status="loading_status" ></uni-load-more>
		<view class="goHome" @click='goMain()'>
			<img src="@/static/img/gohome.png">
		</view>
	</view>
</template>

<script>
	import devBlock from '@/components/xinsoft-dev-block/xinsoft-dev-block.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			devBlock,
			uniIcons,
			uniLoadMore
		},
		data() {
			return {
				listCards: [],
				engineerId:'',
				status:'',
				singleStatus:56,
				pagenumber:1,//当前第几页
				pagesize:5,//每页加载数据条数
				
				loading_status: 'more',//more（loading前）、loading（loading中）、noMore（没有更多了）
			}
		},
		onShow(){
			// var _this=this;
			// this.$eventHub.$on('changestate', function (data) {
				
			// 	var datajson=data;
			// 	if(datajson.id){
			// 		for(var i=0;i<_this.listCards.length;i++){
			// 			if(_this.listCards[i].id==datajson.id){
			// 				 var str=_this.listCards[i].title;
			// 				_this.listCards[i].title=str.split('-')[0]+"-"+datajson.state;
			// 			}
			// 		}
			// 	}
			// 	_this.$eventHub.$off('changestate');
			// });	
		},
		created() {
			var userInfo  = uni.getStorageSync('userInfo');
			this.getDateList();
			
		
		},
		//滚动到底部加载下一页
		onReachBottom(obj){
			if(this.loading_status=='noMore'){
				return false;
			}
			this.pagenumber++;
			this.getDateList();
		},
		//下拉刷新
		onPullDownRefresh(){
			this.listCards=[];
			this.pagenumber=1;
			this.loading_status="more";
			this.getDateList();
			  
		},
		methods: {
			//获取列表数据
			getDateList(){
				this.loading_status="loading";
				var filterRes = {
					auditSign:179,
					isPhone: 1
				};
				filterRes.pageno = this.pagenumber;
				filterRes.pagesize = this.pagesize;
				this.$http.request({
					url: '/apis/outsourcingContract/phoneList',
					params: filterRes,
				}).then(res => {
					uni.stopPullDownRefresh();
					if(!res.data.data){
					this.loading_status="noMore";
					}else if(res.data.data.datas.length<this.pagesize){
						this.loading_status="noMore";
					}else{
						this.loading_status="more";
					}
					
					if (res.data.code == 0) {
						this.listCards = this.listCards.concat(this.formaterData(res.data.data.datas));
						}
				}).catch(err => {
					this.loading_status="noMore";
				});
			},
			//设置状态颜色
			setTag(val) {
				if (val == 50) {
					return "106";
				} else if (val == 49) {
					return "108";
				} else {
					return "106";
				}
			},
		
			//列表数据格式化
			formaterData(data) {  
				var resData = [];
				data.forEach((vals, index) => {
					// var WorkOrderNo=vals.id?vals.recordWorkOrderNo:'';//巡检单号
					// var patrolName=vals.id?vals.patrolRecordName:'';//巡检名称
					var combineJSON = {
						id: vals.id,
						contractNo:vals.feedingNo,
						titleHtml: "委外合同号:<span style='color:#5c91e4'>"+vals.contractCode+"</span>" ,
						contentList: [{
								id: 1,
								isDouble: false,
								labelName: '供应商',
								labelContent: vals.supplierName
							},
							{
								id: 2,
								isDouble: false,
								labelName: '投料单号',
								labelContent: vals.feedingNo
							},
							{
								id: 3,
								isDouble: false,
								labelName: '产品代码',
								labelContent: vals.materialSerialNo
							},
							{
								id: 4,
								isDouble: false,
								labelName: '产品名称',
								labelContent: vals.materialName
							},{
								id: 5,
								isDouble: false,
								labelName: '规格型号',
								labelContent: vals.specification?vals.specification:''
							},
						
						],
					}	
					resData.push(combineJSON);
				});
				return resData;
			},
			//查看详情
			toDetail(index,item){
					uni.navigateTo({
						url: "add?contractNo="+encodeURIComponent(item.contractNo)+"&id="+encodeURIComponent(item.id)
					});
				
			},
		},
		//点击导航栏按钮
		onNavigationBarButtonTap(obj) {
				uni.navigateTo({
				    url: 'add'
				});
		},
		onBackPress(options) { //取消默认的返回事件.
			uni.switchTab({
				url: "../../main/main"
			});
			return true;
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
</style>
<style scoped>
	
	.content{
		position: relative;
	}
	.filter_container {
		position: fixed;
		width: 50%;
		top: var(--window-top);
		background-color: #fff;
		height: 40px;
		z-index: 2;
		padding-top: 7px;
		box-sizing: border-box;
	}


	>>>.dev-label{
		white-space: nowrap;
		min-width: auto;
	}
>>>.select-tab-fixed-top{
	right: 0;
	width: 50%;
	z-index: 2;
	top:var(--window-top);
	white-space: nowrap
}
>>>.popup-layer{
	position: fixed;
	top: var(--window-top);
	margin-top: 40px;
}
>>>.filter-content-detail{
/* 	position: relative;
	height: 90px;
	overflow: scroll; */
}
	.search_container {
		position: relative;
		padding-left: 30px;
		box-sizing: border-box;
		color: #bdbdbd;
		margin: auto;
		width: 80%;
		height: 26px;
		background-color: #F6F6F6;
		border-radius: 26px;
		font-size: 14px;
		line-height: 26px;
	}
.search_icon{
	position: absolute;
	left: 5px;
	top: 3px;
}
	.fliter_content {
		position: absolute;
		right: 15px;
		left: 85px;
		height: 100%;
		z-index: 2;
	}
	.arrowright{
		position: absolute;
		right: 30upx;
		bottom: 30upx;
		font-size: 40upx !important;
	}
	>>>.dev-block__content{
		padding-right: 36upx;
	}
	>>>.dev-block__header-title-text{
		overflow: auto;
		white-space: pre-wrap !important;
		
	}
	.scan_icon{
		position: absolute;
		right: 20px;
		top: 10px;
	}
</style>