jp-railway/pages/oawork/approve/list.vue

<template>
	<view>
		<u-navbar title="公文审批">
			
		</u-navbar>
		
		<u-tabs :list="tabslist" :is-scroll="false" :current="current" @change="change"></u-tabs>
		
		<view class="list1">
			<view class="item" v-for="(item,i) in list" @click="ckInfo(item.id)" :key="i">
				 
				<view class="group">
					<view  class="group1">
						<view class="name">
							公文类型：
						</view>
						<view class="value">
							{{item.name}}
							
						</view>
					</view>
					<view  class="group2">
						<view class="title">
							<span :style="{color:recordStatusColor(item.status)}">{{item.statusN}}</span>
							
						</view>
					</view>
				</view>
				<view class="group">
					<view  class="group1">
						<view class="name">
							提交时间：
						</view>
						<view class="value">
							{{item.time}}
						</view>
					</view>
				</view>
		
			</view>
			<u-divider  v-if="formData.recordsTotal==list.length"
			 :isnone="formData.recordsTotal==0" nonetext="没有找到相关内容" 
			border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		
		
	<!-- 	<view class="bottom">
			<u-button type="primary"  @click="addInfo">公文提报</u-button>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oatype:"",
				formData:{
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 0,
				},
				tabslist:[{
					name:"未处理",
				},{
					name:"已处理"
				},],
					current:0,
				list: [
					{
						name:"abcd",
						time:"2021-03-12 14:00:00",
						status:"1",
						statusN:"待审批"
					},
					{
						name:"abcd",
						time:"2021-03-12 14:00:00",
						status:"1",
						statusN:"待审批"
					}
				],
			}
		},
		onLoad(op){
			this.oatype=op.oatype;
		},
		onReachBottom() {
			
			if (this.list.length < this.formData.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			change(index) {
							this.current = index;
						},
			recordStatusColor(val){
				var retu = ""
				val=val+''
				switch (val) {
					case '-1':
						retu = '#f29a38'
						break;
					case '0':
						retu = '#f29a38'
						break;
					case '1':
						retu = '#52b56b'
						break;
					case '2':
						retu = '#c94031'
						break;
					case '3':
						retu = '#3a3bc2'
						break;
					case '5':
						retu = '#c94031'
						break;
					case '6':
						retu = '#c94031'
					case '9':
						retu = '#c94031'
						break;
					default:
						retu = '#52b56b'
						break;
				}
			
				return retu
			},
			getList(){
				
			},
			addInfo(){
				uni.navigateTo({
					url:"/pages/oawork/business/add?oatype="+this.oatype
				})
			},
			myLoadmore() {
				this.formData.pageIndex += 1;
				this.getList();
			},
		}
	}
</script>

<style  lang="scss" scoped>

page {
		padding-bottom: 100rpx;
		
	}

	.head {
		background: linear-gradient(180deg, rgba(190, 211, 240, 1) 0%, rgba(244, 244, 246, 1) 100%) !important;

		/deep/.u-navbar {
			//background: 0!important;
			background: linear-gradient(180deg, rgba(190, 211, 240, 1) 0%, rgba(244, 244, 246, 1) 100%) !important;
			height: 210rpx;
			//padding: 0 32rpx;
		}

		/deep/.u-border-bottom:after {
			height: 0;
		}

		.tabs {
			padding: 0 32rpx
		}
	}

	.tabs {
		display: flex;flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		/deep/.u-tabs {
			background: 0 !important;
			width: 250rpx;
		}

		/deep/.u-tab-bar {
			background-color: #2A8EFB !important;
		}

		.screen {
			color: #415058;
			position: relative;
			font-family: Microsoft Yahei;

			/deep/.uicon-arrow-down {
				margin-left: 4rpx;
			}
		}

		.options {
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #fff;
			color: rgba(65, 80, 88, 1);
			font-family: Microsoft Yahei;
			position: absolute;
			top: 160rpx;
			right: 24rpx;
			box-shadow: 5px 5px 10px gray;
		}

	}


	.list1,
	.list2 {
		
		margin:12px;
		padding-bottom: 60px;
		.item {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx;
			margin-bottom: 24rpx;

			

			.group {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				color: rgba(119, 119, 119, 1);
			//	margin-top: 16rpx;
				font-weight: bold;
				.name{
					color:#777777;
				}
				.value{
					color:#333333;
				}
				.group1{
					display: flex;flex-wrap: wrap;
				}
				.group2{
					
				}
			}
		}

	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		//background-color: #fff;
		padding: 16rpx 32rpx;

		uni-button {
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 8px;
			background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(16, 98, 213, 1) 100%);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			font-family: Microsoft Yahei;
		}
	}
</style>