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 2m11s
Details

Browse Source
This commit is contained in:
luo
2026-08-13 15:54:06 +08:00
parent 515e7e22c8
commit dfc7472ad9
2 changed files with 37 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,15 +13,6 @@
</view>
</view>
<swiper
class="order-swiper"
:current="filterIndex"
:circular="false"
:acceleration="true"
@change="onFilterSwiperChange"
>
<swiper-item v-for="(item, index) in filterOptions" :key="item.value ?? 'all'" class="order-swiper-item">
<scroll-view v-if="filterIndex === index" scroll-y class="scroll-container" @scrolltolower="loadMore">
<view v-if="!ordersLoaded || (loading && orderList.length === 0)" class="loading-state">
<up-loading-icon text="加载中" size="30"></up-loading-icon>
</view>
@@ -74,9 +65,6 @@
<text v-else>上拉加载更多</text>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<RenewalPaymentPopup ref="renewalPopupRef" :identifier="userStore.state.identifier"
paymentRefreshTarget="order-list" @completed="resetOrderListAndLoad" />
@@ -85,7 +73,7 @@
<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { onReachBottom, onShow } from '@dcloudio/uni-app';
import { orderApi } from '@/api/index.js';
import RenewalPaymentPopup from '@/components/RenewalPaymentPopup.vue';
import { useUserStore } from '@/store/index.js';
@@ -153,13 +141,6 @@
resetOrderListAndLoad();
};
const onFilterSwiperChange = (event) => {
const nextIndex = Number(event?.detail?.current);
if (Number.isInteger(nextIndex) && nextIndex >= 0 && nextIndex < filterOptions.length) {
onFilterChange(nextIndex);
}
};
const loadOrderList = async (append = false) => {
if (loading.value || (append && noMore.value)) return;
@@ -259,23 +240,24 @@
onMounted(() => {
loadOrderList();
});
onReachBottom(() => {
loadMore();
});
</script>
<style lang="scss" scoped>
.container {
position: fixed;
top: var(--window-top);
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-secondary);
max-width: 750rpx;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding-top: 0;
min-height: 100vh;
padding: 0 0 48rpx;
}
.filter-tabs {
@@ -590,31 +572,6 @@
z-index: 0;
}
.order-swiper,
.order-swiper-item {
width: 100%;
min-height: 0;
}
.order-swiper {
/* 固定页面提供确定高度，轮播填充 Tab 下方的全部可用空间。 */
flex: 1 1 0;
height: auto;
overflow: hidden;
}
.order-swiper-item {
height: 100%;
}
.scroll-container {
flex: none;
height: 100%;
min-height: 0;
width: 100%;
box-sizing: border-box;
}
.order-list {
padding: 20rpx 24rpx 48rpx;
box-sizing: border-box;

83
pages/package-order/package-order.vue
View File

@@ -14,40 +14,38 @@
</view>
</view>
<view class="package-scroll-area">
<scroll-view scroll-y class="package-scroll">
<view v-if="!packagesLoaded || (loading && packageList.length === 0)" class="loading-state">
<up-loading-icon text="加载中" size="30"></up-loading-icon>
</view>
<view v-else-if="packageList.length === 0" class="empty-state">
<image class="empty-icon" src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
<view class="empty-title">暂无{{ activePackageType === 'formal' ? '正式套餐' : '加油包' }}</view>
<view class="empty-desc">当前资产暂无适用的套餐</view>
</view>
<view class="package-content">
<view v-if="!packagesLoaded || (loading && packageList.length === 0)" class="loading-state">
<up-loading-icon text="加载中" size="30"></up-loading-icon>
</view>
<view v-else-if="packageList.length === 0" class="empty-state">
<image class="empty-icon" src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
<view class="empty-title">暂无{{ activePackageType === 'formal' ? '正式套餐' : '加油包' }}</view>
<view class="empty-desc">当前资产暂无适用的套餐</view>
</view>
<view v-else class="package-list">
<view class="package-card" v-for="item in packageList" :key="item.package_id">
<view class="package-info">
<view class="package-name">{{ item.package_name }}</view>
<view class="package-meta">
<view class="package-meta-item">
<image class="package-meta-icon" src="/static/有效期.png" mode="aspectFit" />
<text>{{ formatValidity(item.validity_days) }}</text>
</view>
<view class="package-meta-item">
<image class="package-meta-icon" src="/static/流量.png" mode="aspectFit" />
<text>{{ formatData(item.data_allowance, item.data_unit) }}</text>
</view>
<view v-else class="package-list">
<view class="package-card" v-for="item in packageList" :key="item.package_id">
<view class="package-info">
<view class="package-name">{{ item.package_name }}</view>
<view class="package-meta">
<view class="package-meta-item">
<image class="package-meta-icon" src="/static/有效期.png" mode="aspectFit" />
<text>{{ formatValidity(item.validity_days) }}</text>
</view>
<view class="package-meta-item">
<image class="package-meta-icon" src="/static/流量.png" mode="aspectFit" />
<text>{{ formatData(item.data_allowance, item.data_unit) }}</text>
</view>
<view class="package-description">高速流量 · 全国通用 · 不限速</view>
</view>
<view class="package-side">
<view class="package-price"><text class="price-symbol">¥</text>{{ formatPackagePrice(item.retail_price) }}</view>
<button class="btn-apple btn-primary package-buy-button" @tap="buyPackage(item)">立即订购</button>
</view>
<view class="package-description">高速流量 · 全国通用 · 不限速</view>
</view>
<view class="package-side">
<view class="package-price"><text class="price-symbol">¥</text>{{ formatPackagePrice(item.retail_price) }}</view>
<button class="btn-apple btn-primary package-buy-button" @tap="buyPackage(item)">立即订购</button>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
@@ -709,30 +707,17 @@
/* Screenshot-aligned package list skin */
.container {
position: fixed;
/* Keep the page below the platform navigation bar on every screen size. */
top: var(--window-top);
right: 0;
bottom: var(--window-bottom);
left: 0;
display: flex;
flex-direction: column;
gap: 18rpx;
padding: 20rpx 24rpx 48rpx;
height: auto;
min-height: 0;
min-height: 100vh;
background: #f8f9fb;
box-sizing: border-box;
overflow: hidden;
}
.tab-section {
flex: 1;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.tab-header {
@@ -836,18 +821,8 @@
z-index: 0;
}
.package-scroll-area {
flex: 1 1 0;
min-height: 0;
.package-content {
margin-top: 20rpx;
display: flex;
}
.package-scroll {
width: 100%;
height: 100%;
min-height: 0;
box-sizing: border-box;
}
.package-list {