fixed : 進行預約 -手機格式跑版

HelenHuang

2022-01-26 f1045b35c0f5e1fb487cd8512951ef9198ee10d3

 PAMapp/pages/questionnaire/_agentNo.vue

@@ -23,9 +23,13 @@
              <div class="mdTxt">其他備用聯繫方式</div>
              <div class="ques-header__input-block">
                  <span>Email：</span>
                  <input class="ques-header__input"
                  <input class="ques-header__input  break"
                    :class="{ 'is-invalid': !emailValid}"
                    placeholder="請輸入"
                    v-model="myRequest.email">
              </div>
              <div class="error mt-5 mb-5" style="margin-left:65px">
                  <span v-show="!emailValid">Email格式有誤</span>
              </div>
          </div>
        </div>
@@ -34,14 +38,14 @@
              <div class="mdTxt">您指定的聯繫方式</div>
              <div class="mt-10 ques-header__input-block">
                  <span>Email：</span>
                  <span>{{myRequest.email}}</span>
                  <span class=" break">{{myRequest.email}}</span>
              </div>
          </div>
          <div class="mt-30">
              <div class="mdTxt">其他備用聯繫方式</div>
              <div class="ques-header__input-block">
                  <span>手機：</span>
                  <input class="ques-header__input"
                  <span>手機 : </span>
                  <input class="ques-header__input ml-4"
                    :class="{'is-invalid': !phoneValid}"
                    placeholder="請輸入"
                    maxlength="10"
@@ -115,9 +119,23 @@
    </PopUpFrame>

    <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
        <div class="text--middle  mt-30 sendReserve-txt">預約成功！</div>
        <div class="text--middle sendReserve-txt">您預約的顧問會儘速與您聯絡！</div>
        <div class="mdTxt mt-30 sendReserve-txt">預約成功！</div>
        <div class="mdTxt sendReserve-txt mb-30">您預約的顧問會儘速與您聯絡！</div>
        <!-- TODO: 未串接 api, 隱藏平台滿意度 -->
        <!-- <div class="pam-app-review mb-10">
          <div class="mdTxt mb-10">對於
                <span class="mdTxt text--primary text--bold ">服務媒合</span>
                平台的整體服務，
            </div>
          <div class="mdTxt">您給予幾顆星評價？</div>
        </div>
        <el-rate v-model="score" class="pam-satisfaction-rate fix-chrome-click--issue"></el-rate> -->
        <div class="text--center mdTxt">
          <!-- <el-button @click="closeReservePopUp">略過</el-button>
          <el-button type="primary"
            @click="closeReservePopUp">
            送出
          </el-button> -->
          <el-button type="primary"
            @click="closeReservePopUp">
            我知道了
@@ -166,6 +184,8 @@

    @roleStorage.State
    recommendConsultantItem!:string;

    score ="" ;

    genderOptions=[
      {
@@ -455,6 +475,11 @@
            : true;
    }

    get emailValid() {
      const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      return this.myRequest.email ? rule.test(this.myRequest.email) : true;
    }

    get userInfo(): RegisterInfo {
      const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
      return initUserInfo;
@@ -462,7 +487,7 @@

    get isDisabledSubmitBtn(): boolean {
           return _.includes(this.myRequest.contactType,ContactType.PHONE)
      ? !this.isHopeContactTimeDone()
      ? !this.isHopeContactTimeDone() || !this.emailValid
      : !this.phoneValid;
    }

@@ -478,7 +503,6 @@
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 26px;
}

//drawer最底下文字樣式
@@ -489,7 +513,9 @@
  color: #ED1B2E;
  cursor: pointer;
}

.error {
  color:$PRIMARY_RED
}
//送出按鈕樣式與排版
.ques-footer{
  justify-content: center;
@@ -551,7 +577,10 @@
      transform: translate(-12px, 0);
  }
}

.break{
  word-break: break-all;
  line-height: 1.2;
}
.ques-page--reset.pam-page-container {
  margin: 0px auto;
}
@@ -584,7 +613,7 @@
    @extend .text--middle,.mt-10 ;
    .ques-header__input{
      &.is-invalid{
        border: 2px solid $PRIMARY_RED !important;
        border: 1px solid $PRIMARY_RED !important;
      }
      flex: 1;
      height: 50px;
@@ -597,12 +626,24 @@
      -moz-box-sizing: border-box;
    }
  }

  .ml-4{
    margin-left: 4px;
  }
  .ques-container {
    position: relative;
    margin: 0px 20px;
  }

.pam-app-review{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pam-satisfaction-rate{
  margin-bottom: 45px;
}

  @include desktop{
  .ques-header{
@@ -630,5 +671,6 @@
  }
}


</style>