dev/dcp-app-gate/pages/workbench/workbench.vue

<template>
	<view class="">
		<!-- 顶部导航栏 -->
		<uni-nav-bar status-bar=true fixed=true left-icon="arrowleft" background-color="#1d5edb" color="#ffffff"
		@clickLeft="navigateBack"
		@clickRight="goHome">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">工作台</text>
			<button class="home-btn" slot="right" size="mini">
				<uni-icons type="home-filled" size="22" color="#ffffff"></uni-icons>
			</button>
		</uni-nav-bar>
		
		<!-- 会议选择 -->
		<scroll-view scroll-y="true" class="staff-list" :style="{top:showMeetinglist? '-100%': (systemInfo.statusBarHeight+44)+'px', height: (systemInfo.screenHeight-systemInfo.statusBarHeight-44)+'px'}">
			<!-- <view class="meeting-search">
				<mSearch :show="false" @search="search($event,0)" placeholder='' border="0px" style="color: #000000;"></mSearch>
			</view> -->
			<view @click="toGuestList(i)" class="staff-list-item" :class="{'staff-list-item-active': meetingIndex==i}" v-for="(item,i) in meetingList" :key="item.id">
				<view class="listTop">{{item.meetingName}}</view>
				<view class="listBottom">
					<view style="font-size: 20rpx;line-height: 60rpx;">{{item.meetingYear}}</view>
					<view style="text-align: right;line-height: 52rpx;">{{item.meetingPlace}}</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 头部标题部分 -->
		<view class="topbox">
			<view>
				<text>当前会议</text>
				<text class="exchange-btn"  @click="changeMeeting">切换</text>
			</view>
			<view class="meeting-title">{{currentMeeting.meetingName}}</view>
			<view style="text-align: center;">
				<text style="margin-right: 20px">{{moment(currentMeeting.meetingStartDate).format('YYYY-MM-DD')}}</text>
				<text :style="{color: meetingState(currentMeeting.meetingStartDate, currentMeeting.meetingEndDate).color}">
				{{meetingState(currentMeeting.meetingStartDate, currentMeeting.meetingEndDate).text}}
				</text>
			</view>
		</view>
		
		<!-- tab -->
		<view class="main-content" v-if="showMeetinglist">
			<view class="bodybox">
				<!-- tab栏 -->
				<view class="tabtop">
					<view class="active-box" :style="{left: sign*33.33+'%'}"></view>
					<view class="tabtop-list">
						<view class="tabtop-item" :style="{color: sign==index? '#1d5edb': '#0c1d3e'}" v-for="(item,index) in categoryList" :key="index" @click="select(index)">
							{{item.label}}
						</view>
					</view>
				</view>
				<!-- 主体部分 -->
				<view :style="{height: tabViewBox, 'padding-top': '20px', 'overflow-x': 'hidden'}">
					<view v-if="sign == 0">
						<statistic v-if="currentMeeting!={}" :meetingId="currentMeeting.id"></statistic>
					</view>
					<view v-if="sign == 1">
						<workProgress v-if="currentMeeting!={}" :meetingId="currentMeeting.id"></workProgress>
					</view>
					<view v-if="sign == 2">
						<work-scheme :meetingId="currentMeeting.id"></work-scheme>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
	import statistic from "./signinStatistic.vue";
	import workProgress from "./workProgress.vue";
	import workScheme from "./workscheme.vue";
	export default{
		components: {statistic, workScheme, workProgress},		
		data(){
			return{
				showMeetinglist: true,
				meetingIndex: 0,
				currentMeeting: {},
				conferenceData: [],
				meetingList: [],
				categoryList:[
					{"label":'签到统计',"value":"1"},
					{"label":'工作进展',"value":"2"},
					{"label":'会议方案',"value":"3"},
				],
				sign: 0,//决定哪一个显示的标记
			}
		},
		mounted() {
			this.getList();
		},
		computed: {
			tabViewBox(){
				return (this.systemInfo.windowHeight-this.systemInfo.statusBarHeight-44-263)+'px';
			}
		},
		methods:{
			// 判断会议状态
			meetingState(st, et){
			      var ct = Date.parse(new Date());
			      if(ct < st){
			        return {text: '即将召开', color: '#f59a23'};
			      }else if(ct<=et && ct>=st){
			        return {text: '正在进行', color: '#91ef69'};
			      }else{
					return {text: '已结束', color: '#ffffff'}; 
				  }
			},
			async getList(){
			    const res= await this.$myRequest({
					url: '/meeting/meetingBasicInfos/getList',
			    });
				// console.log(res)
			    this.meetingList = res.data.meetingBasicInfos;
				this.conferenceData = this.meetingList;
				this.currentMeeting = this.meetingList[0];
				console.log(this.currentMeeting)
			},
			changeMeeting(){
				this.showMeetinglist = !this.showMeetinglist;
			},
			toGuestList(i){
				this.meetingIndex = i;
				this.currentMeeting = this.meetingList[i];
				this.showMeetinglist = true;
				// uni.navigateTo({
				// 	url: 'guestList?id='+this.meetingList[i].id
				// })
			},
			navigateBack(){
				uni.navigateBack();
			},
			goHome(){
				this.$mRouter.reLaunch({ route: '/pages/index/index' });
			},
			select(index){
				this.sign = index
			},
			
		},
	}
</script>

<style>
	page{
		background-color: #4d87ff;
	}
	.home-btn{
		height: 30px; 
		border-radius: 15px; 
		background-color: #2f5baf;
	}
	.home-btn:active{
		opacity: 0.7;
	}
	.uni-icons{
	    line-height: 30px;
	}
	.topbox{
		padding: 30px;
		height: 190px;
		background-color: #4d87ff;
		margin-bottom: 30rpx;
		font-size: 15px;
		color: #FFFFFF;
	}
	.exchange-btn{
		color: #fdfdfd;
		margin-left: 10px;
		display: inline-block;
		background-color: #2772dc;
		width: 40px;
		height: 21px;
		text-align: center;
		border-radius: 12px;
	}
	.exchange-btn:active{
		opacity: 0.5;
	}
	.meeting-title{
		text-align: center;
		font-size: 48rpx;
		font-weight: bold;
		height: 100px;
		padding-top: 20px;
		overflow: hidden;
		text-overflow:ellipsis;
	}
	.main-content{
		padding: 0 40rpx;
	}
	.bodybox{
		background-color: #FFFFFF;
		border-radius: 15px;
		overflow: hidden;
	}
	.tabtop{
		width: 100%;
		height: 50px;
		background-color: #ecf3fe;
		position: relative;
		border-radius: 15px;
	}
	.tabtop-list{
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
	}
	.tabtop-list .tabtop-item {
		flex: 1;
		text-align: center;
		line-height: 100rpx;
		font-size: 34rpx;
		font-weight: 700;
	}
	.active-box{
		width: 33.33%;
		height: 100%;
		position: absolute;
		top: 0;
		transition: all 0.3s;
		background: #fff;
		border-radius: 15px;
	}
	
	.staff-list{
		background: #fff;
		width: 100%;
		position: absolute;
		left: 0;
		transition: all 0.4s;
		z-index: 99;
	}
	.staff-list-item{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 65px;
		border-top: 1px solid #ccc;
		padding: 0 15px;
	}
	.staff-list-item-active{
		background: #dee4e4
	}
	.staff-list-item view {
		width: 100%;
		height: 100%;
		flex: 1;
	}
	.listBottom{
		display: flex;
		justify-content: space-between;
	}
	.listTop{
		font-size: 30rpx;
		font-weight: bold;
		overflow: hidden;
		line-height:76rpx;
	}
</style>