yichael_zhongchuan_manager/components/manager/zc.vue

<template>
	<view class="m_right">
		<view class="m_right_hander">
			<button size="mini" class="m_btn_red">添加资产</button>
		</view>
		<view class="m_right_container">
			<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
				<thead class="m-table-hander">
					<tr>
						<th>用户名</th>
						<th>班级</th>
						<th>学号</th>
						<th>电话</th>
						<th>ilab账户</th>
						<th>注册时间</th>
						<th>分数</th>
						<th>修改信息</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(dataUser,dataUserI) in dataUsers_all" :key="dataUserI">
						<th style="color: #EA252C;">dataUser.Name</th>
						<th>dataUser.Id</th>
						<th>dataUser.Id</th>
						<th>dataUser.Id</th>
						<th>dataUser.Id</th>
						<th>dataUser.Id</th>
						<th>dataUser.Id</th>
						<th style="position: relative;"><button type="default" size="mini" class="m_edit">修改</button></th>
						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
					</tr>
					
				</tbody>
			</table>
		</view>
		<view class="m_right_footer">
			<view class="m_paging">
				<text class="m_paging_item m_paging_upper">上一页</text>
				<text class="m_paging_item" v-for="i in 8" @click="paging(i)" :class="i==index?'p_act':''">
					{{i}}
				</text>
				<text class="m_paging_item m_paging_lower">下一页</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "manager_zc",
		data() {
			return {
				pageTotalNum:1,
				currentPage:0,
				totalItem:2,
				dataUsers_all: []
			}
		},
		methods: {
			paging(i) {
				uni.showLoading({
				    title: '加载中'  
				});
				
				let fromIndex = this.totalItem*(i-1);
				let toIndex = fromIndex+this.totalItem;
				
				let data = {
					"UserID": mydata_userInfo.userID,
					"BeginNum": 0, //用户数组索引
					"EndNum": 15, //用户数组索引结束
					"ItemType":""//道具 角色 场景  空为全部
				}
				
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: mydata_api + '/item/getitemlist',
					method: 'POST',
					data: data,
					dataType: 'json',
					success: (res) => {
						//100成功
						if (res.data.Code == 100) {
							console.log("请求全部用户", res);
							this.dataUsers_all = res.data.Users;
							this.pageTotalNum = parseInt(res.data.AllNumOfList/this.totalItem);
						}
						//200失败
						else {
							console.log('suc200', res);
						}
						uni.hideLoading();
					},
					fail: (res) => {
						console.log("请求失败****");	
						uni.hideLoading();
					}
				});
			},
			initPage() {
				
				uni.showLoading({
				    title: '加载中'  
				});
				
				let data = {
					"UserID": mydata_userInfo.userID,
					"BeginNum": 0, //用户数组索引
					"EndNum": 15, //用户数组索引结束
					"ItemType":""//道具 角色 场景  空为全部
				}
				
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: mydata_api + '/item/getitemlist',
					method: 'POST',
					data: data,
					dataType: 'json',
					success: (res) => {
						//100成功
						if (res.data.Code == 100) {
							console.log("请求全部用户", res);
							this.dataUsers_all = res.data.Users;
							this.pageTotalNum = parseInt(res.data.AllNumOfList/this.totalItem);
							uni.hideLoading();
						}
						//200失败
						else {
							console.log('suc200', res);
							uni.hideLoading();
						}
					},
					fail: (res) => {
						console.log("请求失败****");	
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.m_right {
		width: 100%;
		margin-top: 5rpx;
		padding: 0 150rpx;
		background-color: #fff;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
	
		.m_right_hander {
			text-align: right;
			height: 250rpx;
			position: relative;
	
			.m_btn_red {
				position: absolute;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #EA252C;
				color: #fff;
			}
		}
	
	}
	tbody tr {
		border-top: 2rpx solid #DDDDDD !important;
	
	}
	
	tbody tr th {
		font-weight: 400 !important;
		height: 140rpx;
		line-height: 140rpx;
	}
	
	tbody tr:hover {
		// color: #fff;
		background: #FDEBEC;
		// opacity: 0.08;
	}
	
	.m-table-hander {
		background-color: #FFF8F7;
		height: 140rpx;
		line-height: 140rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
	}
	
	.m_edit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 130rpx;
	}
	
	.m_delete {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}
	
	.m_right_footer {
		margin-top: 80rpx;
	}
	
	.m_paging {
		text-align: right;
	
		.m_paging_item {
			padding: 10rpx 18rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}
	
		.p_act {
			background: #EA252C;
			color: #fff;
			border: inherit;
		}
	}
	
	.m_paging_item:hover {
		background: #EA252C;
		color: #fff;
		border: inherit;
	}
	
	.m_act1 {
		color: #FF0019;
	}
</style>