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解决“；
/> <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解决“；
标签：orderId,Vue,短信,font,height,发送,phone,van,0px 来源： https://www.cnblogs.com/emmawang1988/p/16284204.html