<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="wap-font-scale" content="no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title><!--{$page_title}--></title>
<meta name="description" content="<!--{$page_description}-->" />
<meta name="keywords" content="<!--{$page_keyword}-->" />
<link rel="stylesheet" href="<!--{$wapskin}-->css/style.css?v=<!--{$copyright_version}-->" />
<link rel="stylesheet" href="<!--{$wapskin}-->css/reg.css?v=<!--{$copyright_version}-->" />
<link rel="stylesheet" href="<!--{$wapskin}-->font/iconfont.css?v=<!--{$copyright_version}-->" />
<script type="text/javascript">
var WAP_APPFILE = "<!--{$oefile}-->"; //文件名
var WAP_SKIN = "<!--{$wapskin}-->"; //风格
var _ROOT_PATH = "<!--{$urlpath}-->"; //路径
var _UPLOAD_MAXSIZE = "<!--{$config.uploadmaxsize}-->";
var _LOGIN_STATUS = "<!--{$login.status}-->"; //登录状态
var _APP_URLITEM = "<!--{$appurlitem}-->"; //APP参数
var WAP_SHOW_USERCARD = <!--{intval($config.wap_usercard_flag)}-->; //是否开启资料卡

/*
if (typeof($.browser.mozilla) != "undefined") {
    WIN_WIDTH = window.screen.width; //兼容Mozilla
    WIN_HEIGHT = window.screen.height;
}
*/

<!--{assign var="isweixin" value=get_from_weixin()}-->
<!--{if $isweixin == '1' && intval($config.weixin_close) == 0}-->
var NEED_WEIXIN_LOGIN = 1;
<!--{else}-->
var NEED_WEIXIN_LOGIN = 0;
<!--{/if}-->
</script>
<style>
  html,body{
    width: 100%;
    height: 100%;
    background: #fff;
  }
  [v-cloak]{display: none;}
