<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解決“；