TODO#130023 [顧問端-客戶預約清單] 串接 api

Mila

2021-11-12 d8b50d6626e96854016bdcabfbaaad09ec35b66d

 PAMapp/components/Client/ClientCard.vue

@@ -7,18 +7,18 @@
                    src=""
                    class="cursor--pointer"
                ></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>
@@ -46,18 +46,18 @@
        >
            <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.phone}}</p>
                <p>Email：{{client.email}}</p>
                <p>性別：{{client.gender === 'male' ? '男性' : '女性'}}</p>
                <p>年齡：{{client.age}}</p>
                <p>職業：一般職業</p>
                <p>職業：{{client.job}}</p>
                <p>需求：{{client.requirements}}</p>
                <p>連絡時段一：星期一,星期日 18:00~21:00</p>
                <div class="mt-30 text--center">
                    <el-button>{{isReserved ? '標註為已連絡' : '發送滿意度'}}</el-button>
                <p>連絡時段一：{{hopeContactTime}}</p>
                <div class="mt-30 text--center" v-if="isReserved">
                    <el-button>標註為已連絡</el-button>
                </div>
            </div>
        </Ui-Dialog>
@@ -66,25 +66,40 @@

<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 { Clients } from '~/pages/clientReservedList.vue';

@Component
export default class ClientList extends Vue {
    @Prop() client!: Clients;
    @Prop() client!: ClientInfo;
    isVisibleDialog = false;
    width = '';

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

    get hopeContactTime() {
        return this.client.hopeContactTime.slice(1, this.client.hopeContactTime.length - 1)
    }
    get time() {
        const hours = this.client.time.getHours();
        const minutes = this.client.time.getMinutes();
        return `${hours} : ${minutes}`
        if (this.client.appointmentDate) {
            const newDate = new Date(this.client.appointmentDate);
            const hours = newDate.getHours();
            const minutes = newDate.getMinutes();
            return `${hours} : ${minutes}`
        }
        return ''
    }

    get date() {
        const month = this.client.time.getMonth();
        const date = this.client.time.getDate();
        return `${month} / ${date}`
        if (this.client.appointmentDate) {
            const newDate = new Date(this.client.appointmentDate);
            const month = newDate.getMonth();
            const date = newDate.getDate();
            return `${month} / ${date}`
        }
        return ''
    }

    get isReserved() {