291 lines
7.5 KiB
Vue
291 lines
7.5 KiB
Vue
<template>
|
|
<view class="wrap">
|
|
<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>
|
|
<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">{{ 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 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 scoped>
|
|
/* ============================================
|
|
奇盒潮玩 - 订单页面
|
|
采用暖橙色调的订单列表设计
|
|
============================================ */
|
|
|
|
.wrap {
|
|
padding: 24rpx;
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #FFF8F3 0%, #FFFFFF 100%);
|
|
}
|
|
|
|
/* Tab 切换 */
|
|
.tabs {
|
|
display: flex;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 8rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
}
|
|
.tab {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
color: #6B7280;
|
|
border-radius: 16rpx;
|
|
transition: all 0.25s ease;
|
|
font-weight: 500;
|
|
}
|
|
.tab.active {
|
|
background: linear-gradient(135deg, #FF9F43, #FF6B35);
|
|
color: #FFFFFF;
|
|
font-weight: 600;
|
|
box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.35);
|
|
}
|
|
|
|
/* 订单卡片 */
|
|
.order {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 16rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
|
|
transition: all 0.2s ease;
|
|
}
|
|
.order:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.order-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.order-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #1F2937;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.order-sub {
|
|
font-size: 24rpx;
|
|
color: #9CA3AF;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.order-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
margin-left: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.order-amount {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #FF6B35, #FF9F43);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.order-status {
|
|
font-size: 24rpx;
|
|
color: #6B7280;
|
|
margin-top: 8rpx;
|
|
padding: 4rpx 12rpx;
|
|
background: #F3F4F6;
|
|
border-radius: 999rpx;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty {
|
|
text-align: center;
|
|
color: #9CA3AF;
|
|
margin-top: 120rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* 错误提示 */
|
|
.error {
|
|
color: #EF4444;
|
|
font-size: 26rpx;
|
|
margin-bottom: 16rpx;
|
|
padding: 16rpx;
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border-radius: 12rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.loading, .end {
|
|
text-align: center;
|
|
color: #9CA3AF;
|
|
padding: 24rpx 0;
|
|
font-size: 26rpx;
|
|
}
|
|
</style>
|