保誠-保戶業務員媒合平台
Mila
2021-11-16 6f3021e865c2b0503dda227477084fa586e6fd8f
PAMapp/components/Client/ClientCard.vue
@@ -1,11 +1,11 @@
<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">
                    <i class="icon-star pam-icon icon--yellow satisfaction"></i>
@@ -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>
@@ -51,7 +50,7 @@
                <p>姓名:{{client.name}}</p>
                <p>電話:{{client.phone}}</p>
                <p>Email:{{client.email}}</p>
                <p>性別:{{client.gender === 'male' ? '男性' : '女性'}}</p>
                <p>性別:{{gender}}</p>
                <p>年齡:{{client.age}}</p>
                <p>職業:{{client.job}}</p>
                <p>需求:{{client.requirement.replace(',', '、')}}</p>
@@ -66,7 +65,7 @@
</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 { ClientInfo, markAsContact } from '~/assets/ts/api/appointment';
@@ -81,6 +80,8 @@
    }
})
export default class ClientList extends Vue {
    @Action updateMyAppointment!: (data: ClientInfo) => void
    @Prop() client!: ClientInfo;
    isVisibleDialog = false;
    width = '';
@@ -89,8 +90,15 @@
        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 - 1));
        const contactList = this.client.hopeContactTime.split("'").map(item => item.slice(0, item.length));
        return contactList.filter(item => !!item)
    }
@@ -114,7 +122,17 @@
    }
    markAppointment() {
        markAsContact(this.client.id).then(res => this.$router.go(0))
        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;
        })
    }
}