其他分享
首页 > 其他分享> > Vue 手机发送短信

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解决“;

标签:orderId,Vue,短信,font,height,发送,phone,van,0px
来源: https://www.cnblogs.com/emmawang1988/p/16284204.html