保誠-保戶業務員媒合平台
wayne
2021-11-16 8b822da7e688aa31e4600f9ea17a0e85f9985c06
PAMapp/components/Client/ClientCard.vue
@@ -51,14 +51,15 @@
                <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.requirements}}</p>
                <p>連絡時段一:{{hopeContactTime}}</p>
                <p>需求:{{client.requirement.replace(',', '、')}}</p>
                <p v-for="(item, index) in hopeContactTime" :key="index">連絡時段{{index + 1 | formatNumber}}:{{item}}</p>
                <div class="mt-30 text--center" v-if="isReserved">
                    <el-button>標註為已連絡</el-button>
                    <el-button @click="markAppointment">標註為已連絡</el-button>
                </div>
            </div>
        </Ui-Dialog>
    </div>
@@ -66,10 +67,19 @@
<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator';
import { ClientInfo } from '~/assets/ts/api/consultant';
import { isMobileDevice } from '~/assets/ts/device';
import { ClientInfo, markAsContact } from '~/assets/ts/api/appointment';
@Component
@Component({
    filters: {
        formatNumber(index: number) {
            if (index) {
                const upperNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
                return upperNumber[index];
            }
        }
    }
})
export default class ClientList extends Vue {
    @Prop() client!: ClientInfo;
    isVisibleDialog = false;
@@ -79,27 +89,26 @@
        return this.client.requirement.split(',');
    }
    get hopeContactTime() {
        return this.client.hopeContactTime.slice(1, this.client.hopeContactTime.length - 1)
    }
    get time() {
        if (this.client.appointmentDate) {
            const newDate = new Date(this.client.appointmentDate);
            const hours = newDate.getHours();
            const minutes = newDate.getMinutes();
            return `${hours} : ${minutes}`
    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));
        return contactList.filter(item => !!item)
    }
    get time() {
        const formatDate = (this.$options.filters as any).formatDate(this.client.appointmentDate);
        return formatDate.split(' ')[1]
    }
    get date() {
        if (this.client.appointmentDate) {
            const newDate = new Date(this.client.appointmentDate);
            const month = newDate.getMonth();
            const date = newDate.getDate();
            return `${month} / ${date}`
        }
        return ''
        const formatDate = (this.$options.filters as any).formatDate(this.client.appointmentDate);
        return formatDate.split(' ')[0]
    }
    get isReserved() {
@@ -111,6 +120,10 @@
        this.isVisibleDialog = true;
    }
    markAppointment() {
        markAsContact(this.client.id).then(res => this.$router.go(0))
    }
}
</script>