refactor: myAppointmentList

Tomas

2021-12-14 497f54b264eba626b77e79fec2ca6947ccae19e4

 PAMapp/components/Client/ClientCard.vue

@@ -7,22 +7,26 @@
            :class="{'new': !isView && isReserved}"
            @click.native="openDetail"
        >
            <el-col :xs="1" :sm="1" class="unread" align="middle">
                <div class="circle" v-if="isReserved && !isRead"></div>
            <el-col :xs="1" :sm="1" class="unread" align="middle" v-if="isReserved">
                <div class="circle" v-if="!isRead"></div>
            </el-col>
            <el-col :xs="4" :sm="2" align="middle">
            <el-col :xs="5" :sm="3" align="middle">
                <el-avatar
                    :size="50"
                    src=""
                ></el-avatar>
                <div class="satisfaction">
                <div class="satisfaction" v-if="!hideReviews">
                    <template v-if="client.satisfactionScore">
                        TODO:隱藏滿意度
                        <i class="icon-star pam-icon icon--yellow satisfaction"></i>
                        <span>{{client.satisfactionScore}}</span>
                    </template>
                    <template v-else>
                        <div class="unfilled">未填滿意度</div>
                    </template>
                </div>
            </el-col>
            <el-col :xs="15" :sm="15" class="pl-10">
            <el-col :xs="14" :sm="14" class="pl-10">
                <div class="smTxt_bold name">{{client.name}}</div>
                <div class="message">預約成功</div>
                <div class="professionals">
@@ -60,7 +64,7 @@
            class="pam-myDemand-dialog"
        >
            <h5 class="subTitle text--center mb-30"
            >{{isReserved ? '預約成功' : '已聯絡資訊'}}</h5>
            >{{isReserved ? '預約資訊' : '已聯絡資訊'}}</h5>

            <p v-if='isReserved'
                class="smTxt text-right"
@@ -91,10 +95,10 @@
</template>

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

import { hideReviews } from '~/assets/ts/const/hide-reviews';
@Component({
    filters: {
        formatNumber(index: number) {
@@ -121,6 +125,7 @@
    @Prop() client!: ClientInfo;
    isVisibleDialog = false;
    width = '';
    hideReviews = hideReviews;

    get requirements() {
        return this.client.requirement.split(',');
@@ -237,6 +242,11 @@
            font-size: 12px;
            font-weight: bold;
            margin-top: 5px;

            .unfilled {
                font-weight: lighter;
                color: $MID_GREY;
            }
        }

        .message {