From 5757272fa0a4f96b7519370f3983053307d4e26e Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期二, 23 十一月 2021 15:46:40 +0800
Subject: [PATCH] TODO#129057 [個人帳號設定] 前端畫面刻版
---
PAMapp/pages/accountSetting/index.vue | 133 +++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 129 insertions(+), 4 deletions(-)
diff --git a/PAMapp/pages/accountSetting/index.vue b/PAMapp/pages/accountSetting/index.vue
index d20f84a..e595262 100644
--- a/PAMapp/pages/accountSetting/index.vue
+++ b/PAMapp/pages/accountSetting/index.vue
@@ -1,13 +1,138 @@
<template>
- <div>�犖撣唾�身摰�</div>
+<div class="account-page">
+ <div class="account-page-title">�犖撣唾�身摰�</div>
+ <section class="user-name">
+ <div class="setting-title">憪��</div>
+ <input
+ :disabled="userNameDisabled"
+ v-model="userNameValue"
+ ref="userName"
+ class="name-input input"
+
+ >
+ <i class="icon-edit " @click="editField('userName')" :class="{'icon-color-change': !userNameDisabled }"></i>
+ </section>
+
+
+
+ <section class="account-card">
+ <div class="header">
+ <div class="setting-title">蝬��</div>
+ <div class="contact-type">����Ⅳ</div>
+ <i class="icon-edit" @click="editField('userPhone')" :class="{'icon-color-change': !userPhoneDisabled}"></i>
+ </div>
+ <input
+ :disabled="userPhoneDisabled"
+ v-model="phoneValue"
+ ref="userPhone"
+ class="contact-input input" placeholder="0912345678" >
+ </section>
+
+ <section class="account-card">
+ <div class="header">
+ <div class="setting-title">蝬��</div>
+ <div class="contact-type">Email</div>
+ <i class="icon-edit" @click="editField('userEmail')"
+ :class="{'icon-color-change': !userEmailDisabled}"></i>
+ </div>
+ <input
+ :disabled="userEmailDisabled"
+ v-model="emailValue"
+ ref="userEmail"
+ class="contact-input input" placeholder="abc@gmail">
+ </section>
+
+</div>
</template>
-<script>
-export default {
+<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) => {
+ resolve(this[`${fieldName}Disabled`] = false);
+ });
+ const targetInput = this.$refs[fieldName] as any;
+ enablePromise.then((enable) => {
+ targetInput.focus();
+ });
+ }
}
</script>
-<style lang="">
+<style lang="scss" scoped>
+.account-page{
+ .account-page-title{
+ font-size: 20px;
+ margin-bottom: 34px;
+ }
+ .user-name{
+ display: flex;
+ border-bottom: 1px solid gray;
+ justify-content: space-around;
+ margin-bottom: 24px;
+ align-items: baseline;
+ .name-input{
+ width: 180px;
+ height:27px;
+ margin-bottom: 20px;
+ margin-left: -18px;
+ }
+ .icon{
+ margin-top:10px;
+ }
+ }
+ .account-card{
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid gray;
+ margin-bottom: 33px;
+ .contact-type{
+ width: 184px;
+ margin-right: 16px;
+ padding-top: 10px;
+ font-size: 20px;
+ }
+ }
+}
+.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{
+ margin-left: 100px;
+ font-size: 20px;
+ margin-bottom: 10px;
+ text-overflow: ellipsis;
+}
+.input{
+ border: 0;
+ background-color: rgba(0,0,0,0) ;
+ outline-color: gainsboro;
+}
+.input:focus{
+ background-color: #fff;
+}
+.icon-color-change{
+ color:$PRIMARY_RED;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0