From f36e617e9e534a4b05f2029724d678bbd6c655b3 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 22 十二月 2021 11:38:54 +0800
Subject: [PATCH] refactor: separate api/consultant.ts into serveral services
---
PAMapp/pages/accountSetting/index.vue | 324 +++++++++++++++++++----------------------------------
1 files changed, 117 insertions(+), 207 deletions(-)
diff --git a/PAMapp/pages/accountSetting/index.vue b/PAMapp/pages/accountSetting/index.vue
index fb21f19..33ecd55 100644
--- a/PAMapp/pages/accountSetting/index.vue
+++ b/PAMapp/pages/accountSetting/index.vue
@@ -1,96 +1,78 @@
<template>
-<div class="account-page">
- <div class="account-page-title">�犖撣唾�身摰�</div>
- <section class="account-card" :class="{'edit': !userNameDisabled }">
- <div class="header">
- <div class="block">
- <div class="setting-title">憪��</div>
- <div class="contact-type">
- <input
- :disabled="userNameDisabled"
- v-model="userNameValue"
- ref="userName"
- class="input name-input"
- >
- <div class="error-txt">
- <span v-show="!nameValid" class="error">甇斗���‵</span>
- </div>
- </div>
-
- </div>
- <i class="icon-edit icon" @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled}"></i>
+ <div>
+ <div class="pam-paragraph text--middle">�犖撣唾�身摰�</div>
+ <div class="pam-paragraph account-info " >
+ <div class="account-info__title text--middle">憪��</div>
+ <div class="account-info__input" :class="{'edit': !userNameDisabled }">
+ <input
+ :disabled="userNameDisabled"
+ v-model="userNameValue"
+ ref="userName"
+ class="account-info__input-text">
+ <div class="account-info__input-error">
+ <span v-show="!nameValid" class="error">甇斗���‵</span>
</div>
-
- </section>
-
- <section class="account-card" :class="{'edit': !userPhoneDisabled }" v-if="phoneValue">
- <div class="header">
- <div class="block">
- <div class="setting-title">蝬��</div>
- <div class="contact-type">
- ����Ⅳ
- <input
- :disabled="userPhoneDisabled"
- v-model="phoneValue"
- :class="{
- 'is-invalid': !phoneValid
- }"
- ref="userPhone"
- class="contact-input input"
- :placeholder="phoneValue || '撠������Ⅳ'"
- >
- <div class="error-txt">
- <span v-show="!phoneValid" class="error">����Ⅳ�撘�炊</span>
- </div>
- </div>
- </div>
- <!-- <i class="icon-edit icon"
- @click="editField('userPhone')"
- :class="{'icon-color-change': !userPhoneDisabled}"></i> -->
- </div>
-
- </section>
-
- <section class="account-card" :class="{'edit': !userEmailDisabled }" v-if="emailValue">
- <div class="header">
- <div class="block">
- <div class="setting-title">蝬��</div>
- <div class="contact-type">Email
- <input
- :disabled="userEmailDisabled"
- v-model="emailValue"
- :class="{
- 'is-invalid': !emailValid
- }"
- ref="userEmail"
- class="contact-input input"
- :placeholder="emailValue || '撠���� Email'"
- >
- <div class="error-txt">
- <span v-show="!emailValid" class="error">靽∠拳�撘�炊</span>
- </div>
- </div>
- </div>
-
- <!-- <i class="icon-edit icon" @click="editField('userEmail')"
- :class="{'icon-color-change': !userEmailDisabled}"></i> -->
- </div>
-
- </section>
-
- <div class="account-setting-btn mb-30">
- <el-button
- :disabled="isSubmitBtnDisabled"
- @click.native="updateAccountSetting">�</el-button>
+ </div>
+ <div class="account-info__icon text--middle">
+ <i class="icon-edit" @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled}"></i>
+ </div>
</div>
-
-</div>
+ <div class="pam-paragraph account-info" v-if="phoneValue">
+ <div class="account-info__title text--middle">蝬��</div>
+ <div class="account-info__input " :class="{'edit': !userPhoneDisabled }">
+ <div class="text--middle mb-10">����Ⅳ</div>
+ <input :disabled="userPhoneDisabled"
+ v-model="phoneValue"
+ :class="{'is-invalid': !phoneValid}"
+ ref="userPhone"
+ class="account-info__input-text"
+ :placeholder="phoneValue ||'撠������Ⅳ'">
+ <div class="account-info__input-error">
+ <span v-show="!phoneValid" class="error">����Ⅳ�撘�炊</span>
+ </div>
+ </div>
+ <div class="account-info__icon text--middle">
+ <!-- <i class="icon-edit"
+ @click="editField('userPhone')"
+ :class="{'icon-color-change': !userPhoneDisabled}">
+ </i> -->
+ </div>
+ </div>
+ <div class="pam-paragraph account-info" v-if="emailValue">
+ <div class="account-info__title text--middle">蝬��</div>
+ <div class="account-info__input" :class="{'edit': !userEmailDisabled }">
+ <div class="text--middle mb-10">Email</div>
+ <input :disabled="userEmailDisabled"
+ v-model="emailValue"
+ :class="{'is-invalid': !emailValid }"
+ ref="userEmail"
+ class="account-info__input-text"
+ :placeholder="emailValue || '撠���� Email'">
+ <div class="account-info__input-error">
+ <span v-show="!emailValue" class="error">靽∠拳�撘�炊</span>
+ </div>
+ </div>
+ <div class="account-info__icon text--middle">
+ <!-- <i class="icon-edit"
+ @click="editField('userEmail')"
+ :class="{'icon-color-change': !userEmailDisabled}">
+ </i> -->
+ </div>
+ </div>
+ <div class="pam-paragraph account-confirm">
+ <el-button :disabled="isSubmitBtnDisabled"
+ @click.native="updateAccountSetting">
+ �
+ </el-button>
+ </div>
+ </div>
</template>
<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
-import { getUserAccountSetting, updateAccountSetting } from '~/assets/ts/api/consultant';
-import { UserSetting } from '~/assets/ts/models/account.model';
+import { UserSetting } from '~/shared/models/account.model';
+
+import accountSettingService from '~/shared/services/account-setting.service';
@Component
export default class AccountSetting extends Vue {
@@ -158,7 +140,7 @@
phone: this.phoneValue,
email: this.emailValue
}
- updateAccountSetting(editSettingInfo).then((res: any) => {
+ accountSettingService.updateAccountSetting(editSettingInfo).then((res: any) => {
console.log('updateRes:', res);
this.resetSettingForm();
});
@@ -172,7 +154,7 @@
}
mounted(){
- getUserAccountSetting().then((userInfo: UserSetting)=>{
+ accountSettingService.getUserAccountSetting().then((userInfo: UserSetting)=>{
this._userSetting = {
name: userInfo.name || '',
phone: userInfo.phone || '',
@@ -191,123 +173,51 @@
</script>
<style lang="scss" scoped>
-.account-page{
- .block{
- display: flex;
- }
- .account-page-title{
- font-size: 20px;
- margin-bottom: 34px;
- }
- .account-card{
- display: flex;
- flex-direction: column;
- border-bottom: 1px solid gray;
- margin-bottom: 33px;
- .contact-type{
- width: 184px;
- margin-right: 16px;
- font-size: 20px;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- }
- &.edit {
- input {
- border: 1px solid lightgray;
- background-color: #fff;
- }
- }
- }
- .account-setting-btn{
- display: flex;
- justify-content: center;
- }
-}
-.error-txt{
- padding-bottom: 10px;
- .error {
- @extend .smTxt_bold;
- @extend .text--primary;
- height: 16px;
- }
-}
-.name-input{
- width: 184px;
- height:27px;
- margin-bottom: 20px;
- font-size: 20px;
- margin-top: -3px;
- }
-.setting-title{
- margin-left: 28px;
- margin-bottom:10px;
- width: 58px;
- font-size: 20px;
- }
-.header{
- display: flex;
- align-items: baseline;
-}
-.contact-input{
- font-size: 20px;
- margin-bottom: 10px;
- text-overflow: ellipsis;
- margin-top: 10px;
- width: 184px;
-}
-.input{
- border: 0;
- background-color: rgba(0,0,0,0) ;
- outline-color: gainsboro;
-}
-.input:focus{
- background-color: #fff;
-}
-.icon-color-change{
- color:$PRIMARY_RED;
- font-size: 20px;
-}
-.icon{
- font-size:20px;
- // color:#1B365D;
-}
-@include desktop{
-
- .header{
- display: flex;
- align-items: baseline;
- justify-content: space-between;
- }
- .setting-title{
- margin-bottom:10px;
- width: 58px;
- font-size: 18px;
- font-weight: bold;
- }
- .account-page{
- .account-page-title{
- font-size: 20px;
- margin-bottom: 34px;
- font-weight: bold;
- }
- }
- .account-card{
- display: flex;
- flex-direction: column;
- border-bottom: 1px solid gray;
- margin-bottom: 33px;
- .contact-type{
- margin-left: 10px;
- font-size: 20px;
- }
- }
- .name-input{
- width: 550px;
- }
- .contact-input{
- width:550px
- }
- }
+.account-info{
+ display: flex;
+ align-items: baseline;
+ border-bottom: 1px gray solid;
+ padding: 15px 15px 15px 30px;
+ .account-info__title{
+ width: 58px;
+ }
+ .account-info__input{
+ flex: 1;
-</style>
\ No newline at end of file
+ &.edit {
+ .account-info__input-text{
+ border: 1px solid lightgray;
+ background-color: #fff;
+ }
+ }
+ .account-info__input-text{
+ border: 0;
+ background-color: rgba(0,0,0,0) ;
+ outline-color: gainsboro;
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ padding: 3px 10px;
+ width: 100%;
+ font-size: 20px;
+ &:disabled{
+ padding: 0px;
+ }
+ }
+ .account-info__input-error{
+ @extend .smTxt_bold,.text--primary;
+ margin-top: 10px;
+ }
+ }
+ .account-info__icon{
+ margin-left: 20px;
+ .icon-color-change{
+ color:$PRIMARY_RED;
+ }
+ }
+}
+.account-confirm{
+ display: flex;
+ justify-content: center;
+}
+</style>
--
Gitblit v1.8.0