修改

src/pages/usercenter/passengerList.vue

@@ -159,7 +159,10 @@
     padding-left: 20px;
     list-style-type: disc;
   }
-
+  .order-buy .q-field--with-bottom{
+    padding-bottom:0!important;
+    margin-bottom:20px;
+  }
   .account_labelName {
     margin: 20px 0 10px 0;
     font-size: 15px;
@@ -170,9 +173,12 @@
   }
 
   .order-buy .q-field__control {
-    min-height: 46px !important;
+    min-height: 46px;
+  }
+  .otherBeizhu .q-field__control{
+    min-height:auto;
+    height:auto;
   }
-
   .order-buy .q-field__native {
     min-height: 46px;
   }
@@ -245,7 +251,11 @@
     background-color: #fffde7;
     color: #ff9800;
   }
-
+  .isShowDiv{
+    visibility:hidden;
+    height:0;
+    padding:0;
+  }
 </style>
 <template>
   <q-page>
@@ -290,17 +300,17 @@
           <!-- 旅客资料开始 -->
           <div class="order-info-block" v-if="shape==1">
             <div class="buy-title">旅客資料
-              <q-btn color="amber" @click="SavePassenger()" type="submit" style="float:right;font-size:17px;font-weight:bold;"
+              <q-btn color="amber" @click="getConnect()" type="submit" style="float:right;font-size:17px;font-weight:bold;"
                 label="儲存" />
             </div>
+            <q-form ref="myForm" class="q-gutter-md">
               <div class="member-data" v-for="(item,index) in GuestObj.list" :key="index">
                 <div class="data-header">
                   <div class="gustNum">旅客 {{index+1}}</div>
                   <i class="iconfont iconarrow-top" v-if="item.isShow" @click="getShow(item)"></i>
                   <i class="iconfont iconarrowdown" v-else @click="getShow(item)"></i>
                 </div>
-              <div class="data-content" v-if="item.isShow">
-                <q-form class="q-gutter-md">
+                <div class="data-content" :class="{'isShowDiv':!item.isShow}">
                     <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
                       <div class="account-group col-6">
                         <div class="account_labelName">中文姓</div>
@@ -308,29 +318,29 @@
                       </div>
                       <div class="account-group col-6">
                         <div class="account_labelName">中文名</div>
-                      <q-input outlined v-model="item.Name" class="bg-grey-1" />
+                        <q-input outlined v-model="item.Name" :rules="[ val => val && val.length > 0 || '请输入中文名']" class="bg-grey-1" />
                       </div>
                     </div>
                     <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
                       <div class="account-group col-6">
                         <div class="account_labelName">護照姓 ( 英文 )</div>
-                      <q-input outlined v-model="item.ESurName" class="bg-grey-1" />
+                        <q-input outlined v-model="item.ESurName" :rules="[ val => val && val.length > 0 || '请输入護照姓']" class="bg-grey-1" />
                       </div>
                       <div class="account-group col-6">
                         <div class="account_labelName">護照名 ( 英文 )</div>
-                      <q-input outlined v-model="item.EName" class="bg-grey-1" />
+                        <q-input outlined v-model="item.EName" :rules="[ val => val && val.length > 0 || '请输入護照名']" class="bg-grey-1" />
                       </div>
                     </div>
                     <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
                       <div class="account-group col-6">
                         <div class="account_labelName">身分證字號</div>
-                      <q-input outlined v-model="item.IdCard" class="bg-grey-1" />
+                        <q-input outlined v-model="item.IdCard" :rules="[ val => val && val.length > 0 || '请输入身分證字號']" class="bg-grey-1" />
                       </div>
                     </div>
                     <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
                       <div class="account-group col-6">
                         <div class="account_labelName">出生日期</div>
-                      <q-input filled v-model="item.Birthday" mask="date">
+                        <q-input filled v-model="item.Birthday" mask="date" :rules="[ val => val && val.length > 0 || '请选择出生日期']">
                           <template v-slot:append>
                             <q-icon name="event" class="cursor-pointer">
                               <q-popup-proxy :ref="'qDateProxy'+index" transition-show="scale" transition-hide="scale">
@@ -373,11 +383,11 @@
                     <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
                       <div class="account-group col-6">
                         <div class="account_labelName">護照號碼</div>
-                      <q-input outlined v-model="item.PassportNo" class="bg-grey-1" />
+                        <q-input outlined v-model="item.PassportNo" :rules="[ val => val && val.length > 0 || '请填写護照號碼']" class="bg-grey-1" />
                       </div>
                       <div class="account-group col-6">
                         <div class="account_labelName">護照效期截止日期</div>
-                      <q-input filled v-model="item.PassportExpiry" mask="date">
+                        <q-input filled v-model="item.PassportExpiry" mask="date" :rules="[ val => val && val.length > 0 || '请选择護照效期截止日期']">
                           <template v-slot:append>
                             <q-icon name="event" class="cursor-pointer">
                               <q-popup-proxy :ref="'huzhao'+index" transition-show="scale" transition-hide="scale">
@@ -389,14 +399,14 @@
                       </div>
                     </div>
                     <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
-                    <div class="account-group col-12">
+                      <div class="account-group col-12 otherBeizhu">
                         <div class="account_labelName">其他備註</div>
-                      <q-input filled type="textarea" v-model="item.Remarks" />
+                        <q-input filled type="textarea" class="col" v-model="item.Remarks" />
                       </div>
                     </div>
-                </q-form>
                 </div>
               </div>
+            </q-form>
           </div>
           <!-- 旅客资料结束 -->
           <!-- 收件资料开始 -->
@@ -669,7 +679,7 @@
       getConnect(){
         this.$refs.myForm.validate().then(success => {
           if (success) {
-            // yay, models are correct
+            this.SavePassenger();
           }
           else {
             // oh no, user has filled in