uni-events-helper-wx/pages/event/event_grade.vue

<template>
	
	<view class="content flex_col flex_start">
		
		<view class="head flex_row flex_around">
			<view class="tap-btn" :class="[getTabClass(e)]" @click="clickHead(i)" v-for="(e,i) in headDate" :key="i">
				{{e.name}}
			</view>
		</view>
		
		<!-- item -->
		<view class="item flex_col flex_start_y bg-white  " v-for="i in 2">
			
			<view class="title flex_row flex_start">
				<view class="text-m text-left">消息中心</view>
				<!-- <view class="bandage"></view> -->
			</view>
			
			<view class="info flex_row flex_between">
				<view class="time">2020.06.22</view>
				<view class="type">半决赛</view>
			</view>
			
			<view class="card  flex_row flex_between">
				<view class="persion flex_row">
					<image class="bg-brown" src="../../static/images/event/event_lock.png" mode=""></image>
					<text>adjksk</text>
				</view>
				
				<view class="btn-box flex_row">
					<view class="btn state-0 flex_row">已打分</view>
					<view class="btn state-1 flex_row" @click="openGrade()">打分</view>
					<view class="btn state-2 flex_row" @click="openGradeMore()">数据</view>
				</view>
			</view>
		</view>
		
		<!-- 弹出交互 uview popup有bug,废弃重写-->
<!-- 		<u-popup :show="showGrade" @close="close" @open="open" mode="center" :closeOnClickOverlay="true" :closeable="true" :round="10">
			<view class="grade flex_col flex_start" >
				<text class="g-title">赛事打分</text>
				<text class="g-txt">李静分数录入</text>
				<input type="text" value="" placeholder="请录入分数" />
				<view class="g-tip">请输入成员该赛程最终得分，非累计</view>
				<view class="g-btn flex_row">保存</view>
			</view>
		</u-popup> -->
		
		<!-- 打分弹出 -->
		<view class="overlay flex_col" v-if="showGrade">
			<view class="grade flex_col flex_start" >
				<image class="g-close" src="../../static/images/event/event_close.png" mode="" @click="closeGrade()"></image>
				<text class="g-title">赛事打分</text>
				<text class="g-txt">李静分数录入</text>
				<input type="text" value="" placeholder="请录入分数" placeholder-class="place-style"/>
				<view class="g-tip">请输入成员该赛程最终得分，非累计</view>
				<view class="g-btn flex_row" @click="closeGrade()">保存</view>
			</view>
		</view>
		
		<!-- 赛事数据弹出 -->
		<view class="overlay flex_col" v-if="showGradeMore">
			<view class="grade grade-more flex_col flex_start" >
				<image class="g-close" src="../../static/images/event/event_close.png" mode="" @click="closeGradeMore()"></image>
				<text class="g-title">入围赛数据</text>
				<text class="g-txt">李静分数录入</text>
				<view class="g-input-box">
					<view class="b-item flex_row">
						<text>篮板</text>
						<input type="text" value="" placeholder="请录入数据" placeholder-class="place-style"/>
					</view>
					<view class="b-item flex_row">
						<text>助攻</text>
						<input type="text" value="" placeholder="请录入数据" placeholder-class="place-style"/>
					</view>
					<view class="b-item flex_row">
						<text>场次</text>
						<input type="text" value="" placeholder="请录入数据" placeholder-class="place-style"/>
					</view>
					
				</view>
				<view class="g-tip">请输入成员该赛程最终得分，非累计</view>
				<view class="g-btn flex_row" @click="closeGradeMore()">保存</view>
			</view>
		</view>
		
		<!-- <u-modal :show="showGrade" @confirm="open" ref="uModal" :asyncClose="true" @close="close" :closeOnClickOverlay="true">确认????</u-modal> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showGrade:false,
				showGradeMore:true,
				address:"",
				headIndex:0,
				headDate:[{name:'赛程打分'},{name:'赛事打分'}],
				login:true
			};
		},
		computed:{

		},
		onLoad(parms) {
			
		},
		onUnload() {
			
		},
		methods: {
			openGrade() {
			  this.showGrade = ! this.showGrade
			  console.log('open');
			},
			closeGrade() {
			  this.showGrade = false
			  console.log('close');
			},
			openGradeMore() {
			  this.showGradeMore = ! this.showGradeMore
			  console.log('open');
			},
			closeGradeMore() {
			  this.showGradeMore = false
			  console.log('close');
			},
			getTabClass(item){
				let {headDate,headIndex} = this
				return headDate[headIndex].name==item.name?'active':''
			},
			clickHead(index){
				this.headIndex = index
			},
			jumpPage(){
				this.$Router.push({name:"login"})
			},
		}
	}
