个人中心页面开发

src/components/base-switch.vue

@@ -33,7 +33,7 @@
   left:0px;
 }
 .wrapper input:checked + label {
-  background:green;
+  background:#66D344;
 }
 .wrapper input:checked + label::before {
   left: calc(100%);

src/components/navs/hor-big-one.vue

@@ -266,7 +266,7 @@ color: #EE4454;
         </q-btn>
         <q-btn label="帮助中心" flat></q-btn>
         <q-btn v-if="LoginUser.id <= 0" label="注册" flat></q-btn>
-        <template v-if="LoginUser.id > 0">
+        <template v-if="LoginUser.token">
           <q-btn-dropdown
             style="color: #444; font-weight: bold"
             class="q-ml-lg"

src/css/app.scss

@@ -99,6 +99,9 @@
 .f20 {
     font-size: 20px;
 }
+.f22 {
+    font-size: 22px;
+}
 .f26 {
     font-size: 26px;
 }

src/pages/usercenter/setAddress.vue

@@ -98,14 +98,13 @@
           color="blue"
           unelevated
           outline
-          @click="isShowDialog = true"
-          label="添加郵寄地址"
-        ></q-btn>
+          @click="addAddress"
+        ><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/address-add.png" />添加郵寄地址</q-btn>
       </div>
     </div>
     <q-dialog content-style="width: 900px" v-model="isShowDialog">
       <div class="bg-white dialog-box" style="width: 800px; padding: 20px">
-        <div>添加邮寄地址</div>
+        <div class="f22 bold">{{form.Id ? '编辑': '添加'}}邮寄地址</div>
         <form @submit.prevent.stop="submit" class="q-gutter-md">
           <div>
             <div class="row">
@@ -126,6 +125,8 @@
                 <div class="title">選擇手機區號</div>
                 <q-select
                   ref="AreaCode"
+                emit-value
+                map-options
                   square
                   outlined
                   option-value="ID"
@@ -154,6 +155,8 @@
               <div class="col">
                 <div class="title">國家/地區</div>
                 <q-select
+                emit-value
+                map-options
                   ref="CountryId"
                   square
                   outlined
@@ -244,6 +247,12 @@ export default {
     this.getCountryInfo();
   },
   methods: {
+    addAddress() {
+      this.isShowDialog = true
+      this.form = {
+        Name: "",
+        Mobile: "",}
+    },
     getCountryInfo() {
       this.apipost(
         "GetCountryInfo_post",
@@ -322,6 +331,7 @@ export default {
     editUser(item) {
       console.log("editUser", item);
       this.form = {...item};
+      this.form.AreaCode = Number(this.form.AreaCode)
       this.form.IsDefault = this.form.IsDefault === 1
       this.isShowDialog = true;
     },
@@ -355,8 +365,8 @@ export default {
     },
     submitUserInfo() {
       let params = { ...this.form };
-      params.AreaCode = params.AreaCode.ID;
-      params.CountryId = params.CountryId.ID;
+      // params.AreaCode = params.AreaCode.ID;
+      // params.CountryId = params.CountryId.ID;
       params.IsDefault = params.IsDefault ? 1 : 2;
       this.apipost(
         "b2c_post_SetMailingAddressInfo",

src/pages/usercenter/setUserInfo.vue

@@ -93,6 +93,8 @@
           <div class="col">
             <div class="title">居住國家/地區</div>
             <q-select
+                emit-value
+                map-options
               ref="Country"
               square
               outlined
@@ -108,6 +110,8 @@
           <div class="col">
             <div class="title">稱謂</div>
             <q-select
+                emit-value
+                map-options
               ref="Appellation"
               square
               outlined
@@ -126,6 +130,8 @@
           <div class="col">
             <div class="title">國家/地區代碼</div>
             <q-select
+                emit-value
+                map-options
               ref="PhoneCountry"
               square
               outlined

src/pages/usercenter/setUsersList.vue

@@ -8,8 +8,7 @@
   width: 900px;
 }
 .title {
-  margin-top: 20px;
-  margin-bottom: 10px;
+  margin: 20px  10px 10px 10px;
 }
 .card {
   margin: 10px;
@@ -75,6 +74,12 @@
   background-color: $primary;
   margin: -8px auto 0 auto;
 }
+.card-info {
+height: 20px;
+padding: 0 4px;
+background: #DDDDDD;
+border-radius: 8px;
+}
 </style>
 <template>
   <div class="content q-ma-lg bg-white">
@@ -98,17 +103,32 @@
         </div>
       </div>
     </div>
-    <q-btn
+    <div class="q-pa-sm full-width">
+      
+    <q-btn class="full-width"
       color="primary"
       unelevated
       outline
-      @click="isShowDialog = true"
-      label="添加出行人"
-    ></q-btn>
+      @click="addUser"
+    ><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/add.png" />添加出行人</q-btn>
+    </div>
+    <div class="mt flex justify-end">
+      
+    <q-pagination
+      v-model="current"
+      :max="pageCount"
+      direction-links
+      color="primary"
+        active-color="primary"
+      :max-pages="5"
+      @input="pageChange"
+    />
+    </div>
+
 
     <q-dialog content-style="width: 900px" v-model="isShowDialog">
       <div class="bg-white dialog-box" style="width: 800px; padding: 20px">
-        <div>添加邮寄地址</div>
+        <div class="f22 bold">{{form.Id ? '编辑': '新增'}}出行人信息</div>
         <form @submit.prevent.stop="submit" class="q-gutter-md">
           <div>
             <div class="row">
@@ -164,43 +184,53 @@
               <div class="col">
                 <div class="title">國家/地區代碼</div>
                 <q-select
-                  ref="PhoneCountry"
+                emit-value
+                map-options
+                  ref="AreaCode"
                   square
                   outlined
                   option-value="ID"
                   option-label="PhoneCode"
                   class="form-item"
-                  v-model="form.PhoneCountry"
+                  v-model="form.AreaCode"
                   :options="phoneCountList"
-                  placeholder="Filled"
+                  placeholder="请选择國家/地區代碼"
                   :rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
                 />
               </div>
               <div class="col">
-                <div class="title">電話（首次需驗證）</div>
+                <div class="title">手機號</div>
                 <q-input
                   ref="Mobile"
                   class="form-item"
-                  placeholder="電話（首次需驗證）"
+                  placeholder="手機號"
                   v-model="form.Mobile"
                   outlined
-                  :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
+                  :rules="[(val) => !!val || '请输入手機號']"
                 ></q-input>
               </div>
             </div>
-
-            <div
+<div
               v-for="(item, index) in form.CardList"
-              :key="item.id"
+              :key="item.id">
+            <div class="flex justify-between ml mr q-mt-lg" style="margin-bottom: -10px"><span class="card-info">证件信息#{{index+ 1}}</span>
+                  <div v-if="index > 0" @click="deleteCardItem(item)">
+                    <i class="iconfont iconline"></i>
+                    <i class="iconfont icondelete"></i>
+                  </div>
+                  </div>
+            <div
               class="row"
             >
               <div class="col">
                 <div class="title">证件类型</div>
                 <q-select
+                emit-value
+                map-options
                   ref="card"
                   square
                   outlined
-                  option-value="ID"
+                  option-value="Id"
                   option-label="Name"
                   class="form-item"
                   v-model="item.Type"
@@ -212,25 +242,23 @@
               <div class="col">
                 <div class="title flex justify-between items-center">
                   <div>证件号码</div>
-                  <div v-if="index > 0" @click="deleteCardItem(item)">删除</div>
                 </div>
                 <q-input
                   class="form-item"
-                  placeholder="電話（首次需驗證）"
+                  placeholder="证件号码"
                   v-model="item.CardNo"
                   outlined
-                  :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
+                  :rules="[(val) => !!val || '请输入证件号码']"
                 ></q-input>
               </div>
-            </div>
-            <q-btn
+            </div></div>
+            <q-btn class="ml"
               color="primary"
               @click="addCard"
               unelevated
               outline
-              label="新增证件"
-            />
-            <div>
+            ><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/add.png" />新增证件</q-btn>
+            <div class="mt flex flex-center">
               <q-btn color="primary" type="submit" unelevated label="保存" />
             </div>
           </div>
@@ -243,6 +271,8 @@
 export default {
   data() {
     return {
+      current: 1,
+      pageCount: 0,
       isShowDialog: false,
       selectedKey: "全部",
       form: {
@@ -270,6 +300,22 @@ export default {
     this.getCardTypeList();
   },
   methods: {
+    pageChange(value) {
+      console.log('pageChange', value)
+      this.current = value
+      this.getUsersList()
+    },
+    addUser() {
+      this.isShowDialog = true
+      this.form = {
+        SurName: "",
+        Name: "",
+        EnName: "",
+        EnSurName: "",
+        Mobile: "",
+        CardList: [],}
+      this.addCard()
+    },
     getCardTypeList() {
       this.apipost(
         "b2c_post_GetTripCardEnumList",
@@ -277,6 +323,8 @@ export default {
         (res) => {
           if (res.data.resultCode == 1) {
             this.cardList = res.data.data;
+            this.cardList.forEach(item => item.Id = Number(item.Id));
+            console.log('this.cardList', this.cardList)
           } else {
             // this.$notify(res.data.message);
             this.$q.notify({
@@ -298,7 +346,7 @@ export default {
           if (res.data.resultCode == 1) {
             const { phoneCountList, countList } = res.data.data;
             this.countList = countList;
-            this.phoneCountList = phoneCountList;
+            this.phoneCountList = phoneCountList
           } else {
             // this.$notify(res.data.message);
             this.$q.notify({
@@ -319,6 +367,7 @@ export default {
       this.id++;
       this.form.CardList.push({
         id: this.id,
+        Type: '',
       });
     },
     deleteCardItem(card) {
@@ -333,6 +382,7 @@ export default {
         "EnName",
         "EnSurName",
         "Mobile",
+        "AreaCode",
       ];
       verifyArr.forEach((item) => {
         console.log("this.$refs[item]", this, item, this.$refs[item]);
@@ -349,16 +399,31 @@ export default {
       if (this.formHasError) {
         return;
       }
+
+      for(let i = 0; i < this.form.CardList.length; i++) {
+        let item = this.form.CardList[i]
+        if(!item.Type || !item.CardNo) {
+            // this.$notify(res.data.message);
+            this.$q.notify({
+              type: "negative",
+              message: '证件信息不完善,请补充',
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+            return
+        }
+      }
       this.submitUserInfo();
     },
     getUsersList() {
       this.apipost(
         "b2c_post_GetTripGuestPageList",
-        {pageIndex: 1, pageSize: 20},
+        {pageIndex: this.current, pageSize: 10},
         (res) => {
           if (res.data.resultCode == 1) {
-            const { count, pageData } = res.data.data;
+            const { count, pageData, pageCount } = res.data.data;
             this.count = count;
+            this.pageCount = pageCount
             this.pageData = pageData;
           } else {
             // this.$notify(res.data.message);
@@ -375,7 +440,8 @@ export default {
     },
     editUser(item) {
       console.log('editUser', item)
-      this.form = item
+      this.form = {...item}
+      this.form.AreaCode = Number(this.form.AreaCode)
       this.isShowDialog = true
     },
     deleteUser(item) {
@@ -392,6 +458,7 @@ export default {
               position: "top",
               timeout: 2000, // 以毫秒为单位; 0意味着没有超时
             });
+      this.current = 1
             this.getUsersList();
           } else {
             // this.$notify(res.data.message);
@@ -408,10 +475,9 @@ export default {
     },
     submitUserInfo() {
       let params = { ...this.form };
-      params.PhoneCountry = params.PhoneCountry.ID;
-      params.CardList.forEach(item => {
-        item.Type = item.Type.Id
-      })
+      // params.CardList.forEach(item => {
+      //   item.Type = item.Type.Id
+      // })
       this.apipost(
         "b2c_post_SetTripGuestInfo",
         params,