修改

src/pages/usercenter/account.vue

+<style>
+  .tw_account {
+    margin: 40px auto;
+    padding: 0 20px;
+    width: 100%;
+    max-width: 800px;
+  }
+
+  .tw_blocktitle {
+    font-size: 25px;
+    margin-bottom: 15px;
+    color: #666;
+    font-weight: 400;
+  }
+
+  .member-box {
+    margin: 0 0 40px;
+    width: 100%;
+    padding: 30px 30px 40px;
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
+    border-top: 4px solid #00afff;
+  }
+
+  .block-title-light {
+    font-size: 23px;
+    margin:10px 0 30px 0;
+    line-height: 0;
+    color: #666;
+    font-weight: bold;
+  }
+
+  .account-group {
+    position: relative;
+    margin-bottom: 15px;
+  }
+
+  .account_labelName {
+    margin-bottom: 10px;
+    font-size: 15px;
+  }
+
+  .regisStar {
+    color: red;
+  }
+  .tw_account .q-field__control {
+    height: 46px;
+  }
+  .tw_account .q-field__control{
+    min-height:46px!important;
+  }
+  .tw_account .q-field__native{
+    min-height:46px;
+  }
+  .tw_account .q-field__marginal{
+    height:46px;
+  }
+
+</style>
 <template>
   <q-page>
-    <div class="account">
-      账号信息 帳戶設定 ( {{accountMsg.Account}} )
-      <table>
-        <tr>
-          <td>
-            個人資訊
-          </td>
-        </tr>
-        <tr>
-          <td>
-            姓名：
-            <q-input filled name="Name" v-model="accountMsg.Name" class="bg-grey-1" label="姓名" />
-          </td>
-          <td>
-            性別：
-            <q-input filled name="Sex" v-model="accountMsg.Sex" class="bg-grey-1" label="性別" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            生日:
-            <q-input filled name="Birthday" v-model="accountMsg.Birthday" class="bg-grey-1" label="生日" />
-          </td>
-          <td>
-            电话:
-            <q-input filled name="Mobile" v-model="accountMsg.Mobile" class="bg-grey-1" label="电话" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            地址:
-            <q-input filled name="Address" v-model="accountMsg.Address" class="bg-grey-1" label="地址" />
-          </td>
-
-        </tr>
-        <tr>
-          <td>
-            <q-btn type="a" @click="SaveBasic" label="儲存變更" />
-          </td>
-        </tr>
-      </table>
-      <table>
-        <tr>
-          <td>
-            密碼變更
-          </td>
-        </tr>
-        <tr>
-          <td>
-            舊密碼：
-            <q-input filled name="oldPassword" v-model="updateMsg.oldPassword" class="bg-grey-1" label="舊密碼" />
-          </td>
-          <td>
-            新密碼
-            <q-input filled name="Password" v-model="updateMsg.newPassword" class="bg-grey-1" label="新密碼" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            再輸入一次新密碼:
-            <q-input filled name="SurePassword" v-model="updateMsg.SurePassword" class="bg-grey-1" label="再輸入一次新密碼" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <q-btn type="a" @click="SavePwd" label="儲存變更" />
-          </td>
-        </tr>
-      </table>
+    <div class="tw_account">
+      <h1 class="tw_blocktitle">帳戶設定({{accountMsg.Account}})</h1>
+      <div class="member-box">
+        <h2 class="block-title-light">個人資訊</h2>
+        <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
+          <div class="account-group col-6">
+            <div class="account_labelName"><span class="regisStar">*</span>姓名</div>
+            <q-input outlined v-model="accountMsg.Name" class="bg-grey-1" />
+          </div>
+          <div class="account-group col-6">
+            <div class="account_labelName">性別</div>
+            <q-select filled v-model="accountMsg.Sex" :options="sexArray" emit-value map-options>
+            </q-select>
+          </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"><span class="regisStar">*</span>生日</div>
+            <q-input filled v-model="accountMsg.Birthday" 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 mask="YYYY-MM-DD" v-model="accountMsg.Birthday" @input="() => $refs.qDateProxy.hide()" />
+                  </q-popup-proxy>
+                </q-icon>
+              </template>
+            </q-input>
+          </div>
+          <div class="account-group col-6">
+            <div class="account_labelName">手機</div>
+            <q-input outlined v-model="accountMsg.Mobile" class="bg-grey-1" />
+          </div>
+        </div>
+        <div class="account-group">
+          <div class="account_labelName">地址</div>
+          <q-input outlined v-model="accountMsg.Address" class="bg-grey-1" />
+        </div>
+        <div class="account-group">
+          <q-btn color="primary" style="width:200px;height:50px;margin-top:20px;" @click="SaveBasic" label="儲存變更" />
+        </div>
+      </div>
+      <div class="member-box">
+        <h2 class="block-title-light">密碼變更</h2>
+        <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="updateMsg.oldPassword" type="password" class="bg-grey-1" />
+          </div>
+          <div class="account-group col-6">
+            <div class="account_labelName">新密碼</div>
+            <q-input outlined v-model="updateMsg.newPassword" type="password" class="bg-grey-1" />
+          </div>
+          <div class="account-group col-6">
+            <div class="account_labelName">再輸入一次新密碼</div>
+            <q-input outlined v-model="updateMsg.SurePassword" type="password" class="bg-grey-1" />
+          </div>
+        </div>
+        <div class="account-group">
+          <q-btn color="primary" style="width:200px;height:50px;margin-top:20px;" @click="SavePwd" label="儲存變更" />
+        </div>
 
       </div>
