首页,个人中心页优化

src/components/base-switch.vue

@@ -55,6 +55,7 @@ export default {
     },
     watch: {
         value: function() {
+          console.log('switch change', this.value)
             this.inputSelect = this.value
         }
     },

src/components/navs/city-category.vue

-<<<<<<< HEAD
-=======
-
->>>>>>> c020ad40be0c4ddc009c7e515bf5c6c1ac25638c
 <style scoped>
 .header-box {
   max-width: 1200px;
@@ -107,6 +103,9 @@
 .address-btn {
   margin: 0 10px 0 44px;
 }
+.address-btn:hover {
+  background: #F5F5F5;
+}
 .all-type {
   margin-left: 10px;
 }
@@ -162,6 +161,10 @@
 .category-btn {
   width: 100px;
 }
+.category-icon {
+  width: 16px;
+  height: 16px;
+}
 </style>
 <template>
 <div>
@@ -286,6 +289,7 @@
                   :key="i"
                   v-for="(x, i) in dataList.CategoryList"
                 >
+                <img class="category-icon"  :src="require(`../../assets/img/home/${['guanguang','jindian','hotel','car'][i]}.png`)"/>
                   {{ x.CategoryName }}
                 </div>
               </div>

src/pages/usercenter/setAddress.vue

@@ -26,7 +26,6 @@
   min-height: 40px;
 }
 .title {
-  margin-top: 20px;
   margin-bottom: 10px;
   margin-left: 10px;
 }
@@ -113,7 +112,7 @@
         <div class="f22 bold">{{form.Id ? '编辑': '添加'}}邮寄地址</div>
         <form @submit.prevent.stop="submit" class="q-gutter-md">
           <div>
-            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
+            <div class="q-mt-xl" :class="$q.platform.is.desktop ? 'row': 'culmuns'">
               <div class="col">
                 <div class="title">全名</div>
                 <q-input
@@ -171,6 +170,7 @@
                   v-model="form.Mobile"
                   outlined
                   :rules="[(val) => !!val || '请输入手機號碼']"
+                      mask="#" reverse-fill-mask
                 >
                   <template v-slot:prepend>
                     <div class="text-subtitle2">
@@ -186,7 +186,7 @@
                   placeholder="城市"
                   v-model="form.CityName"
                   outlined
-                  :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
+                  :rules="[(val) => !!val || '请输入城市']"
                 ></q-input>
               </div>
             </div>
@@ -205,6 +205,7 @@
               <div class="col">
                 <div class="title">郵政編碼</div>
                 <q-input
+                  mask="#" reverse-fill-mask
                   ref="PostalCode"
                   class="form-item"
                   placeholder="郵政編碼"
@@ -214,8 +215,8 @@
                 ></q-input>
               </div>
             </div>
-            <div class="flex items-center q-my-sm">
-            <BaseSwitch v-model="form.IsDefault"></BaseSwitch
+            <div class="flex items-center q-mb-lg">
+            <BaseSwitch ref="switch" v-model="form.IsDefault" :value="form.IsDefault"></BaseSwitch
             ><span class="q-ml-sm">保存為默認地址</span></div>
             <div>
               <q-btn color="primary" type="submit" unelevated label="保存" />
