<style scoped>
.veri-code{
width: 100%;
.veri-send{
width: 100%;
height: 91px;
position:relative;
overflow:hidden;
>.sendBtn{
background:url(../assets/images/hongbao_code_btn.jpg) 100% 100% no-repeat;
background-size: contain;
display: inline-block;
width: 171px;
height: 91px;
z-index:2;
position: absolute;
right:0;
top:0;
span{
display: inline-block;
width: 171px;
height: 91px;
line-height: 91px;
text-align: center;
font-family: PingFangSC;
font-size: 32px;
font-weight: 600;
color: #c31222;
}
}
}
.veri-activated{
>.sendBtn{
span{
background:url(../assets/images/hongbao_code_btn_disabled.jpg) 100% 100% no-repeat;
background-size: contain;
color:#8e0612;
}
}
}
}
</style>
<template>
<div class="veri-code">
<div :class="['veri-send',{'veri-activated':isSended || activityEnd}]">
<txt-input placeholder="请输入手机号" max-length="11" type="tel"></txt-input>
<div class="sendBtn">
<span v-if="!isSended" @click="getVeriCode">验证码</span>
<span v-if="isSended">{{seconds}}s</span>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import TxtInput from './TxtInput.vue';
import bus from '../lib/bus';
export default Vue.extend({
name:'veri-code',
components:{
'txt-input':TxtInput
},
data(){
return {
seconds:60,
left_time:0,
isSended: false
}
},
props: {
sended: {
default: this.isSended
},
activityEnd:{
default: false
}
},
watch:{
sended: function(val,oldVal){
this.isSended = this.sended;
if(this.sended & this.left_time == 0){
let _this = this,flag = this.seconds;
let setSended = () => {
clearInterval(timmer);
_this.isSended = false;
_this.seconds = flag;
_this.$parent.codeSended = false;
};
let timmer = setInterval(function(){
_this.seconds > 1 ? _this.seconds-- : setSended()
},1000);
}
},
left_time: function(val,oldVal){
this.defaultState()
}
},
methods: {
getVeriCode: function(){
this.$parent.getVeriCode()
},
defaultState: function(){
if(this.left_time != 0){
let _this = this,flag = this.seconds;
this.seconds = this.left_time
this.sended = true
let setSended = () => {
clearInterval(timmer);
_this.sended = false;
_this.seconds = flag;
this.left_time = 0;
};
let timmer = setInterval(function(){
_this.seconds > 0 ? _this.seconds-- : setSended()
},1000);
}
},
},
// created(){
// this.defaultState()
// }
})
</script>