jiaoyuju_fawen/bureau-of-education/pages/centerView/toExamine/index.vue

<template>
	<view class="archive">
		<u-navbar ref="uNavbar" :border-bottom="false" :back-icon-color="setNav.backColor" :is-back="setNav.isdisPlayNavTitle" :title-size="setNav.size" :title-bold="setNav.bold" :title="setNav.navTitle" :title-color="setNav.color" :background="setNav"></u-navbar>
		<view class="topNav" :style="{top: topNav + 'px'}">
			<view class="item" @click="tabs(0)">
				<view :class="['text', active == 0 ? 'active' : '']">待我审核</view>
			</view>
			<view class="item"  @click="tabs(1)">
				<view :class="['text', active == 1 ? 'active' : '']">已审核</view>
			</view>
		</view>
		<view class="contentMain" v-if="list.length">
			<view 
				v-for="(item, index) in list" 
				:key="item.id" 
				@click="click(item)" 
				class="u-swipe-action"
					>
				<view class="item">
					<view class="title">{{item.businessData.message_title}}</view>
					<view class="userInfo">
						<view class="user">
							<view class="name">拟稿人：{{item.businessData.send_user_name}}</view>
							<view class="name">发文日期：{{item.businessData.message_time}}</view>
							<view class="name" v-if="active == 1">流程结束日期：{{item.businessData.finish_time != null ? item.businessData.finish_time : '未结束'}}</view>
						</view>
						<view class="status" :class="{active: item.businessData.status != '已通过'}" v-if="active == 1">{{item.businessData.status}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setNav:{
					backgroundColor:'#fff',  //背景色
					color:'#333',  //字体颜色
					bold: true,
					size: '36',
					backColor: '#333',
					isdisPlayNavTitle: true, //是否显示返回按钮
					navTitle:'审核' //导航标题
				},
				searchVal: '',
				topNav: 0,
				active: 0,
				list: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					{
						text: '归档',
						style: {
							backgroundColor: '#00B034'
						}
					}
				],
				userInfo: {}
			}
		},
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}');
			this.backlog()
			setTimeout(() => {
				this.topNav = (this.$refs.uNavbar.navbarHeight) + (this.$refs.uNavbar.statusBarHeight)
			}, 10)
		},
		onShow() {
			
		},
		methods:{
			async backlog () {
				let res = await this.$u.post(`jflow/p/cs/task/backlog/list`, {
					page: 1,
					pageSize: 10,
					searchType: '0,1',
					"userId": this.userInfo.id,
					excuStatus: 0
				})
				this.list = res.data.records
			},
			async history () {
				let res = await this.$u.post(`jflow/p/cs/task/history/list`, {
					page: 1,
					pageSize: 10,
					searchType: '0,1',
					"userId": this.userInfo.id,
					excuStatus: 2
				})
				console.log(res.data.records)
				res.data.records.forEach(item => {
					console.log(item.businessData.message_title)
				})
				this.list = res.data.records
			},
			tabs (active) {
				this.active = active
				this.list = []
				if (active == 0) {
					this.backlog()
				} else {
					this.history()
				}
			},
			click(item) {
				// 跳转到审核页面
				console.log(item)
				let url = '&instanceId=' + item.instanceId + '&nodeId=' + item.nodeId + '&id=' + item.id
				let active = this.active
				if (this.active == 1) {
					if (item.businessData.status != '已通过') {
						active = 2
					}
				}
				uni.navigateTo({
					url: '/pages/centerView/toExamine/auditDetails?active=' + active + '&businessCode=' + item.businessCode + url 
				})
				// if (this.active === 0) {
					
				// } else {
				// 	// 跳转到审核页面
				// }
			},
		}
	}
</script>
<style>
	page{
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.topNav{
	display: flex;
	align-items: center;
	background: #FFFFFF;
	height: 90rpx;
	box-shadow: 0px 14rpx 10rpx 0px rgba(218, 218, 218, 0.35);
	position: sticky;
	width: 100%;
	left: 0;
	z-index: 9;
	.item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		.text{
			font-size: 26rpx;
			color: #191919;
			font-weight: 600;
		}
		.active{
			position: relative;
			&::after{
				content: '';
				position: absolute;
				width: 28rpx;
				height: 6rpx;
				background: #009FE8;
				border-radius: 6rpx;
				bottom: -14rpx;
				left: 50%;
				transform: translate(-50%,0);
			}
		}
	}
}
.searchBox{
	padding: 30rpx;
	.inputBox{
		display: flex;
		align-items: center;
		.input{
			flex: 1;
			width: 100%;
			margin-right: 30rpx;
			background: #EDEDED;
			border-radius: 40rpx;
			padding: 0 30rpx !important;
		}
		.btn{
			background: #009FE8;
			color: #FFFFFF;
			font-size: 26rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			text-align: center;
			border-radius: 40rpx;
		}
	}
	
}
.timeBox{
	padding: 30rpx 0 20rpx 0;
	display: flex;
	align-items: center;
	.r{
		width: 30rpx;
		height: 33rpx;
	}
	.text{
		font-size: 26rpx;
		color: #343434;
		margin: 0 14rpx;
	}
	.d{
		width: 20rpx;
		height: 20rpx;
	}
}
.contentMain{
	background: #fff;
	.item{
		.title{
			font-size: 28rpx;
			font-weight: 700;
			color: #343434;
			padding: 30rpx 30rpx 0 30rpx;
			white-space: break-word;
			word-break:break-all;
		}
		.userInfo{
			display: flex;
			align-items: flex-end;
			border-bottom: solid 1rpx #DADADA;
			padding: 30rpx;
			.user{
				flex: 1;
				color: #666;
				font-size: 24rpx;
				.name{
					margin-bottom: 10rpx;
				}
			}
			.status{
				color: #54BA10;
				font-size: 26rpx;
				margin-bottom: 4rpx;
				&.active {
					color: #FF3131;
				}
			}
		}
	}
}
</style>