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

<template>
  <clinic-page-layout title="结算记录" :show-back="true">
    <view class="settlement-container">

      <view class="list-wrap">
        <view
            v-for="item in list"
            :key="item.id"
            class="premium-card"
            hover-class="card-hover"
            @click="goDetail(item)"
        >
          <view class="card-head">
            <view class="order-no">
              <text class="tag">单</text>
              <text class="no-text">{{ rowDisplay(item).orderNo }}</text>
            </view>
            <text class="amount" :class="rowDisplay(item).amountClass">
              {{ rowDisplay(item).typeText }} {{ rowDisplay(item).amountText }}
            </text>
          </view>

          <view class="card-body">
            <view class="info-row">
              <text class="label">费用类型</text>
              <text class="value">{{ rowDisplay(item).feeTypeText }}</text>
            </view>
            <view class="info-row">
              <text class="label">结算时间</text>
              <text class="value">{{ rowDisplay(item).createdAt }}</text>
            </view>
            <view class="info-row" v-if="rowDisplay(item).content">
              <text class="label">费用说明</text>
              <text class="value">{{ rowDisplay(item).content }}</text>
            </view>
          </view>
        </view>
      </view>

      <view v-if="!loading && list.length === 0" class="empty-state">
        暂无结算记录
      </view>
    </view>
  </clinic-page-layout>
</template>

<script>
import ClinicPageLayout from '../../components/clinic-page-layout.vue'
import { mapSettlementRow } from '../../common/display.js'
import { getLedgerLogList } from '@/api/clinicAdmin.js'

export default {
  components: { ClinicPageLayout },
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
    }
  },
  onShow() {
    this.reload()
  },
  onReachBottom() {
    this.load(this.page + 1, true)
  },
  methods: {
    rowDisplay(item) {
      return mapSettlementRow(item)
    },
    reload() {
      this.load(1, false)
    },
    load(page, append) {
      this.loading = true
      getLedgerLogList({ page, pageSize: 15 }).then(w => {
        const items = (w.data && w.data.items) || []
        this.list = append ? this.list.concat(items) : items
        this.page = page
      }).finally(() => { this.loading = false })
    },
    goDetail(item) {
      uni.navigateTo({
        url: '/subPackages/sub_clinic_admin/withdrawal/settlement/detail?ledger_log_id=' + item.id,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
$color-bg-base: #F5F7F8;
$color-text-main: #1D2129;
$color-text-body: #4E5969;
$color-text-muted: #86909C;

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

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

.premium-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
  transition: background-color 0.2s;
}

.card-hover {
  background-color: #FAFAFA;
  transform: scale(0.98);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  border-bottom: 1rpx dashed #E5E6EB;
  padding-bottom: 24rpx;
}

.order-no {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.tag {
  font-size: 20rpx;
  color: #fff;
  background-color: #C9CDD4;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-weight: 600;
}

.no-text {
  font-size: 26rpx;
  color: $color-text-main;
  font-family: monospace, sans-serif;
}

.amount {
  font-size: 32rpx;
  font-weight: 700;
  font-family: DIN Alternate, monospace, sans-serif;
}

/* 兼容你原有的类名逻辑 */
.text-danger { color: #F53F3F !important; }
.text-success { color: #6acdbb !important; }
.text-warning { color: #F5A623 !important; }

.card-body {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  line-height: 1.5;
}

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

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

.empty-state {
  text-align: center;
  color: $color-text-muted;
  padding: 120rpx 0;
  font-size: 28rpx;
}
</style>