<template>
	<view class="binding"> 
	<!-- 客户定制绑定手机的组件 -->
		<view class="img">
			<image :style="{width: imgStyle.width + 'px', height:imgStyle.height + 'px' }" :src="logo" mode=""></image>
		</view>
		<view  style="padding: 50upx;">
			<view class="f-36 f-w">
				手机绑定
			</view>
			<view class="dis-flex inputbox">
				<!-- <view class="f-28 col-9">
					
				</view> -->
				<input class="inputclass" placeholder="请输入手机号" v-model="phone" maxlength="11" type="number" value="" />
			</view>
			<view class="dis-flex inputbox" v-if='smsver == 0' style="margin-top: 40upx;">
				<!-- <view class="f-28 col-9">
					
				</view> -->
				<input class="inputclass" placeholder="请输入验证码" v-model="smsCode"  maxlength="11" type="number" value="" />
				<view class="f-28 col-f4" v-if="min>0">
					请等待{{min}}s
				</view>
				<view class="f-28 col-f4" v-else @click="PIN()">
					发送验证码
				</view>
			</view>
			<view class="bindingBtn" @click="changeMobile">
				绑 定
			</view>
		</view>
		
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	export default{
		data(){
			return{
				min:0,
				phone:'',
				getSmsCode:'',
				smsver:'',
				smsCode:'',
				imgStyle:{},
				logo:''
			}
		},
		onLoad() {
			let _this = this;
			_this.smsver = uni.getStorageSync('platformInfor').smsver;
			_this.imgStyle = uni.getStorageSync('imgstyle');
			_this.logo = uni.getStorageSync('platformInfor').logo;
		},
		methods:{
			// 改绑手机
			changeMobile() {
				let _this = this;
				if (_this.phone == '' || _this.phone.length !== 11) {
					uni.showModal({
						showCancel:false,
						content:'请输入正确的手机号'
					})
					return;
				}
				if (_this.smsCode == '' && _this.smsver == 0) {
					uni.showModal({
						showCancel:false,
						content:'请输入验证码'
					})
					return;
				}
				let data = {
					mobile: _this.phone,
					mergeflag: '',
					code: _this.smsCode
				};
				App._post_form(
					'&p=member&do=changeMobile',
					data,
					res => {
						
						_this.phone = '';
						_this.smsCode = '';
						uni.showToast({
							icon:'success',
							title: '绑定成功'
						});
						setTimeout(()=>{
							uni.reLaunch({
							    url: '/pages/mainPages/index/index'
							});
						},1000)
						// _this.show1 = false;
					},
					errno => {
						if (!!errno.data.data.code && errno.data.data.code === 1 || errno.data.message == '手机号已存在,无法重复绑定') return
						uni.showModal({
							title: '友情提示',
							content: errno.data.message,
							showCancel: true,
							success(res) {
								if (res.confirm) {
									let data = {
										mobile: _this.phone,
										mergeflag: 1,
										code: _this.smsCode
									};
									App._post_form('&p=member&do=changeMobile', data, res => {
										_this.phone = '';
										_this.smsCode = '';
										uni.showToast({
											icon:'success',
											title: '绑定成功'
										});
										setTimeout(()=>{
											uni.reLaunch({
											    url: '/pages/mainPages/index/index'
											});
										},1000)
										// _this.$emit('clickmask1');
										// _this.show1 = false;
									});
								}
							}
						});
					}
				);
			},
			PIN() {
				let _this = this;
				if (_this.phone == '' || _this.phone.length !== 11) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
						duration: 2000
					});
					return;
				}
				let data = {
					phone: _this.phone,
					type: 2,
					code:'',
					time:''
				};
				
				App._post_form('&do=PIN', data, res => {
					_this.getSmsCode = res.data.code;
					_this.min = 60;
					_this.sendcode();
				});
			},
			sendcode(){
				let _this = this;
				if(_this.min != 0){
					_this.min--;
					setTimeout(()=>{
						_this.sendcode()
					},1000)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.binding{
		// padding: 50upx;
		// margin-top: 240upx;
		.inputbox{
			border-bottom: 1upx solid #cccccc;
			height: 100upx;
			line-height: 100upx;
			.inputclass{
				flex: 1;
				text-align: left;
				height: 100upx;
				line-height: 100upx;
				font-size: 28upx;
			}
		}
		.bindingBtn{
			height: 90upx;
			line-height: 90upx;
			background-color: #ff4444;
			border-radius: 60upx;
			color: #ffffff;
			text-align: center;
			font-size: 30upx;
			margin-top: 90upx;
		}
	}
</style>
<style>
	page{
		background-color: #F8f8f8;
	}
</style>