no message

src/pages/usercenter/setUserInfo.vue

@@ -326,9 +326,6 @@ export default {
         console.log('this.$refs[item]', this, item, this.$refs[item])
         this.$refs[item].validate();
       });
-      // this.$refs.Surname.validate();
-      // this.$refs.Name.validate();
-      // this.$refs.BirthDate.validate();
       verifyArr.forEach((item) => {
           console.log('item', item)
         if (this.$refs[item].hasError) {

src/pages/usercenter/setUsersList.vue

@@ -5,7 +5,25 @@
   margin: 10px;
 }
 .content {
-  max-width: 940px;
+  width: 900px;
+}
+.title {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.card {
+  margin: 10px;
+  background: #ffffff;
+  border: 1px solid #eeeeee;
+  border-radius: 8px;
+}
+.card-title {
+  height: 37px;
+  height: 37px;
+  padding: 0 20px;
+  line-height: 37px;
+  background: #f5f5f5;
+  border-radius: 8px 8px 0px 0px;
 }
 .tips {
   height: 42px;
@@ -17,41 +35,103 @@
 ::v-deep .q-field__control {
   height: 40px;
 }
+::v-deep .q-field--auto-height .q-field__control {
+  min-height: 40px;
+}
+::v-deep .q-field__marginal {
+  height: 40px;
+}
 .title {
   margin-top: 20px;
   margin-bottom: 10px;
 }
+.phone {
+  margin-left: 100px;
+}
+.name {
+  width: 300px;
+}
+.user-name {
+  width: 120px;
+}
+.pay-info {
+  width: 120px;
+}
+.order-info {
+  width: 120px;
+}
+.order-action {
+  width: 120px;
+}
+.nav-item {
+  width: 100px;
+  margin: 0 10px;
+  text-align: center;
+}
+.border-bottom {
+  width: 20px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: $primary;
+  margin: -8px auto 0 auto;
+}
 </style>
 <template>
-  <div class="content q-ma-lg bg-white q-pa-lg">
-    <div class="tips">
-      出行人<span class="text-grey-6"
-        >共計 3人，最多新增20人(含本人)</span
-      >
-    </div>
+  <div class="content q-ma-lg bg-white">
     <div>
+      <div class="card" v-for="item in pageData" :key="item.id">
+        <div class="flex card-title justify-between">
+          <div class="flex">
+            <span>订单号</span>
+            <span class="phone">联系客服</span>
+          </div>
+          <span>
+            <span>编辑</span>
+            <span>删除</span>
+          </span>
+        </div>
+        <div class="flex q-py-sm">
+          <div class="row">
+            <div class="col-12">中國內地身份證：510181********0920</div>
+            <div class="col-12">中國內地身份證：510181********0920</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <q-btn
+      color="primary"
+      unelevated
+      outline
+      @click="isShowDialog = true"
+      label="添加出行人"
+    ></q-btn>
+
+    <q-dialog content-style="width: 900px" v-model="isShowDialog">
+      <div class="bg-white dialog-box" style="width: 800px; padding: 20px">
+        <div>添加邮寄地址</div>
+        <form @submit.prevent.stop="submit" class="q-gutter-md">
           <div>
             <div class="row">
               <div class="col">
                 <div class="title">姓</div>
                 <q-input
                   class="form-item"
-              v-model="form.firstName"
+                  v-model="form.Surname"
                   outlined
                   placeholder="姓"
-              ref="firstName"
-              :rules="[(val) => val !== '' || '请输入姓氏']"
+                  ref="Surname"
+                  :rules="[(val) => !!val || '请输入姓氏']"
                 ></q-input>
               </div>
               <div class="col">
                 <div class="title">名</div>
                 <q-input
-              ref="lastName"
+                  ref="Name"
                   class="form-item"
                   placeholder="名"
-              v-model="form.lastName"
+                  v-model="form.Name"
                   outlined
-              :rules="[(val) => val !== '' || '请输入名字']"
+                  :rules="[(val) => !!val || '请输入名字']"
                 ></q-input>
               </div>
             </div>
@@ -60,106 +140,296 @@
                 <div class="title">姓氏（需與旅遊證件一致）</div>
                 <q-input
                   class="form-item"
-              v-model="form.firstName"
+                  v-model="form.EnName"
                   outlined
                   placeholder="姓氏（需與旅遊證件一致）"
-              ref="firstName"
-              :rules="[(val) => val !== '' || '请输入姓氏']"
+                  ref="EnName"
+                  :rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
                 ></q-input>
               </div>
               <div class="col">
                 <div class="title">名字（需與旅遊證件一致）</div>
                 <q-input
-              ref="lastName"
+                  ref="EnSurname"
                   class="form-item"
                   placeholder="名字（需與旅遊證件一致）"
-              v-model="form.lastName"
+                  v-model="form.EnSurname"
                   outlined
-              :rules="[(val) => val !== '' || '请输入名字']"
+                  :rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
                 ></q-input>
               </div>
             </div>
-        <div class="row">
-          <div class="col">
-            <div class="title">居住國家/地區</div>
-            <q-select filled v-model="model" :options="options" label="Filled" />
-          </div>
-          <div class="col">
-            <div class="title">稱謂</div>
-            <q-select filled v-model="model" :options="options" label="Filled" />
-          </div>
-        </div>
 
             <div class="row">
               <div class="col">
                 <div class="title">國家/地區代碼</div>
-            <q-select filled v-model="model" :options="options" label="Filled" />
+                <q-select
+                  ref="PhoneCountry"
+                  square
+                  outlined
+                  option-value="ID"
+                  option-label="PhoneCode"
+                  class="form-item"
+                  v-model="form.PhoneCountry"
+                  :options="phoneCountList"
+                  placeholder="Filled"
+                  :rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
+                />
               </div>
               <div class="col">
                 <div class="title">電話（首次需驗證）</div>
                 <q-input
-              ref="lastName"
+                  ref="Moblie"
                   class="form-item"
-              placeholder="名字（需與旅遊證件一致）"
-              v-model="form.lastName"
+                  placeholder="電話（首次需驗證）"
+                  v-model="form.Moblie"
                   outlined
-              :rules="[(val) => val !== '' || '请输入名字']"
+                  :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
                 ></q-input>
               </div>
             </div>
-        <div class="row">
+
+            <div
+              v-for="(item, index) in form.CardList"
+              :key="item.id"
+              class="row"
+            >
               <div class="col">
-            <div class="title">出生日期</div><q-date
-        v-model="date"
-        minimal
+                <div class="title">证件类型</div>
+                <q-select
+                  ref="card"
+                  square
+                  outlined
+                  option-value="ID"
+                  option-label="Name"
+                  class="form-item"
+                  v-model="item.Type"
+                  :options="cardList"
+                  placeholder="Filled"
+                  :rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
                 />
               </div>
               <div class="col">
-            <div class="title">電子郵件（接收订单确认邮件）</div>
+                <div class="flex justify-between items-center">
+                  <div class="title">证件号码</div>
+                  <div v-if="index > 0" @click="deleteCardItem(item)">删除</div>
+                </div>
                 <q-input
-              ref="lastName"
                   class="form-item"
-              placeholder="名字（需與旅遊證件一致）"
-              v-model="form.lastName"
+                  placeholder="電話（首次需驗證）"
+                  v-model="item.CardNo"
                   outlined
-              :rules="[(val) => val !== '' || '请输入名字']"
+                  :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
                 ></q-input>
               </div>
             </div>
+            <q-btn
+              color="primary"
+              @click="addCard"
+              unelevated
+              outline
+              label="新增证件"
+            />
             <div>
-          <q-btn color="primary" unelevated label="保存" @click="submit" />
+              <q-btn color="primary" type="submit" unelevated label="保存" />
             </div>
           </div>
+        </form>
       </div>
+    </q-dialog>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
+      isShowDialog: false,
+      selectedKey: "全部",
       form: {
-        lastName: "",
-        firstName: "",
+        Surname: "",
+        Name: "",
+        EnName: "",
+        EnSurname: "",
+        Moblie: "",
+        CardList: [],
       },
-      model: '',
-      date: '',
-      options: []
+      model: "",
+      date: "",
+      options: [],
+      cardList: [],
+      phoneCountList: [],
+      count: 0,
+      pageData: [],
     };
   },
+  mounted() {
+    this.id = 0;
+    this.addCard();
+    this.getUsersList();
+    this.getCountryInfo();
+    this.getCardTypeList();
+  },
   methods: {
+    getCardTypeList() {
+      this.apipost(
+        "b2c_post_GetTripCardEnumList",
+        {},
+        (res) => {
+          if (res.data.resultCode == 1) {
+            this.cardList = res.data.data;
+          } else {
+            // this.$notify(res.data.message);
+            this.$q.notify({
+              type: "negative",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+          }
+        },
+        null
+      );
+    },
+    getCountryInfo() {
+      this.apipost(
+        "GetCountryInfo_post",
+        {},
+        (res) => {
+          if (res.data.resultCode == 1) {
+            const { phoneCountList, countList } = res.data.data;
+            this.countList = countList;
+            this.phoneCountList = phoneCountList;
+          } else {
+            // this.$notify(res.data.message);
+            this.$q.notify({
+              type: "negative",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+          }
+        },
+        null
+      );
+    },
+    changeCouponType(item) {
+      this.selectedKey = item;
+    },
+    addCard() {
+      this.id++;
+      this.form.CardList.push({
+        id: this.id,
+      });
+    },
+    deleteCardItem(card) {
+      const index = this.form.CardList.findIndex(item => item.id === card.id)
+      this.form.CardList.splice(index, 1)
+    },
     submit() {
-      const verifyArr = ['fastName', 'lastName'];
+      this.formHasError = false;
+      const verifyArr = [
+        "Surname",
+        "Name",
+        "EnName",
+        "EnSurname",
+        "Moblie",
+      ];
       verifyArr.forEach((item) => {
+        console.log("this.$refs[item]", this, item, this.$refs[item]);
         this.$refs[item].validate();
       });
       verifyArr.forEach((item) => {
-        if (item.$refs[item].hasError) {
+        console.log("item", item);
+        if (this.$refs[item].hasError) {
+          console.log("item", item);
           this.formHasError = true;
         }
       });
-      if ((this.formHasError = true)) {
+      console.log("this.formHasError", this.formHasError, this.form);
+      if (this.formHasError) {
         return;
       }
+      this.submitUserInfo();
+    },
+    getUsersList() {
+      this.apipost(
+        "b2c_post_GetTripGuestPageList",
+        {pageIndex: 1, pageSize: 20},
+        (res) => {
+          if (res.data.resultCode == 1) {
+            const { count, pageData } = res.data.data;
+            this.count = count;
+            this.pageData = pageData;
+          } else {
+            // this.$notify(res.data.message);
+            this.$q.notify({
+              type: "negative",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+          }
+        },
+        null
+      );
+    },
+    deleteUser() {
+      this.apipost(
+        "b2c_post_DelTripGuestInfo",
+        {
+          Id: this.userInfo?.id,
+        },
+        (res) => {
+          if (res.data.resultCode == 1) {
+            this.$q.notify({
+              type: "positive",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+            this.getUsersList();
+          } else {
+            // this.$notify(res.data.message);
+            this.$q.notify({
+              type: "negative",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+          }
+        },
+        null
+      );
+    },
+    submitUserInfo() {
+      let params = { ...this.form };
+      params.PhoneCountry = params.PhoneCountry.ID;
+      params.CardList.forEach(item => {
+        item.Type = item.Type.Id
+      })
+      this.apipost(
+        "b2c_post_SetTripGuestInfo",
+        params,
+        (res) => {
+          if (res.data.resultCode == 1) {
+            this.$q.notify({
+              type: "positive",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+          } else {
+            // this.$notify(res.data.message);
+            this.$q.notify({
+              type: "negative",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+          }
+        },
+        null
+      );
     },
   },
 };