dev/dcp-app-gate/pages/service/others/mySignup.vue

<template>
	<view style="width:100%;height: 100%">
		<uni-nav-bar status-bar=true fixed=true left-icon="arrowthinleft" background-color="#03b6b3" color="#ffffff"
			@clickRight="goHome"
			@clickLeft="navigateBack">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">{{$i18n.locale=='en'?'Application History':'我的报名'}}</text>
			<button slot="right" size="mini" style="height: 30px; border-radius: 15px; background-color: #1e9694; ">
				<uni-icons type="home-filled" size="22" color="#ffffff"></uni-icons>
			</button>
		</uni-nav-bar>
		<view class="state-filter-list" :style="{top: filterTop}">
			<view @click="stateFilter(i)" :class="{active: stateIndex == i}" v-for="(item, i) in stateFilterList" :key="i">
				<text>{{$i18n.locale=='en'?item.titleEn:item.title}}</text>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{'margin-top': scorollConTop}" style="position:relative;margin-top: 100upx;height: calc(100% - 100upx)">
			<myOfflineSignup v-if="stateIndex==0"></myOfflineSignup>
			<myOnlineSignup v-if="stateIndex==3"></myOnlineSignup>
			<other v-if="stateIndex==1"></other>
			<myActivityRegistration v-if="stateIndex==2" :fatherData="current"></myActivityRegistration>
		</scroll-view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	import myOfflineSignup from './myOfflineSignup.vue';
	import myOnlineSignup from './myOnlineSignup.vue';
	import myActivityRegistration from './myActivityRegistration.vue';
	import other from './other.vue';

	export default {
		components: {myOfflineSignup, myOnlineSignup, other, myActivityRegistration },
		data() {
			return {
				current:0,
				stateFilterList: [
					{title: '会议报名', titleEn: 'Events'},
					{title: '会展报名', titleEn: 'ExhibitionApply'},
					{title: '活动报名', titleEn: 'ActivityApply'},
					{title: '网络会议', titleEn: 'Online Meeting'}
				],
				stateIndex: 3,
				filterTop:  (statusBarHeight+44)+'px',
				scorollConTop: statusBarHeight+'px'
			}
		},
		onReachBottom() { //页面拉到底部加载
			this.current++
		},
		methods: {
			goHome(){
				this.$mRouter.reLaunch({ route: '/pages/index/index' });
			},
			navigateBack(){
				uni.navigateBack()
			},
			stateFilter(i){
				this.stateIndex = i;
				console.log(this.stateIndex)
				switch(i){
					case 0:
						this.condition = ""
					break;
					case 1:
						this.condition = 2
					break;
					case 2:
						this.condition = 0
					break;
					case 3:
						this.condition = 1
					break;
				};
				// this.getGuestsByCondition(this.condition);
			},
		}
	}
</script>

<style scoped>
uni-button:after{
	border: none;
}
.uni-icons{
    line-height: 30px;
}
.state-filter-list{
	width: 100%;
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
	text-align: center;
	background: #FFFFFF;
	color: #555555;
	position: fixed;
	left: 0;
	z-index: 9;
}
.state-filter-list .active{
	color: #3ac6c3;
}
.state-filter-list view{
	position: relative;
}
.state-filter-list view .uni-icons{
	display: block;
	padding-bottom: 4rpx;
	line-height: 1;
}
</style>