luo/device-voice-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修改布局UI
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 47s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-16 10:01:15 +08:00
parent c6246c023d
commit 41349ac833
1 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
pages/order-list/order-list.vue
View File

@@ -1,21 +1,22 @@
<template> <template>
<view class="container"> <view class="container">
<view class="filter-tabs"> <scroll-view scroll-y class="scroll-container" @scrolltolower="loadMore">
<view v-for="(item, index) in filterOptions" :key="index" class="tab-item" <view class="filter-tabs">
:class="{ active: filterIndex === index }" @tap="onFilterChange(index)"> <view v-for="(item, index) in filterOptions" :key="index" class="tab-item"
{{ item.label }} :class="{ active: filterIndex === index }" @tap="onFilterChange(index)">
<view v-if="filterIndex === index" class="tab-line"></view> {{ item.label }}
<view v-if="filterIndex === index" class="tab-line"></view>
</view>
</view> </view>
</view>
<view v-if="orderList.length === 0 && !loading" class="empty-state"> <view v-if="orderList.length === 0 && !loading" class="empty-state">
<view class="empty-icon">📋</view> <view class="empty-icon">📋</view>
<view class="empty-title">暂无订单</view> <view class="empty-title">暂无订单</view>
<view class="empty-desc">当前账号下暂无订单信息</view> <view class="empty-desc">当前账号下暂无订单信息</view>
</view> </view>
<scroll-view v-else scroll-y class="order-scroll" @scrolltolower="loadMore"> <view v-else class="order-list">
<view class="order-card" v-for="(item, index) in orderList" :key="index"> <view class="order-card" v-for="(item, index) in orderList" :key="index">
<view class="card-header"> <view class="card-header">
<view class="header-left"> <view class="header-left">
<view class="header-row"> <view class="header-row">
@@ -57,10 +58,11 @@
</view> </view>
</view> </view>
<view class="load-more" v-if="orderList.length > 0"> <view class="load-more" v-if="orderList.length > 0">
<text v-if="loading">加载中...</text> <text v-if="loading">加载中...</text>
<text v-else-if="noMore">没有更多了</text> <text v-else-if="noMore">没有更多了</text>
<text v-else>上拉加载更多</text> <text v-else>上拉加载更多</text>
</view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@@ -298,13 +300,19 @@
box-sizing: border-box; box-sizing: border-box;
} }
.scroll-container {
flex: 1;
height: 100%;
}
.filter-tabs { .filter-tabs {
display: flex; display: flex;
background: #fff; background: #fff;
position: sticky; position: sticky;
top: 0; top: 0;
border-radius: 10rpx; border-radius: 20rpx;
z-index: 10; z-index: 100;
margin-bottom: 20rpx;
.tab-item { .tab-item {
position: relative; position: relative;
@@ -334,8 +342,8 @@
} }
} }
.order-scroll { .order-list {
flex: 1; padding: 0 20rpx;
} }
.empty-state { .empty-state {
@@ -368,7 +376,7 @@
.order-card { .order-card {
background: #fff; background: #fff;
border-radius: 20rpx; border-radius: 20rpx;
margin-bottom: 24rpx; margin: 0 20rpx 24rpx;
overflow: hidden; overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);