weapp-online/pages/sign_manage/sign_manage.vue

<template>
	<view class="page_body">
		<view class="page_top">
			<view class="banner_container"><image :src="banner" mode="scaleToFill" class="banner_img" /></view>
			<view class="season">
				<view class="season_con">
					<view class="title">
						<image src="../../static/imgs/offline.png" mode="scaleToFill"></image>
						<text>第{{ userInfo.season ? userInfo.season : '' }}届大卫博士创业{{ userInfo.season_type | activityType }}</text>
					</view>
					<view class="con">
						<view class="course_info">
							<view style="margin-right:102rpx;">
								<text>名额限制：</text>
								<text>{{ userInfo.is_limit && userInfo.limit_num ? userInfo.limit_num : '无限制' }}</text>
								<text v-if="userInfo.is_limit && userInfo.limit_num">名</text>
							</view>
						</view>
						<view class="course_info">
							<view>
								<text>已报名：</text>
								<text class="count">
									<text>{{ userInfo.count }}</text>
									<text>人</text>
								</text>
							</view>
							<view style="margin-left: 30rpx;">
								<text>剩余名额：</text>
								<text class="count">
									<text>
										{{ userInfo.is_limit && userInfo.limit_num ? userInfo.limit_num - userInfo.count : '无限制' }}
									</text>
									<text>人</text>
								</text>
							</view>
						</view>
						<view class="course_time">
							<text>时间：</text>
							<text>{{ getTime(userInfo.time_start) }}</text>
							<text>-</text>
							<text>{{ getTime(userInfo.time_end) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page_center">
			<view :class="isFixedTop ? 'tab_fixed' : 'tab'">
				<view class="sign_tab">
					<view @click="choose(1)" :class="tab_type == 1 ? 'active' : ''">已报名（{{ userInfo.count }}）</view>
					<view @click="choose(2)" :class="tab_type == 2 ? 'active' : ''">详细数据</view>
				</view>
				<view class="sign_list_tab flexA" v-if="tab_type == 1">
					<view @click="sing_tap = 1" :class="sing_tap == 1 ? 'active' : ''">
						<picker @change="getSort" :value="sortVal" :range="sort">
							<view class="flexS">
								<text class="iconfont iconpaixu" style="font-size: 35rpx; margin-right: 5rpx;color: #666;"></text>
								<view class="picker">{{ sort[index] ? sort[index] : '排序' }}</view>
							</view>
						</picker>
					</view>
					<view @click="sing_tap = 2" :class="sing_tap == 2 ? 'active' : ''">
						<picker @change="getScreen" :value="screenVal" :range="screen">
							<view class="flexS">
								<image src="../../static/screen.png" style="width: 28rpx; height:27rpx;vertical-align: middle;"></image>
								<view class="picker">{{ screen[index] ? screen[index] : '筛选' }}</view>
							</view>
						</picker>
					</view>
					<view class="search flexS" @click="search">
						<text class="iconfont iconsousuo" style="font-size: 30rpx; margin-right: 5rpx;color: #666;"></text>
						<text>查找</text>
					</view>
				</view>
			</view>
			<view class="scroll" v-if="tab_type == 1">
				<scroll-view
					:scroll-y="isFixedTop ? true : false"
					@scrolltolower="more"
					:scroll-top="topNum"
					:style="{ height: isFixedTop ? height - tabH + 'px' : height + 'px' }"
				>
					<view class="scroll_con">
						<view class="sign_list flexB" v-for="item in signList" :key="item.id">
							<view class="list_left flexS">
								<image :src="item.avatar"></image>
								<view>
									<text>{{ item.nickname }}</text>
									<view>{{ item.created_at }}</view>
								</view>
							</view>
							<view class="list_right">报名成功</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="table_scroll" v-if="tab_type == 2">
				<scroll-view
					:scroll-y="isFixedTop ? true : false"
					@scrolltolower="more"
					:scroll-top="topNum"
					scroll-x="true"
					:style="{ height: isFixedTop ? height - signTabH + 'px' : height + 'px' }"
				>
					<view class="scroll_con">
						<view class="header">
							<view style="width:120rpx;">序号</view>
							<view style="width:350rpx;">微信昵称</view>
							<view>等级</view>
							<view style="width:220rpx;">手机号</view>
							<view style="width:350rpx;">报名时间</view>
							<view>签到状态</view>
							<view style="width:350rpx ;">签到时间</view>
							<view>签到人</view>
						</view>
						<view class="table_con" v-for="(item, index) in signList" :key="item.id">
							<view style="width:120rpx;">{{ index + 1 }}</view>
							<view style="width:350rpx;">{{ item.nickname }}</view>
							<view>{{ item.level }}</view>
							<view style="width:220rpx;">{{ item.phone }}</view>
							<view style="width:350rpx ;">{{ item.created_at }}</view>
							<view>{{ item.status == 1 ? '已签到' : '未签到' }}</view>
							<view style="width:350rpx ;">{{ item.sure_time }}</view>
							<view>{{ item.op_name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { toSign, poyStatus, enrollList } from '../../api/sign.js';
import { getBanner, getUserInfo } from '../../api/index.js';
export default {
	data() {
		return {
			banner: '', //banner图
			topNum: '', //返回顶部
			userInfo: {},
			payStatus: true, //支付按钮是否能点击
			tab_type: 1, //tab切换 【1：信息填写】 【2：课程介绍】 【3：报名须知】
			cost: '', //报名需要缴纳的金额
			sing_tap: 1, //子tab  【1：排序】【2：筛选】【3：查找】
			sort: ['正序', '倒序'], //排序选项
			screen: ['所有人', '今日新增'], //筛选选项
			isScroll: false, //scroll-view 竖向是否滚动
			scroll: '', //scroll-view 的高度
			signList: [], //报名列表
			params: {
				page_size: 15,
				page_index: 1,
				type: 'all', //筛选
				order: '', //拍序
				search_name: ''
			},
			sortVal: '', //排序选中的值
			screenVal: '', //筛选选中的值
			isFixedTop: false, //是否固定顶部
			height: '',
			tabScrollTop: '',
			scrollTop: '',
			tabH: '',
			signTabH: '',
			signListH: ''
		};
	},
	onLoad(options) {
		if (!uni.getStorageSync('token') || !uni.getStorageSync('userInfo')) {
			uni.switchTab({
				url: '../index/index'
			});
			return false;
		}
		if (options.banner) {
			this.banner = options.banner;
		} else {
			this.getBanner();
		}
	},
	onShow() {
		if (!uni.getStorageSync('token') || !uni.getStorageSync('userInfo')) {
			uni.switchTab({
				url: '../index/index'
			});
			return false;
		}
		this.userInfo = uni.getStorageSync('userInfo');
		this.getEnroll();
		uni.getSystemInfo({
			success: res => {
				this.height = res.windowHeight;
			}
		});
	},
	onReady() {
		let that = this;
		var query = uni.createSelectorQuery();
		query
			.select('.page_center')
			.boundingClientRect(res => {
				that.tabScrollTop = res.top;
			})
			.exec();
		query
			.select('.sign_tab')
			.boundingClientRect(res => {
				that.signTabH = res.height;
			})
			.exec();
		query
			.select('.sign_list_tab')
			.boundingClientRect(res => {
				that.signListH = res.height;
			})
			.exec();
		that.tabH = that.signTabH + that.signListH;
	},
	onPageScroll(e) {
		var scrollTop = e.scrollTop;
		const _H = this.tab_type === 2 ? this.signTabH : 0
		var isSatisfy = scrollTop + _H >= this.tabScrollTop ? true : false;
		//只有处于吸顶的临界值才会不相等
		if (this.isFixedTop === isSatisfy) {
			return false;
		}
		this.isFixedTop = isSatisfy;
	},

	methods: {
		//获取banner图及用户信息
		getBanner() {
			getBanner().then(res => {
				if (res.code == 200) {
					this.banner = res.data.banner_1;
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
			getUserInfo().then(res => {
				if (res.code == 200) {
					this.userInfo = res.data;
					uni.setStorageSync('userInfo', res.data);
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		choose(idx) {
			this.tab_type = idx;
			this.topNum = 1;
		},
		/* 获取已报名的列表
		 * @params page_size 显示条数
		 * @params page_index 当前显示的页数
		 * @params type  筛选  today【今日新增】 all【全部】
		 * @params order 排序  '' 【正序】 desc【倒序】
		 * @params search_name 搜索内容
		 */
		getEnroll(e, state) {
			this.params.page_index = 1;
			let { page_size, page_index, type, order, search_name } = this.params;
			enrollList({
				page_size,
				page_index,
				type,
				order,
				search_name
			}).then(res => {
				if (res.code == 200) {
					this.signList = res.data.list;
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		//下拉加载更多
		more() {
			this.params.page_index++;
			let { page_size, type, order, page_index, search_name } = this.params;
			enrollList({
				page_size,
				page_index,
				type,
				order,
				search_name
			}).then(res => {
				if (res.code == 200) {
					if (res.data.list.length > 0) {
						this.signList = this.signList.concat(res.data.list);
					} else {
						uni.showToast({
							title: '没有更多啦~',
							icon: 'none'
						});
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},

		// 查找
		search() {
			uni.navigateTo({
				url: '../search/search'
			});
		},
		//排序
		getSort(e) {
			this.sortVal = e.detail.value;
			if (this.sortVal == 1) {
				this.params.order = '';
			} else {
				this.params.order = 'desc';
			}
			this.getEnroll();
		},
		//筛选
		getScreen(e) {
			this.screenVal = e.target.value;
			if (this.screenVal == 0) {
				//所有
				this.params.type = 'all';
			} else {
				this.params.type = 'today';
			}
			this.getEnroll();
		},
		getTime(date) {
			if (date != NaN) {
				var time = new Date(Number(date) * 1000);
				var year = time.getFullYear();
				var month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
				var day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
				var nowDate = year + '年' + month + '月' + day + '日';
				return nowDate;
			}
		}
	}
};
</script>
<style>
page {
	height: 100%;
	min-height: 100%;
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.page_body {
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	.page_top {
		z-index: 9;
		.banner_container {
			width: 730rpx;
			height: 369rpx;
			margin: 0 auto;
			.banner_img {
				width: 100%;
				height: 100%;
			}
		}
		.season {
			width: 100%;
			box-sizing: box-sizing;
			.season_con {
				margin: 15rpx 30rpx 0;
				.title {
					display: flex;
					align-items: center;
					font-size: 36rpx;
					color: #333;
					font-weight: 500;
					image {
						height: 44rpx;
						width: 44rpx;
						font-size: 32rpx;
						color: #333;
						margin-right: 17rpx;
					}
				}
			}

			.course_info {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				&::before {
					content: '';
					display: block;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					margin-right: 14rpx;
					background-color: #ea4a41;
				}
				.count {
					font-weight: bold;
					font-size: 28rpx;
					color: #ea4a41;
				}
			}
			.course_info > view,
			.course_time {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #333;
				// &::before {
				// 	content: '';
				// 	display: block;
				// 	width: 10rpx;
				// 	height: 10rpx;
				// 	border-radius: 50%;
				// 	margin-right: 14rpx;
				// 	background-color: #ea4a41;
				// }
			}
			.course_time,
			.course_info {
				margin-top: 33rpx;
			}
		}
	}
	.page_center {
		.tab_fixed {
			position: sticky;
			top: 0rpx;
			left: 0;
			z-index: 99;
			width: 100%;
			background-color: #fff;
		}
		.tab,
		.tab_fixed {
			.sign_tab {
				width: 100%;
				height: 90rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-top: 1rpx solid #fafafa;
				border-bottom: 1rpx solid #fafafa;
				view {
					height: 85rpx;
					line-height: 85rpx;
					font-size: 32rpx;
					letter-spacing: 5rpx;
					font-weight: 500;
					color: #656565;
					&::after {
						content: '';
						display: block;
						width: 130rpx;
						height: 4rpx;
						border-radius: 2rpx;
						margin-left: 5rpx;
					}
				}
				.active {
					color: #ea4a41;
					&::after {
						background-color: #ea4a41;
					}
				}
			}
			.sign_list_tab {
				height: 88rpx;
				border-bottom: 1rpx solid #fafafa;
				font-size: 28rpx;
				color: #333;
				image {
					margin-right: 12rpx;
				}
			}
		}
		.scroll {
			.sign_list {
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #fafafa;
				height: 106rpx;
				.list_left {
					image {
						height: 88rpx;
						width: 88rpx;
						margin-right: 22rpx;
						border-radius: 50%;
					}
					view {
						text {
							font-size: 32rpx;
							color: #333;
						}
						view {
							color: #666;
							font-size: 28rpx;
							margin-top: 15rpx;
						}
					}
				}
				.list_right {
					font-size: 32rpx;
					color: #999;
				}
			}
			.more {
				text-align: center;
				height: 105rpx;
				line-height: 105rpx;
				font-size: 28rpx;
			}
		}
	}

	.table_scroll {
		.header {
			view {
				background-color: #f5f5f5;
			}
		}
		.table_con {
			view {
				background-color: #fff;
			}
		}
		.header,
		.table_con {
			white-space: nowrap;
			display: flex;
			view {
				width: 210rpx;
				height: 70rpx;
				flex-shrink: 0;
				border: 1rpx solid #e5e5e5;
				text-align: center;
				line-height: 70rpx;
				font-size: 28rpx;
				image {
					margin-left: 10rpx;
					vertical-align: middle;
				}
			}
		}
	}
	scroll-view {
		.scroll_con {
			padding-bottom: 118rpx;
		}
	}
}
</style>