<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>
|
|
</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 src="./account-setting.component.ts"></script>
|
|
<style lang="scss" scoped>
|
@import "./account-setting.component.scss";
|
</style>
|
