<template>
	<view class="box">
		<!-- <uni-popup ref="popup" type="bottom"> -->
		<view class="header">
			<image :src="$img1('common/logo.png?x=1')"></image>
		</view>
		<view class="content">
			<view>申请获取以下权限</view>
			<text>获得您的手机号</text>
			<view style="margin-top:1.5rem; " class="input-box br10">
				<input class="uni-input" v-model="mobile" placeholder-style="color:#CCCCCC;" focus
					placeholder="请输入手机号" />
			</view>
		</view>


		<!-- type='primary' -->
		<button class="bottom" @click="getPhoneNumber()">
			绑定手机号
		</button>
		<view class="quxiao" @click="back()">取消</view>
		<!-- </uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				z_imgPath: this.$z_img2,
				mobile: ""
			}
		},
		created() {
			//默认加载
			// this.login();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			validatePhoneNumber(phoneNumber) {
				// 定义手机号的正则表达式
				const phoneRegex = /^1[3-9]\d{9}$/;
				return phoneRegex.test(phoneNumber);
			},
			getPhoneNumber(e) {
				// console.log(e)
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号~',
						icon: 'success',
						success() {}
					})
					return;
				}
				if (!this.validatePhoneNumber(this.mobile)) {
					uni.showToast({
						title: '手机号格式不正确~',
						icon: 'success',
						success() {}
					})
					return;
				}
				let that = this
				that.req({
					url: 'login_bind_mobile_h5',
					data: {
						mobile: that.mobile,
					},
					success(res) {
						if (res.status == 1) {
							// uni.setStorageSync('token', res.data)
							uni.showToast({
								title: '绑定成功~',
								icon: 'success',
								success() {
									setTimeout(() => {
										uni.navigateBack()
									}, 1000)
								}
							})
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	/* .box {
		position: fixed;
		bottom: 0;
	} */

	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
		color: #fff;
	}

	.content text {
		display: block;
		margin-top: 40rpx;
	}

	.input-box {
		width: 615rpx;
		height: 70rpx;
		background: #0B0A1A;
		border: 1px solid #B07AF3;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: center;

		input {
			flex: 1;

			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #fff;
		}
	}

	.bottom {
		/* border-radius: 80rpx; */
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}

	button::after {
		border: none;
	}

	button {
		background: #AD77EF;
		font-size: 36rpx;
		font-family: zihun152hao-jijiachaojihei;
		font-weight: 400;
		color: #ffffff;
		border-radius: 80rpx;
	}

	.quxiao {
		background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
		filter: grayscale(1);
		width: 650rpx;
		height: 78rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 80rpx;
		margin: auto;
		font-size: 36rpx;
		font-family: zihun152hao-jijiachaojihei;
		font-weight: 400;
		color: #ffffff;
	}
</style>