+    </div>
   </q-page>
 </template>
 <script>
@@ -82,7 +133,7 @@
           AccountId: 0, //账号编号
           Name: "", //姓名
           Account: "", //账号
-          Sex: "1", //性别(1-男,2-女)
+          Sex: 1, //性别(1-男,2-女)
           Birthday: "", //生日
           Password: "", //密码
           SurePwd: "", //确认密码
@@ -94,7 +145,17 @@
           oldPassword: "", //旧密码
           newPassword: "", //新密码
           SurePassword: "", //确认密码
-        }
+        },
+        sexArray: [{
+            value: 1,
+            label: "男"
+          },
+          {
+            value: 2,
+            label: "女"
+          },
+        ]
+
       };
     },
     created() {
@@ -119,13 +180,13 @@
           },
           res => {
             if (res.data.resultCode == 1) {
-                var jsonData=res.data.data;
-                this.accountMsg.Account=jsonData.Account;
-                this.accountMsg.Address=jsonData.Address;
-                this.accountMsg.Birthday=jsonData.Birthday;
-                this.accountMsg.Mobile=jsonData.Mobile;
-                this.accountMsg.Name=jsonData.Name;
-                this.accountMsg.Sex=jsonData.Sex;
+              var jsonData = res.data.data;
+              this.accountMsg.Account = jsonData.Account;
+              this.accountMsg.Address = jsonData.Address;
+              this.accountMsg.Birthday = jsonData.Birthday;
+              this.accountMsg.Mobile = jsonData.Mobile;
+              this.accountMsg.Name = jsonData.Name;
+              this.accountMsg.Sex = jsonData.Sex;
             }
           },
           err => {}
@@ -133,6 +194,25 @@
       },
       //保存基础信息
       SaveBasic() {
+        if(this.accountMsg.Name==''){
+          this.$q.notify({
+            type: 'negative',
+            message:'请輸入姓名',
+            position:'top',
+            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+          })
+          return;
+        }
+        if(this.accountMsg.Birthday==''){
+          this.$q.notify({
+            type: 'negative',
+            message:'请选择生日',
+            position:'top',
+            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+          })
+          return;
+        }
+
         this.apipost(
           "b2b_post_SetCustomerAccountService", this.accountMsg,
           res => {
@@ -149,6 +229,42 @@
       },
       //修改密码
       SavePwd() {
+        if(this.updateMsg.oldPassword==''){
+          this.$q.notify({
+            type: 'negative',
+            message:'请輸入舊密碼',
+            position:'top',
+            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+          })
+          return;
+        }
+        if(this.updateMsg.newPassword==''){
+          this.$q.notify({
+            type: 'negative',
+            message:'请輸入新密碼',
+            position:'top',
+            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+          })
+          return;
+        }
+        if(this.updateMsg.SurePassword==''){
+          this.$q.notify({
+            type: 'negative',
+            message:'再輸入一次新密碼',
+            position:'top',
+            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+          })
+          return;
+        }
+        if(this.updateMsg.SurePassword!=this.updateMsg.newPassword){
+          this.$q.notify({
+            type: 'negative',
+            message:'两次输入密码不一致',
+            position:'top',
+            timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+          })
+          return;
+        }
         this.apipost(
           "b2b_post_ModifyAccountPassowrd", this.updateMsg,
           res => {