From ac235850a9287dae6977c964213176fa7c86b140 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期四, 09 十二月 2021 14:42:20 +0800
Subject: [PATCH] Merge branch 'refactor/separate-vue' of ssh://192.168.0.10:29418/pcalife/PAM into refactor/separate-vue
---
PAMapp/pages/accountSetting/index.vue | 255 +++-----------------------------------------------
1 files changed, 18 insertions(+), 237 deletions(-)
diff --git a/PAMapp/pages/accountSetting/index.vue b/PAMapp/pages/accountSetting/index.vue
index fb21f19..8c4a31e 100644
--- a/PAMapp/pages/accountSetting/index.vue
+++ b/PAMapp/pages/accountSetting/index.vue
@@ -1,14 +1,14 @@
<template>
<div class="account-page">
<div class="account-page-title">�犖撣唾�身摰�</div>
- <section class="account-card" :class="{'edit': !userNameDisabled }">
+ <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"
+ v-model="userNameValue"
ref="userName"
class="input name-input"
>
@@ -16,22 +16,22 @@
<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>
-
+
</section>
- <section class="account-card" :class="{'edit': !userPhoneDisabled }" v-if="phoneValue">
+ <section class="account-card" :class="{'edit': !userPhoneDisabled }" v-if="phoneValue">
<div class="header">
- <div class="block">
+ <div class="block">
<div class="setting-title">蝬��</div>
<div class="contact-type">
����Ⅳ
<input
:disabled="userPhoneDisabled"
- v-model="phoneValue"
+ v-model="phoneValue"
:class="{
'is-invalid': !phoneValid
}"
@@ -44,19 +44,19 @@
</div>
</div>
</div>
- <!-- <i class="icon-edit icon"
+ <!-- <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">
+ <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
+ <input
:disabled="userEmailDisabled"
v-model="emailValue"
:class="{
@@ -71,15 +71,15 @@
</div>
</div>
</div>
-
- <!-- <i class="icon-edit icon" @click="editField('userEmail')"
+
+ <!-- <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
+ <el-button
:disabled="isSubmitBtnDisabled"
@click.native="updateAccountSetting">�</el-button>
</div>
@@ -87,227 +87,8 @@
</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';
-
-@Component
-export default class AccountSetting extends Vue {
- _userSetting!: UserSetting;
- userNameDisabled = true;
- userPhoneDisabled = true;
- userEmailDisabled = true ;
- userNameValue = '';
- phoneValue = '' ;
- emailValue = '' ;
-
- onEditMode = false;
- formValidStatus = {
- name: true,
- phone: true,
- email: true,
- };
-
- get nameValid(): boolean {
- this.formValidStatus.name = this.userNameValue ? true : false;
- return this.formValidStatus.name;
- }
-
- get phoneValid(): boolean {
- const rule = /^09[0-9]{8}$/;
- this.formValidStatus.phone = this.phoneValue ? rule.test(this.phoneValue) : true;
- return this.formValidStatus.phone;
- }
-
- get emailValid(): boolean {
- const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
- this.formValidStatus.email = this.emailValue ? rule.test(this.emailValue) : true;;
- return this.formValidStatus.email;
- }
-
- editField(fieldName: string): void {
- this.onEditMode = true;
- const enablePromise = new Promise((resolve, reject) => { // 甇斤promise隤��
- resolve((this as any)[`${fieldName}Disabled`] = false);
- });
- const targetInput = this.$refs[fieldName] as any;
- enablePromise.then((_) => {
- targetInput.focus();
- });
- }
-
- get isSubmitBtnDisabled(): boolean {
- const isFormValid = this.formValidStatus.name && this.formValidStatus.phone && this.formValidStatus.email;
- return !isFormValid || !this.onEditMode
- || (!this.phoneValue && !this.emailValue);
- }
-
- updateAccountSetting(): void {
- // const dataChanged = (): boolean => {
- // return this._userSetting.name !== this.userNameValue
- // || this._userSetting.phone !== this.phoneValue
- // || this._userSetting.email !== this.emailValue;
- // };
- // if (dataChanged) {
-
- // }
- if (!this.onEditMode) return;
- const editSettingInfo: UserSetting = {
- name: this.userNameValue,
- phone: this.phoneValue,
- email: this.emailValue
- }
- updateAccountSetting(editSettingInfo).then((res: any) => {
- console.log('updateRes:', res);
- this.resetSettingForm();
- });
- }
-
- private resetSettingForm(): void {
- this.onEditMode = false;
- this.userNameDisabled = true;
- this.userPhoneDisabled = true;
- this.userEmailDisabled = true ;
- }
-
- mounted(){
- getUserAccountSetting().then((userInfo: UserSetting)=>{
- this._userSetting = {
- name: userInfo.name || '',
- phone: userInfo.phone || '',
- email: userInfo.email || '',
- };
-
- this.phoneValue = this._userSetting.phone!;
- this.userNameValue = this._userSetting.name!;
- this.emailValue = this._userSetting.email!;
- })
- }
-
-}
-
-
-</script>
+<script src="./account-setting.component.ts"></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
- }
- }
-
-</style>
\ No newline at end of file
+ @import "./account-setting.component.scss";
+</style>
--
Gitblit v1.8.0