[Update] [個人帳號設定]畫面修正

HelenHuang

2021-11-25 f921245d071b9d9189e9c212809b2aa14205c6b5

[Update] [個人帳號設定]畫面修正

 PAMapp/pages/accountSetting/index.vue

@@ -1,45 +1,60 @@
<template>
<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 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>
        <input
            :disabled="userPhoneDisabled"
            v-model="phoneValue" 
            ref="userPhone"
        class="contact-input input" placeholder="0912345678" >
        
    </section>

    <section class="account-card"> 
        <div class="header">
            <div class="block">   
            <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 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>
        <input 
            :disabled="userEmailDisabled"
            v-model="emailValue"
            ref="userEmail"
            class="contact-input input" placeholder="abc@gmail">
        
    </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>
@@ -59,11 +74,11 @@
        emailValue = '' ;

        editField(fieldName: string): void {
            const enablePromise = new Promise((resolve, reject) => {
                resolve(this[`${fieldName}Disabled`] = false);
            const enablePromise = new Promise((resolve, reject) => { // 此為promise語法
                resolve((this as any)[`${fieldName}Disabled`] = false);
            });
            const targetInput = this.$refs[fieldName] as any;
            enablePromise.then((enable) => {
            enablePromise.then((_) => {
                targetInput.focus();
            });
        }
@@ -73,25 +88,12 @@

<style lang="scss" scoped>
.account-page{
    .block{
        display: flex;
    }
    .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;
@@ -101,12 +103,21 @@
        .contact-type{
            width: 184px;
            margin-right: 16px;
            padding-top: 10px;
            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;
@@ -119,10 +130,11 @@
    justify-content: space-evenly;
}
.contact-input{
    margin-left: 100px;
    font-size: 20px;
    margin-bottom: 10px;
    text-overflow: ellipsis;
    margin-top: 10px;
    width: 184px;
}
.input{
    border: 0;
@@ -134,5 +146,48 @@
}
.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>

 PAMapp/pages/notification/index.vue

@@ -83,7 +83,7 @@
    showNotification = false;

    readNotification(index?: number): void {
        const targetNotification = this.notificationList[index];
        const targetNotification = index ? this.notificationList[index] : false;
        const readNotifaction = (notification: NotificationIF) => notification.hasRead = true;
    //  定義       變數        = (   參數     :  型別          )  
        if (targetNotification) {