TODO#129057 [個人帳號設定] 前端畫面刻版

HelenHuang

2021-11-23 5757272fa0a4f96b7519370f3983053307d4e26e

TODO#129057 [個人帳號設定] 前端畫面刻版

 PAMapp/components/BackActionBar.vue

@@ -41,6 +41,12 @@
        case 'notification':
          featureLabel = '通知';
          break;
        case 'record':
          featureLabel = '查看紀錄';
          break;
        case 'accountSetting':
          featureLabel = '個人帳號設定'
          break;
      }
      return featureLabel;
    } else {

 PAMapp/components/NavBar.vue

@@ -44,12 +44,17 @@
      },
      {
        needRole: [Role.ADMIN],
        link: '/notFinish',
        link: '/consultantAccountSetting',
        title: '查看帳號資訊',
      },
      {
        needRole: [Role.USER, Role.ADMIN],
        link: '/record/reviews',
        needRole: [Role.ADMIN],
        link: '/record',
        title: '查看紀錄',
      },
      {
        needRole: [Role.USER],
        link: '/userReviewsRecord',
        title: '查看紀錄',
      },
      {

 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>

 PAMapp/pages/consultantAccountSetting/index.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,6 @@
<template>
<div>
    <div>顧問帳號設定</div>

</div>
</template>

 PAMapp/pages/record/index.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,175 @@
<template>
<div class="reviews-page">
    <section class="mdTxt">
        æŸ¥çœ‹ç´€éŒ„
    </section>

    <section class="reviews-header">
        <div class="header-title mdTxt">
            æ»¿æ„åº¦ç´€éŒ„
        </div>
    </section>

    <!-- TODO: æ ¹æ“šç™»å…¥è€…çš„ role é¡¯ç¤ºä¸åŒçš„列表渲染方式 -->

    <!-- TODO: v-if curentUser Role is Consultant  -->
    
    <section class="reviews-content">
        <div class="reviews-card" v-for="(item,index) in consultantReviewsList" :key="index">
            <div class="reviews-card-content" >
                {{item.name + ' '}}對您做了{{item.score}}評價!
            </div>
            <div class="reviews-card-date">
                <div class="date">
                {{item.date}}
                </div>
                <div class="time">
                {{item.time}}
                </div>
            </div>
        </div>
    </section>
    <!-- TODO: v-if curentUser Role is Client -->
    <!-- <section class="reviews-content">
        <div class="reviews-card" v-for="(item,index) in userReviewsList" :key="index">
            <div class="reviews-card-content" >
                æ‚¨å° <span class="mdTxt">{{item.name + ' '}}</span>做了{{item.score}}評價!
            </div>
            <div class="reviews-card-date">
                <div class="date">
                {{item.date}}
                </div>
                <div class="time">
                {{item.time}}
                </div>
            </div>
        </div>
    </section> -->

    


</div>

</template>
<script lang="ts">
import { Vue , Component} from 'vue-property-decorator';


@Component
export default  class Reviews extends Vue{
    
        consultantReviewsList=[
            {
                name:'王聰明',
                score:'★★★★★★',
                date:'今天',
                time:'10:00'
            },
            {
                name:'Arial',
                score:'★★★',
                date:'昨天',
                time:'23:59'
            },
            {
                name:'Donna',
                score:'★★',
                date:'3天前',
                time:'10:00'
            },
            {
                name:'陳爸爸',
                score:'★★★★★★',
                date:'8/30',
                time:'10:00'
            },
            {
                name:'李伯伯',
                score:'★★★★★★',
                date:'2020/12/21',
                time:'10:00'
            }
        ]

        userReviewsList=[
            {
                name:'蔡美眉',
                score:'★★★★★★',
                date:'今天',
                time:'10:00'
            },
            {
                name:'賈斯町',
                score:'★★★',
                date:'今天',
                time:'10:00'
            },
            {
                name:'陳家庭',
                score:'★★',
                date:'今天',
                time:'10:00'
            },
            {
                name:'李顧問',
                score:'★★★★★★',
                date:'今天',
                time:'10:00'
            },
            {
                name:'周顧問',
                score:'★★★★★★',
                date:'今天',
                time:'10:00'
            }
        ]
    
}
</script>
<style lang="scss" scoped>
.reviews-page{
    margin-bottom:155px;
    .reviews-header{
        height: 43px;
        margin-top: 28px;
        display: flex;
        justify-content: center;
        border-bottom: 2px solid black;
    }
    .reviews-content{
        .reviews-card{
            display: flex;
            justify-content: space-between;
            margin-top: 26px;
            border-bottom: 1px solid #707070;
            height: 54px;
            padding-bottom: 15px;
            .reviews-card-content{
                width: 242px;
                padding-right:50px;
                line-height: 1.2;
                font-size: 20px;
                margin-left: 15px;
            }
            .reviews-card-date{
                font-size: 12px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                margin-right: 15px;
                width:52px;
                .date{
                    margin-bottom: 2px;
                    
                }
            }
        }
    }
}
@include desktop{
    .reviews-card-content{
        flex: 1;
    }
}
</style>

 PAMapp/pages/record/reviews.vue

Àɮפw§R°£

 PAMapp/pages/userReviewsRecord/index.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,129 @@
<template>

<!-- æ‡‰éœ€æˆªåœ–畫面上傳Otis æ‰€ä»¥å…ˆåˆ†å‰²å‡ºä¾†ä¸€é  , u也有在 NavBar æ”¹ Role的設定 => needRole: [Role.NOT_LOGIN, Role.USER] åˆ†é–‹, 
預計應該會使用辨識 ä¿æˆ¶/顧問 ç™»å…¥è€Œé¡¯ç¤ºä¸åŒæ¸²æŸ“方式,已把兩種不同方式頁面做在名稱為 record/index è£¡  Helen -->
<div class="user-reviews-page">
    <section class="mdTxt">
        æŸ¥çœ‹ç´€éŒ„
    </section>

    <section class="user-reviews-header">
        <div class="header-title mdTxt">
            æ»¿æ„åº¦ç´€éŒ„
        </div>
    </section>

    <!-- TODO: æ ¹æ“šç™»å…¥è€…çš„ role é¡¯ç¤ºä¸åŒçš„列表渲染方式 -->


    <!-- TODO: v-if curentUser Role is Client -->
    <section class="user-reviews-content">
        <div class="user-reviews-card" v-for="(item,index) in userReviewsList" :key="index">
            <div class="user-reviews-card-content" >
                æ‚¨å° <span class="mdTxt">{{item.name + ' '}}</span>做了{{item.score}}評價!
            </div>
            <div class="user-reviews-card-date">
                <div class="date">
                {{item.date}}
                </div>
                <div class="time">
                {{item.time}}
                </div>
            </div>
        </div>
    </section>

    <!-- TODO: v-if curentUser Role is Consultant  -->


</div>

</template>
<script lang="ts">
import { Vue , Component} from 'vue-property-decorator';


@Component
export default  class UserReviewsRecord extends Vue{
    
        userReviewsList=[
            {
                name:'蔡美眉',
                score:'★★★★★★',
                date:'今天',
                time:'10:00'
            },
            {
                name:'賈斯町',
                score:'★★★',
                date:'今天',
                time:'10:00'
            },
            {
                name:'陳家庭',
                score:'★★',
                date:'今天',
                time:'10:00'
            },
            {
                name:'李顧問',
                score:'★★★★★★',
                date:'今天',
                time:'10:00'
            },
            {
                name:'周顧問',
                score:'★★★★★★',
                date:'今天',
                time:'10:00'
            }
        ];
    
}
</script>
<style lang="scss" scoped>
.user-reviews-page{
    margin-bottom:155px;
    .user-reviews-header{
        height: 43px;
        margin-top: 28px;
        display: flex;
        justify-content: center;
        border-bottom: 2px solid black;
    }
    .user-reviews-content{
        .user-reviews-card{
            display: flex;
            justify-content: space-between;
            margin-top: 26px;
            border-bottom: 1px solid #707070;
            height: 54px;
            padding-bottom: 15px;
            .user-reviews-card-content{
                width: 242px;
                padding-right:50px;
                line-height: 1.2;
                font-size: 20px;
                margin-left: 15px;
            }
            .user-reviews-card-date{
                font-size: 12px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                margin-right: 15px;
                width:52px;
                .date{
                    margin-bottom: 2px;
                    
                }
            }
        }
    }
}
@include desktop{
    .user-reviews-card-content{
        flex: 1;
    }
}
</style>