huimv-baqing/ruoyi-jiaoyi/pages/distributor/order-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">
          <view class="sp-block__head">
            <text class="sp-block__title">订单信息</text>
            <text class="sp-block__status" :class="statusClass">{{ statusText }}</text>
          </view>
          <view v-for="field in orderFields" :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 class="sp-line-table">
            <view class="sp-line-table__head">
              <text class="sp-line-table__th sp-line-table__th--tag">耳标号</text>
              <text class="sp-line-table__th">重量(kg)</text>
              <text class="sp-line-table__th sp-line-table__th--amt">金额(元)</text>
              <text class="sp-line-table__th sp-line-table__th--act">操作</text>
            </view>
            <view v-if="!lineList.length" class="sp-line-table__empty">
              <text class="sp-line-table__empty-txt">暂无明细</text>
            </view>
            <view v-for="(line, idx) in lineList" :key="line.id || idx" class="sp-line-table__row">
              <text class="sp-line-table__td sp-line-table__td--tag">{{ line.earTag || DASH }}</text>
              <text class="sp-line-table__td">{{ line.weight != null ? line.weight : DASH }}</text>
              <text class="sp-line-table__td sp-line-table__td--amt">{{ formatPrice(line.amount) }}</text>
              <text class="sp-line-table__td sp-line-table__td--act sp-line-table__link" @tap.stop="openYak(line)">查看</text>
            </view>
          </view>
        </view>

        <view class="sp-block">
          <text class="sp-block__title sp-block__title--solo">支付信息</text>
          <view class="sp-field">
            <text class="sp-field__label">订单支付时间</text>
            <text class="sp-field__value">{{ formatDateTime(detail.finishTime) }}</text>
          </view>
          <view class="sp-voucher-row">
            <text class="sp-field__label">支付凭证</text>
            <image
              v-if="payVoucherUrl"
              class="sp-voucher-img"
              :src="payVoucherUrl"
              mode="aspectFill"
              @tap="previewImage(payVoucherUrl)"
            />
            <view v-else class="sp-voucher-placeholder">
              <text class="sp-voucher-placeholder__txt">暂无</text>
            </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 { getDistributorOrder } from '@/api/distributor/order'
import { resolveResourceUrl } from '@/utils/resourceUrl'
import { DASH, formatDateTime, formatPrice } from '@/utils/format'

export default {
  data() {
    return {
      DASH,
      id: '',
      loading: false,
      detail: null
    }
  },
  computed: {
    lineList() {
      return (this.detail && this.detail.lineList) || []
    },
    statusText() {
      return (this.detail && this.detail.orderStatusName) || DASH
    },
    statusClass() {
      const text = this.statusText
      if (String(text).includes('完成')) return 'sp-block__status--done'
      if (String(text).includes('待')) return 'sp-block__status--pending'
      return ''
    },
    orderFields() {
      const d = this.detail || {}
      return [
        { label: '订单编号', value: d.orderNo || DASH },
        { label: '订单创建时间', value: formatDateTime(d.createTime) },
        { label: '供应商', value: d.supplierName || DASH },
        { label: '承销商', value: d.distributorName || DASH },
        { label: '交易总头数(头)', value: d.totalHeads != null ? d.totalHeads : DASH },
        { label: '交易总金额(元)', value: formatPrice(d.totalAmount) }
      ]
    },
    payVoucherUrl() {
      const d = this.detail
      return resolveResourceUrl(d && (d.payVoucherUrl || d.payVoucherPath))
    }
  },
  onLoad(query) {
    this.id = query.id || ''
    this.loadDetail()
  },
  methods: {
    formatDateTime,
    formatPrice,
    loadDetail() {
      if (!this.id) return
      this.loading = true
      getDistributorOrder(this.id)
        .then((res) => {
          this.detail = res.data || null
        })
        .catch(() => {
          this.detail = null
        })
        .finally(() => {
          this.loading = false
        })
    },
    previewImage(url) {
      if (!url) return
      uni.previewImage({ urls: [url], current: url })
    },
    openYak(line) {
      const supplierId = line.supplierId || this.detail.supplierId
      const earTag = line.earTag
      if (!supplierId || !earTag) {
        uni.showToast({ title: '缺少牦牛信息', icon: 'none' })
        return
      }
      uni.navigateTo({
        url: `/pages/distributor/yak-detail/index?supplierId=${supplierId}&earTag=${encodeURIComponent(earTag)}`
      })
    }
  }
}
</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__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

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

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

.sp-block__status {
  font-size: 26rpx;
  color: $morandi-text-secondary;
}

.sp-block__status--pending {
  color: #ea580c;
}

.sp-block__status--done {
  color: #16a34a;
}

.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-line-table__head,
.sp-line-table__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12rpx 0;
}

.sp-line-table__head {
  border-bottom: 1rpx solid $morandi-border-soft;
}

.sp-line-table__row {
  border-bottom: 1rpx solid $morandi-border-soft;
}

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

.sp-line-table__th,
.sp-line-table__td {
  flex: 1;
  font-size: 24rpx;
  color: $morandi-text-secondary;
  text-align: center;
}

.sp-line-table__th {
  font-weight: 600;
  color: $morandi-text-muted;
}

.sp-line-table__th--tag,
.sp-line-table__td--tag {
  flex: 1.1;
  text-align: left;
}

.sp-line-table__th--amt,
.sp-line-table__td--amt {
  flex: 1;
  text-align: right;
}

.sp-line-table__th--act,
.sp-line-table__td--act {
  flex: 0.8;
  text-align: right;
}

.sp-line-table__link {
  color: #2563eb;
}

.sp-line-table__empty {
  padding: 24rpx 0;
  text-align: center;
}

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

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

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

.sp-voucher-placeholder {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-voucher-placeholder__txt {
  font-size: 22rpx;
  color: $morandi-text-muted;
}

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

.sp-empty__txt {
  font-size: 28rpx;
  color: $morandi-text-muted;
}

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