bindbox-mini/pages/orders/index.vue

<template>
  <view class="wrap">
    <view class="bg-decoration"></view>
    <view class="tabs">
      <view class="tab" :class="{ active: currentTab === 'pending' }" @click="switchTab('pending')">待付款</view>
      <view class="tab" :class="{ active: currentTab === 'completed' }" @click="switchTab('completed')">已完成</view>
    </view>
    <view v-if="error" class="error">{{ error }}</view>
    <view v-if="orders.length === 0 && !loading" class="empty">
      <view class="empty-icon">📦</view>
      <view class="empty-text">暂无订单</view>
    </view>
    <view v-for="item in orders" :key="item.id || item.order_no" class="order">
      <view class="order-main">
        <view class="order-title">{{ item.title || item.subject || '订单' }}</view>
        <view class="order-sub">{{ formatTime(item.created_at || item.time) }}</view>
      </view>
      <view class="order-right">
        <view class="order-amount">{{ formatAmount(item.total_amount || item.amount || item.price) }}</view>
        <view class="order-status" :class="getStatusClass(item)">{{ statusText(item) }}</view>
      </view>
    </view>
    <view v-if="loadingMore" class="loading">加载中...</view>
    <view v-else-if="!hasMore && orders.length > 0" class="end">没有更多了</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { getOrders } from '../../api/appUser'

const currentTab = ref('pending')
const orders = ref([])
const loading = ref(false)
const loadingMore = ref(false)
const error = ref('')
const page = ref(1)
const pageSize = ref(20)
const hasMore = ref(true)

function formatTime(t) {
  if (!t) return ''
  const d = typeof t === 'string' ? new Date(t) : new Date(t)
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hh = String(d.getHours()).padStart(2, '0')
  const mm = String(d.getMinutes()).padStart(2, '0')
  return `${y}-${m}-${day} ${hh}:${mm}`
}

function formatAmount(a) {
  if (a === undefined || a === null) return ''
  const n = Number(a)
  if (Number.isNaN(n)) return String(a)
  const yuan = n / 100
  return `¥${yuan.toFixed(2)}`
}

function statusText(item) {
  const v = item && (item.is_draw ?? item.drawed ?? item.completed)
  const ok = v === true || v === 1 || String(v) === 'true' || String(v) === '1'
  if (ok) return '已完成'
  const s = item && (item.status || item.pay_status || item.state)
  const t = String(s || '').toLowerCase()
  if (t.includes('pend')) return '待付款'
  if (t.includes('paid') || t.includes('complete') || t.includes('done')) return '已完成'
  return s || ''
}

function getStatusClass(item) {
  const text = statusText(item)
  if (text === '待付款') return 'status-pending'
  if (text === '已完成') return 'status-completed'
  return ''
}

function switchTab(tab) {
  if (currentTab.value === tab) return
  currentTab.value = tab
  fetchOrders(false)
}

function apiStatus() {
  return currentTab.value === 'pending' ? 'pending' : 'completed'
}

async function fetchOrders(append) {
  const user_id = uni.getStorageSync('user_id')
  const token = uni.getStorageSync('token')
  const phoneBound = !!uni.getStorageSync('phone_bound')
  if (!user_id || !token || !phoneBound) {
    uni.showModal({
      title: '提示',
      content: '请先登录并绑定手机号',
      confirmText: '去登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({ url: '/pages/login/index' })
        }
      }
    })
    return
  }
  if (!append) {
    if (currentTab.value === 'completed') {
      await fetchAllOrders()
      return
    } else {
      loading.value = true
      page.value = 1
      hasMore.value = true
      orders.value = []
    }
  } else {
    if (!hasMore.value || loadingMore.value) return
    loadingMore.value = true
    page.value = page.value + 1
  }
  error.value = ''
  try {
    const list = await getOrders(user_id, apiStatus(), page.value, pageSize.value)
    const items = Array.isArray(list) ? list : (list && list.items) || []
    const total = (list && list.total) || 0
    orders.value = append ? orders.value.concat(items) : items
    if (total) {
      hasMore.value = orders.value.length < total
    } else {
      hasMore.value = items.length === pageSize.value
    }
  } catch (e) {
    error.value = e && (e.message || e.errMsg) || '获取订单失败'
  } finally {
    if (append) {
      loadingMore.value = false
    } else {
      loading.value = false
    }
  }
}

