huimv-baqing/ruoyi-ui-app/package-a/vet-profile/index.vue

<template>
  <!-- 兽医资料：列表项已含全部字段，见在线问诊接口说明 -->
  <view :class="pageRootClass" class="tab-page vp-page" :style="pageStyle">
    <scroll-view scroll-y class="vp-scroll" enable-back-to-top :show-scrollbar="false">
      <view class="vp-card">
        <view class="vp-hero">
          <up-avatar
            shape="circle"
            :src="photoSrc"
            :text="photoSrc ? '' : avatarText"
            size="48"
            font-size="18"
            bg-color="#9ca3af"
            color="#ffffff"
          />
          <view class="vp-hero__right">
            <text class="vp-hero__title text-body">{{ vetTitle }}</text>
            <text v-if="unitLine" class="vp-meta text-body">{{ unitLine }}</text>
            <text v-if="contactLine" class="vp-meta text-body">{{ contactLine }}</text>
          </view>
        </view>
        <text class="vp-line text-body">
          <text class="vp-line__k">{{ $t('vetProfilePage.labelIntro') }}</text>
          {{ introBody }}
        </text>
        <text class="vp-line text-body">
          <text class="vp-line__k">{{ $t('vetProfilePage.labelAddress') }}</text>
          {{ detailAddress }}
        </text>
        <text class="vp-line text-body">
          <text class="vp-line__k">{{ $t('vetProfilePage.labelHours') }}</text>
          {{ serviceHours }}
        </text>
        <up-button
          type="success"
          shape="circle"
          :text="$t('vetProfilePage.btnConsult')"
          :loading="consulting"
          :custom-style="{ width: '100%', marginTop: '8px' }"
          @click="onConsult"
        />
      </view>
      <view class="vp-footer-spacer" />
    </scroll-view>
  </view>
</template>

<script>
import UAvatar from 'uview-plus/components/u-avatar/u-avatar.vue'
import UButton from 'uview-plus/components/u-button/u-button.vue'
import tabPage from '@/mixins/tabPage'
import pageViewport from '@/mixins/pageViewport'
import { resolveResourceUrl } from '@/utils/resourceUrl'
import { ensureApiToken } from '@/utils/apiAuth'
import {
  loadVetProfileCache,
  openOnlineConsultSession,
  saveVetProfileCache
} from '@/api/onlineConsult'

const CONSULT_DETAIL_PATH = '/package-a/consult-detail/index'

export default {
  components: {
    'up-avatar': UAvatar,
    'up-button': UButton
  },
  mixins: [tabPage, pageViewport],
  data() {
    return {
      navTitleKey: 'vetProfilePage.navTitle',
      vetId: '',
      vet: null,
      consulting: false
    }
  },
  computed: {
    avatarText() {
      const name = (this.vet && this.vet.resourceName) || ''
      return name.slice(0, 1) || '兽'
    },
    photoSrc() {
      const url = this.vet && this.vet.photoFileUrl
      return url ? resolveResourceUrl(url) : ''
    },
    vetTitle() {
      return (this.vet && this.vet.resourceName) || this.$t('vetProfilePage.nameFallback')
    },
    unitLine() {
      const unit = this.vet && this.vet.affiliatedUnit
      return unit ? this.$t('vetProfilePage.unitTpl', { unit }) : ''
    },
    contactLine() {
      const phone = this.vet && this.vet.contactPhone
      return phone ? this.$t('vetProfilePage.contactTpl', { phone }) : ''
    },
    introBody() {
      return (this.vet && this.vet.introduction) || this.$t('vetProfilePage.noIntro')
    },
    detailAddress() {
      return (this.vet && this.vet.detailAddress) || this.$t('vetProfilePage.noAddress')
    },
    serviceHours() {
      const start = this.vet && this.vet.serviceStartTime
      const end = this.vet && this.vet.serviceEndTime
      if (start && end) {
        return this.$t('vetProfilePage.hoursTpl', { start, end })
      }
      return this.$t('vetProfilePage.noHours')
    }
  },
  onLoad(query) {
    this.vetId = query.id ? decodeURIComponent(query.id) : ''
    const cached = loadVetProfileCache(this.vetId)
    if (cached) {
      this.vet = cached
    }
  },
  onShow() {
    if (this.vet && this.vet.resourceName) {
      uni.setNavigationBarTitle({ title: this.vet.resourceName })
    }
  },
  methods: {
    subLine() {
      if (this.vet && this.vet.affiliatedUnit) {
        return this.vet.affiliatedUnit
      }
      if (this.vet && this.vet.serviceStartTime && this.vet.serviceEndTime) {
        return `${this.vet.serviceStartTime} - ${this.vet.serviceEndTime}`
      }
      return ''
    },
    onConsult() {
      if (!this.vetId || !ensureApiToken()) return
      this.consulting = true
      uni.showLoading({ title: this.$t('vetProfilePage.openingSession'), mask: true })
      openOnlineConsultSession({ vetResourceId: Number(this.vetId) || this.vetId })
        .then((res) => {
          const session = res.data || {}
          const sessionId = session.id != null ? String(session.id) : ''
          if (!sessionId) return
          if (this.vet) {
            saveVetProfileCache(this.vetId, this.vet)
          }
          const name = session.receiverName || (this.vet && this.vet.resourceName) || ''
          const q = [
            `sessionId=${encodeURIComponent(sessionId)}`,
            `vetResourceId=${encodeURIComponent(this.vetId)}`,
            `id=${encodeURIComponent(this.vetId)}`,
            `name=${encodeURIComponent(name)}`,
            `sub=${encodeURIComponent(this.subLine())}`,
            `intro=${encodeURIComponent((this.vet && this.vet.introduction) || '')}`,
            `avatar=${encodeURIComponent(this.avatarText)}`
          ].join('&')
          uni.navigateTo({ url: `${CONSULT_DETAIL_PATH}?${q}` })
        })
        .finally(() => {
          this.consulting = false
          uni.hideLoading()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/morandi.scss';
@import '@/styles/tab-page.scss';

.vp-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.vp-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  height: 0;
  box-sizing: border-box;
  padding: 24rpx;
}

.vp-card {
  margin: 0;
  padding: 32rpx 16rpx 40rpx;
  box-sizing: border-box;
  background: #ffffff;
  min-width: 0;
  border-radius: 16rpx;
}

.vp-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
  min-width: 0;
}

.vp-hero__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.vp-hero__title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  word-break: break-word;
}

.vp-meta {
  font-size: 24rpx;
  color: $morandi-text-muted;
  line-height: 1.45;
  word-break: break-word;
}

.vp-line {
  display: block;
  font-size: 24rpx;
  color: $morandi-text-muted;
  line-height: 1.55;
  margin-top: 14rpx;
  word-break: break-word;
}

.vp-line__k {
  color: $morandi-text-muted;
  font-weight: 500;
}

.vp-footer-spacer {
  height: 48rpx;
}

.vp-page.lang-bo {
  .vp-hero__title {
    font-size: 28rpx;
    line-height: 1.65;
  }

  .vp-meta,
  .vp-line {
    font-size: 22rpx;
    line-height: 1.7;
  }
}
</style>