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

Browse Source
This commit is contained in:
luo
2026-08-13 15:25:07 +08:00
parent e1498cb5a6
commit 84af596a65
1 changed files with 40 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,60 +2,51 @@
<view class="container"> <view class="container">
<view class="tab-section"> <view class="tab-section">
<view class="tab-header"> <view class="tab-header">
<view class="tab-indicator" :style="{ left: packageTypeIndex === 0 ? '8rpx' : '50%' }"></view> <view class="tab-indicator" :style="{ left: packageTypeIndex === 0 ? '8rpx' : '50%' }"></view>
<view <view
v-for="tab in packageTypeTabs" v-for="tab in packageTypeTabs"
:key="tab.value" :key="tab.value"
class="tab-item" class="tab-item"
:class="{ active: activePackageType === tab.value }" :class="{ active: activePackageType === tab.value }"
@tap="switchPackageType(tab.value)" @tap="switchPackageType(tab.value)"
> >
{{ tab.label }} {{ tab.label }}
</view> </view>
</view> </view>
<swiper <scroll-view scroll-y class="package-scroll">
class="tab-swiper package-swiper" <view v-if="!packagesLoaded || (loading && packageList.length === 0)" class="loading-state">
:current="packageTypeIndex" <up-loading-icon text="加载中" size="30"></up-loading-icon>
:circular="false" </view>
:disable-touch="true" <view v-else-if="packageList.length === 0" class="empty-state">
> <image class="empty-icon" src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
<swiper-item v-for="tab in packageTypeTabs" :key="tab.value" class="package-swiper-item"> <view class="empty-title">暂无{{ activePackageType === 'formal' ? '正式套餐' : '加油包' }}</view>
<scroll-view v-if="activePackageType === tab.value" scroll-y class="package-scroll"> <view class="empty-desc">当前资产暂无适用的套餐</view>
<view v-if="!packagesLoaded || (loading && packageList.length === 0)" class="loading-state"> </view>
<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 v-else class="package-list">
<view class="package-card" v-for="item in packageList" :key="item.package_id"> <view class="package-card" v-for="item in packageList" :key="item.package_id">
<view class="package-info"> <view class="package-info">
<view class="package-name">{{ item.package_name }}</view> <view class="package-name">{{ item.package_name }}</view>
<view class="package-meta"> <view class="package-meta">
<view class="package-meta-item"> <view class="package-meta-item">
<image class="package-meta-icon" src="/static/有效期.png" mode="aspectFit" /> <image class="package-meta-icon" src="/static/有效期.png" mode="aspectFit" />
<text>{{ formatValidity(item.validity_days) }}</text> <text>{{ formatValidity(item.validity_days) }}</text>
</view> </view>
<view class="package-meta-item"> <view class="package-meta-item">
<image class="package-meta-icon" src="/static/流量.png" mode="aspectFit" /> <image class="package-meta-icon" src="/static/流量.png" mode="aspectFit" />
<text>{{ formatData(item.data_allowance, item.data_unit) }}</text> <text>{{ formatData(item.data_allowance, item.data_unit) }}</text>
</view>
</view> </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>
<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>
</view> </view>
</scroll-view> </view>
</swiper-item> </scroll-view>
</swiper>
</view> </view>
<up-popup :show="showModal" mode="center" @close="showModal = false"> <up-popup :show="showModal" mode="center" @close="showModal = false">
@@ -779,13 +770,6 @@
} }
} }
.tab-swiper {
margin-top: 20rpx;
flex: 1 1 0;
min-height: 0;
height: auto;
}
.container .package-tabs { .container .package-tabs {
display: flex; display: flex;
gap: 0; gap: 0;
@@ -848,23 +832,12 @@
z-index: 0; z-index: 0;
} }
.package-swiper,
.package-swiper-item,
.package-scroll { .package-scroll {
width: 100%; width: 100%;
min-height: 0; min-height: 0;
}
.package-swiper {
/* 固定页面提供确定高度，轮播填充 Tab 下方的全部可用空间。 */
flex: 1 1 0; flex: 1 1 0;
height: auto; margin-top: 20rpx;
overflow: hidden; box-sizing: border-box;
}
.package-swiper-item,
.package-scroll {
height: 100%;
} }
.package-list { .package-list {