xiuli.gao
/
mcn_gw


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>合乐文化网红申请表</title>
	<link rel="stylesheet" href="./common/reset.css">
	<link rel="stylesheet" href="./common/elementUI.css">
	<script src="./common/jquery-2.1.0.js"></script>
	<script src="./common/vue.min.js"></script>
	<script src="./common/elementUI.js"></script>
	<style>
		body{
			width: 100%;
			min-height: 100vh;
			background: #f0f2f5;
		}
		.table{
			width: 100%;
			text-align: center;
			color: #333333;
		}
		.table tr{
			height: 40px;
			font-size: 14px;
			border-bottom: 1px solid #ebeef5;
		}
		.table tr:hover{
			background: #f5f7fa;
		}
		.table tr:nth-of-type(0):hover{
			background: #f7faff;
		}
		.content{
			width: 1200px;
			padding: 20px;
			background: #ffffff;
			margin: auto;
		}
		.hint{
			text-align: center;
			font-size: 18px;
			padding: 20px;
			color: #999;
		}
	</style>
</head>
<body>
	<div class="content" id="app" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
		<table class="table">
			<tr style="background: #f7faff;"><th>姓名</th><th>性别</th><th>所在地</th><th>手机号</th><th>申请时间</th></tr>
			<tr v-for="(item,index) in list" :key="index">
				<td>{{item.name}}</td>
				<td>{{item.sex}}</td>
				<td>{{item.city}}</td>
				<td>{{item.phone}}</td>
				<td>{{item.created_at}}</td>
			</tr>
		</table>
		<div class="hint" v-if="list.length == 0 && !loading">暂无数据</div>
		<div class="block" style="text-align: center;padding-top: 20px;">
			<el-pagination
				background
			  @current-change="handleCurrentChange"
			  :current-page.sync="page"
			  :page-size="pageSize"
			  layout="total, prev, pager, next"
			  :total="total">
			</el-pagination>
		  </div>
	</div>
	</body>
</html>
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			list:[],
			pageSize:20,// 每页大小
			total:0,
			page:1,
			loading:true
		},
		created(){
			this.getData(1)
		},
		methods:{
			getData (page) {
				this.page = page;
				this.loading = true;
				$.ajax({
					type:"get",
					url:'http://www.helemedia.cn/select',
					dataType:'json',
					data:{
						page:this.page,
						pagesize:this.pageSize
					},
					success: (res) => {
						this.loading = false;
						if(res.errno == 0) {
							this.list = res.rst.list
							this.total = res.rst.page.count;
						}else{
							this.$message({
								message: res.err,
								type:'warning'
							});
						}
					},
					error: function (){
						this.loading = false;
					}
				})
			},
			handleCurrentChange(val){
				this.getData(val)
			}
		}

	});
</script>