Contract/src/views/Linkman.vue

<template>
	<section class="link-ctnr">
		<mytitle msg="联系人" flag="true"></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>
			<mt-tab-container v-model="selected">
				<mt-tab-container-item id="1">
					<ul v-if="Lists[0]">
						<li v-for="item in Lists[0].messList">
							<img :src="item.img">
							<span v-if="item.real">{{item.name}}</span>
							<span v-else :class="{active:!item.real}">未实名</span>
							<span v-if="item.real">已实名</span>
							<p>{{item.phone}}</p>
						</li>
					</ul>
				</mt-tab-container-item>
				<mt-tab-container-item id="2">
					<ul v-if="Lists[1]">
						<li v-for="item in Lists[1].messList">
							<img :src="item.img">
							<span v-if="item.real">{{item.name}}</span>
							<span v-else :class="{active:!item.real}">未实名</span>
							<span v-if="item.real">已认证</span>
							<p>{{item.phone}}</p>
						</li>
					</ul>
				</mt-tab-container-item>
			</mt-tab-container>
		</section>
		<tabbar></tabbar>
	</section>
</template>

<script type="text/javascript">
	import mytitle from "../components/Title.vue"
	import tabbar from "../components/Tabbar.vue"
	import axios from "axios"
	export default{
		data(){
			return {
				selected:"1",
				items:[
					{
						id:"1",
						name:"个人",
					},
					{
						id:"2",
						name:"企业",
					}
				],
				Lists:[]
			}
		},
		components:{
			mytitle,
			tabbar
		},
		mounted:function(){
			axios.get("/api/linkman",{params:{}}).then(res => {
				this.Lists = res.data.content;//res.data里的内容
			})
		}
	}
</script>

<style type="text/css">
	.link-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{
								background-color: #fff;
								margin-bottom: 0.266525rem;
								border-radius: 10px;
								padding: 0.21322rem 0.279851rem;
								text-align: left;
								font-size: 0px;
								position: relative;
								box-shadow: 0rem 0rem 0.36rem 0rem rgba(96, 192, 255, 0.35);
								img{
									width: 1.172708rem;
									height: 1.172708rem;
									vertical-align: middle;
									margin-right: 0.279851rem;
								}
								span{
									margin-right: 0.239872rem;
									&:nth-child(2){
										font-size: 0.426439rem;
										color: #1491e2;
										&.active{
											color: red;
										}
									}
									&:nth-child(3){
										font-size: 0.319829rem;
										color: #fff;
										background-color: #60c0ff;
										padding: 0.10661rem 0.21322rem;
										border-radius: 20px;
									}
								}
								p{
									font-size: 0.373134rem;
									position: absolute;
									left: 1.732409rem;
									bottom: 0.133262rem;
								}
							}
						}
					}
				}
			}
		}
	}
</style>