@ -1,130 +1,34 @@
< template >
< view class = " page-container ">
<!-- 顶部 Tab --
< view class = " wrap ">
< view class = "bg-decoration" > < / view
< view class = "tabs" >
< view
class = "tab-item"
: class = "{ active: currentTab === 'pending' }"
@ click = "switchTab('pending')"
>
< text class = "tab-text" > 待付款 < / text >
< 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 = "tab-item"
: class = "{ active: currentTab === 'completed' }"
@ click = "switchTab('completed')"
>
< text class = "tab-text" > 已完成 < / text >
< / view >
< / view >
<!-- 页面内容 -- >
< view class = "page-content" >
<!-- 错误提示 -- >
< view v-if = "error" class="error-toast" >
< text class = "error-icon" > ⚠ ️ < / text >
< text class = "error-text" > { { error } } < / text >
< / view >
<!-- 加载状态 -- >
< view v-if = "loading" class="loading-state" >
< view class = "loading-spinner" > < / view >
< text class = "loading-text" > 加载中 ... < / text >
< / view >
<!-- 空状态 -- >
< view v -else -if = " orders.length = = = 0 " class = "empty-state" >
< view class = "empty-illustration" >
< text class = "empty-icon" > 📦 < / text >
< / view >
< text class = "empty-title" > 暂无订单 < / text >
< text class = "empty-desc" > { { currentTab === 'pending' ? '没有待付款的订单' : '完成的订单将显示在这里' } } < / text >
< button class = "empty-btn" @tap ="goShopping" > 去逛逛 < / button >
< / view >
<!-- 订单列表 -- >
< view v -else class = "orders-list" >
< view
v - for = "(item, index) in orders"
: key = "item.id || item.order_no"
class = "order-card"
: style = "{ '--delay': index * 0.05 + 's' }"
@ tap = "goOrderDetail(item)"
>
<!-- 订单头部 -- >
< view class = "order-header" >
< view class = "order-type" >
< text class = "type-icon" > { { getTypeIcon ( item ) } } < / text >
< text class = "type-name" > { { getTypeName ( item ) } } < / text >
< / view >
< view class = "order-status" :class = "getStatusClass(item)" >
{ { statusText ( item ) } }
< / view >
< / view >
<!-- 订单内容 -- >
< view class = "order-body" >
<!-- 商品图片 -- >
< view class = "product-image-wrap" >
< image
class = "product-image"
: src = "getProductImage(item)"
mode = "aspectFill"
/ >
< view class = "image-overlay" v-if = "item.is_winner" >
< text class = "winner-badge" > 🎉 中奖 < / text >
< / view >
< / view >
<!-- 商品信息 -- >
< view class = "product-info" >
< text class = "product-title" > { { getOrderTitle ( item ) } } < / text >
< view class = "product-meta" >
< text class = "meta-item" v-if = "item.activity_name" > {{ item.activity_name }} < / text >
< text class = "meta-item" v-if = "item.issue_number" > 第 {{ item.issue_number }} 期 < / text >
< / view >
< text class = "order-time" > { { formatTime ( item . created _at ) } } < / text >
< / view >
< / view >
<!-- 订单底部 -- >
< view class = "order-footer" >
< view class = "order-no" >
< text class = "no-label" > 订单号 : < / text >
< text class = "no-value" > { { item . order _no } } < / text >
< / view >
< view class = "order-amount" >
< text class = "amount-label" > 实付 < / text >
< text class = "amount-value" > { { formatAmount ( item . actual _amount || item . total _amount ) } } < / text >
< / view >
< / view >
<!-- 快捷操作 -- >
< view class = "order-actions" v-if = "currentTab === 'pending'" >
< button class = "action-btn secondary" @tap.stop ="cancelOrder(item)" > 取消订单 < / button >
< button class = "action-btn primary" @tap.stop ="payOrder(item)" > 立即支付 < / button >
< / view >
< / view >
<!-- 加载更多 -- >
< view v-if = "loadingMore" class="loading-more" >
< view class = "loading-spinner small" > < / view >
< text > 加载更多 ... < / text >
< / view >
< view v -else -if = " ! hasMore " class = "no-more" >
< view class = "divider" > < / view >
< text > 没有更多了 < / text >
< view class = "divider" > < / 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 , cancelOrder as cancelOrderApi } from '../../api/appUser'
import { getOrders } from '../../api/appUser'
const currentTab = ref ( 'pending' )
const orders = ref ( [ ] )
@ -135,109 +39,41 @@ const page = ref(1)
const pageSize = ref ( 20 )
const hasMore = ref ( true )
/ / 默 认 商 品 图 片
const defaultImage = 'https://keaiya-1259195914.cos.ap-shanghai.myqcloud.com/images/default-product.png'
function formatTime ( t ) {
if ( ! t ) return ''
const d = typeof t === 'string' ? new Date ( t ) : new Date ( t )
const now = new Date ( )
const diffMs = now - d
const diffMins = Math . floor ( diffMs / 60000 )
const diffHours = Math . floor ( diffMs / 3600000 )
const diffDays = Math . floor ( diffMs / 86400000 )
if ( diffMins < 1 ) return '刚刚'
if ( diffMins < 60 ) return ` ${ diffMins } 分钟前 `
if ( diffHours < 24 ) return ` ${ diffHours } 小时前 `
if ( diffDays < 7 ) return ` ${ diffDays } 天前 `
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 ` ${ } - ${ day } ${ hh } : ${ mm } `
return ` ${ y } - ${ m } - ${ day } ${ hh } : ${ mm } `
}
function formatAmount ( a ) {
if ( a === undefined || a === null ) return ' ¥0.00 '
if ( a === undefined || a === null ) return ''
const n = Number ( a )
if ( Number . isNaN ( n ) ) return '¥0.00'
if ( Number . isNaN ( n ) ) return String ( a )
const yuan = n / 100
return ` ¥ ${ yuan . toFixed ( 2 ) } `
}
function getOrderTitle ( item ) {
/ / 优 先 使 用 r e m a r k 中 的 商 品 名 称
if ( item . remark && ! item . remark . startsWith ( 'lottery:' ) ) {
return item . remark
}
/ / 其 次 使 用 i t e m s 中 的 商 品 名 称
if ( item . items && item . items . length > 0 ) {
return item . items [ 0 ] . title || '商品'
}
/ / 使 用 活 动 名 称
if ( item . activity _name ) {
return item . activity _name
}
return item . title || item . subject || '订单'
}
function getProductImage ( item ) {
/ / 从 i t e m s 中 获 取 图 片
if ( item . items && item . items . length > 0 ) {
const images = item . items [ 0 ] . product _images
if ( images ) {
try {
const parsed = JSON . parse ( images )
if ( Array . isArray ( parsed ) && parsed . length > 0 ) {
return parsed [ 0 ]
}
} catch ( e ) {
if ( typeof images === 'string' && images . startsWith ( 'http' ) ) {
return images
}
}
}
}
return defaultImage
}
function getTypeIcon ( item ) {
const sourceType = item . source _type
if ( sourceType === 2 ) return '🎰' / / 抽 奖 订 单
if ( sourceType === 1 ) return '🛒' / / 商 城 订 单
return '📦'
}
function getTypeName ( item ) {
const sourceType = item . source _type
if ( sourceType === 2 ) return '一番赏'
if ( sourceType === 1 ) return '商城'
return '订单'
}
function statusText ( item ) {
/ / 检 查 是 否 已 开 奖
if ( item . is _draw === true || item . is _draw === 1 ) {
return item . is _winner ? '已中奖' : '未中奖'
}
const status = item . status
if ( status === 1 ) return '待付款'
if ( status === 2 ) return '已完成'
if ( status === 3 ) return '已取消'
return '进行中'
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 === '已完成' || text === '已中奖' ) return 'status-success'
if ( text === '未中奖' ) return 'status-normal'
if ( text === '已取消' ) return 'status-cancelled'
return 'status-processing'
if ( text === '已完成' ) return 'status-completed'
return ''
}
function switchTab ( tab ) {
@ -250,17 +86,10 @@ function apiStatus() {
return currentTab . value === 'pending' ? 'pending' : 'completed'
}
/ / 过 滤 掉 s o u r c e _ t y p e = 3 的 发 奖 订 单
function filterOrders ( items ) {
if ( ! Array . isArray ( items ) ) return [ ]
return items . filter ( item => item . source _type !== 3 )
}
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 : '提示' ,
@ -274,7 +103,6 @@ async function fetchOrders(append) {
} )
return
}
if ( ! append ) {
if ( currentTab . value === 'completed' ) {
await fetchAllOrders ( )
@ -290,17 +118,12 @@ async function fetchOrders(append) {
loadingMore . value = true
page . value = page . value + 1
}
error . value = ''
try {
const list = await getOrders ( user _id , apiStatus ( ) , page . value , pageSize . value )
const rawItems = Array . isArray ( list ) ? list : ( list && list . items ) || ( list && list . list ) || [ ]
const items = filterOrders ( rawItems )
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 {
@ -323,20 +146,15 @@ async function fetchAllOrders() {
page . value = 1
hasMore . value = false
orders . value = [ ]
try {
const first = await getOrders ( user _id , apiStatus ( ) , 1 , pageSize . value )
const rawItemsFirst = Array . isArray ( first ) ? first : ( first && first . items ) || ( first && first . list ) || [ ]
const itemsFirst = filterOrders ( rawItemsFirst )
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 rawItems = Array . isArray ( res ) ? res : ( res && res . items ) || ( res && res . list ) || [ ]
const items = filterOrders ( rawItems )
const items = Array . isArray ( res ) ? res : ( res && res . items ) || ( res && res . list ) || [ ]
orders . value = orders . value . concat ( items )
}
} catch ( e ) {
@ -345,45 +163,6 @@ async function fetchAllOrders() {
loading . value = false
}
}
function goOrderDetail ( item ) {
/ / 跳 转 订 单 详 情 页
uni . navigateTo ( {
url : ` /pages/orders/detail?id= ${ item . id } &order_no= ${ item . order _no } `
} )
}
function goShopping ( ) {
uni . switchTab ( { url : '/pages/index/index' } )
}
async function doCancelOrder ( item ) {
uni . showModal ( {
title : '确认取消' ,
content : '确定要取消这个订单吗？' ,
success : async ( res ) => {
if ( res . confirm ) {
uni . showLoading ( { title : '取消中...' } )
try {
await cancelOrderApi ( item . id , '用户主动取消' )
uni . hideLoading ( )
uni . showToast ( { title : '订单已取消' , icon : 'success' } )
/ / 刷 新 订 单 列 表
fetchOrders ( false )
} catch ( e ) {
uni . hideLoading ( )
uni . showToast ( { title : e . message || '取消失败' , icon : 'none' } )
}
}
}
} )
}
function payOrder ( item ) {
/ / T O D O : 跳 转 支 付
uni . showToast ( { title : '支付功能开发中' , icon : 'none' } )
}
onLoad ( ( opts ) => {
const s = ( opts && opts . status ) || ''
if ( s === 'completed' || s === 'pending' ) currentTab . value = s
@ -401,214 +180,117 @@ onReachBottom(() => {
采用暖橙色调的订单列表设计
=== === === === === === === === === === === === === === == * /
. page - container {
. wrap {
padding : $spacing - md ;
min - height : 100 vh ;
background $bg - page ;
background -color : $bg - page ;
position : relative ;
padding - bottom : calc ( 40 rpx + env ( safe - area - inset - bottom ) ) ;
overflow - x : hidden ;
& : : before {
content : '' ;
position : fixed ;
top : 0 ; left : 0 ; width : 100 % ; height : 100 vh ;
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 - 与货柜页面保持一致 */
/* Tab 切换 */
. tabs {
position : fixed ;
top : 0 ;
left : 0 ;
right : 0 ;
height : 88 rpx ;
background : rgba ( $bg - card , 0.95 ) ;
backdrop - filter : blur ( 20 rpx ) ;
display : flex ;
align - items : center ;
justify - content : center ;
z - index : 100 ;
box - shadow : 0 2 rpx 20 rpx rgba ( 0 , 0 , 0 , 0.05 ) ;
}
. tab - item {
position : relative ;
flex : 1 ;
height : 100 % ;
display : flex ;
align - items : center ;
justify - content : center ;
transition : all 0.3 s ;
& . active {
. tab - text {
color : $brand - primary ;
font - weight : 700 ;
font - size : 30 rpx ;
}
& : : after {
content : '' ;
position : absolute ;
bottom : 0 ;
left : 50 % ;
transform : translateX ( - 50 % ) ;
width : 40 rpx ;
height : 4 rpx ;
background : $brand - primary ;
border - radius : 4 rpx ;
}
}
}
. tab - text {
font - size : 28 rpx ;
color : $text - sub ;
transition : all 0.3 s ;
}
. page - content {
position : relative ;
z - index : 1 ;
padding : $spacing - lg ;
padding - top : calc ( 88 rpx + $spacing - lg ) ; /* tabs height + spacing */
}
/* 错误提示 */
. error - toast {
display : flex ;
align - items : center ;
justify - content : center ;
gap : $spacing - sm ;
padding : $spacing - md $spacing - lg ;
background : rgba ( $uni - color - error , 0.1 ) ;
background : $bg - glass ;
backdrop - filter : blur ( 10 rpx ) ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.5 ) ;
border - radius : $radius - lg ;
padding : 8 rpx ;
margin - bottom : $spacing - lg ;
. error - icon { font - size : $font - lg ; }
. error - text { color : $uni - color - error ; font - size : $font - sm ; }
box - shadow : $shadow - sm ;
}
/* 加载状态 */
. loading - state {
display : flex ;
flex - direction : column ;
align - items : center ;
justify - content : center ;
padding : 120 rpx 0 ;
. loading - text {
margin - top : $spacing - lg ;
color : $text - sub ;
font - size : $font - sm ;
}
}
. loading - spinner {
width : 60 rpx ;
height : 60 rpx ;
border : 4 rpx solid rgba ( $brand - primary , 0.2 ) ;
border - top - color : $brand - primary ;
border - radius : 50 % ;
animation : spin 0.8 s linear infinite ;
& . small {
width : 32 rpx ;
height : 32 rpx ;
border - width : 3 rpx ;
}
}
@ keyframes spin {
to { transform : rotate ( 360 deg ) ; }
}
/* 空状态 */
. empty - state {
display : flex ;
flex - direction : column ;
align - items : center ;
padding : 100 rpx $spacing - xl ;
animation : fadeInUp 0.5 s ease - out ;
}
. empty - illustration {
width : 200 rpx ;
height : 200 rpx ;
background : rgba ( $brand - primary , 0.05 ) ;
border - radius : 50 % ;
display : flex ;
align - items : center ;
justify - content : center ;
margin - bottom : $spacing - xl ;
}
. empty - icon {
font - size : 80 rpx ;
animation : float 3 s ease - in - out infinite ;
}
. empty - title {
font - size : $font - xl ;
font - weight : 700 ;
color : $text - main ;
margin - bottom : $spacing - sm ;
}
. empty - desc {
font - size : $font - sm ;
color : $text - sub ;
margin - bottom : $spacing - xl ;
}
. empty - btn {
background : $gradient - brand ! important ;
color : # fff ! important ;
border : none ! important ;
padding : 0 60 rpx ;
height : 80 rpx ;
line - height : 80 rpx ;
border - radius : $radius - round ;
. tab {
flex : 1 ;
text - align : center ;
padding : 20 rpx 0 ;
font - size : $font - md ;
font - weight : 600 ;
box - shadow : $shadow - warm ;
color : $text - sub ;
border - radius : $radius - md ;
transition : all 0.25 s ease ;
font - weight : 500 ;
}
/* 订单列表 */
. orders - list {
display : flex ;
flex - direction : column ;
gap : $spacing - lg ;
. tab . active {
background : $gradient - brand ;
color : $text - inverse ;
font - weight : 600 ;
box - shadow : $shadow - glow ;
}
/* 订单卡片 */
. order - card {
background : $bg - card ;
border - radius : $radius - xl ;
overflow : hidden ;
box - shadow : $shadow - card ;
animation : fadeInUp 0.4 s ease - out backwards ;
animation - delay : var ( -- delay , 0 s ) ;
transition : all 0.2 s ;
& : active {
transform : scale ( 0.98 ) ;
}
}
/* 订单头部 */
. order - header {
. order {
display : flex ;
justify - content : space - between ;
align - items : center ;
padding : $spacing - md $spacing - lg ;
border - bottom : 1 rpx solid $border - color - light ;
background : rgba ( $bg - secondary , 0.3 ) ;
background : $bg - card ;
border - radius : $radius - md ;
padding : $spacing - lg ;
margin - bottom : $spacing - lg ;
box - shadow : $shadow - sm ;
border : 1 rpx solid rgba ( 0 , 0 , 0 , 0.02 ) ;
transition : all 0.2 s ease ;
animation : fadeInUp 0.4 s ease - out backwards ;
}
. order - type {
@ 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 ;
align - items : center ;
gap : $spacing - xs ;
flex - direction : column ;
flex : 1 ;
min - width : 0 ;
}
. type - icon {
font - size : $font - lg ;
. order - title {
font - size : $font - md ;
font - weight : 700 ;
color : $text - main ;
white - space : nowrap ;
overflow : hidden ;
text - overflow : ellipsis ;
margin - bottom : $spacing - xs ;
}
. type - name {
. order - sub {
font - size : $font - sm ;
color : $text - sub ;
font - weight : 500 ;
}
. 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 ;
padding : 6 rpx 16 rpx ;
color : $text - sub ;
margin - top : 10 rpx ;
padding : 4 rpx $spacing - md ;
background : $bg - page ;
border - radius : $radius - round ;
font - weight : 600 ;
@ -616,194 +298,51 @@ onReachBottom(() => {
background : rgba ( $brand - primary , 0.1 ) ;
color : $brand - primary ;
}
& . status - success {
& . status - completed {
background : rgba ( $uni - color - success , 0.1 ) ;
color : $uni - color - success ;
}
& . status - normal {
background : rgba ( $text - sub , 0.1 ) ;
color : $text - sub ;
}
& . status - cancelled {
background : rgba ( $text - placeholder , 0.1 ) ;
color : $text - placeholder ;
}
& . status - processing {
background : rgba ( $accent - gold , 0.15 ) ;
color : # B45309 ;
}
}
/* 订单内容 */
. order - body {
display : flex ;
padding : $spacing - lg ;
gap : $spacing - lg ;
}
. product - image - wrap {
width : 160 rpx ;
height : 160 rpx ;
border - radius : $radius - lg ;
overflow : hidden ;
position : relative ;
flex - shrink : 0 ;
background : $bg - secondary ;
}
. product - image {
width : 100 % ;
height : 100 % ;
}
. image - overlay {
position : absolute ;
top : 0 ; left : 0 ; right : 0 ; bottom : 0 ;
background : rgba ( 0 , 0 , 0 , 0.4 ) ;
display : flex ;
align - items : center ;
justify - content : center ;
}
. winner - badge {
color : # fff ;
font - size : $font - sm ;
font - weight : 700 ;
background : $gradient - gold ;
padding : 6 rpx 16 rpx ;
border - radius : $radius - sm ;
}
. product - info {
flex : 1 ;
/* 空状态 */
. empty {
display : flex ;
flex - direction : column ;
justify - content : space - between ;
min - width : 0 ;
}
. product - title {
font - size : $font - md ;
font - weight : 700 ;
color : $text - main ;
line - height : 1.4 ;
display : - webkit - box ;
- webkit - line - clamp : 2 ;
- webkit - box - orient : vertical ;
overflow : hidden ;
}
. product - meta {
display : flex ;
flex - wrap : wrap ;
gap : $spacing - sm ;
margin - top : $spacing - xs ;
}
. meta - item {
font - size : $font - xs ;
color : $text - sub ;
background : $bg - secondary ;
padding : 4 rpx 12 rpx ;
border - radius : $radius - sm ;
}
. order - time {
font - size : $font - xs ;
color : $text - placeholder ;
margin - top : auto ;
}
/* 订单底部 */
. order - footer {
display : flex ;
justify - content : space - between ;
align - items : center ;
padding : $spacing - md $spacing - lg ;
background : rgba ( $bg - secondary , 0.3 ) ;
border - top : 1 rpx solid $border - color - light ;
}
. order - no {
display : flex ;
align - items : center ;
gap : $spacing - xs ;
}
. no - label {
font - size : $font - xs ;
color : $text - placeholder ;
}
. no - value {
font - size : $font - xs ;
color : $text - sub ;
font - family : 'SF Mono' , monospace ;
}
. order - amount {
display : flex ;
align - items : baseline ;
gap : $spacing - xs ;
}
. amount - label {
font - size : $font - xs ;
color : $text - sub ;
}
. amount - value {
font - size : $font - lg ;
font - weight : 800 ;
color : $brand - primary ;
font - family : 'DIN Alternate' , sans - serif ;
}
/* 操作按钮 */
. order - actions {
display : flex ;
justify - content : flex - end ;
gap : $spacing - md ;
padding : $spacing - md $spacing - lg ;
border - top : 1 rpx solid $border - color - light ;
}
. action - btn {
height : 64 rpx ;
line - height : 64 rpx ;
padding : 0 32 rpx ;
border - radius : $radius - round ;
font - size : $font - sm ;
font - weight : 600 ;
& . primary {
background : $gradient - brand ! important ;
color : # fff ! important ;
border : none ! important ;
}
& . secondary {
background : transparent ! important ;
color : $text - sub ! important ;
border : 2 rpx solid $border - color ! important ;
}
}
/* 加载更多 */
. loading - more {
display : flex ;
align - items : center ;
justify - content : center ;
gap : $spacing - sm ;
padding : $spacing - xl 0 ;
color : $text - sub ;
font - size : $font - sm ;
}
. no - more {
display : flex ;
align - items : center ;
justify - content : center ;
gap : $spacing - md ;
padding : $spacing - xl 0 ;
color : $text - placeholder ;
font - size : $font - xs ;
margin - top : 120 rpx ;
animation : fadeInUp 0.5 s ease - out ;
. divider {
width : 60 rpx ;
height : 1 rpx ;
background : $border - color - light ;
. empty - icon {
font - size : 80 rpx ;
margin - bottom : $spacing - lg ;
opacity : 0.6 ;
animation : float 4 s ease - in - out infinite ;
}
. empty - text {
color : $text - sub ;
font - size : $font - md ;
}
}
/* 动画 */
@ keyframes float {
0 % , 100 % { transform : translateY ( 0 ) ; }
50 % { transform : translateY ( - 10 rpx ) ; }
/* 错误提示 */
. 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 >