<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">
|
<img class="avator" :src="agentInfo.img" alt="">
|
<div class="star">{{agentInfo.satisfaction}}</div>
|
</el-col>
|
<el-col class="flex_column" :xs="10" :sm="15">
|
<div class="smTxt_bold name">{{agentInfo.name}}</div>
|
<div class="tagStyle">
|
<span
|
class="tagTxt"
|
v-for="(tag, index) in agentInfo.tags" :key="index">#{{tag}}</span>
|
</div>
|
<div class="delete" @click="removeAgent">移除</div>
|
</el-col>
|
<el-col class="flex_column" :xs="9" :sm="6">
|
<el-button
|
class="smTxt_bold btn"
|
@click="reserveCommunication"
|
:class="{'reservedBtn': agentInfo.reserve}"
|
>{{ agentInfo.reserve ? '已預約' : '進行預約'}}</el-button>
|
<div class="time">今天 10:00 加入</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Emit, Watch } from 'nuxt-property-decorator';
|
import { Agents } from '~/plugins/api/home';
|
|
@Component
|
export default class ConsultantCard extends Vue {
|
@Prop() agentInfo!: Agents;
|
|
reserveCommunication() {
|
if (!this.agentInfo.reserve) {
|
this.$router.push('/communication/myDemand')
|
}
|
|
}
|
|
@Emit('removeAgent') removeAgent() {
|
console.log('removeAgent')
|
return this.agentInfo.id;
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.rowStyle {
|
padding: 10px;
|
background-color: #FFFFFF;
|
margin-bottom: 10px;
|
display: flex;
|
justify-content: space-between;
|
|
.state {
|
width: 10px;
|
height: 10px;
|
border-radius: 50px;
|
background-color: #F2C75C;
|
margin: auto 0;
|
}
|
|
.avator {
|
width: 50px;
|
height: 50px;
|
border-radius: 50px ;
|
}
|
|
.star {
|
font-size: 12px;
|
font-weight: bold;
|
|
&:before {
|
content: '\2605';
|
color: #ED1B2E;
|
margin: 5px;
|
}
|
}
|
|
.tagStyle {
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
.tagTxt {
|
font-size: 12px;
|
font-weight: bold;
|
margin-right: 5px;
|
}
|
}
|
|
.delete {
|
color: #ED1B2E;
|
font-size: 14px;
|
font-weight: bold;
|
cursor: pointer;
|
}
|
|
.btn {
|
color: #ED1B2E;
|
border: solid 2px;
|
border-radius: 30px;
|
padding: 10px 16px;
|
}
|
|
.reservedBtn {
|
color: #009CBD;
|
cursor: auto;
|
|
&:hover {
|
color: #009CBD;
|
border-color: #009CBD;
|
background-color: #ffffff;
|
}
|
}
|
|
.time {
|
font-size: 12px;
|
font-weight: bold;
|
color: #707070;
|
text-align: right;
|
}
|
}
|
|
.flex_column {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
</style>
|
