<template>
|
<div class="account-page">
|
<div class="account-page-title">個人帳號設定</div>
|
<section class="account-card">
|
<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"
|
placeholder="王保誠" >
|
</div>
|
</div>
|
<i class="icon-edit icon" @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled}"></i>
|
</div>
|
|
</section>
|
|
<section class="account-card">
|
<div class="header">
|
<div class="block">
|
<div class="setting-title">綁定</div>
|
<div class="contact-type">
|
手機號碼
|
<input
|
:disabled="userPhoneDisabled"
|
v-model="phoneValue"
|
ref="userPhone"
|
class="contact-input input"
|
placeholder="0912345678" >
|
</div>
|
</div>
|
<i class="icon-edit icon" @click="editField('userPhone')" :class="{'icon-color-change': !userPhoneDisabled}"></i>
|
</div>
|
|
</section>
|
|
<section class="account-card">
|
<div class="header">
|
<div class="block">
|
<div class="setting-title">綁定</div>
|
<div class="contact-type">Email
|
<input
|
:disabled="userEmailDisabled"
|
v-model="emailValue"
|
ref="userEmail"
|
class="contact-input input"
|
placeholder="abc@gmail">
|
</div>
|
</div>
|
<i class="icon-edit icon" @click="editField('userEmail')"
|
:class="{'icon-color-change': !userEmailDisabled}"></i>
|
</div>
|
|
</section>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue,Component } from 'vue-property-decorator'
|
|
@Component
|
export default class AccountSetting extends Vue {
|
|
userNameDisabled = true;
|
userPhoneDisabled = true;
|
userEmailDisabled = true ;
|
userNameValue = '' ;
|
phoneValue = '' ;
|
emailValue = '' ;
|
|
editField(fieldName: string): void {
|
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();
|
});
|
}
|
|
}
|
</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;
|
}
|
|
}
|
}
|
.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;
|
justify-content: space-evenly;
|
}
|
.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>
|
