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