xk-doctor-wx/subPackages/sub_clinic_admin/withdrawal/settlement/detail.vue

<template>
  <clinic-page-layout title="结算明细" :show-back="true">
    <view class="detail-container">

      <!-- 顶部焦点区域: 订单号和合计金额 -->
      <view class="hero-card" v-if="detail.order_no">
        <text class="hero-label">订单号：{{ detail.order_no }}</text>
        <text class="hero-amount">{{ formatMoney(detail.sum_money) }}</text>
      </view>

      <!-- 汇总信息岛 -->
      <view class="info-island" v-if="ledgerLogSummary">
        <view class="island-title">结算汇总</view>
        <view class="row"><text class="label">费用类型</text><text class="value">{{ ledgerLogSummary.fee_type_txt || '-' }}</text></view>
        <view class="row"><text class="label">结算类型</text><text class="value">{{ ledgerLogSummary.type_txt || '-' }}</text></view>
        <view class="row"><text class="label">结算总额</text><text class="value text-primary font-bold">{{ formatMoney(ledgerLogSummary.amount) }}</text></view>
        <view class="row" v-if="ledgerLogSummary.content"><text class="label">说明</text><text class="value">{{ ledgerLogSummary.content }}</text></view>
      </view>

      <!-- 分账明细列表 -->
      <view v-if="ledgerItems.length">
        <view class="section-title">分账明细</view>
        <view class="list-wrap">
          <view v-for="row in ledgerItems" :key="row._wxKey" class="detail-card">
            <view class="row"><text class="label">费用类型</text><text class="value">{{ row.fee_type_txt || '-' }}</text></view>
            <view class="row"><text class="label">分账金额</text><text class="value amount-text">{{ formatMoney(row.money) }}</text></view>
            <view class="row">
              <text class="label">结算状态</text>
              <text class="value" :class="row.status_txt === '已结算' ? 'text-success' : ''">{{ row.status_txt || '-' }}</text>
            </view>
          </view>
        </view>
      </view>

    </view>
  </clinic-page-layout>
</template>

<script>
import ClinicPageLayout from '../../components/clinic-page-layout.vue'
import { formatMoney } from '../../common/format.js'
import { getLedgerDetail } from '@/api/clinicAdmin.js'
import { withWxKey } from '@/utils/wxListKey.js'

export default {
  components: { ClinicPageLayout },
  data() {
    return {
      ledgerLogId: 0,
      orderId: 0,
      orderType: 0,
      detail: { items: [], sum_money: '0' },
      ledgerLogSummary: null,
      ledgerItems: [],
      loading: true,
    }
  },
  onLoad(q) {
    this.ledgerLogId = Number(q.ledger_log_id || 0)
    this.orderId = Number(q.order_id || 0)
    this.orderType = Number(q.order_type || 0)
    this.load()
  },
  methods: {
    formatMoney,
    load() {
      this.loading = true
      const params = this.orderId > 0 && this.orderType > 0
        ? { order_id: this.orderId, order_type: this.orderType }
        : { ledger_log_id: this.ledgerLogId }
      getLedgerDetail(params).then(w => {
        if (w.ok) {
          this.detail = w.data || {}
          const log = this.detail.ledger_log
          this.ledgerLogSummary = log || null
          this.ledgerItems = withWxKey(this.detail.items || [], 'id', 'led')
        }
      }).finally(() => { this.loading = false })
    },
  },
}
</script>

<style lang="scss" scoped>
$theme-primary: #6acdbb;
$color-bg-base: #F5F7F8;
$color-text-main: #1D2129;
$color-text-muted: #86909C;

.detail-container {
  background-color: $color-bg-base;
  min-height: 100vh;
  padding: 24rpx;
}

/* 巨幕卡片 */
.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}

.hero-label {
  font-size: 26rpx;
  color: $color-text-muted;
  margin-bottom: 12rpx;
  font-family: SF Pro Text, monospace, sans-serif;
}

.hero-amount {
  font-size: 64rpx;
  font-weight: 700;
  color: $color-text-main;
  font-family: DIN Alternate, monospace, sans-serif;
}

/* 汇总信息岛 */
.info-island {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
}

.island-title {
  font-size: 30rpx;
  font-weight: 600;
  color: $color-text-main;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #F2F3F5;
}

/* 分账明细 */
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: $color-text-muted;
  margin-bottom: 16rpx;
  padding-left: 8rpx;
}

.list-wrap {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.detail-card {
  background: #F8FBFB;
  border-radius: 16rpx;
  padding: 24rpx 32rpx;
}

/* 通用行排版 */
.row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12rpx 0;
  font-size: 26rpx;
  line-height: 1.5;
}

.label {
  color: $color-text-muted;
  min-width: 120rpx;
}

.value {
  color: $color-text-main;
  text-align: right;
  flex: 1;
  word-break: break-all;

  &.text-primary {
    color: $theme-primary;
  }
  &.font-bold {
    font-weight: 700;
    font-size: 32rpx;
    font-family: DIN Alternate, monospace, sans-serif;
  }
}

.amount-text {
  font-weight: 600;
  font-family: DIN Alternate, monospace, sans-serif;
}

.text-success {
  color: $theme-primary;
  font-weight: 500;
}
</style>