<template>
|
<div>
|
<el-row type="flex" class="rowStyle">
|
<el-col :xs="2" :sm="1" :class="{'state': agentInfo.new}"></el-col>
|
<el-col :xs="22" :sm="23">
|
<el-row type="flex">
|
<el-col class="flex_column" :xs="5" :sm="3">
|
<UiAvatar
|
:size="50"
|
:fileName="agentInfo.img"
|
@click.native="showAgentDetail(agentInfo.agentNo)"
|
></UiAvatar>
|
<div class="satisfaction">
|
<i class="icon-star pam-icon icon--yellow satisfaction"></i>
|
<span>{{agentInfo.avgScore }}</span>
|
</div>
|
</el-col>
|
<el-col :xs="10" :sm="15">
|
<div class="smTxt_bold name">{{agentInfo.name}}</div>
|
<div class="professionals">
|
<span
|
class="professionalsTxt"
|
v-for="(expertise, index) in agentInfo.expertise"
|
:key="index"
|
>#{{expertise}}</span>
|
</div>
|
<div
|
class="delete"
|
v-if="agentInfo.contactStatus !== 'reserved'
|
|| agentInfo.contactStatus !== 'contacted'"
|
@click="removeAgent"
|
>移除</div>
|
</el-col>
|
<el-col class="flex_column" :xs="9" :sm="6">
|
<el-button
|
class="smTxt_bold outline_btn"
|
@click="reserveCommunication"
|
:class="agentInfo.contactStatus + 'Btn'"
|
>{{ contactTxt }}</el-button>
|
<div class="updateTime" v-if="updateTime">{{updateTime | formatDate}}</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
|
<Ui-Dialog
|
:isVisible.sync="isVisibleDialog"
|
:width="width"
|
>
|
<h5 class="subTitle text--center mb-30">預約成功</h5>
|
<p class="smTxt">今天 10:00</p>
|
<div class="dialogInfo">
|
<p>姓名：王聰明</p>
|
<p>電話：0912345678</p>
|
<p>Email：</p>
|
<p>性別 ：男性</p>
|
<p>年齡：26-30</p>
|
<p>職業：一般職業</p>
|
<p>需求：保單健檢/規劃、紅利保單相關</p>
|
<p>連絡時段一：星期一,星期日 18:00~21:00</p>
|
</div>
|
</Ui-Dialog>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
|
import { Consultants } from '~/assets/ts/api/consultant';
|
import { isLogin } from '~/assets/ts/auth';
|
import { isMobileDevice } from '~/assets/ts/device';
|
|
@Component
|
export default class ConsultantCard extends Vue {
|
@Prop() agentInfo!: Consultants;
|
isVisibleDialog = false;
|
width: string = '';
|
|
get contactTxt() {
|
if (this.agentInfo.contactStatus === 'contacted') {
|
return '已聯絡'
|
} else if (this.agentInfo.contactStatus === 'reserved') {
|
return '已預約'
|
} else {
|
return '進行預約'
|
}
|
}
|
|
get updateTime() {
|
return isLogin() ? this.agentInfo.updateTime : '';
|
}
|
reserveCommunication() {
|
const contactStatus = this.agentInfo.contactStatus;
|
if (contactStatus !== 'reserved' && contactStatus !== 'contacted') {
|
isLogin() ? this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`) : this.$router.push('/login');
|
} else {
|
this.width = isMobileDevice() ? '80%' : '';
|
this.isVisibleDialog = true;
|
}
|
}
|
|
@Emit('removeAgent') removeAgent() {
|
return this.agentInfo.agentNo;
|
}
|
|
showAgentDetail(agentNo: string): void {
|
this.$router.push(`/agentInfo/${agentNo}`);
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.rowStyle {
|
padding: 10px;
|
background-color: $PRIMARY_WHITE;
|
margin-bottom: 10px;
|
display: flex;
|
justify-content: space-between;
|
|
.state {
|
width: 10px;
|
height: 10px;
|
border-radius: 50px;
|
background-color: $YELLOW;
|
margin: auto 0;
|
}
|
|
.satisfaction {
|
font-size: 12px;
|
font-weight: bold;
|
margin-top: 5px;
|
}
|
|
.professionals {
|
height: 20px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
margin: 5px 0 10px 0;
|
|
.professionalsTxt {
|
font-size: 12px;
|
font-weight: bold;
|
margin-right: 5px;
|
}
|
}
|
|
.delete {
|
color: $PRIMARY_RED;
|
font-size: 14px;
|
font-weight: bold;
|
cursor: pointer;
|
}
|
|
.reservedBtn {
|
color: $SKY_BLUE;
|
border-color: $SKY_BLUE;
|
|
&:focus {
|
color: $PRIMARY_WHITE;
|
background-color: $SKY_BLUE;
|
opacity: 0.5;
|
}
|
}
|
|
.contactedBtn {
|
color: $GREEN;
|
border-color: $GREEN;
|
|
&:focus {
|
color: $PRIMARY_WHITE;
|
background-color: $GREEN;
|
opacity: 0.5;
|
}
|
}
|
|
.updateTime {
|
font-size: 12px;
|
font-weight: bold;
|
color: #707070;
|
text-align: right;
|
}
|
}
|
|
.flex_column {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.dialogInfo {
|
font-size: 20px;
|
}
|
|
</style>
|