</style>
<!--{include file="<!--{$oetplpath}-->layout/css.tpl"}-->
<script src="<!--{$urlpath}-->tpl/static/oeui/js/flexible.js?v=<!--{$copyright_version}-->"></script>
</head>
<body>
<div id="app" v-cloak>
  <input type="hidden" id="forward" value="<!--{$forward}-->">
  <input type="hidden" id="au_mod" value="<!--{$au_mod}-->">
  <input type="hidden" id="openid" value="<!--{$openid}-->">
  <input type="hidden" id="au_unionid" value="<!--{$au_unionid}-->">
  <input type="hidden" name="au_nickname" id="au_nickname" value="<!--{$au_nickname}-->" />
  <input type="hidden" id="au_headimgurl" value="<!--{$au_headimgurl}-->">
  <input type="hidden" id="mobile" value="<!--{$mobile}-->">
  <input type="hidden" id="startage" value="<!--{intval($config.startage)}-->">
  <input type="hidden" id="endage" value="<!--{intval($config.endage)}-->">
  <!-- gender and marry -->
  <transition-group :name="transition_name">
  <div class="oe_qzreg" v-show="step == 'gender'" key="step1">
    <div class="oe_qzrtop">
      <span class="back" @click="go_back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      你的性别
    </div>
    <div class="oe_rqzsex">
      <p class="p_1" :class="[gender == '1'? 'current': '']" @click="select_gender('1')"><span><i class="iconfont icon-nan2"></i></span>男</p>
      <p class="p_2" :class="[gender == '2'? 'current': '']" @click="select_gender('2')"><span><i class="iconfont icon-nv2"></i></span>女</p>
    </div>
    <!--{if $config.regmarry == '1'}-->
    <div class="oe_qztitle">
      婚况
    </div>
    <div class="oe_rqtag">
      <!--{assign var="var_list" value=vo_list("mod={volistvar} where={marry}")}-->
      <!--{if !empty($var_list)}-->
      <!--{foreach $var_list as $val}-->
      <span :class="[marry == '<!--{$val.value}-->'? 'current': '']" @click="select_marry('<!--{$val.value}-->')"><!--{$val.text}--></span>
      <!--{/foreach}-->
      <!--{/if}-->
    </div>
    <!--{/if}-->
  </div>
  <!-- birth -->
  <div class="oe_qzreg" v-show="step == 'birth'" key="step2" @touchmove.prevent>
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
      <div class="btn" @click="next">下一步</div>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      你的生日
    </div>
    <div class="date">{{date[0]+'-'+date[1]+'-'+date[2]}}</div>
    <div class="birthday_box">
      <oe-insert-picker
        ref="date"
        title="生日"
        :link-page="true" 
        :data="date_arr" 
        :is-show="date_show" 
        @change="select_date"
      />
    </div>
    <div class="oe_qzreg_btn">
      <span @click="next">下一步</span>
    </div>
  </div>
  <!-- area -->
  <div class="oe_qzreg" v-show="step == 'area'" key="step3" @touchmove.prevent>
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
      <div class="btn" @click="next">下一步</div>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      工作所在地
    </div>
    <div class="date">
      {{area[0] && area[0].text}}<template v-if="area[1] && area[1].text">-{{area[1] && area[1].text}}</template><template v-if="area[2] && area[2].text">-{{area[2] && area[2].text}}</template>
    </div>
    <div class="birthday_box">
      <oe-insert-picker
        ref="area"
        title="地区"
        :link-page="true" 
        :data="area_arr" 
        :is-show="area_show" 
        @change="select_area"
      />
    </div>
    <div class="oe_qzreg_btn">
      <span @click="next">下一步</span>
    </div>
  </div>
  <!-- hometown 2019.10.23-->
  <!--{if $config.reghometown == '1'}-->
  <div class="oe_qzreg" v-show="step == 'hometown'" key="step12" @touchmove.prevent>
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
      <div class="btn" @click="next">下一步</div>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      户籍所在地
    </div>
    <div class="date">
      {{hometown[0] && hometown[0].text}}<template v-if="hometown[1] && hometown[1].text">-{{hometown[1] && hometown[1].text}}</template><template v-if="hometown[2] && hometown[2].text">-{{hometown[2] && hometown[2].text}}</template>
    </div>
    <div class="birthday_box">
      <oe-insert-picker
        ref="hometown"
        title="户籍"
        :link-page="true" 
        :data="hometown_arr" 
        :is-show="hometown_show" 
        @change="select_hometown"
      />
    </div>
    <div class="oe_qzreg_btn">
      <span @click="next">下一步</span>
    </div>
  </div>
  <!--{/if}-->
  <!-- height -->
  <!--{if $config.regheight == '1'}-->
  <div class="oe_qzreg" v-show="step == 'height'" key="step4" @touchmove.prevent>
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
      <div class="btn" @click="next">下一步</div>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      你的身高
    </div>
    <div class="reg oe_reg_flow" @touchmove.prevent.stop>
      <div class="body">
        <div class="height">
          <div class="ruler" ref="ruler">
            <template v-for="item in height_data">
              <div class="scale num" v-if="item%10 == 0">
                <div class="line"></div>
                <div class="text">{{item}}</div>
              </div>
              <div class="scale half" v-else-if="item%5 == 0">
                <div class="line"></div>
                <div class="text">{{item}}</div>
              </div>
              <div class="scale" v-else>
                <div class="line"></div>
              </div>
            </template>
          </div>
          <div class="select">
            <div class="line"></div>
            <div class="val"><span>{{height}}</span>cm</div>
          </div>
        </div>
      </div>
    </div>
    <div class="oe_qzreg_btn">
      <span @click="next">下一步</span>
    </div>
  </div>
  <!--{/if}-->
  <!-- education -->
  <!--{if $config.regeducation == '1'}-->
  <div class="oe_qzreg" v-show="step == 'education'" key="step5">
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      你的学历
    </div>
    <div class="oe_rqtag_one">
      <ul>
        <!--{assign var="var_list" value=vo_list("mod={volistvar} where={education}")}-->
        <!--{if !empty($var_list)}-->
        <!--{foreach $var_list as $val}-->
        <li><span :class="[education == '<!--{$val.value}-->'? 'current': '']" @click="select_edu('<!--{$val.value}-->')"><!--{$val.text}--></span></li>
        <!--{/foreach}-->
        <!--{/if}-->
      </ul>
    </div>
  </div>
  <!--{/if}-->
  <!-- house and car -->
  <!--{if $config.reghouse == '1' || $config.regcar == '1'}-->
  <div class="oe_qzreg" v-show="step == 'car_or_house'" key="step6">
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
    </div>
    <div class="h80"></div>
    <!--{if $config.reghouse == '1'}-->
    <div class="oe_qztitle">
      你的购房情况
    </div>
    <div class="oe_rqtag">
      <!--{assign var="var_list" value=vo_list("mod={volistvar} where={house}")}-->
      <!--{if !empty($var_list)}-->
      <!--{foreach $var_list as $val}-->
      <span :class="[house == '<!--{$val.value}-->'? 'current': '']" @click="select_house('<!--{$val.value}-->')"><!--{$val.text}--></span>
      <!--{/foreach}-->
      <!--{/if}-->
    </div>
    <!--{/if}-->
    <!--{if $config.regcar == '1'}-->
    <div class="oe_qztitle">
      你的购车情况
    </div>
    <div class="oe_rqtag">
      <!--{assign var="var_list" value=vo_list("mod={volistvar} where={car}")}-->
      <!--{if !empty($var_list)}-->
      <!--{foreach $var_list as $val}-->
      <span :class="[car == '<!--{$val.value}-->'? 'current': '']" @click="select_car('<!--{$val.value}-->')"><!--{$val.text}--></span>
      <!--{/foreach}-->
      <!--{/if}-->
    </div>
    <!--{/if}-->
  </div>
  <!--{/if}-->
  <!-- sort and maytype -->
  <!--{if $config.regsort == '1' || intval($config.regshowmaytype) == '1'}-->
  <div class="oe_qzreg" v-show="step == 'sort_or_maytype'" key="step7">
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
    </div>
    <div class="h80"></div>
    <!--{if $config.regsort == '1'}-->
    <div class="oe_qztitle">
      交友类型
    </div>
    <div class="oe_rqtag">
      <!--{assign var="var_list" value=vo_list("mod={volistvar} where={sort}")}-->
      <!--{if !empty($var_list)}-->
      <!--{foreach $var_list as $val}-->
      <span :class="[sort == '<!--{$val.value}-->'? 'current': '']" @click="select_sort('<!--{$val.value}-->')"><!--{$val.text}--></span>
      <!--{/foreach}-->
      <!--{/if}-->
    </div>
    <!--{/if}-->
  </div>
  <!--{/if}-->
  <!-- salary -->
  <!--{if $config.regsalary == '1'}-->
  <div class="oe_qzreg" v-show="step == 'salary'" key="step8">
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      你的年收入
    </div>
    <div class="oe_rqtag_one">
      <ul>
        <!--{assign var="var_list" value=vo_list("mod={volistvar} where={salary}")}-->
        <!--{if !empty($var_list)}-->
        <!--{foreach $var_list as $val}-->
        <li><span :class="[salary == '<!--{$val.value}-->'? 'current': '']" @click="select_salary('<!--{$val.value}-->')"><!--{$val.text}--></span></li>
        <!--{/foreach}-->
        <!--{/if}-->
      </ul>
    </div>
  </div>
  <!--{/if}-->
  <!-- job -->
  <!--{if $config.regjob == '1'}-->
  <div class="oe_qzreg" v-show="step == 'job'" key="step9">
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      你的职业
    </div>
    <div class="oe_rqtag">
      <!--{assign var="var_list" value=vo_list("mod={volistvar} where={job}")}-->
      <!--{if !empty($var_list)}-->
      <!--{foreach $var_list as $val}-->
      <span :class="[job == '<!--{$val.value}-->'? 'current': '']" @click="select_job('<!--{$val.value}-->')"><!--{$val.text}--></span>
      <!--{/foreach}-->
      <!--{/if}-->
    </div>
  </div>
  <!--{/if}-->
  <!-- weight -->
  <!--{if $config.regweight == '1'}-->
  <div class="oe_qzreg" v-show="step == 'weight'" key="step10" @touchmove.prevent :style="{height: sh+'px'}">
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
      <div class="btn" @click="next">下一步</div>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      你的体重
    </div>
    <div class="birthday_box">
      <oe-insert-picker
        ref="weight"
        title="体重"
        :link-page="false" 
        :data="weight_data" 
        :is-show="weight_show" 
        @change="select_weight"
        :selected-index="[50]"
      />
    </div>
    <div class="oe_qzreg_btn">
      <span @click="next">下一步</span>
    </div>
  </div>
  <!--{/if}-->
  <!-- input and show mobile -->
  <div class="oe_qzreg" v-show="step == 'input'" key="step11">
    <div class="oe_qzrtop">
      <span class="back" @click="back"><i class="iconfont icon-fanhui"></i></span>
      <h1>完善资料</h1>
    </div>
    <div class="h80"></div>
    <div class="oe_qztitle">
      创建帐号
    </div>
    <div class="oe_qzinput">
      <ul>
        <li :class="[user_name_tip != ''? 'current': '']">
          <input type="text" placeholder="填写用户名" v-model="username"  @input="limit_length('username', 8)" @blur="check_username" @focus="focus('user_name_tip')"/>
          <span class="tips" v-show="user_name_tip != ''">{{user_name_tip}}</span>
        </li>
        <li :class="[password_tip != ''? 'current': '']">
          <input type="password" placeholder="填写登录密码" v-model="password" @blur="check_password" @focus="focus('password_tip')"/>
          <span class="tips" v-show="password_tip != ''">{{password_tip}}</span>
        </li>
        <!--{if $config.regemail == '1'}-->
        <li :class="[email_tip != ''? 'current': '']">
          <input type="text" placeholder="填写邮箱地址" v-model="email" @blur="check_email" @focus="focus('email_tip')"/>
          <span class="tips" v-show="email_tip != ''">{{email_tip}}</span>
        </li>
        <!--{/if}-->
        <!--{if $config.regtruename == '1'}-->
        <li :class="[truename_tip != ''? 'current': '']">
          <input type="text" placeholder="填写真实姓名" v-model="truename" @blur="check_truename" @focus="focus('truename_tip')"/>
          <span class="tips" v-show="truename_tip != ''">{{truename_tip}}</span>
        </li>
        <!--{/if}-->
        <!--{if $config.regweixin == '1'}-->
        <li :class="[wx_tip != ''? 'current': '']">
          <input type="text" placeholder="填写微信号" v-model="wx" @blur="check_wx" @focus="focus('wx_tip')"/>
          <span class="tips" v-show="wx_tip != ''">{{wx_tip}}</span>
        </li>
        <!--{/if}-->
        <!--{if $config.regqq == '1'}-->
        <li :class="[qq_tip != ''? 'current': '']">
          <input type="number" placeholder="填写QQ号" v-model="qq"  @blur="check_qq" @focus="focus('qq_tip')"/>
          <span class="tips" v-show="qq_tip != ''">{{qq_tip}}</span>
        </li>
        <!--{/if}-->
      </ul>
      <!--{if !empty($mobile)}-->
      <!--{if intval($config.regshowhide == '1')}-->
      <div class="show_mobile" :class="[hidemobile == '1'? 'current': '']" @click="hide_mobile">
        <em class="iconfont icon-xuanze"></em>
        <span>勾选后，手机号仅限红娘查看</span>
      </div>
      <!--{/if}-->
      <!--{/if}-->
    </div>
    
    <div class="oe_qzreg_btn" style="padding-top:10px;">
      <span @click="reg">完成</span>
    </div>
    <div class="oe_name_tip" v-show="show_random_username">
      <div class="mask"></div>
      <div class="content">
        <div class="tip">该用户名已被占用，推荐您使用以下用户名</div>
        <div class="box t_center fz14" v-html="random_username" @click="select_random_username"></div>
        <div class="close cursor" @click="hide_random_username">
          <em class="iconfont icon-wrong"></em>
        </div>
      </div>
    </div>
  </div>
  </transition-group>
