<template>
	<view class="container" style="width:100%;">
		<image src="../../static/beijing.png" class="background" mode=""></image>
		<view class="content" style="padding-top: 50%;">
			<view class="phone">
				<input type="text" placeholder="请输入手机号"
					style="color:white;border: 1px solid #f9e9b1;padding: 5px;width: 60%;margin: 0 auto;" maxlength="11"
					v-model="form.phone" />
			</view>
			<view style="">
				<input type="text" placeholder="请输入激活码"
					style="color:white;border: 1px solid #f9e9b1;padding:5px;width: 60%;margin: 0 auto;" maxlength="9"
					v-model="form.key" />
			</view>
			<view class="btnSubmit">
				<view class="btnContent"
					style="border:1px solid #f9e9b1;color:white;text-align: center;padding:5px;background-color:#f9e9b1;width:60%;margin: 0 auto;"
					@click="Submit">
					提交
				</view>
			</view>
		</view>
		<view class="popup" style="width: 720rpx;">
			<uni-popup ref="popup" type="center">
				<view class="content-pop"
					style="background-color:white;width:350px;height:180px;border-radius: 20px;">
					<view class="logo" style="position: relative;top: -20px;text-align: center;">
						<image src="../../static/VipLogo.png" style="width:60px;height: 60px;"></image>
					</view>
					<view style="text-align: center;line-height: 50px;font-size: 18px;font-weight: 600;">VIP特权卡激活成功
					</view>
					<view class="btnData" style="display: flex;text-align: center;margin-top: 20px;">

						<view style="margin: 0 auto;">
							<view	style="border: 1px solid gray; padding:5px 40px 5px 40px;border-radius: 10px;color:black;font-size: 14px;" @click="Close">
								关闭</view>
						</view>
						<view style="margin: 0 auto;">
							<view style="background-color: #3C8EFE;padding:6px 20px 6px 20px;border-radius: 10px;color: white;font-size: 14px;" @click="RedirectDetail">
								查看详情</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import Vue from '../../App.vue'
	export default {
		data() {
			return {
				form: {
					phone: '',
					key: ''
				}
			}
		},
		onLoad() {

		},
		methods: {
			// 跳转至详情页面
			RedirectDetail(){
				uni.navigateTo({
					url:'../detail/detail'
				})
			},
			
			Submit() {
				let phonecontent = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				let keycontent = /^[\u4E00-\u9FA5\uF900-\uFA2D\A-z\0-9]{9,9}$/
				if (this.form.phone == '') {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none'
					})

				} else if (this.form.key == '') {
					uni.showToast({
						title: '请输入邀请码',
						icon: 'none'
					})
				} else {
					if (!phonecontent.test(this.form.phone)) {
						uni.showToast({
							title: '手机格式不正确',
							icon: 'none'
						})
						return
					}
					if (!keycontent.test(this.form.key)) {
						uni.showToast({
							title: '请输入9位数邀请码',
							icon: 'none'
						})
						return
					}
					console.log('全局',Vue.VipNum)
					let jsonstorage=uni.getStorageSync('userinfo')
					if(jsonstorage.data.VipNum!=0 && jsonstorage.data.VipNum!=null){
						uni.showToast({
							title:'特权次数仅一次',
							icon:'none'
						})
						
					}else{
						let users={
							UserId:jsonstorage.data.id
						}
						this.API.UpdVipNum(users).then(res=>{
							if(res.data.code==200){
								this.open()
								jsonstorage.data.VipNum=1
								uni.setStorageSync('userinfo',jsonstorage)
							}else{
								uni.showToast({
									title:'特权已重置，请清除缓存重试',
									icon:'none'
								})
							}
						})
					}
					// Vue.VipNum+=1
					// if(Vue.VipNum>2){
					// 	uni.showToast({
					// 		title:'特权仅此一次',
					// 		icon:'none'
					// 	})
					// 	return
					// }else{
					// 	this.open()
					// }
				}
			},
			open() {
				this.$refs.popup.open('center')
			},
			Close(){
				this.$refs.popup.close('center')
			}
		},
	}
</script>

<style>
	/* 背景图片 */
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	.content>view {
		margin-top: 10px;

	}
</style>
