Contract/src/views/Contract.vue

<template>
	<section class="con-ctnr">
		<mytitle msg="合同管理" flag=""></mytitle>
		<section class="ctnr-box">
			<mt-navbar v-model="selected">
				<mt-tab-item v-for="item in items" :key="item.id" :id="item.id">
					<p>{{ item.name }}</p>
				</mt-tab-item>
			</mt-navbar>
			<!-- tab-container -->
				<mt-tab-container v-model="selected">
					<mt-tab-container-item id="1">
						<ul v-for="item in Lists" :key="item.id" v-if="Lists">
							<li v-for="msg in item.list">
								<span>{{item.type}}</span>
								{{msg.id}}
								<p>{{msg.name}}</p>
								{{msg.time}}
								<img v-show="!msg.show" src="../assets/img/下拉.png" @click="msg.show = true">
								<img v-show="msg.show" src="../assets/img/收回.png" @click="msg.show = false">
								<div v-for="step in msg.flow" v-show="msg.show">
									<span>{{step.state}}</span>
									{{msg.id}}
									<p>{{msg.name}}</p>
									{{step.time}}
									</div>
							</li>
						</ul>
					</mt-tab-container-item>
					<mt-tab-container-item id="2">
						<ul v-if="Lists[0]">
							<li v-for="msg in Lists[0].list">
								<span>{{Lists[0].type}}</span>
								{{msg.id}}
								<p>{{msg.name}}</p>
								{{msg.time}}
								<img v-show="!msg.show" src="../assets/img/下拉.png" @click="msg.show = true">
								<img v-show="msg.show" src="../assets/img/收回.png" @click="msg.show = false">
								<div v-for="step in msg.flow" v-show="msg.show">
									<span>{{step.state}}</span>
									{{msg.id}}
									<p>{{msg.name}}</p>
									{{step.time}}
									</div>
							</li>
						</ul>
					</mt-tab-container-item>
					<mt-tab-container-item id="3">
						<ul v-if="Lists[1]">
							<li v-for="msg in Lists[1].list">
								<span>{{Lists[1].type}}</span>
								{{msg.id}}
								<p>{{msg.name}}</p>
								{{msg.time}}
								<img v-show="!msg.show" src="../assets/img/下拉.png" @click="msg.show = true">
								<img v-show="msg.show" src="../assets/img/收回.png" @click="msg.show = false">
								<div v-for="step in msg.flow" v-show="msg.show">
									<span>{{step.state}}</span>
									{{msg.id}}
									<p>{{msg.name}}</p>
									{{step.time}}
									</div>
							</li>
						</ul>
					</mt-tab-container-item>
					<mt-tab-container-item id="4">
						<ul v-if="Lists[2]">
							<li v-for="msg in Lists[2].list">
								<span>{{Lists[2].type}}</span>
								{{msg.id}}
								<p>{{msg.name}}</p>
								{{msg.time}}
								<img v-show="!msg.show" src="../assets/img/下拉.png" @click="msg.show = true">
								<img v-show="msg.show" src="../assets/img/收回.png" @click="msg.show = false">
								<div v-for="step in msg.flow" v-show="msg.show">
									<span>{{step.state}}</span>
									{{msg.id}}
									<p>{{msg.name}}</p>
									{{step.time}}
									</div>
							</li>
						</ul>
					</mt-tab-container-item>
					<mt-tab-container-item id="5">
						<ul v-if="Lists[3]">
							<li v-for="msg in Lists[3].list">
								<span>{{Lists[3].type}}</span>
								{{msg.id}}
								<p>{{msg.name}}</p>
								{{msg.time}}
								<img v-show="!msg.show" src="../assets/img/下拉.png" @click="msg.show = true">
								<img v-show="msg.show" src="../assets/img/收回.png" @click="msg.show = false">
								<div v-for="step in msg.flow" v-show="msg.show">
									<span>{{step.state}}</span>
									{{msg.id}}
									<p>{{msg.name}}</p>
									{{step.time}}
									</div>
							</li>
						</ul>
					</mt-tab-container-item>
					<mt-tab-container-item id="6">
						<ul v-if="Lists[4]">
							<li v-for="msg in Lists[4].list">
								<span>{{Lists[4].type}}</span>
								{{msg.id}}
								<p>{{msg.name}}</p>
								{{msg.time}}
								<img v-show="!msg.show" src="../assets/img/下拉.png" @click="msg.show = true">
								<img v-show="msg.show" src="../assets/img/收回.png" @click="msg.show = false">
								<div v-for="step in msg.flow" v-show="msg.show">
									<span>{{step.state}}</span>
									{{msg.id}}
									<p>{{msg.name}}</p>
									{{step.time}}
									</div>
							</li>
						</ul>
					</mt-tab-container-item>
				</mt-tab-container>
		</section>
		<tabbar></tabbar>
	</section>
