<template>
<div class="chain-main">
<van-swipe :autoplay="3000" :height="bannerHeight">
<van-swipe-item > <img src="../../assets/images/chain/banner1.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/banner2.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/banner3.png" height="100%" width="100%"></van-swipe-item>
</van-swipe>
<!-- 立即报关 -->
<div class="customs_one">
<div class="customs">
<div class="cus_input clear">
<dl class="dl_text">
<dt>您的需求：</dt>
<dd>
<textarea name="need" id="need" maxlength="100" v-model="needVal" placeholder="描述您的进口报关需求，以便我们为您分配专门的对接人员跟进联系。" info-empty="亲，请告知我们您的需求详细" class="require" autocomplete="off"></textarea>
<span class="msg"><b id="contentCountLeft">{{needValLength}}</b>/100</span>
</dd>
</dl>
<dl class="dl_name">
<dt>您的称呼：</dt>
<dd><input type="text" name="link_name" id="linkName" v-model="linkName" maxlength="10" info-empty="请输入您的称呼" info-max="您的名字太长无法输入" placeholder="请输入您的称呼" class="require" autocomplete="off">
</dd>
</dl>
<dl class="contact_way">
<dt class="box_select">
<div class="select-top">
<span>手机号码：</span>
</div>
</dt>
<dd class="select_input">
<input type="text" name="mobile" v-model="mobile" id="inputMobile" maxlength="11" onkeyup="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');" class="inputMobile" placeholder="请输入手机号码" autocomplete="off">
</dd>
</dl>
<!-- 重新发送3次短信验证码才会显示 -->
<dl class="updateCodeImg" v-show="imgcodestatus">
<dt>图片验证：</dt>
<dd>
<p class="code-text fl"><input type="text" id="imgCode" v-model="imgcodeval" placeholder="图片验证码"></p>
<a href="javascript:void(0);" class="code fr"><img v-imgCode ></a>
</dd>
</dl>
<dl class="smsCode" v-show="codestatus">
<dt>短信验证：</dt>
<dd>
<input type="text" name="verifyCode" class="verifyCode fl" v-model="codeval" autocomplete="off" placeholder="短信验证码">
<input type="button" name="codeButton" class="codeButton fr" :class="{'dis':codeactive}" :value="codetext" @click="getCode()">
</dd>
</dl>
</div>
<div class="tipMsg f-orange" style="">{{tipMsg}}</div>
<div class="cus_but"><a href="javascript:void(0);" id="embed-submit" class="but check_verify" @click="submitForm()">我要报关</a></div>
</div>
</div>
<!-- 进口报关流程 -->
<div class="customs_box">
<p class="customs_title">进口报关流程</p>
<div class="customs_img">
<img src="https://static.ichunt.com/dist/res/m/images/scm/scm1.png" alt="进口报关流程">
</div>
<p class="customs_email ta-l">邮箱：olh@ichunt.com</p>
</div>
<!-- 猎芯发展历程 -->
<div class="customs_box">
<p class="customs_title title_top">猎芯发展历程</p>
<div class="customs_img">
<img src="https://static.ichunt.com/dist/res/m/images/scm/scm2.png" alt="猎芯发展历程">
</div>
</div>
<!-- 荣誉资质 -->
<div class="customs_box">
<p class="customs_title title_top title_center_go">荣誉资质</p>
<div class="customs_img">
<van-swipe :autoplay="3000" :height="bannerHeight">
<van-swipe-item > <img src="../../assets/images/chain/prizes/1.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/2.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/3.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/4.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/5.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/6.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/7.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/8.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/9.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/10.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/11.png" height="100%" width="100%"></van-swipe-item>
<van-swipe-item > <img src="../../assets/images/chain/prizes/12.png" height="100%" width="100%"></van-swipe-item>
</van-swipe>
</div>
</div>
<!-- 使命&愿景&价值观 -->
<div class="customs_box customs_box0">
<p class="customs_title title_top title_center_go">使命&愿景&价值观</p>
<div class="customs_img">
<img src="../../assets/images/chain/1.jpg" alt="使命&愿景&价值观">
</div>
</div>
<!-- 立即报关 -->
<div class="scm_but">
<a href="javascript:void(0);" v-backTopWindow class="cus_but_bottom">立即报关<span class="cus_arrow"></span></a>
</div>
<van-loading type="spinner" color="#000" class="loading-background" v-if="loading"/>
</div>
</template>
<script>
import Vue from 'vue';
import {mapState} from 'vuex'
import {Loading,Swipe,SwipeItem,Toast} from 'vant';
Vue.use(Loading).use(Swipe).use(SwipeItem).use(Toast);
export default {
name:"chain",
data(){
return{
bannerHeight:220,
needVal:"",
needValLength:0,
tipMsg:"",
linkName:"",
mobile:"",
codetext:"获取验证码",
codeactive:false,
codestatus:false,
imgcodestatus:false,
imgcodeval:"",
codeval:""
}
},
computed:{
...mapState({
loading: state => state.chain.loading,
formImgShow: state => state.chain.formImgShow,
formCodeStatus:state => state.chain.formCodeStatus,
})
},
created(){
},
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;
}
}
},
getCode:function(){
if(this['imgcodestatus']){
if(!this['imgcodeval']){
Toast({
message: "请确认图片验证码",
duration: 3000
});
return;
}
}
if(this.codeactive){
return
}
this.$store.dispatch({
type: 'chainSmsVerify',
mobile: this['mobile'],
verify:this['imgcodeval']
})
},
submitForm:function(){
if(this.needVal.length<10){
console.log(55)
this.tipMsg='亲,您的详细需求最少10个字';
return;
}else{
this.tipMsg="";
}
var reg= /^[\u0391-\uFFE5A-Za-z]+$/;
if( !reg.test(this.linkName)){
this.tipMsg='亲,称呼只能为英文和中文';
return;
}else{
this.tipMsg='';
}
var r = /^1[3456789]\d{9}$/;
if (r.test(this['mobile'])) {
this['tipMsg']=""
} else {
this['tipMsg']="请输入正确格式的手机号码"
return;
}
if(!this['codeval']){
this['tipMsg']="验证码不能为空"
return;
}else{
this['tipMsg']=""
}
this.$store.dispatch({
type: 'chainFindBg',
need: this['needVal'],
mobile:this['mobile'],
linkName:this['linkName'],
verifyCode:this['codeval']
})
}
},
watch:{
needVal(val){
this.needValLength=val.length;
if(val.length<10){
this.tipMsg='亲,您的详细需求最少10个字'
}else{
this.tipMsg="";
}
},
linkName(val){
var reg= /^[\u0391-\uFFE5A-Za-z]+$/;
if( !reg.test(val)){
this.tipMsg='亲,称呼只能为英文和中文';
}else{
this.tipMsg='';
}
},
mobile(val){
var r = /^1[3456789]\d{9}$/;
if (r.test(val)) {
this.tipMsg=""
this.codestatus = true;
} else {
this.tipMsg="请输入正确格式的手机号码"
this.codestatus = false;
}
},
formCodeStatus(val){
if(val){
this.timeNum();
}
},
formImgShow(val){
this.imgcodestatus=val;
},
}
}
</script>
<style scoped>
@import "../../assets/css/chain/chain.min.css";
</style>