<template>
<view class="container">
	<block v-if="isload">
		<block v-if="logintype!=4">
			<form @submit="formSubmit" @reset="formReset">
			<view class="title">注册账号</view>
			<view class="regform">
				<view class="form-item">
					<image :src="event_rul +'/static/img/static/img/reg-tel.png'" class="img"/>
					<input type="text" class="input" placeholder="请输入手机号" placeholder-style="font-size:30rpx;color:#B2B5BE" name="tel" value="" @input="telinput"/>
				</view>
				<view class="form-item" v-if="needsms">
					<image :src="event_rul +'/static/img/static/img/reg-code.png'" class="img"/>
					<input type="text" class="input" placeholder="请输入验证码" placeholder-style="font-size:30rpx;color:#B2B5BE" name="smscode" value=""/>
					<view class="code" :style="{color:t('color1')}" @tap="smscode">{{smsdjs||'获取验证码'}}</view>
				</view>
				<view class="form-item">
					<image :src="event_rul +'/static/img/static/img/reg-pwd.png'" class="img"/>
					<input type="text" class="input" placeholder="6-16位字母数字组合密码" placeholder-style="font-size:30rpx;color:#B2B5BE" name="pwd" value="" :password="true"/>
				</view>
				<view class="form-item">
					<image :src="event_rul +'/static/img/static/img/reg-pwd.png'" class="img"/>
					<input type="text" class="input" placeholder="再次输入登录密码" placeholder-style="font-size:30rpx;color:#B2B5BE" name="repwd" value="" :password="true"/>
				</view>
				<view class="form-item" v-if="reg_invite_code && !parent">
					<image :src="event_rul +'/static/img/static/img/reg-yqcode.png'" class="img"/>
					<input type="text" class="input" :placeholder="'请输入'+(reg_invite_code_type==0?'邀请人手机号':'邀请码')+(reg_invite_code==2?'(必填)':'(选填)')" placeholder-style="font-size:30rpx;color:#B2B5BE" name="yqcode" value=""/>
				</view>
        <view class="form-item" v-if="reg_invite_code && parent" style="color:#666;">
					<block v-if="reg_invite_code_type == 0 ">
          邀请人：<image :src="parent.headimg" style="width: 80rpx; height: 80rpx;border-radius: 50%;"></image> {{parent.nickname}} 
					</block>
					<block v-else>
          邀请码：{{parent.yqcode}} 
					</block>
        </view>
				
				<view class="xieyi-item" v-if="xystatus==1">
					<checkbox-group @change="isagreeChange"><label class="flex-y-center"><checkbox class="checkbox" value="1" :checked="isagree"/>阅读并同意</label></checkbox-group>
					<text :style="{color:t('color1')}" @tap="showxieyiFun">{{xyname}}</text>
				</view>

				<button class="form-btn" :style="{background:'linear-gradient(90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}" form-type="submit">注册</button>
			</view>
			</form>
			<view class="tologin" @tap="goto" data-url="login" data-opentype="redirect">已有账号? 前去登录</view>
			
			<block v-if="logintype_2 || logintype_3">
				<view class="othertip">
					<view class="othertip-line"></view>
					<view class="othertip-text">
						<text class="txt">其他方式登录</text>
					</view>
					<view class="othertip-line"></view>
				</view>
				<view class="othertype">
					<view class="othertype-item" v-if="logintype_3" @tap="weixinlogin">
						<image class="img" :src="pre_url+'/static/img/login-'+platformimg+'.png'"/>
						<text class="txt">{{platformname}}登录</text>
					</view>
					<view class="othertype-item" v-if="logintype_2" @tap="goto" data-url="login?logintype=2" data-opentype="redirect">
						<image class="img" :src="event_rul +'/static/img/static/img/reg-tellogin.png'"/>
						<text class="txt">手机号登录</text>
					</view>
				</view>
			</block>
		</block>
		<!-- 绑定手机号 -->
		<block v-if="logintype==4">
			<block v-if="platform == 'wx'">
				<view class="authlogin">
					<view class="authlogin-logo"><image :src="logo" style="width:100%;height:100%"/></view>
					<view class="authlogin-name">授权登录{{name}}</view>
					<button class="authlogin-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :style="{background:'linear-gradient(90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}">{{platformname}}授权绑定手机号</button>
					<button class="authlogin-btn2" @tap="nobindregister" v-if="login_bind==1">暂不绑定</button>
				</view>
			</block>
			<block v-else>
				<form @submit="bindregister" @reset="formReset">
					<view class="title">绑定手机号</view>
					<view class="regform">
						<view class="form-item">
							<image :src="event_rul +'/static/img/static/img/reg-tel.png'" class="img"/>
							<input type="text" class="input" placeholder="请输入手机号" placeholder-style="font-size:30rpx;color:#B2B5BE" name="tel" value="" @input="telinput"/>
						</view>
						<view class="form-item">
							<image :src="event_rul +'/static/img/static/img/reg-code.png'" class="img"/>
							<input type="text" class="input" placeholder="请输入验证码" placeholder-style="font-size:30rpx;color:#B2B5BE" name="smscode" value=""/>
							<view class="code" :style="{color:t('color1')}" @tap="smscode">{{smsdjs||'获取验证码'}}</view>
						</view>
						<button class="form-btn" form-type="submit" :style="{background:'linear-gradient(90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}">确定</button>
						<button class="form-btn2" @tap="nobindregister" v-if="login_bind==1">暂不绑定</button>
					</view>
				</form>
			</block>
		</block>
		<view v-if="showxieyi" class="xieyibox">
			<view class="xieyibox-content">
				<view style="overflow:scroll;height:100%;">
					<parse :content="xycontent" @navigate="navigate"></parse>
				</view>
				<view style="position:absolute;z-index:9999;bottom:10px;left:0;right:0;margin:0 auto;text-align:center; width: 50%;height: 60rpx; line-height: 60rpx; color: #fff; border-radius: 8rpx;" :style="{background:'linear-gradient(90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}"  @tap="hidexieyi">已阅读并同意</view>
			</view>
		</view>

	</block>
	<loading v-if="loading"></loading>
	<dp-tabbar :opt="opt"></dp-tabbar>
	<popmsg ref="popmsg"></popmsg>
</view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
		opt:{},
		loading:false,
		isload: false,
		menuindex:-1,
		pre_url:app.globalData.pre_url,
		platform2:app.globalData.platform2,

		platform:'',
		platformname:'',
		platformimg:'weixin',
		logintype:0,
		logintype_1:true,
		logintype_2:false,
		logintype_3:false,
		logo:'',
		name:'',
		xystatus:0,
		xyname:'',
		xycontent:'',
		needsms:false,
		showxieyi:false,
		isagree:false,
		smsdjs: '',
		tel:'',
		hqing: 0,
		frompage:'/pages/my/usercenter',
		wxloginclick:false,
		login_bind:0,
		reg_invite_code:0,
		reg_invite_code_text:'',
		reg_invite_code_type:0,
		parent:{},

		event_rul: app.globalData.event_url,
    };
  },

  onLoad: function (opt) {
		this.opt = app.getopts(opt);
		if(this.opt.frompage) this.frompage = decodeURIComponent(this.opt.frompage);
		if(this.opt.logintype) this.logintype = this.opt.logintype;
		if(this.opt.login_bind) this.login_bind = this.opt.login_bind;
		this.getdata();
  },
	onPullDownRefresh: function () {
		this.getdata();
	},
  methods: {
		getdata: function () {
			var that = this;
			that.loading = true;
			app.get('ApiIndex/reg', {pid:app.globalData.pid}, function (res) {
				that.loading = false;
				if(res.status == 0){
					app.alert(res.msg);return;
				}
				that.logintype_2 = res.logintype_2;
				that.logintype_3 = res.logintype_3;
				that.logintype_3 = res.logintype_3;
				// #ifdef APP-PLUS
				if(that.platform2 == 'ios'){
					if (plus.runtime.isApplicationExist({ pname: 'com.tencent.mm', action: 'weixin://' })) {
						
					}else{
						that.logintype_3 = false;
					}
				}
				// #endif

				that.xystatus = res.xystatus;
				that.xyname = res.xyname;
				that.xycontent = res.xycontent;
				that.logo = res.logo;
				that.name = res.name;
				that.needsms = res.needsms;
				that.platform = res.platform;
        that.reg_invite_code = res.reg_invite_code;
        that.reg_invite_code_text = res.reg_invite_code_text;
        that.reg_invite_code_type = res.reg_invite_code_type;
        that.parent = res.parent;
				if(that.platform == 'mp' || that.platform == 'wx' || that.platform == 'app'){
					that.platformname = '微信';
					that.platformimg = 'weixin';
				}
				if(that.platform == 'toutiao'){
					that.platformname = '头条';
					that.platformimg = 'toutiao';
				}
				if(that.platform == 'alipay'){
					that.platformname = '支付宝';
					that.platformimg = 'alipay';
				}
				if(that.platform == 'qq'){
					that.platformname = 'QQ';
					that.platformimg = 'qq';
				}
				if(that.platform == 'baidu'){
					that.platformname = '百度';
					that.platformimg = 'baidu';
				}
				that.loaded();
			});
		},
    formSubmit: function (e) {
			var that = this;
      var formdata = e.detail.value;
      if (formdata.tel == ''){
        app.alert('请输入手机号');
        return;
      }
      if (formdata.pwd == '') {
        app.alert('请输入密码');
        return;
      }
      if (formdata.pwd.length < 6) {
        app.alert('新密码不小于6位');
        return;
      }
      if (formdata.repwd == '') {
        app.alert('请再次输入新密码');
        return;
      }
      if (formdata.pwd != formdata.repwd) {
        app.alert('两次密码不一致');
        return;
      }
			if(that.needsms){
				if (formdata.smscode == '') {
					app.alert('请输入短信验证码');
					return;
				}
			}else{
				formdata.smscode = '';
			}
			
      if (that.xystatus == 1 && !that.isagree) {
        app.error('请先阅读并同意用户注册协议');
        return false;
      }
			app.showLoading('提交中');
      app.post("ApiIndex/regsub", {tel:formdata.tel,pwd:formdata.pwd,smscode:formdata.smscode,pid:app.globalData.pid,yqcode:formdata.yqcode}, function (data) {
				app.showLoading(false);
        if (data.status == 1) {
          app.success(data.msg);
          setTimeout(function () {
            app.goto('/pages/my/usercenter','redirect');
          }, 1000);
        } else {
          app.error(data.msg);
        }
      });
    },
		getPhoneNumber: function (e) {
			var that = this
			if(e.detail.errMsg == "getPhoneNumber:fail user deny"){
				app.error('请同意授权获取手机号');return;
			}
			wx.login({success (res1){
				console.log(res1);
				var code = res1.code;
				//用户允许授权
				app.post('ApiIndex/wxRegister',{ iv: e.detail.iv,encryptedData:e.detail.encryptedData,code:code,pid:app.globalData.pid},function(res2){
					if (res2.status == 1) {
						app.success(res2.msg);
						setTimeout(function () {
							app.goto(that.frompage,'redirect');
						}, 1000);
					} else {
						app.error(res2.msg);
					}
					return;
				})
			}});
		},
		bindregister:function(e){
			var that = this;
			var formdata = e.detail.value;
      if (formdata.tel == ''){
        app.alert('请输入手机号');
        return;
      }
			if (formdata.smscode == '') {
				app.alert('请输入短信验证码');
				return;
			}
			that.register(formdata.tel,formdata.smscode);
		},
		nobindregister:function(){
			this.register('','');
		},
		register:function(tel,smscode){
			var that = this;
			var url = '';
			if(that.platform == 'app') {
				url = 'ApiIndex/appwxRegister';
			} else if(that.platform=='mp' || that.platform=='h5') {
				url = 'ApiIndex/shouquanRegister';
			} else {
				url = 'ApiIndex/'+that.platform+'Register';
			}
			app.post(url,{tel:tel,smscode:smscode,pid:app.globalData.pid},function(res2){
				if (res2.status == 1) {
					app.success(res2.msg);
					setTimeout(function () {
						app.goto(that.frompage,'redirect');
					}, 1000);
				} else {
					app.error(res2.msg);
				}
				return;
			});
		},
		weixinlogin:function(){
			var that = this;
			if (that.xystatus == 1 && !that.isagree) {
				that.showxieyi = true;
				that.wxloginclick = true;
				return;
			}
			that.wxloginclick = false;
			app.authlogin(function(res){
				if (res.status == 1) {
					app.success(res.msg);
					setTimeout(function () {
						app.goto(that.frompage,'redirect');
					}, 1000);
				} else if (res.status == 2) {
					that.logintype = 4;
					that.login_bind = res.login_bind
				} else {
					app.error(res.msg);
				}
			});
		},
    isagreeChange: function (e) {
      var val = e.detail.value;
      if (val.length > 0) {
        this.isagree = true;
      } else {
        this.isagree = false;
      }
      console.log(this.isagree);
    },
    showxieyiFun: function () {
      this.showxieyi = true;
    },
    hidexieyi: function () {
      this.showxieyi = false;
			this.isagree = true;
			if(this.wxloginclick){
				this.weixinlogin();
			}
    },
    telinput: function (e) {
      this.tel = e.detail.value
    },
    smscode: function () {
      var that = this;
      if (that.hqing == 1) return;
      that.hqing = 1;
      var tel = that.tel;
      if (tel == '') {
        app.alert('请输入手机号码');
        that.hqing = 0;
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(tel)) {
        app.alert("手机号码有误，请重填");
        that.hqing = 0;
        return false;
      }
      app.post("ApiIndex/sendsms", {tel: tel}, function (data) {
        if (data.status != 1) {
          app.alert(data.msg);
        } 
      });
      var time = 120;
      var interval1 = setInterval(function () {
        time--;
        if (time < 0) {
          that.smsdjs = '重新获取';
          that.hqing = 0;
          clearInterval(interval1);
        } else if (time >= 0) {
          that.smsdjs = time + '秒';
        }
      }, 1000);
    }
  }
};
</script>

