<template>
    <div class="seo-content">
        <div class="seo-head">
            <ul class="head-nav ">
                <li><a href="https://m.ichunt.com">首页</a></li>
                <li><a href="https://m.ichunt.com/v3/activity/xyhyl">新用户礼包</a></li>
                <li><a href="https://m.ichunt.com/product">自营现货</a></li>
                <li><a href="https://m.ichunt.com/v3/lxshop">海外代购</a></li>
                <li><a href="https://m.ichunt.com/v3/about">猎芯网介绍</a></li>
            </ul>
        </div>
        <div class="seo-section">
            <div class="form-box1">
                <!--<div class="form-group clr">-->
                    <!--<span class="fl ">姓名</span>-->
                    <!--<div class="fl input-box">-->
                        <!--<i class="icon iconfont">&#xe655;</i>-->
                        <!--<input type="text" maxlength="50" v-model="form1.name"  placeholder="请输入姓名..." />-->
                    <!--</div>-->
                <!--</div>-->
                <div class="form-group clr">
                    <span class="fl ">手机号码</span>
                    <div class="fr input-box">
                        <i class="icon iconfont">&#xe625;</i>
                        <input type="text"  v-model="form1.mobile"  placeholder="请输入手机号码..." onkeyup="if(event.keyCode !=37 &amp;&amp; event.keyCode != 39){if (!/^[\d]+$/ig.test(this.value)){this.value='';}}"/>
                    </div>
                </div>
                <div class="form-group clr " v-show="form1.imgcodestatus" >
                    <span class="fl ">图片验证码</span>
                    <div class="fr input-box pr">
                        <i class="icon iconfont">&#xe625;</i>
                        <input type="text"   v-model="form1.imgcode"/>
                        <img  alt="猎芯网" class="img-code" v-imgCode/>
                    </div>

                </div>
                <div class="form-group clr" v-show="form1.codestatus">
                    <span class="fl ">验证码</span>
                    <div class="fr input-box pr">
                        <i class="icon iconfont">&#xe625;</i>
                        <input type="text"   v-model="form1.code"/>
                        <div class="code" @click="getCode()" :class="{'dis':codeactive}">{{codetext}}</div>
                    </div>
                </div>

                <div class="form1-tips">{{form1.msg}}</div>
                <div class="submit-button" @click="submitForm()">
                    立即提交，领取288元新用户礼包
                </div>
            </div>
            <div class="img-show-static"></div>
            <div class="zizi-box">
                <div class="zizi-ct">
                    <div class="slide-box">
                        <van-swipe :autoplay="3000">
                            <van-swipe-item ><img src="../../assets/images/seo/three_03.jpg" class="slide-pic" alt="猎芯网" /></van-swipe-item>
                            <van-swipe-item ><img src="../../assets/images/seo/three_04.jpg" class="slide-pic" alt="猎芯网" /></van-swipe-item>
                            <van-swipe-item ><img src="../../assets/images/seo/three_05.jpg" class="slide-pic" alt="猎芯网" /></van-swipe-item>
                            <van-swipe-item ><img src="../../assets/images/seo/three_06.jpg" class="slide-pic" alt="猎芯网" /></van-swipe-item>
                            <van-swipe-item ><img src="../../assets/images/seo/three_08.jpg" class="slide-pic" alt="猎芯网" /></van-swipe-item>
                        </van-swipe>
                    </div>
                </div>
            </div>
            <div class="form-box2">
                <div class="title-form">
                    <img src="../../assets/images/seo/yibi.png" alt="">
                    <span>快速找料</span>
                </div>
                <div class="form-group clr">
                    <div class="fl input-box ">
                        <i class="icon iconfont">&#xe655;<font class="f-red">*</font></i>
                        <input type="text"  v-model="form2.mobile"  placeholder="请输入手机号码..." onkeyup="if(event.keyCode !=37 &amp;&amp; event.keyCode != 39){if (!/^[\d]+$/ig.test(this.value)){this.value='';}}"/>
                    </div>
                </div>
                <div class="form-group clr " v-show="form2.imgcodestatus">
                    <div class="fl input-box pr">
                        <i class="icon iconfont">&#xe625;</i>
                        <input type="text"  placeholder="请输入图片验证码..." v-model="form2.imgcode" />
                        <img  alt="猎芯网" class="img-code" v-imgCode />
                    </div>

                </div>
                <div class="form-group clr" v-show="form2.codestatus">
                    <div class="fl input-box pr">
                        <i class="icon iconfont">&#xe625;</i>
                        <input type="text"   v-model="form2.code"/>
                        <div class="code" @click="getCode('2')" :class="{'dis':codeactive2}">{{codetext2}}</div>
                    </div>
                </div>

                <!--<div class="form-group clr">-->
                    <!--<div class="fl input-box">-->
                        <!--<i class="icon iconfont">&#xe625;<font class="f-red hiddenfont">*</font></i>-->
                        <!--<input type="text"  placeholder="请输入姓名..."/>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="form-group clr">
                    <div class="fl input-box">
                        <i class="icon iconfont">&#xe625;<font class="f-red hiddenfont">*</font></i>
                        <input type="text" maxlength="50"  placeholder="请填写您要查找的型号..." v-model="form2.goods_name" />
                    </div>
                </div>
                <div class="form-group clr">
                    <div class="fl input-box">
                        <i class="icon iconfont">&#xe625;<font class="f-red hiddenfont">*</font></i>
                        <input type="text" maxlength="50"  placeholder="请填写查找的型号品牌..." v-model="form2.brand_name" />
                    </div>
                </div>

            </div>
            <div class="form2-tips">{{form2.msg}}</div>
            <div class="submit-button1" @click="submitForm('2')">
                立即提交，快速找料
            </div>
            <div class="foot-box">
                <div class="foot-box-ct">
                    <a  href="tel:4008-755-881"><i class="icon iconfont">&#xe60b;</i>&nbsp;资讯热线：4008-755-881</a>
                </div>
            </div>
        </div>
        <SideBar :isWindow="isWindow"></SideBar>
        <van-loading type="spinner" color="#000" class="loading-background" v-if="loading"/>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {mapState} from 'vuex'
    import { Swipe, SwipeItem,Toast,Loading } from 'vant';
    import SideBar from '@/views/common/SideBar.vue';
    Vue.use(Swipe).use(SwipeItem).use(Toast).use(Loading);

    export default {
        name: 'seo',
        computed:{
            ...mapState({
                loading: state => state.seo.loading,
                form1ImgShow: state => state.seo.form1ImgShow,
                form2ImgShow: state => state.seo.form2ImgShow,
                form1CodeStatus:state => state.seo.form1CodeStatus,
                form2CodeStatus:state => state.seo.form2CodeStatus,
                isRegLogin:state=> state.seo.isRegLogin
            }),
            mobile(val){
                return this.form1.mobile
            },
            mobile2(val){
                return this.form2.mobile
            }
        },
        data() {
            return {
                loadings:false,
                isWindow:true,//右侧开启窗口监听滚动
                codeactive:false,//form1短信验证码禁用状态
                codeactive2:false,//form2短信验证码禁用状态
                codetext:"获取验证码",//form1发短信按钮文案
                codetext2:"获取验证码",//form2发短信按钮文案
                form1:{
                    mobile:"",
                    code:"",
                    codestatus:false,
                    imgcode:"",
                    imgcodestatus:false,
                    msg:""
                },
                form2:{
                    mobile:"",
                    code:"",
                    codestatus:false,
                    imgcode:"",
                    imgcodestatus:false,
                    msg:"",
                    goods_name:"",
                    brand_name:""
                }
            }
        },
        methods: {
            //短信倒计时form1
            timeNum() {
                var me = this;
                var wait = 60;
                me.codeactive = true;
                me.codetext = wait + '秒后获取';
                var clock = setInterval(doLoop, 1000);

                function doLoop() {
                    wait--;
                    if (wait > 0) {
                        me.codetext = wait + '秒后获取';
                        me.codeactive = true;
                    } else {
                        clearInterval(clock);
                        me.codeactive = false;
                        me.codetext = '重新获取';
                        wait = 60;
                    }
                }
            },
            //短信倒计时form1
            timeNum2() {
                var me = this;
                var wait = 60;
                me.codeactive2 = true;
                me.codetext2 = wait + '秒后获取';
                var clock = setInterval(doLoop, 1000);

                function doLoop() {
                    wait--;
                    if (wait > 0) {
                        me.codetext2 = wait + '秒后获取';
                        me.codeactive2 = true;
                    } else {
                        clearInterval(clock);
                        me.codeactive2 = false;
                        me.codetext2 = '重新获取';
                        wait = 60;
                    }
                }
            },
            //获取验证码
            getCode(type_){
                var form_=(type_==2)?"form2":"form1"
                if(this[form_]['imgcodestatus']){
                    if(!this[form_]['imgcode']){
                        Toast({
                            message: "请确认图片验证码",
                            duration: 3000
                        });
                        return;
                    }
                }
                var codeactive=(type_==2)?"codeactive2":"codeactive"
                if(this[codeactive]){
                    return
                }
                this.$store.dispatch({
                    type: 'smsVerify',
                    mobile: this[form_]['mobile'],
                    verify:this[form_]['imgcode'],
                    types:form_
                })
            },

            //提交表单form1
            submitForm(type_){
                var form_=(type_==2)?"form2":"form1"
                var r = /^1[3456789]\d{9}$/;
                if (r.test(this[form_]['mobile'])) {
                    this[form_]['msg']=""
                } else {
                    this[form_]['msg']="请输入正确格式的手机号码"
                    return;
                }
                if(!this[form_]['code']){
                    this[form_]['msg']="验证码不能为空"
                    return;
                }else{
                    this[form_]['msg']=""
                }
                this.$store.dispatch({
                    type: 'actionLogin',
                    account: this[form_]['mobile'],
                    sms_verify:this[form_]['code'],
                    form_name:form_
                })
            }

        },
        watch: {
            form2CodeStatus(val){
                if(val){
                    this.timeNum2();
                }
            },
            form1CodeStatus(val){
                if(val){
                    this.timeNum();
                }
            },
            form1ImgShow(val){
                this.form1.imgcodestatus=val;
            },
            form2ImgShow(val){
                this.form2.imgcodestatus=val;
            },
            mobile(val) {
                var r = /^1[3456789]\d{9}$/;
                if (r.test(val)) {
                    this.form1.msg=""
                    this.form1.codestatus = true;
                } else {
                    this.form1.msg="请输入正确格式的手机号码"
                    this.form1.codestatus = false;
                }
            },
            mobile2(val) {
                var r = /^1[3456789]\d{9}$/;
                if (r.test(val)) {
                    this.form2.msg=""
                    this.form2.codestatus = true;
                } else {
                    this.form2.msg="请输入正确格式的手机号码"
                    this.form2.codestatus = false;
                }
            },
            isRegLogin(val){
                if(val){
                    var datajson_={
                        brand:this.form2.brand_name,
                        type:this.form2.goods_name
                    }
                    //登录成功调用反馈接口
                    this.$store.dispatch({
                        type: 'feedback',
                        types:8,
                        mobile: this.form2.mobile,
                        content:JSON.stringify(datajson_)
                    })
                }
            }
        },
        components: {
            SideBar
        }
    }
</script>

<style scoped>
    @import "../../assets/css/seo/index.min.css";
</style>