cfc/cfc-frontend/pages/shop/after-sales/after-sales.vue

<template>
  <view class="container">
    <view class="status-tabs">
      <view
        v-for="tab in statusTabs"
        :key="tab.value"
        :class="['tab', currentTab === tab.value ? 'active' : '']"
        @click="onTabChange(tab.value)"
      >{{ tab.label }}</view>
    </view>

    <scroll-view
      scroll-y
      class="list-scroll"
      @scrolltolower="onLoadMore"
    >
      <view v-if="loading && list.length === 0" class="loading-wrap">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else-if="list.length === 0" class="empty-wrap">
        <text class="empty-icon">📋</text>
        <text class="empty-text">暂无售后记录</text>
      </view>
      <view v-else>
        <view
          v-for="item in list"
          :key="item.id"
          class="card"
          @click="goDetail(item.id)"
        >
          <view class="card-header">
            <text class="order-no">{{ item.orderNo }}</text>
            <text :class="['status-badge', 'status-' + item.status]">{{ statusLabel(item.status) }}</text>
          </view>
          <view class="card-body">
            <view class="info-row">
              <text class="info-label">类型</text>
              <text class="info-value">{{ item.type === 'refund' ? '仅退款' : '退货退款' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">退款金额</text>
              <text class="info-value price">{{ formatPrice(item.refundAmount) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">申请时间</text>
              <text class="info-value">{{ formatTime(item.createdAt) }}</text>
            </view>
          </view>
          <text class="card-arrow">›</text>
        </view>
      </view>
      <view v-if="loadingMore" class="loading-more">
        <text class="loading-text">加载中...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import config from '@/config.js'
import { parseDate } from '@/utils/format.js'

export default {
  data() {
    return {
      statusTabs: [
        { label: '全部', value: '' },
        { label: '待审核', value: 'pending' },
        { label: '已通过', value: 'approved' },
        { label: '已拒绝', value: 'rejected' },
        { label: '已完成', value: 'completed' }
      ],
      currentTab: '',
      list: [],
      page: 1,
      size: 20,
      loading: false,
      loadingMore: false,
      noMore: false
    }
  },
  onLoad() {
    this.loadList()
  },
  methods: {
    onTabChange(value) {
      this.currentTab = value
      this.page = 1
      this.list = []
      this.noMore = false
      this.loadList()
    },
    loadList() {
      if (this.loading) return
      this.loading = true
      var that = this
      uni.request({
        url: config.api('/api/shop/after-sales/list'),
        method: 'POST',
        data: { status: this.currentTab || undefined },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.loading = false
          that.loadingMore = false
          if (res.data && res.data.code === 200) {
            var records = res.data.data || []
            if (that.page === 1) {
              that.list = records
            } else {
              that.list = that.list.concat(records)
            }
            that.noMore = records.length < that.size
          }
        },
        fail: function() {
          that.loading = false
          that.loadingMore = false
        }
      })
    },
    onLoadMore() {
      if (this.noMore || this.loadingMore) return
      this.page = this.page + 1
      this.loadingMore = true
      this.loadList()
    },
    goDetail(id) {
      uni.navigateTo({ url: '/pages/shop/after-sales-detail/after-sales-detail?id=' + id })
    },
    statusLabel(status) {
      var map = {
        pending: '待审核',
        approved: '已通过',
        rejected: '已拒绝',
        completed: '已完成',
        cancelled: '已取消'
      }
      return map[status] || status
    },
    formatPrice(amount) {
      if (amount === null || amount === undefined) return '0.00'
      return '¥' + (Number(amount) / 100).toFixed(2)
    },
    formatTime(time) {
      if (!time) return ''
      var d = parseDate(time)
      if (!d) return ''
      var year = d.getFullYear()
      var month = String(d.getMonth() + 1).padStart(2, '0')
      var day = String(d.getDate()).padStart(2, '0')
      return year + '-' + month + '-' + day
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
}
.status-tabs {
  display: flex;
  background: #fff;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}
.tab {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
  color: #666;
  padding: 10rpx 0;
}
.tab.active {
  color: #F97316;
  font-weight: bold;
  border-bottom: 4rpx solid #F97316;
}
.list-scroll {
  height: calc(100vh - 100rpx);
}
.loading-wrap,
.empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.card {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 24rpx;
  position: relative;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f5f5f5;
  margin-bottom: 16rpx;
}
.order-no {
  font-size: 24rpx;
  color: #999;
}
.status-badge {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}
.status-pending {
  color: #F97316;
  background: #fff7e6;
}
.status-approved {
  color: #52c41a;
  background: #f6ffed;
}
.status-rejected {
  color: #ff4d4f;
  background: #fff2f0;
}
.status-completed {
  color: #999;
  background: #f5f5f5;
}
.status-cancelled {
  color: #999;
  background: #f5f5f5;
}
.card-body {
  margin-bottom: 8rpx;
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 6rpx 0;
}
.info-label {
  font-size: 26rpx;
  color: #999;
}
.info-value {
  font-size: 26rpx;
  color: #333;
}
.price {
  color: #F97316;
  font-weight: bold;
}
.card-arrow {
  position: absolute;
  right: 24rpx;
  top: 50%;
  font-size: 40rpx;
  color: #ccc;
  transform: translateY(-50%);
}
.loading-more {
  text-align: center;
  padding: 30rpx;
}
.loading-text {
  font-size: 24rpx;
  color: #999;
}
</style>