</template>

<script type="text/javascript">
	import tabbar from '../components/Tabbar.vue'
	import mytitle from '../components/Title.vue'
	import axios from 'axios';
	export default{
		data(){
			return {
				selected: "1",
				items:[
					{
						id: "1",
						name: "全部"
					},
					{
						id: "2",
						name: "待签署"
					},
					{
						id: "3",
						name: "已签署"
					},
					{
						id: "4",
						name: "待修改"
					},
					{
						id: "5",
						name: "已生效"
					},
					{
						id: "6",
						name: "已失效"
					}
				],
				Lists:[],
			}
		},
		components:{
			tabbar,
			mytitle
		},
		mounted: function(){
			axios.get("/api/contract",{params:{}}).then(res => {
	      this.Lists = res.data.content;//res.data里的内容
	    });
		}
	}
</script>
<style>
	.con-ctnr{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #60c0ff;
		.ctnr-box{
			.mint-navbar{
				.mint-tab-item{
					&.is-selected{
						.mint-tab-item-icon:empty{
							display:block;
						}
					}
				}
			}
			.mint-tab-container{
				.mint-tab-container-wrap{
					.mint-tab-container-item{
						ul{
							li{
								font-size: 24px;
								background-color: #fff;
								margin-bottom: 0.266525rem;
								border-radius: 10px;
								text-align: left;
								padding: 0.373134rem 0.319829rem 0.226546rem 0.279851rem;
								color: #808080;
								box-shadow: 0rem 0rem 0.36rem 0rem rgba(96, 192, 255, 0.35);
								span{
									float: right;
									color: red;
								}
								p{
									color: #1491e2;
									margin: 0.133262rem 0; 
								}
								img{
									width: 100%;
									display: block;
								}
								div{
									border-bottom: 1px solid #808080;
									padding-bottom: 0.266525rem;
									margin-bottom: 0.266525rem;
									&:last-child{
										border-bottom:0px;
										margin-bottom: 0px;
									}
									span{
										color:#666666;
									}
								}
							}
						}
					}
				}
			}
/*
			.mint-tab-container{
				height: calc(100% - 1.3rem);
				background-color: #E8EFF5;
				margin-top: 1.066098rem;
				overflow: visible;
				.mint-tab-container-wrap{
					height: 100%;
					width: 100%;
					position: absolute;
					top: -0.666311rem;
					overflow-y: scroll;
					.mint-tab-container-item{
						width: 9.2rem;
						height: 100%;
						margin: 0 auto;
						ul{
							li{
								font-size: 24px;
								background-color: #fff;
								margin-bottom: 0.266525rem;
								border-radius: 10px;
								text-align: left;
								padding: 0.373134rem 0.319829rem 0.226546rem 0.279851rem;
								color: #808080;
								span{
									float: right;
									color: red;
								}
								p{
									color: #1491e2;
									margin: 0.133262rem 0; 
								}
								img{
									width: 100%;
									display: block;
								}
								div{
									border-bottom: 1px solid #808080;
									padding-bottom: 0.266525rem;
									margin-bottom: 0.266525rem;
									&:last-child{
										border-bottom:0px;
										margin-bottom: 0px;
									}
									span{
										color:#666666;
									}
								}
							}
						}
					}
				}
			}*/
		}
	}
</style>