sqxp/sqxp-wx/pages/client/refund/refund.vue

<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 loading = ref(false)

const statusText = {
  pending: '处理中',
  success: '成功',
  failed: '失败',
  cancelled: '已取消'
}

async function load() {
  loading.value = true
  try {
    const res = await request({
      url: API_URL.CLIENT_REFUNDS,
      method: 'GET',
      data: { page: 1, pageSize: 50 }
    })
    const body = parseResponseJson(res)
    if (body.code === 200) {
      list.value = (body.data && body.data.list) || []
    }
  } 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>

<template>
  <view class="page client-theme client-subpage">
    <view class="client-subpage-hero refund-hero">
      <text class="client-subpage-hero__title">退款记录</text>
      <text class="client-subpage-hero__sub">查看退款进度与金额</text>
    </view>
    <scroll-view scroll-y class="client-subpage-scroll refund-scroll" :show-scrollbar="true">
      <view class="client-subpage-body refund-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">
            <text class="no">{{ row.refundNo || row.id }}</text>
            <text class="st">{{ statusText[row.status] || row.status }}</text>
          </view>
          <view class="sub-row">
            <text class="sub">订单 {{ row.orderNo || '—' }}</text>
            <SqCopyBtn v-if="row.orderNo" class="copy" :text="row.orderNo" label="订单号" icon-only />
          </view>
          <text class="amt">¥{{ formatYuan(row.refundAmount) }}</text>
          <text class="time">{{ row.refundTime || row.createAt }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

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

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

.card--pressed {
  opacity: 0.94;
}
.hint {
  text-align: center;
  color: var(--c-muted);
  padding: 80rpx 0;
  font-size: 28rpx;
}

.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;
}
.no {
  font-size: 28rpx;
  color: var(--c-text);
  font-weight: 600;
}
.st {
  font-size: 24rpx;
  color: var(--c-muted);
}
.sub {
  display: block;
  font-size: 26rpx;
  color: var(--c-muted);
  margin-top: 12rpx;
}
.sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rpx;
  margin-top: 12rpx;
}
.sub-row .sub {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy {
  flex: 0 0 auto;
}
.amt {
  display: block;
  font-size: 32rpx;
  color: var(--c-danger);
  font-weight: bold;
  margin-top: 12rpx;
}
.time {
  display: block;
  font-size: 22rpx;
  color: #c0c4cc;
  margin-top: 12rpx;
}
</style>