<template>
	<view class="box">
		<view><uni-easyinput prefixIcon="phone-filled" v-model="mobile" @blur="onInput" placeholder="请输入手机号"></uni-easyinput></view>
		<view style="margin-top: 10px;"><uni-easyinput prefixIcon="contact-filled" v-model="pucode" placeholder="请输入用户编号"></uni-easyinput></view>
		<view class="input">
			<uni-easyinput v-model="snsCode" placeholder="请输入内容" @input="input" style="width: 100px;margin-right: 10px;"></uni-easyinput>
			<button class="mini-btn" type="primary" size="mini">获取验证码</button>
		</view>
		<view><button type="primary" style="width: 180px;margin-top: 20px;" @click="register">绑定手机号</button></view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				mobile:'',
				pucode:'',
				snsCode:'439764',
				styles:{
					width:'100px'
				}
			}
		},
		methods: {
			// 限制手机号
			onInput(event) {
				// 使用正则表达式过滤非数字字符
				const phonePattern = /^1[3-9]\d{9}$/;
				if (!phonePattern.test(event.detail.value) && event.detail.value) {
					uni.showToast({
						title: '您输入的手机号格式有误',
						icon: 'none'
					});
					this.mobile = ''; // 清空输入框
				}else{
					this.mobile = event.detail.value
				}
			},
			register(){
				if(!this.mobile){
					uni.showToast({title: '请输入手机号',icon: 'none'});
					return
				}
				if(!this.pucode){
					uni.showToast({title: '请输入用户编号',icon: 'none'});
					return
				}
				if(!this.snsCode){
					uni.showToast({title: '请输入短信验证码',icon: 'none'});
					return
				}
				const url = '/wechat/wechat/savePuCode'
				let data = {
					mobile:this.mobile,
					pucode:this.pucode,
					snsCode:this.snsCode
				}
				API.request(url,data, res => {
					if(res.code==1){
						uni.setStorageSync('AccessToken', res.data.token);
						uni.setStorageSync('mobile', this.mobile);
						uni.showToast({title: '手机号绑定成功',icon: 'none'})
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/index/index"
							})
						},1000)
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
	padding: 40px;
}
.input{
	display: flex;
	align-items: center;
	margin-top: 10px;
}
</style>
