Vue 手机发送短信
<template>
<div class="resentMassage">
<van-nav-bar
:title='title'
@click-left="onClickLeft"
:border="false"
>
<template #left>
<van-icon size="20px" class="back" name="down"/>
</template>
</van-nav-bar>
<div class="abs-box">
<div class="bill-phone">取票人手机号码</div>
<van-field
input-align="center"
v-model="phone"
clearable
placeholder="请输入取票人手机号"
size="large"
/>
<div :class="[!isClick?'yellowBtn':'GrayBtn']" @click="resentMsg()">
<div :hidden="isClick">发送短信</div>
<div>
<van-count-down ref="countDown" time="5000" :hidden="!isClick" :auto-start="false" @finish="finish">
<template #default="timeData">
<span class="countTime" style="display: inline-block;">发送短信 : {{ timeData.seconds + 1 }}S</span>
</template>
</van-count-down>
</div>
</div>
</div>
<!-- <van-button :disabled="isClick" type="primary" @click="resentMsg()" block>发送短信</van-button>-->
<!--<div class="btn pst" @click="resentMsg()">发送短信</div>-->
</div>
</template>
<script>
// 以下为接口调用示例，接口定义在下面的文件里
import {resentMassage} from "@/api/order";
import Vue from 'vue';
import {Dialog} from 'vant';
import {Field} from 'vant';
import {Toast} from 'vant';
Vue.use(Toast);
Vue.use(Field);
export default {
data() {
return {
title: "重发短信",
phone: "",
orderId: "",
/*点击的时候置灰*/
isClick: false,
keyword: "",
};
},
created() {
this.phone = localStorage.getItem("phone");
this.orderId = this.$route.params.orderId;
this.keyword = this.$route.params.keyword;
this.isSearch = this.$route.params.isSearch;
},
methods: {
start() {
console.log(this.$refs.countDown, 999)
this.$refs.countDown.start();
},
finish() {
this.isClick = false
this.$refs.countDown.reset();
},
resentMsg() {
/*关于手机号的判断*/
let reg_str = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
if (this.phone == "" || this.phone == null) {
Toast.fail('手机号不能为空');
return
}
if (!reg_str.test(this.phone)) {
Toast.fail('请输入正确的手机号');
return
}
if (!this.isClick) {
resentMassage({
orderId: this.orderId,
recipientMobile: this.phone
})
.then((res) => {
if (res.data.code == 200) {
Toast.success('发送成功');
}
})
// 激活失败
.catch((error) => {
});
this.isClick = true
this.$refs.countDown.start();
}
},
onClickRight() {
this.$router.push({
name: 'home',
})
},
onClickLeft() {
this.$router.push({
name: 'orderListDetail',
params: {
orderId: this.orderId,
keyword: this.keyword,
isSearch: this.isSearch,
}
})
},
backButton() {
this.$router.push({
name: 'orderListDetail',
params: {
orderId: this.orderId,
keyword: this.keyword,
isSearch: this.isSearch,
}
})
},
},
destroyed() {
window.removeEventListener('popstate', this.backButton, false);//false阻止默认事件
},
mounted() {
//监听返回键
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.backButton, false);//false阻止默认事件
}
},
};
</script>
<style scoped lang="scss">
@import '../../assets/css/common.css';
.back {
transform: rotate(90deg);
color: #333333;
}
/deep/ .van-nav-bar__content {
background: #FAFAFA;
}
.resentMassage {
min-height: 100vh;
background: #FAFAFA;
position: relative;
.abs-box {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
.bill-phone {
text-align: center;
font-weight: 400;
color: #333333;
font-size: 14px;
margin-bottom: 10px;
}
}
.van-cell {
&.van-cell--large {
&.van-field {
margin: 0 auto;
width: 90%;
box-shadow: 0rem 1rem 1rem 0rem rgba(0, 0, 0, 0.05);
text-align: center;
border-radius: 28px;
border: 1px solid #D6D6D6;
.van-field__control {
padding: 18px 0 0 17px;
}
}
}
}
.countTime {
display: block;
height: 55px;
line-height: 55px;
color: #ffffff;
}
.pst {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
/deep/ .van-nav-bar .van-icon {
color: #47494C;
}
/deep/ .van-nav-bar__arrow {
margin-right: 4px;
font-size: 24px;
}
.yellowBtn {
width: 90%;
margin: 80px auto 0;
background: #FFAD42;
border-radius: 28px;
text-align: center;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
height: 55px;
line-height: 55px;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 20px 30px 0px rgba(255, 166, 75, 0.25);
}
.GrayBtn {
width: 75%;
margin: 80px auto 0;
background: #ADAFB0;
border-radius: 28px;
text-align: center;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
height: 55px;
line-height: 55px;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08), 0px 20px 30px 0px rgba(255, 166, 75, 0.25);
}
}
</style>
工作中如果有您解决不了的问题或者您花费2小时还没解决的问题，这里可以有偿帮您高效直接解决bug，wx号：18062748486,备注”bug解决“；
