add: age.filter

Tomas

2021-11-30 5ca8f6e6e554696cb8add0fc91396b2d905b0d7a

 PAMapp/components/Client/ClientCard.vue

@@ -1,24 +1,24 @@
<template>
    <div>
        <el-row type="flex" class="rowStyle">
        <el-row type="flex" class="rowStyle" @click.native="openDetail">
            <el-col :xs="5" :sm="3">
                <el-avatar
                    :size="50"
                    src=""
                    class="cursor--pointer"
                    class="cursor--pointer fix-chrome-click--issue"
                ></el-avatar>
                <div class="satisfaction">
                <!-- <div class="satisfaction">
                    <i class="icon-star pam-icon icon--yellow satisfaction"></i>
                    <span>{{'1'}}</span>
                </div>
                </div> -->
            </el-col>
            <el-col :xs="14" :sm="15">
                <div class="smTxt_bold name">{{client.name}}</div>
                <div class="message">預約成功</div>
                <div class="professionals">
                    <template v-if="client.requirements.length > 0">
                    <template v-if="client.requirement">
                        <span
                            v-for="(item, index) in client.requirements"
                            v-for="(item, index) in requirements"
                            :key="index"
                            class="professionalsTxt"
                        >#{{item}}</span>
@@ -30,9 +30,8 @@
                </div>
            </el-col>
            <el-col class="flex-column contactInfo" :xs="5" :sm="6">
                <div class="smTxt_bold cursor--pointer"
                <div class="smTxt_bold cursor--pointer fix-chrome-click--issue"
                    :class="client.communicateStatus"
                    @click="openDetail"
                >{{isReserved ? '已預約' : '已聯絡'}}
                </div>
                <div class="date xsTxt text--mid_grey">{{date}}</div>
@@ -43,48 +42,83 @@
        <Ui-Dialog
            :isVisible.sync="isVisibleDialog"
            :width="width"
            class="pam-myDemand-dialog"
        >
            <h5 class="subTitle text--center mb-30"
            >{{isReserved ? '預約成功' : '已聯絡資訊'}}</h5>
            <p class="smTxt text-right">今天 10:00</p>
            <p class="smTxt text-right">{{client.appointmentDate | formatDate}}</p>
            <div class="dialogTxt">
                <p>姓名：{{client.name}}</p>
                <p>電話：0912345678</p>
                <p>Email：</p>
                <p>性別：{{client.gender === 'male' ? '男性' : '女性'}}</p>
                <p>年齡：{{client.age}}</p>
                <p>職業：一般職業</p>
                <p>需求：{{client.requirements}}</p>
                <p>連絡時段一：星期一,星期日 18:00~21:00</p>
                <div class="mt-30 text--center">
                    <el-button>{{isReserved ? '標註為已連絡' : '發送滿意度'}}</el-button>
                <p>電話：{{client.phone}}</p>
                <p>Email：{{client.email}}</p>
                <p>性別：{{gender}}</p>
                <p>年齡：{{client.age | toAgeLabel }}</p>
                <p>職業：{{client.job}}</p>
                <p>需求：{{client.requirement.split(',').join('、')}}</p>
                <p v-for="(item, index) in hopeContactTime" :key="index">連絡時段{{index + 1 | formatNumber}}：{{ item | formatHopeContactTime}}</p>
                </div>
            </div>
                <div class="mt-30 text--center" v-if="isReserved">
                    <el-button @click="markAppointment">標註為已連絡</el-button>
                </div>
        </Ui-Dialog>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator';
import { Vue, Component, Prop, Mutation, Action } from 'nuxt-property-decorator';
import { isMobileDevice } from '~/assets/ts/device';
import { Clients } from '~/pages/clientReservedList.vue';
import { ClientInfo, markAsContact } from '~/assets/ts/api/appointment';

@Component
@Component({
    filters: {
        formatNumber(index: number) {
            if (index) {
                const upperNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
                return upperNumber[index];
            }
        },
        formatHopeContactTime(item: string): string {
          if (item) {
            const [hopeDay, hopeTime] = item.split('、');
            const day = hopeDay.split(',').length > 6 ? '不限日期' : hopeDay;
            const time = hopeTime.split(',').length > 3 ? '不限時間' : hopeTime;
            return `${day}、${time}`;
          }
          return '';
        }
    }
})
export default class ClientList extends Vue {
    @Prop() client!: Clients;
    @Action updateMyAppointment!: (data: ClientInfo) => void

    @Prop() client!: ClientInfo;
    isVisibleDialog = false;
    width = '';

    get requirements() {
        return this.client.requirement.split(',');
    }

    get gender() {
        if (this.client.gender) {
            return this.client.gender === 'male' ? '男性' : '女性';
        }
        return ''
    }

    get hopeContactTime() {
        const contactList = this.client.hopeContactTime.split("'").map(item => item.slice(0, item.length));
        return contactList.filter(item => !!item && item !== ",")
    }

    get time() {
        const hours = this.client.time.getHours();
        const minutes = this.client.time.getMinutes();
        return `${hours} : ${minutes}`
        const formatDate = (this.$options.filters as any).formatDate(this.client.appointmentDate);
        return formatDate.split(' ')[1]
    }

    get date() {
        const month = this.client.time.getMonth();
        const date = this.client.time.getDate();
        return `${month} / ${date}`
        const formatDate = (this.$options.filters as any).formatDate(this.client.appointmentDate);
        return formatDate.split(' ')[0]
    }

    get isReserved() {
@@ -94,6 +128,20 @@
    openDetail() {
        this.width = isMobileDevice() ? '80%' : '';
        this.isVisibleDialog = true;
    }

    markAppointment() {
        markAsContact(this.client.id).then(data => {
            // TODO: 要接後台傳回的 updated client 資料 - Ben 2021/11/16

            const updatedClient = {...this.client};
            updatedClient.communicateStatus = 'contacted';
            updatedClient.appointmentDate = new Date();

            this.updateMyAppointment(updatedClient);
            this.isVisibleDialog = false;

        })
    }

}
@@ -158,9 +206,12 @@

    .dialogTxt {
        font-size: 20px;
        overflow-y:scroll;
        height:400px;
    }


    .text-right {
        text-align: right;
    }
</style>
</style>