<template>
	<view class="home">
		<view class="header1">
			<view class="logo">
				<image src="@/static/logo.png"></image>
			</view>
			<view class="info">
				<view class="a">弹射者</view>
			</view>
		</view>
		<view class="body">
			<view class="a">
				<view class="item">赛事ID<input type="text" v-model="num" placeholder="请输入赛事id" /></view>
			</view>
			<view class="btn" @click="toEnter()">立即进入</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: "",
				saiName: ""
			}
		},
		onShow() {
			uni.removeStorageSync("saiName")
			uni.removeStorageSync("sid")
			uni.removeStorageSync("slist")
		},
		methods: {
			async getInfo() {
				const that = this;
				uni.request({
					url: "https://sports.njrenzhou.cn/api/matchsDetails",
					method: "post",
					data: {
						matchs_id: this.num
					},
					success(res) {
						if(res.data.code == 200){
							that.saiName = res.data.name
							uni.setStorageSync("saiName",res.data.data.name);
							uni.setStorageSync("sid", that.num)
							uni.navigateTo({
								url: "/pages/check/index?id="+that.num
							})
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			toEnter() {
				if(!this.num) {
					uni.showToast({
						title: "请输入赛事ID",
						icon: "none"
					})
					return ;
				}
				this.getInfo();
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	width: 100%;
	min-height: calc(100vh - 136px);
	background: url(@/static/bg3.png) center center no-repeat;
	background-size: cover;
	.btn{
		width: 420px;
		line-height: 60px;
		background-color: #2681ea;
		text-align: center;
		border-radius: 5px;
		margin: 0 auto;
		font-size: 20px;
		color: #fff;
		margin-top: 120px;
		cursor: pointer;
	}
	.a{
		padding-top: 200px;
		overflow: hidden;
		.item{
			width: 420px;
			line-height: 60px;
			background-color: #fff;
			text-align: center;
			border-radius: 5px;
			display: flex;
			margin: 0 auto;
			padding:  0 20px;
			box-sizing: border-box;
			font-size: 20px;
			color: #212121;
			input{
				flex: 1;
				height: 60px;
				text-align: left;
				margin-left: 20px;
				font-size: 20px;
			}
		}
		
	}
	
}
@media screen and (min-width: 1200px) and (max-width: 1359px) {
	.body{
		.a{
			padding-top: 190px;
			image{
				width: 100%;
			}
		}
	}
}
</style>
