修改

src/pages/usercenter/passengerList.vue

@@ -148,7 +148,7 @@
   }
 
   .order-info-block .buy-title {
-    margin-bottom: 5px;
+    margin-bottom: 35px;
     font-size: 20px;
     font-weight: bold;
   }
@@ -290,19 +290,21 @@
           <!-- 旅客资料开始 -->
           <div class="order-info-block" v-if="shape==1">
             <div class="buy-title">旅客資料
-              <q-btn color="amber" @click="SavePassenger()" style="height:50px;font-size:17px;font-weight:bold;"
+              <q-btn color="amber" @click="SavePassenger()" style="float:right;font-size:17px;font-weight:bold;"
                 label="儲存" />
             </div>
             <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"></i>
+                <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">
+              <div class="data-content" v-if="item.isShow">
+                <q-form class="q-gutter-md">
                   <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.SurName" class="bg-grey-1" />
+                      <q-input outlined v-model="item.SurName" :rules="[ val => val && val.length > 0 || '请输入中文姓']" class="bg-grey-1" />
                     </div>
                     <div class="account-group col-6">
                       <div class="account_labelName">中文名</div>
@@ -328,7 +330,15 @@
                   <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.Birthday" class="bg-grey-1" />
+                      <q-input filled v-model="item.Birthday" mask="date">
+                        <template v-slot:append>
+                          <q-icon name="event" class="cursor-pointer">
+                            <q-popup-proxy :ref="'qDateProxy'+index" transition-show="scale" transition-hide="scale">
+                              <q-date v-model="item.Birthday" @input="()=> $refs['qDateProxy'+index][0].hide()" />
+                            </q-popup-proxy>
+                          </q-icon>
+                        </template>
+                      </q-input>
                     </div>
                     <div class="account-group col-6">
                       <div class="account_labelName">性別</div>
@@ -343,7 +353,7 @@
                     *服役中包含替代役，役男身份指年滿18歲至服兵役前，接近役齡指年滿16歲至18歲，若為免役者請勾選否。
                   </div>
                   <div>
-                  <div class="q-gutter-sm">
+                    <div class="q-gutter-sm" style="margin-bottom:15px;">
                       <q-radio v-model="item.MilitaryServiceType" :val="1" label="否" />
                       <q-radio v-model="item.MilitaryServiceType" :val="2" label="服役中" />
                       <q-radio v-model="item.MilitaryServiceType" :val="3" label="役男身份" />
@@ -370,8 +380,8 @@
                       <q-input filled v-model="item.PassportExpiry" mask="date">
                         <template v-slot:append>
                           <q-icon name="event" class="cursor-pointer">
-                          <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
-                            <q-date v-model="item.PassportExpiry" @input="() => $refs.qDateProxy.hide()" />
+                            <q-popup-proxy :ref="'huzhao'+index" transition-show="scale" transition-hide="scale">
+                              <q-date v-model="item.PassportExpiry" @input="()=>$refs['huzhao'+index][0].hide()" />
                             </q-popup-proxy>
                           </q-icon>
                         </template>
@@ -384,6 +394,7 @@
                       <q-input filled type="textarea" v-model="item.Remarks" />
                     </div>
                   </div>
+                </q-form>
               </div>
             </div>
           </div>
@@ -493,14 +504,14 @@
               <div class="passRadio">
                 <q-radio v-model="shape" :val="1" label="旅客資料" />
               </div>
-              <div class="passRadio">
+              <div class="passRadio" style="display:none;">
                 <q-radio v-model="shape" :val="2" label="收件資料" />
               </div>
-              <div class="passRadio">
+              <div class="passRadio" style="display:none;">
                 <q-radio v-model="shape" :val="3" label="收據開立" />
               </div>
             </div>
-            <q-btn color="white" text-color="black" style="width:100%;height:40px;margin-top:10px;" label="回訂單明細" />
+            <q-btn color="white" text-color="black" style="width:100%;height:40px;margin-top:10px;display:none;" label="回訂單明細" />
             <q-btn color="primary" style="width:100%;height:40px;margin-top:15px;" label="前往付款" />
           </div>
         </div>
@@ -578,6 +589,10 @@
       this.getTravelGuest();
     },
     methods: {
+      getShow(item){
+        item.isShow=!item.isShow;
+        this.$forceUpdate();
+      },
       GetGuestObj() {
         var obj = {
           Id: 0, //旅客编号
@@ -640,9 +655,15 @@
                 }
                 tempObj.list = [];
                 tempObj.list = newArray;
+                tempObj.list.forEach(x=>{
+                  x.isShow=true;
+                })
               }
             }
             this.GuestObj = tempObj;
+            this.GuestObj.list.forEach(x=>{
+                x.isShow=true;
+            })
           }
         });
       },
@@ -660,6 +681,13 @@
             res => {
               if (res.data.resultCode == 1) {
                 this.getTravelGuest();
+              }else{
+                this.$q.notify({
+                  type: 'negative',
+                  message: res.data.message,
+                  position: 'top',
+                  timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+                })
               }
             },
             err => {}