mtsd/sqxp-wx/pages/client/settlement/settlement.vue

<template>
  <view class="page client-theme client-subpage">
    <view class="client-subpage-hero settlement-hero">
      <text class="client-subpage-hero__title">结算记录</text>
      <text class="client-subpage-hero__sub">累计已结算（元）</text>
      <text class="sum-val">¥{{ formatYuan(totalSettled) }}</text>
    </view>
    <scroll-view scroll-y class="client-subpage-scroll settlement-scroll" :show-scrollbar="true">
      <view class="client-subpage-body settlement-body">
        <view v-if="loading" class="hint">加载中...</view>
        <view v-else-if="list.length === 0" class="hint">暂无结算记录</view>
        <view v-for="row in list" :key="row.id" class="card" hover-class="card--pressed" :hover-stay-time="100">
      <view class="line">
        <view class="order-wrap">
          <text class="order">订单 {{ row.orderNo || row.id.slice(0, 8) }}</text>
          <SqCopyBtn v-if="row.orderNo" class="copy" :text="row.orderNo" label="订单号" icon-only />
        </view>
        <text class="amt">¥{{ formatYuan(row.amount) }}</text>
      </view>
      <text class="sub">{{ row.settlementMethod || '—' }} · {{ row.settlementTime || row.createAt }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>



<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { request, parseResponseJson } from '@/utils/request'
import { API_URL } from '@/config/api'
import { formatYuan } from '@/utils/format'
import SqCopyBtn from '@/components/sq-copy-btn.vue'

const userStore = useUserStore()

const list = ref([])
const totalSettled = ref(0)
const loading = ref(false)

async function load() {
  loading.value = true
  try {
    const [r1, r2] = await Promise.all([
      request({
        url: API_URL.CLIENT_SETTLEMENTS,
        method: 'GET',
        data: { page: 1, pageSize: 50 }
      }),
      request({
        url: API_URL.CLIENT_SETTLEMENT_STATS,
        method: 'GET'
      })
    ])
    const b1 = parseResponseJson(r1)
    if (b1.code === 200) {
      list.value = (b1.data && b1.data.list) || []
    }
    const b2 = parseResponseJson(r2)
    if (b2.code === 200) {
      totalSettled.value = (b2.data && b2.data.totalSettled) ?? 0
    }
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn) {
    uni.reLaunch({ url: '/pages/login/login' })
    return
  }
  if (!userStore.isClient) {
    uni.showToast({ title: '仅客户可访问', icon: 'none' })
    setTimeout(() => userStore.navigateToHome(), 1200)
    return
  }
  load()
})

onShow(() => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn || !userStore.isClient) return
  void load()
})
</script>



<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: var(--c-bg);
  box-sizing: border-box;
}

.settlement-hero .sum-val {
  display: block;
  margin-top: 16rpx;
  font-size: 48rpx;
  font-weight: 700;
  letter-spacing: 0.5rpx;
}

.settlement-scroll {
  flex: 1;
  min-height: 0;
  height: 0;
}

.card--pressed {
  opacity: 0.94;
}
.hint {
  text-align: center;
  color: var(--c-muted);
  padding: 60rpx 0;
}
.card {
  background: var(--c-card);
  border: 1rpx solid var(--c-border);
  border-radius: var(--c-radius-card);
  padding: 24rpx;
  margin-bottom: 16rpx;
}
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.order {
  flex: 1;
  min-width: 0;
  font-size: 28rpx;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy {
  flex: 0 0 auto;
}
.amt {
  font-size: 30rpx;
  color: var(--c-danger);
  font-weight: 600;
}
.sub {
  font-size: 24rpx;
  color: var(--c-muted);
  margin-top: 12rpx;
  display: block;
}
</style>