<template>
<div class="register-container">
    <van-icon name="arrow-left" @click="$router.go(-1)" />
    <img src="@/assets/images/logo.png" class="logo-img" alt="">
    <div class="form-content">
       <van-cell-group>
            <van-field
                :value="value"
                placeholder="请输入用户名"
                :border="hasBorder"
                bind:change="onChange"
            >
            <img class="icon-user" src="@/assets/images/icon-user.png" slot="left-icon" alt="">
            </van-field>
            <van-field
                :value="value"
                placeholder="请输入验证码"
                :border="hasBorder"
                bind:change="onChange"
            >
              <img class="icon-user" src="@/assets/images/icon-code.png" slot="left-icon" alt="">
              <van-button slot="button" size="small" type="primary" class="verify-code">发送验证码</van-button>
            </van-field>
             <van-field
                :value="value"
                placeholder="请输入推荐人邀请码（非必填）"
                :border="hasBorder"
                bind:change="onChange"
            >
            <img class="icon-user" src="@/assets/images/icon-invite-code.png" slot="left-icon" alt="">
            </van-field>
        </van-cell-group>
        <van-button  class="btn-submit" @click="register">注册</van-button>
    </div>
    <van-overlay 
        :show="show" 
        class-name="registerEorr"
        @click="onClickHide">
        <div class="wrapper" @click.stop>
           <div class="title">{{title}}</div>
           <div class="error-tip"></div>
           <div class="tip">{{tip}}</div>
           <van-button>确定</van-button>
        </div>
    </van-overlay>
</div>
</template>
<script>
export default {
     name:'register',
     data(){
         return {
             value:'',
             hasBorder:false,
             show: true,
             title:'注册失败',
             tip:'该推荐人邀请码不存在，请重新填写'
         }
     },
    methods: {
        register(){
            //  this.show = true
    
        },
        onClickHide(){
            this.show = false
        }
     }
 }
</script>
<style lang="scss" scoped>
.register-container{
    height: 100vh;
    background-color: #ffffff;
    padding: 54px 15px 0 15px;
    box-sizing: border-box;
    overflow: hidden;
    .van-icon-arrow-left{
        position: absolute;
        left: 15px;
        top: 9px;
        // display: block;
        // font-size: 25px;
        // color: #333;
        // margin: 13px 0 0 15px;
    }
    .logo-img{
        width: 102px;
        height: 102px;
        display: block;
        margin: 0 auto 50px;
    }
    .form-content{
        padding:  0 15px;
        .van-field__left-icon{
           display: flex;
           align-items: center;
        }
        .van-cell-group::after{
            display: none;
        }
        .van-cell{
            background-color: #f9f9f9;
            border-radius: 25px;
            margin-bottom: 20px;
        }
    }
    .icon-user{
        width: 18px;
        height:18px;
    }
    .icon-code{
        width: 16px;
        height:18px;
    }
    .icon-code{
        width: 17px;
        height:17px;
    }
    .btn-submit{
        width: 100%;
        height: 44px;
        background-image: linear-gradient(72deg, 
            #88c678 0%, 
            #95e87f 100%), 
        linear-gradient(
            #999999, 
            #999999);
        background-blend-mode: normal, 
            normal;
        border-radius: 22px;
        color: #ffffff;
        font-size: 18px;
        margin-top: 20px;
    }
    .verify-code{
        background-color: transparent;
        border: none;
        color: #88c677;
    }
    .van-overlay.registerEorr{
        .wrapper{
            width: 315px;
            height: 293px;
            position: absolute;
            background-color: #ffffff;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -60%);
            padding: 30px 0;
            text-align: center;
            box-sizing: border-box;
            border-radius: 4px;
            .title{
                font-size: 20px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 20px;
                letter-spacing: 0px;
                color: #333333;
            }
            .error-tip{
                width: 72px;
                height: 72px;
                border: 6px solid #ff0000;
                border-radius: 50%;
                font-size: 48px;
                font-weight:bold;
                color: #ff0000;
                margin: 25px auto;
                position: relative;
                &:before,&:after{
                    content: "";
                    display: inline-block;
                    width: 6px;
                    height: 30px;
                    background-color:  #ff0000;
                    border-radius: 4px;
                    transform-origin:center ;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                }
                &:before{
                    transform:translate(-50%,-50%) rotate(45deg);
                }
                &:after{
                       transform:translate(-50%,-50%) rotate(-45deg);
                }
            }
            .tip{
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 20px;
                color: #999999;
            }
            .van-button{
                width: 160px;
                height: 36px;
                background-color: #88c678;
                border-radius: 18px;
                color: #ffffff;
                margin-top: 25px;
            }
        }

    }
}
</style>