aiwen-cuotiben/src/components/teacher-card/index.vue

<script setup lang="ts">
import { ElMessage } from 'element-plus'

const props = defineProps<{ d: any }>()

const router = useRouter()

function handleClickConsult() {
  if (!props.d.user_id) {
    console.error('用户未认证')
    return ElMessage({ message: '老师正忙，请稍后再试', type: 'warning' })
  }
  sessionStorage.setItem('consult_teacher', JSON.stringify(props.d))
  router.push({ name: 'student_consult' })
}
</script>

<template>
  <div class="bg-white w-370px h-160px rounded-md box_shadow flex flex-col justify-between p-4">
    <div class="flex items-center justify-between">
      <div class="flex space-x-4 items-center">
        <el-avatar :size="48" :src="d.dxp_user_avatar"></el-avatar>
        <div class="text-lg max-w-24 truncate">{{ d.dxp_user_realname }}</div>
      </div>
      <slot>
        <el-button type="primary" round @click="handleClickConsult">咨询</el-button>
      </slot>

    </div>
    <div class="text-hex-5B9FF0">联系电话：{{ d.dxp_user_phone }}</div>
    <div class="line-clamp-2 overflow-ellipsis text-hex-00000041 h-10 leading-5">
      {{ d.dxp_jj }}
    </div>
  </div>
</template>

<style scoped>
.box_shadow {
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.04);
}
</style>