update: 我的顧問清單/預約清單: 調整需求單樣式

Mila

2021-11-18 e08bc304e5be985bf83d4e668daf8ffa0f256e14

 PAMapp/components/Client/ClientCard.vue

@@ -1,6 +1,6 @@
<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"
@@ -32,7 +32,6 @@
            <el-col class="flex-column contactInfo" :xs="5" :sm="6">
                <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,6 +42,7 @@
        <Ui-Dialog
            :isVisible.sync="isVisibleDialog"
            :width="width"
            class="pam-myDemand-dialog"
        >
            <h5 class="subTitle text--center mb-30"
            >{{isReserved ? '預約成功' : '已聯絡資訊'}}</h5>
@@ -56,17 +56,16 @@
                <p>職業：{{client.job}}</p>
                <p>需求：{{client.requirement.replace(',', '、')}}</p>
                <p v-for="(item, index) in hopeContactTime" :key="index">連絡時段{{index + 1 | formatNumber}}：{{item}}</p>
                </div>
                <div class="mt-30 text--center" v-if="isReserved">
                    <el-button @click="markAppointment">標註為已連絡</el-button>
                </div>

            </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 { 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 = '';
@@ -98,7 +99,7 @@

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

    get time() {
@@ -121,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;

        })
    }

}
@@ -186,8 +197,11 @@

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


    .text-right {
        text-align: right;
    }