huimv-baqing/ruoyi-jiaoyi/pages/distributor/yak-detail/index.vue

<template>
  <view class="sp-detail-page">
    <scroll-view scroll-y class="sp-detail-scroll" enable-back-to-top>
      <view v-if="loading" class="sp-empty">
        <text class="sp-empty__txt">加载中…</text>
      </view>
      <template v-else-if="detail">
        <view class="sp-block">
          <text class="sp-block__title sp-block__title--solo">牦牛基本信息</text>
          <view v-for="field in basicFields" :key="field.label" class="sp-field">
            <text class="sp-field__label">{{ field.label }}</text>
            <text class="sp-field__value">{{ field.value }}</text>
          </view>
        </view>

        <view class="sp-block">
          <text class="sp-block__title sp-block__title--solo">隔离巡查信息</text>
          <view v-if="!patrolList.length" class="sp-empty-inline">
            <text class="sp-empty-inline__txt">暂无巡查记录</text>
          </view>
          <view v-for="(item, idx) in patrolList" :key="item.id || idx" class="sp-patrol">
            <view class="sp-patrol__head">
              <text class="sp-patrol__time">{{ formatDateTime(item.patrolTime) }}</text>
              <text v-if="item.penCode" class="sp-patrol__pen">{{ item.penCode }}</text>
            </view>
            <text class="sp-patrol__line">巡查结果：{{ item.contentDesc || DASH }}</text>
            <text class="sp-patrol__line">处理情况：{{ item.handleDesc || DASH }}</text>
            <view v-if="resolvePhoto(item)" class="sp-patrol__photo-row">
              <text class="sp-patrol__photo-label">巡查照片</text>
              <image
                class="sp-voucher-img"
                :src="resolvePhoto(item)"
                mode="aspectFill"
                @tap="previewImage(resolvePhoto(item))"
              />
            </view>
          </view>
        </view>
      </template>
      <view v-else class="sp-empty">
        <text class="sp-empty__txt">未找到该牦牛的入场隔离记录</text>
      </view>
      <view class="sp-footer-spacer" />
    </scroll-view>
  </view>
</template>

<script>
import { getDistributorYakBasic } from '@/api/distributor/yak'
import { resolveResourceUrl } from '@/utils/resourceUrl'
import { DASH, formatDateTime } from '@/utils/format'

export default {
  data() {
    return {
      DASH,
      supplierId: '',
      earTag: '',
      loading: false,
      detail: null
    }
  },
  computed: {
    entry() {
      return (this.detail && this.detail.entryIsolation) || {}
    },
    patrolList() {
      return (this.detail && this.detail.patrolList) || []
    },
    basicFields() {
      const e = this.entry
      return [
        { label: '耳标号', value: this.detail.earTag || this.earTag || DASH },
        { label: '供应商', value: e.supplierName || DASH },
        { label: '供应商联系方式', value: e.supplierContactPhone || DASH },
        { label: '进场时间', value: formatDateTime(e.entryTime) },
        { label: '检疫证号', value: e.certNo || DASH },
        { label: '解除隔离时间', value: formatDateTime(e.expectedReleaseDate) }
      ]
    }
  },
  onLoad(query) {
    this.supplierId = query.supplierId || ''
    this.earTag = query.earTag ? decodeURIComponent(query.earTag) : ''
    this.loadDetail()
  },
  methods: {
    formatDateTime,
    loadDetail() {
      if (!this.supplierId || !this.earTag) return
      this.loading = true
      getDistributorYakBasic({
        supplierId: this.supplierId,
        earTag: this.earTag
      })
        .then((res) => {
          this.detail = res.data || null
        })
        .catch(() => {
          this.detail = null
        })
        .finally(() => {
          this.loading = false
        })
    },
    resolvePhoto(item) {
      const path = item && (item.photoUrl || item.photoPath)
      return resolveResourceUrl(path)
    },
    previewImage(url) {
      if (!url) return
      uni.previewImage({ urls: [url], current: url })
    }
  }
}
</script>

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

.sp-detail-page {
  @include detail-page-root;
}

.sp-detail-scroll {
  @include detail-page-scroll;
}

.sp-block {
  margin: 24rpx 24rpx 0;
  padding: 24rpx;
  border-radius: 16rpx;
  background: $morandi-bg-card;
  border: 1rpx solid $morandi-border-soft;
}

.sp-block__title {
  font-size: 30rpx;
  font-weight: 600;
  color: $morandi-text;
}

.sp-block__title--solo {
  display: block;
  margin-bottom: 20rpx;
}

.sp-field {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24rpx;
  padding: 14rpx 0;
  border-bottom: 1rpx solid $morandi-border-soft;
}

.sp-field:last-child {
  border-bottom-width: 0;
}

.sp-field__label {
  flex-shrink: 0;
  font-size: 26rpx;
  color: $morandi-text-muted;
}

.sp-field__value {
  flex: 1;
  min-width: 0;
  font-size: 26rpx;
  color: $morandi-text;
  text-align: right;
  word-break: break-all;
}

.sp-patrol {
  padding: 20rpx 0;
  border-bottom: 1rpx solid $morandi-border-soft;
}

.sp-patrol:last-child {
  border-bottom-width: 0;
}

.sp-patrol__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
  margin-bottom: 12rpx;
}

.sp-patrol__time {
  font-size: 26rpx;
  font-weight: 600;
  color: $morandi-text;
}

.sp-patrol__pen {
  font-size: 24rpx;
  color: $morandi-text-muted;
}

.sp-patrol__line {
  display: block;
  font-size: 24rpx;
  line-height: 1.55;
  color: $morandi-text-secondary;
  margin-top: 8rpx;
}

.sp-patrol__photo-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 16rpx;
}

.sp-patrol__photo-label {
  font-size: 24rpx;
  color: $morandi-text-muted;
}

.sp-voucher-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  background: #e5e7eb;
}

.sp-empty,
.sp-empty-inline {
  padding: 48rpx 0;
  text-align: center;
}

.sp-empty {
  padding: 80rpx 24rpx;
}

.sp-empty__txt,
.sp-empty-inline__txt {
  font-size: 26rpx;
  color: $morandi-text-muted;
}

.sp-footer-spacer {
  height: 40rpx;
}
</style>