async function fetchAllOrders() {
  const user_id = uni.getStorageSync('user_id')
  loading.value = true
  page.value = 1
  hasMore.value = false
  orders.value = []
  try {
    const first = await getOrders(user_id, apiStatus(), 1, pageSize.value)
    const itemsFirst = Array.isArray(first) ? first : (first && first.items) || (first && first.list) || []
    const total = (first && first.total) || 0
    orders.value = itemsFirst
    const totalPages = Math.max(1, Math.ceil(Number(total) / pageSize.value))
    for (let p = 2; p <= totalPages; p++) {
      const res = await getOrders(user_id, apiStatus(), p, pageSize.value)
      const items = Array.isArray(res) ? res : (res && res.items) || (res && res.list) || []
      orders.value = orders.value.concat(items)
    }
  } catch (e) {
    error.value = e && (e.message || e.errMsg) || '获取订单失败'
  } finally {
    loading.value = false
  }
}
onLoad((opts) => {
  const s = (opts && opts.status) || ''
  if (s === 'completed' || s === 'pending') currentTab.value = s
  fetchOrders(false)
})

onReachBottom(() => {
  fetchOrders(true)
})
</script>

<style lang="scss" scoped>
/* ============================================
   奇盒潮玩 - 订单页面
   采用暖橙色调的订单列表设计
   ============================================ */

.wrap {
  padding: $spacing-md;
  min-height: 100vh;
  background-color: $bg-page;
  position: relative;
  overflow-x: hidden;
  
  &::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: radial-gradient(circle at 10% 10%, rgba($brand-primary, 0.05), transparent 40%),
                radial-gradient(circle at 90% 90%, rgba($accent-gold, 0.05), transparent 40%);
    pointer-events: none;
    z-index: 0;
  }
}

/* Tab 切换 */
.tabs {
  display: flex;
  background: $bg-glass;
  backdrop-filter: blur(10rpx);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: $radius-lg;
  padding: 8rpx;
  margin-bottom: $spacing-lg;
  box-shadow: $shadow-sm;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: $font-md;
  color: $text-sub;
  border-radius: $radius-md;
  transition: all 0.25s ease;
  font-weight: 500;
}
.tab.active {
  background: $gradient-brand;
  color: $text-inverse;
  font-weight: 600;
  box-shadow: $shadow-glow;
}

/* 订单卡片 */
.order {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: $bg-card;
  border-radius: $radius-md;
  padding: $spacing-lg;
  margin-bottom: $spacing-lg;
  box-shadow: $shadow-sm;
  border: 1rpx solid rgba(0,0,0,0.02);
  transition: all 0.2s ease;
  animation: fadeInUp 0.4s ease-out backwards;
}

@for $i from 1 through 10 {
  .order:nth-child(#{$i}) {
    animation-delay: #{$i * 0.05}s;
  }
}

.order:active {
  transform: scale(0.98);
  box-shadow: none;
}

.order-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.order-title {
  font-size: $font-md;
  font-weight: 700;
  color: $text-main;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: $spacing-xs;
}
.order-sub {
  font-size: $font-sm;
  color: $text-sub;
}

.order-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: $spacing-lg;
  flex-shrink: 0;
}
.order-amount {
  font-size: $font-lg;
  font-weight: 800;
  color: $brand-primary;
  font-family: 'DIN Alternate', sans-serif;
}
.order-status {
  font-size: $font-xs;
  color: $text-sub;
  margin-top: 10rpx;
  padding: 4rpx $spacing-md;
  background: $bg-page;
  border-radius: $radius-round;
  font-weight: 600;
  
  &.status-pending {
    background: rgba($brand-primary, 0.1);
    color: $brand-primary;
  }
  
  &.status-completed {
    background: rgba($uni-color-success, 0.1);
    color: $uni-color-success;
  }
}

/* 空状态 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 120rpx;
  animation: fadeInUp 0.5s ease-out;
  
  .empty-icon {
    font-size: 80rpx;
    margin-bottom: $spacing-lg;
    opacity: 0.6;
    animation: float 4s ease-in-out infinite;
  }
  
  .empty-text {
    color: $text-sub;
    font-size: $font-md;
  }
}

/* 错误提示 */
.error {
  color: $uni-color-error;
  font-size: $font-sm;
  margin-bottom: $spacing-md;
  padding: $spacing-md;
  background: rgba($uni-color-error, 0.1);
  border-radius: $radius-lg;
  text-align: center;
}

/* 加载状态 */
.loading, .end {
  text-align: center;
  color: $text-sub;
  padding: $spacing-lg 0;
  font-size: $font-sm;
}
</style>