</div>
<script>
    const reg_step = ['gender', 'birth', 'area'];
    <!--{if $config.reghometown == '1'}-->
    reg_step.push('hometown');
    <!--{/if}-->
    <!--{if $config.regheight == '1'}-->
    reg_step.push('height');
    <!--{/if}-->
    <!--{if $config.regeducation == '1'}-->
    reg_step.push('education');
    <!--{/if}-->
    <!--{if $config.reghouse == '1' || $config.regcar == '1'}-->
    reg_step.push('car_or_house');
    <!--{/if}-->
    <!--{if $config.regsort == '1' || intval($config.regshowmaytype) == '1'}-->
    reg_step.push('sort_or_maytype');
    <!--{/if}-->
    <!--{if $config.regsalary == '1'}-->
    reg_step.push('salary');
    <!--{/if}-->
    <!--{if $config.regjob == '1'}-->
    reg_step.push('job');
    <!--{/if}-->
    <!--{if $config.regweight == '1'}-->
    reg_step.push('weight');
    <!--{/if}-->
    reg_step.push('input');
    
    const check_item = [];
    <!--{if $config.regmarry == '1'}-->
    check_item.push('marry');
    <!--{/if}-->
    <!--{if $config.regcar == '1'}-->
    check_item.push('car');
    <!--{/if}-->
    <!--{if $config.reghouse == '1'}-->
    check_item.push('house');
    <!--{/if}-->
    <!--{if $config.regsort == '1'}-->
    check_item.push('sort');
    <!--{/if}-->
    <!--{if intval($config.regshowmaytype) == '1'}-->
    check_item.push('maytype');
    <!--{/if}-->
    <!--{if $config.regemail == '1'}-->
    check_item.push('email');
    <!--{/if}-->
    <!--{if $config.regtruename == '1'}-->
    check_item.push('truename');
    <!--{/if}-->
    <!--{if $config.regweixin == '1'}-->
    check_item.push('weixin');
    <!--{/if}-->
    <!--{if $config.regqq == '1'}-->
    check_item.push('qq');
    <!--{/if}-->
    var FORWARD = document.getElementById('forward').value;
    var AU_MOD = document.getElementById('au_mod').value;
    var OPENID = document.getElementById('openid').value;
    var AU_UNIONID = document.getElementById('au_unionid').value;
    var AU_HEADIMGURL = document.getElementById('au_headimgurl').value;
    var MOBILE = document.getElementById('mobile').value;
    var STARTAGE = document.getElementById('startage').value;
    var ENDAGE = document.getElementById('endage').value;
    var sh = document.body.clientHeight;
    var AU_NICKNAME = '<!--{$au_nickname}-->';
    var AU_PROVINCE = '<!--{$au_province}-->';
</script>
<script src="<!--{$urlpath}-->tpl/static/vue/vue.min.js"></script>
<script src="<!--{$urlpath}-->tpl/static/js/jquery3.min.js"></script>
<script src="<!--{$wapskin}-->js/public/register3.js?v=<!--{$copyright_version}-->"></script>
</body>
</html>