标签：orderId Vue 短信 font height 发送 phone van 0px

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。