【微信小程序】Get接口示例

页面样式示例：表格获取数据并填入

api：/app/attendance/sign/list?deptId=266&queryDate=2022-05-22&pageSize=10&pageNum=1

H5

<template>
	<view class="app-container">
		<!-- 选择框 -->
		<view class="container">
			<view class="project-screen">
				<view class="dept-screen">
					<uni-combox :candidates="deptList" placeholder="科室"></uni-combox>
				</view>
				<view class="status-screen">
					<uni-combox :candidates="status" placeholder="状态"></uni-combox>
				</view>
			</view>
			<view class="dept-screen">
				<view class="example-body">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
				</view>
			</view>
		</view>

		<!-- 表格 -->
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr class="tableTop">
					<uni-th width="10" align="center">学生</uni-th>
					<uni-th width="10" align="center">状态</uni-th>
					<uni-th width="20" align="center">签到时间</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in attendanceInfo" :key="index">
					<uni-td align="center">{{item.studentName}}</uni-td>
					<uni-td align="center">{{item.status}}</uni-td>
					<uni-td align="center">{{item.signInTime}}</uni-td>
				</uni-tr>
			</uni-table>
			<!-- 分页 -->
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" />
			</view>
		</view>
	</view>
</template>

C3

<style>
	.container {
		padding: 30rpx 10rpx;
	}

	::v-deep .uni-stat__select {
		padding: 0;
	}

	.tableTop {
		background-color: #ecf5ff;
	}

	.uni-container {
		padding: 0rpx 30rpx;
	}

	.project-screen {
		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		border-bottom: #e7e6e4 solid 2rpx;
		margin-bottom: 26rpx;
	}

	.uni-combox {
		border: none;
	}

	.uni-combox__input-plac {
		color: #000000;
	}

	.project-list {
		padding: 0 20rpx;
	}

	.list-item {
		padding: 20rpx;
	}

	.item-time {
		line-height: 60rpx;
		height: 60rpx;
	}

	::v-deep .u-cell__body {
		display: flex;
		padding: 0;
		background-color: #ffffff;
		height: 120rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 20rpx;
	}

	::v-deep .u-cell__label {
		font-size: 20rpx;
		color: #aebcc4;
	}
</style>

JS

<script>
	import config from '../../config';
	export default {
		data() {
			return {
				deptList: ['消化内科', '呼吸内科', '神经内科', '普通外科', '胸外科', '骨科'],
				status: ['已结束', '未结束'],
				//日期选择
				single: '',
				//表格信息
				attendanceInfo: [],
				// 数据总量
				total: 0,
				// 当前页
				pageCurrent: 1,
				// 每页数据量
				pageSize: 10,
				//遮罩层
				loading: false,
			}
		},
		created() {
		//如果父级页面有id，下面的页面只要接收即可
			this.appRole = uni.getStorageSync('appRole');
		},
		onShow() {
		//根据接口提供的参数去找数据
			uni.setStorageSync('appRole', 'teacher')
			uni.setStorageSync('deptId', '266')
			uni.setStorageSync('queryDate', '2022-05-22')
			uni.setStorageSync('pageSize', '1')
			uni.setStorageSync('pageNum', '10')
		},
		onLoad(option) {
			// 获取签到记录列表
			this.getRecordList();
		},
		methods: {
			/** 获取签到记录列表 */
			getRecordList() {
				let that = this;
				//取值
				that.deptId = uni.getStorageSync('deptId');
				that.queryDate = uni.getStorageSync('queryDate');
				that.pageSize = uni.getStorageSync('pageSize');
				that.pageNum = uni.getStorageSync('pageNum');
				//定义一个对象，将取到的值传给param
				let param = {};
				param.deptId = that.deptId;
				param.queryDate = that.queryDate;
				param.pageSize = that.pageSize;
				param.pageNum = that.pageNum;
				console.log(param);
				//请求接口
				uni.request({
					url: config.baseUrl + '/app/attendance/sign/list',
					method: 'GET',
					data: param,
					success(res) {
						if (res.data.code === 200) {
							that.attendanceInfo = res.data.rows;
						}
					}
				});
			},
		}
	}
</script>