<style>
page{background:#ffffff}
.container{width:100%;}
.title{margin:70rpx 50rpx 50rpx 40rpx;height:60rpx;line-height:60rpx;font-size: 48rpx;font-weight: bold;color: #000000;}
.regform{ width:100%;padding:0 50rpx;border-radius:5px;background: #FFF;}
.regform .form-item{display:flex;align-items:center;width:100%;border-bottom: 1px #ededed solid;height:88rpx;line-height:88rpx;border-bottom:1px solid #F0F3F6;margin-top:20rpx}
.regform .form-item:last-child{border:0}
.regform .form-item .img{width:44rpx;height:44rpx;margin-right:30rpx}
.regform .form-item .input{flex:1;color: #000;}
.regform .form-item .code{font-size:30rpx}
.regform .xieyi-item{display:flex;align-items:center;margin-top:50rpx}
.regform .xieyi-item{font-size:24rpx;color:#B2B5BE}
.regform .xieyi-item .checkbox{transform: scale(0.6);}
.regform .form-btn{margin-top:20rpx;width:100%;height:96rpx;line-height:96rpx;color:#fff;font-size:30rpx;border-radius: 48rpx;}
.regform .form-btn2{width:100%;height:80rpx;line-height:80rpx;background:#EEEEEE;border-radius:40rpx;color:#A9A9A9;margin-top:30rpx}
.tologin{color:#737785;font-size:26rpx;display:flex;width:100%;padding:0 80rpx;margin-top:30rpx}

.othertip{height:auto;overflow: hidden;display:flex;align-items:center;width:580rpx;padding:20rpx 20rpx;margin:0 auto;margin-top:60rpx;}
.othertip-line{height: auto; padding: 0; overflow: hidden;flex:1;height:0;border-top:1px solid #F2F2F2}
.othertip-text{padding:0 32rpx;text-align:center;display:flex;align-items:center;justify-content:center}
.othertip-text .txt{color:#A3A3A3;font-size:22rpx}

.othertype{width:70%;margin:20rpx 15%;display:flex;justify-content:center;}
.othertype-item{width:50%;display:flex;flex-direction:column;align-items:center;}
.othertype-item .img{width:88rpx;height:88rpx;margin-bottom:20rpx}
.othertype-item .txt{color:#A3A3A3;font-size:24rpx}

.xieyibox{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;background:rgba(0,0,0,0.7)}
.xieyibox-content{width:90%;margin:0 auto;height:80%;margin-top:20%;background:#fff;color:#333;padding:5px 10px 50px 10px;position:relative;border-radius:2px}


.authlogin{display:flex;flex-direction:column;align-items:center}
.authlogin-logo{width:180rpx;height:180rpx;margin-top:120rpx}
.authlogin-name{color:#999999;font-size:30rpx;margin-top:60rpx;}
.authlogin-btn{width:580rpx;height:96rpx;line-height:96rpx;background:#51B1F5;border-radius:48rpx;color:#fff;margin-top:100rpx}
.authlogin-btn2{width:580rpx;height:96rpx;line-height:96rpx;background:#EEEEEE;border-radius:48rpx;color:#A9A9A9;margin-top:20rpx}

</style>