six-aio.x/src/modules/chat/renderer/GuideContent.vue

<script setup lang="ts">
import { defaultMessageRender } from '@/modules/chat/config';
import { useWatcher } from 'alova/client';
import { guideDepartments, guideDoctors } from '@/request/api';
import { useGuideStore } from '@/stores';

const { content } = defineProps<{ content: string }>();
const markdown = computed(() => defaultMessageRender(content));

const Guide = useGuideStore();
const { session } = storeToRefs(Guide);
const activeKey = ref<Array<'departments' | 'doctors'>>([]);

const { data: departments } = useWatcher(() => guideDepartments(content, { session_id: session.value }), [() => content], {
  immediate: true,
  initialData: [],
}).onSuccess(({ data }) => {
  if (data.length > 0) activeKey.value.push('departments');
});
const { data: doctors } = useWatcher(() => guideDoctors(content, { session_id: session.value }), [() => content], {
  immediate: true,
  initialData: [],
}).onSuccess(({ data }) => {
  if (data.length > 0) activeKey.value.push('doctors');
});

const open = (url: string) => {
  if (url) window.open(url);
}
</script>

<template>
  <div>
    <component :is="markdown"></component>
    <a-collapse class="recommended-wrapper" v-model:activeKey="activeKey">
      <a-collapse-panel key="doctors" header="中医专家推荐" :collapsible="doctors.length ? 'header' : 'disabled'">
        <div v-for="doctor in doctors" :key="doctor.id" class="doctor">
          <div class="row">
            <a-space>
              <a-avatar :src="doctor.avatar" style="color: #f56a00; background-color: #fde3cf">
                {{ doctor.name?.slice(0, 1) }}
              </a-avatar>
              <span>{{ doctor.name }}</span>
              <span v-if="doctor?.department?.name">{{ doctor.department.name }}</span>
            </a-space>
            <div>
              <a-button v-if="doctor.registerLink" type="primary" @click="open(doctor.registerLink)">预约</a-button>
            </div>
          </div>
          <div>
            <a-tag color="pink" v-if="doctor.titleOfClinical">{{ doctor.titleOfClinical }}</a-tag>
            <a-tag color="cyan" v-if="doctor.titleOfTeach">{{ doctor.titleOfTeach }}</a-tag>
            <a-tag color="purple" v-if="doctor.titleOf">{{ doctor.titleOf }}</a-tag>
          </div>
          <div class="van-multi-ellipsis--l3">
            <span v-if="doctor.description">{{ doctor.description }}</span>
            <span v-if="doctor.adeptAt">{{ doctor.adeptAt }}</span>
          </div>
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="departments" header="中医科室推荐" :collapsible="departments.length ? 'header' : 'disabled'">
        <div v-for="department in departments" :key="department.id" class="department">
          <div class="row">
            <a-space>
              <a-avatar :src="department.avatar" style="color: #7265e6; background-color: #fde3cf">
                {{ department.name?.slice(0, 2) }}
              </a-avatar>
              <span>{{ department.name }}</span>
            </a-space>
            <div>
              <a-button v-if="department.registerLink" type="primary" @click="open(department.registerLink)">预约</a-button>
            </div>
          </div>
          <div class="van-multi-ellipsis--l3" v-if="department.description">
            <span>{{ department.description }}</span>
          </div>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<style scoped lang="scss">
.recommended-wrapper {
  margin-top: 12px;

  .row {
    display: flex;
    justify-content: space-between;
  }

  :deep(.ant-collapse-header-text) {
    flex: auto!important;
    font-weight: 700;
    text-align: center;
    transform: translateX(-17px);
  }
}

.doctor {
  > div + div {
    margin-top: 8px;
  }
  & + .doctor {
    border-top: 1px cadetblue dashed;
    margin-top: 16px;
    padding-top: 16px;
  }
}

.department {
  > div + div {
    margin-top: 8px;
  }

  & + .department {
    border-top: 1px cadetblue dashed;
    margin-top: 16px;
    padding-top: 16px;
  }
}
</style>