Merge branch 'refactor/separate-vue' of ssh://192.168.0.10:29418/pcalife/PA...

Tomas

2021-12-09 ac235850a9287dae6977c964213176fa7c86b140

 PAMapp/pages/accountSetting/index.vue

@@ -1,13 +1,94 @@
<template>
    <div>個人帳號設定</div>
<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>

    </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>
</template>

<script>
export default {
<script src="./account-setting.component.ts"></script>

}
</script>

<style lang="">

</style>
<style lang="scss" scoped>
  @import "./account-setting.component.scss";
</style>