</script>

<style lang="less" scoped>
.content{
	
	.head{
		width: 100%;
		height: 112rpx;
		background-color: white;
		.tap-btn{
			font-size: 36rpx;
			color: #333333;	
			font-weight: 700;
			width: 200rpx;
			height: 72rpx;
			text-align: center;
			line-height: 72rpx;
		}
		.active{
			color: white;
			background: #009874;
			border-radius: 36rpx;
		}
	}
	
	.item{
		color: #333333;
		position: relative;
		margin-top: 24rpx;
		// border-radius: 10rpx;
		width: 750rpx;
		// height: 124rpx;
		
		.title{
			font-size: 36rpx;
			color: #333333;	
			// margin-bottom: 10rpx;
			font-weight: 700;
			height: 116rpx;
			width: 100%;
			padding-left: 60rpx;
			border-bottom: 1rpx solid #f2f2f7;
		}
		.info{
			font-weight: 700;
			font-size: 32rpx;
			color: #333333;
			height: 96rpx;
			width: 100%;
			padding: 26rpx 24rpx 26rpx 60rpx;
			border-bottom: 1rpx solid #f2f2f7;
		}
		.card{
			height: 188rpx;
			width: 100%;
			padding: 40rpx 24rpx 40rpx 50rpx;
			border-bottom: 1rpx solid #f2f2f7;
			.persion{
				> image{
					width: 108rpx;
					height: 108rpx;
				}
				> text{
					font-size: 32rpx;
					color: #333333;
					margin-left: 24rpx;
				}
			}
			
			.btn-box{
				.btn{
					margin-left: 20rpx;
					width: 132rpx;
					height: 60rpx;
					background: #FF873D;
					border-radius: 6rpx;
					color: white;
				}
				.state-0{
					background-color: #36C990;
				}
				.state-1{
					background-color: #009874;
				}
				.state-2{
					background-color: #FF873D;
				}
			}
		}
		.bandage{
			width: 16rpx;
			height: 16rpx;
			// position: absolute;
			// right: 60rpx;
			background: #EA5061;
			border-radius: 50%;
			font-size: 24rpx;
			color: white;
			text-align: center;
			line-height: 34rpx;
			margin-top: -16rpx;
			margin-left: 10rpx;
		}
	}
}
.overlay{
	position: fixed;
	height: 100vh;
	width: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 90;
	.grade{
		z-index: 999;
		width: 620rpx;
		// height: 600rpx;
		background: #FFFFFF;
		padding: 50rpx;
		border-radius: 10rpx;
		.g-close{
			align-self: flex-end;
			width: 32rpx;
			height: 32rpx;
		}
		.g-title{
			margin-top: 20rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: 700;
		}
		.g-txt{
			margin: 58rpx auto 12rpx auto;
			font-size: 28rpx;
			color: #333333;
		}
		 input{
			width: 456rpx;
			height: 88rpx;
			background: #FFFFFF;
			border: 2rpx solid #D8D8D8;
			border-radius: 10rpx;
			padding: 20rpx;
		}
		.g-tip{
			align-self: flex-start;
			font-size: 24rpx;
			color: #9A9A9D;
			margin-top: 10rpx;
			margin-bottom: 52rpx;
			margin-left: 32rpx;
		}
		.g-btn{
			width: 240rpx;
			height: 88rpx;
			background: #009874;
			border-radius: 10rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 700;
			margin-bottom: 34rpx;
		}
	}
	.grade-more{
		padding-left:72rpx;
		padding-right: 80rpx;
		.g-input-box{
			.b-item{
				margin-top: 20rpx;
				> text{
					font-size: 28rpx;
					color: #9C9C9F;
					padding-right: 20rpx;
				}
				input {
					width: 384rpx;
				}
			}
		}
		.g-tip{
			margin-left: 12rpx;
		}
	}
	.place-style{
		font-size: 28rpx;
		color: #9A9A9D;
	}
}

</style>