@@ -353,6 +354,11 @@ export default {
       this.form = {...item};
       this.form.AreaCode = Number(this.form.AreaCode)
       this.form.IsDefault = this.form.IsDefault === 1
+      this.$nextTick(() => {
+        
+      this.$refs.switch.inputSelect = this.form.IsDefault
+      })
+      console.log('this.form.IsDefault', this.form.IsDefault)
       this.isShowDialog = true;
     },
     deleteUser(item) {

src/pages/usercenter/setInfo.vue

@@ -148,7 +148,7 @@
         <q-btn color="primary" class="q-mt-sm" @click="removeAccount">删除您的帐户及个人数据</q-btn>
       </div>
     </div>
-    <q-dialog content-style="width: 900px" v-model="showRemove">
+    <q-dialog v-model="showRemove">
       <removeAccount></removeAccount>
     </q-dialog>
   </div>
@@ -272,6 +272,10 @@ export default {
         this.form,
         (res) => {
           if (res.data.resultCode == 1) {
+            this.form= {
+        OldPassword: "",
+        NewPassword: "",
+      }
             // this.$notify(res.data.message);
             this.$q.notify({
               type: "positive",

src/pages/usercenter/setUserInfo.vue

@@ -217,7 +217,7 @@ export default {
         Appellation: "",
         EnName: "",
         EnSurname: "",
-        Country: "",
+        Country: undefined,
         Moblie: "",
       },
       model: "",
@@ -297,6 +297,12 @@ export default {
         (res) => {
           if (res.data.resultCode == 1) {
             this.form = res.data.data;
+            if(!this.form.Country) {
+              this.form.Country = undefined
+            }
+            if(!this.form.Appellation) {
+              this.form.Appellation = undefined
+            }
             if (this.phoneCountList.length) {
               this.changeCountry(this.form.Country);
             }

src/pages/usercenter/setUsersList.vue

@@ -7,7 +7,7 @@
   width: 900px;
 }
 .title {
-  margin: 20px 10px 10px 10px;
+  margin: 0 10px 10px 10px;
 }
 .card {
   margin: 10px;
@@ -39,10 +39,8 @@
 ::v-deep .q-field__marginal {
   height: 40px;
 }
-.title {
-  margin-top: 20px;
-  margin-bottom: 10px;
-  margin-left: 10px;
+::v-deep .q-field--auto-height .q-field__native {
+  min-height: 40px;
 }
 .phone {
   margin-left: 100px;
@@ -77,6 +75,7 @@
 .card-info {
   height: 20px;
   padding: 0 4px;
+  margin: 0 0 20px 0;
   background: #dddddd;
   border-radius: 8px;
 }
@@ -87,8 +86,8 @@
       <div class="card" v-for="item in pageData" :key="item.id">
         <div class="flex card-title justify-between">
           <div class="flex">
-            <span>{{ item.Name }}</span>
-            <span v-if="$q.platform.is.desktop" class="phone">手機號：{{ item.Mobile }}</span>
+            <span>{{item.SurName}} {{ item.Name }}</span>
+            <span v-if="$q.platform.is.desktop" class="phone">手機號：+{{ item.AreaCode }} {{ item.Mobile }}</span>
           </div>
           <span>
             <span class="user-edit" @click="editUser(item)">编辑</span>
@@ -97,18 +96,18 @@
             >
           </span>
         </div>
-        <div class="q-pa-sm">
-            <span class="q-ml-sm" v-if="$q.platform.is.mobile">手機號：{{ item.Mobile }}</span>
-          <div class="q-pa-sm full-width"
+        <div class="q-pa-sm q-ml-sm">
+            <span v-if="$q.platform.is.mobile">手機號：{{ item.Mobile }}</span>
+            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
+
+          <div class="col-6 q-py-sm"
             :class="{ 'border-b': index < item.CardList.length - 1 }"
             v-for="(el, index) in item.CardList"
             :key="index"
           >
-            <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
-              <div class="col-6">{{ el.TypeName }}</div>
-              <div class="col-6" :class="$q.platform.is.mobile ? 'q-mt-xs': ''">{{ el.CardNo }}</div>
-            </div>
+              <div>{{ el.TypeName }}:{{ el.CardNo }}</div>
           </div>
+            </div>
         </div>
       </div>
     </div>
@@ -144,7 +143,7 @@
         <form @submit.prevent.stop="submit" class="q-gutter-md">
           <div>
             <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
-              <div class="col">
+              <div class="col q-mt-md">
                 <div class="title">姓</div>
                 <q-input
                   class="form-item"
@@ -167,23 +166,23 @@
             </div>
             <div :class="$q.platform.is.desktop ? 'row': 'culmuns'">
               <div class="col">
-                <div class="title">姓氏（需與旅遊證件一致）</div>
+                <div class="title">姓氏（请输入英文字母）</div>
                 <q-input
                   class="form-item"
                   v-model="form.EnName"
                   outlined
                   ref="EnName"
-                  :rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
+                  :rules="[(val) => !!val || '请输入姓氏（请输入英文字母）']"
                 ></q-input>
               </div>
               <div class="col">
-                <div class="title">名字（需與旅遊證件一致）</div>
+                <div class="title">名字（请输入英文字母）</div>
                 <q-input
                   ref="EnSurName"
                   class="form-item"
                   v-model="form.EnSurName"
                   outlined
-                  :rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
+                  :rules="[(val) => !!val || '请输入名字（请输入英文字母）']"
                 ></q-input>
               </div>
             </div>