   <template>
   <div>
       <div class="header">
            <div class="header-left">
                <img src="../../assets/image/xuan/h5ico_03.png" alt="">
            </div>
           <div class="header-right">
               <img src="../../assets/image/xuan/h5ico_06.png" alt="">
               <div class="header-word">
                   <a class="p-1" href="tel:18518267398">18518267398</a>
                   <a class="p-2s"  href="tel:010-62750413">010-62750413</a>
               </div>
           </div>
       </div>
       <div class="banner">
           <img src="../../assets/image/xuan/xuan_02.png" alt="">
           <p class="head-title">河马代缴，您的社保管家</p>
           <p class="head-xiao">服 务 费 低 至 20 元，30 秒 在 线 缴 纳，省 时 省 心</p>
           <div class="banner-input">
               <form action="" id="form-datas" style="float: left">
                   <input type="text" placeholder="填写手机号30秒轻松缴社保" name="mobile" v-model="data.phone" >
                   <input type="hidden" name="issue" value="">
                   <input type="hidden" name="name" value="">
                   <input type="hidden" name="type" :value="data.type">
               </form>
               <button @click="zixun">我要缴纳</button>
           </div>
           <p class="head-bot">想知道自己每月社保需要交多少钱？ <span style="color: #009140" @click="span">免费咨询 ></span> </p>

           <div class="list-box">
               <div class="list2">
                   <ul>
                       <li>
                           <img src="../../assets/image/xuan/xuan_05.png" alt="" @click="spans">
                       </li>
                       <li>
                           <img src="../../assets/image/xuan/xuan_07.png" alt="" @click="spans">
                       </li>
                   </ul>
               </div>
           </div>
       </div>
           <div class="list">
               <ul>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_11.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_13.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_18.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_20.png" alt="">
                   </li>
               </ul>
           </div>

           <div class="chun-word">
               <img src="../../assets/image/xuan/h5ico_35.png" alt="">
           </div>
           <div class="list3">
               <ul>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_39.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_41.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_45.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_46.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_49.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_50.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_53.png" alt="">
                   </li>
                   <li>
                       <img src="../../assets/image/xuan/h5ico_54.png" alt="">
                   </li>
               </ul>
           </div>
           <div class="liucheng">
               <img src="../../assets/image/xuan/h5ico_31.png" alt="">
           </div>

       <div class="word2">
           <p class="p-img">
               <img class="title" src="../../assets/image/xuan/h5ico_58.png" alt="">
           </p>
           <p class="content">
               “裸辞后做了自己的淘宝店铺，可是社保不能断啊，因为我还要去医院定期开药，
               然后经过朋友推荐，度娘和知乎了解，综合比较还是选择了“河马代缴”，客服很
               贴心的帮我讲解及帮我考虑问题”。
           </p>
          <div class="fuhao-box">
              <img class="fuhao" src="../../assets/image/xuan/h5ico_62.png" alt="">
          </div>
           <p class="bottom-p">嘟嘟 个人创业者</p>
       </div>
       <div class="input">
           <p class="p-1">请客服来电为您介绍</p>
           <p class="p-2">我们会在 1个工作日内与您联系</p>
           <form action="" id="form-data">
               <input type="hidden" name="type" :value="data.type">
               <input class="text" type="text" placeholder="请填写您的姓名" name="name" v-model="data.username" ><br>
               <input class="text" type="text" placeholder="请填写您的手机号" name="mobile" v-model="data.phones"  ><br>
               <textarea class="textarea" type="textarea" placeholder="请填写您的咨询事项" name="issue" v-model="data.content"></textarea>
           </form>
           <div class="bottom-btn">
               <button class="mian" @click="zixunsubmit">免费咨询</button>
               <div class="box">
                   <p class="box-p1">免费咨询专线</p>
                   <p class="box-p2">010-62750314</p>
               </div>
           </div>
       </div>
       <div class="img-logo">
           <img src="../../assets/image/xuan/h5ico_68.png" alt="">
       </div>
       <div class="after-bottom">
           <div class="after1">
              <p class="after1-1">关于我们</p>
               <p class="after1-2">
                   河马代缴是北京国研方略信息科学研究院倾心打造，为了保障用户的权益，可以快速高效的缴纳社保和相关业务的拳头产品。个人和企业客户可以使用河马代缴高速高效的办理代缴社保等人力资源服务内容,河马代缴——打造您贴身的社保管家，解决您的一切社保代缴补缴问题。
               </p>
           </div>
           <div class="after2">
               <p class="after1-1">联系方式</p>
              <p class="after1-2">
                  <a  href="tel:010-62750413">
                      <img src="../../assets/image/xuan/h5ico_72.png" alt="">
                      <span>010-62750413</span>
                  </a>
              </p>
               <p  class="after1-2">
                   <img src="../../assets/image/xuan/h5ico_75.png" alt="">
                   <span>hemadj@126.com</span>
               </p>
               <p class="after1-2">
                   <img src="../../assets/image/xuan/h5ico_77.png" alt="">
                   <span>北京朝阳区北苑东路中国铁建广场F座</span>
               </p>
           </div>
           <div class="ban">
               <p>版权所有 © 2019   北京国研方略信息科学研究院</p>
           </div>
       </div>
       <div class="mark" v-show="data.markShow" @click="close">
           <img src="../../assets/image/xuan/bounced-h5_03.png" alt="" @click="close">
       </div>
   </div>
</template>

<script lang="ts">
    import {Component,Vue} from "vue-property-decorator";
    import {Message} from "element-ui";
    import Http from "../../extend/Http";
    import Utils from '@/extend/Utils';
    import router from "@/router";

    @Component({})
    export default class App extends Vue {
        public data: any = {
                 markShow:false,
                 phone:'',
                 phones:'',
                 username:'',
                 content:'',
                 type:''
             };
        async created(){
            let url = Utils.getInstance().getParams(location.href);
            this.data.type = url.type
        }
        async zixun(){
            let phone = this.data.phone
            if(!(/^1[3456789]\d{9}$/.test(phone)) ){
                Message({
                    message: "请输入正确的手机号码", duration: 1500, type: "error"
                });
            }else {
                let post = Object.assign(Utils.getInstance().serialize(document.getElementById('form-datas')));
                let res = await Http.getInstance().ctOrder(post);
                console.log(res)
                this.$router.push('/login')
                Message({
                    message: "数据提交成功", duration: 1500, type: "success"
                });
                localStorage.setItem('phone', phone);
            }
        }
        span(){
            this.$router.push('/index')
        }
        spans(){
            this.$router.push('/login')
        }
        close(){
            this.data.markShow = false
        }
        async zixunsubmit(){
            let phone = this.data.phones
            if(!(/^1[3456789]\d{9}$/.test(phone))){
                Message({
                    message: "请输入正确的手机号码", duration: 1500, type: "error"
                });
            }else{
                let post = Object.assign(Utils.getInstance().serialize(document.getElementById('form-data')));
                console.log(post)
                let res = await Http.getInstance().ctOrder(post);
                console.log(res)

                if(res.code == 1){
                    this.$router.push('/login')
                    Message({
                        message: "数据提交成功", duration: 1500, type: "success"
                    });
                    localStorage.setItem('phone', phone);
                    this.data.phones = ''
                    this.data.username = ''
                    this.data.content = ''
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import './xuan.scss';

</style>
