ykt-wxapp/pages/message/components/head-card.vue

<template>
  <view>
    <!-- 等待医生接诊卡片 -->
    <view class="waiting-section">
      <view class="waiting-bg"></view>
      <view class="waiting-card-outer">
        <view class="hospital-name">{{ order.hospitalName || '医院' }}</view>
        <view class="waiting-consultation-card">
          <view class="waiting-card-row">
            <image class="waiting-illust" src="/static/home/waiting-illust.png" mode="aspectFit"></image>
            <view class="waiting-title-row">
              <text class="waiting-title">等待医生接诊.....</text>
            </view>
            <view class="doctor-avatar-outer">
              <image class="doctor-avatar" :src="avatar" mode="aspectFill">
              </image>
            </view>
          </view>
          <view class="waiting-desc">为了更好的获得医生帮助，请补充病情描述</view>
          <view class="waiting-btn-wrap">
            <button class="waiting-btn" @click="addSymptomDescription">
              {{ hasFilledDescription ? '已提交病情描述' : '补充病情描述' }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>


</template>
<script setup>
import { computed } from 'vue';

const emit = defineEmits(['addSymptomDescription']);
const props = defineProps({
  order: {
    type: Object,
    default: () => ({})
  },
  doctorInfo: {
    type: Object,
    default: () => ({})
  }
})

const hasFilledDescription = computed(() => props.order && ('description' in props.order));
const avatar = computed(() => props.doctorInfo?.avatar || '/static/home/avatar.svg')

function addSymptomDescription() {
  if (!hasFilledDescription.value) {
    emit('addSymptomDescription')
  }
}

</script>
<style lang="scss" scoped>
@import "../chat.scss";
</style>