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="tab-section">
<view class="tab-header">
<view class="tab-indicator" :style="{ left: packageTypeIndex === 0 ? '8rpx' : '50%' }"></view>
<view
v-for="tab in packageTypeTabs"
:key="tab.value"
class="tab-item"
:class="{ active: activePackageType === tab.value }"
@tap="switchPackageType(tab.value)"
>
{{ tab.label }}
</view>
<view class="tab-indicator" :style="{ left: packageTypeIndex === 0 ? '8rpx' : '50%' }"></view>
<view
v-for="tab in packageTypeTabs"
:key="tab.value"
class="tab-item"
:class="{ active: activePackageType === tab.value }"
@tap="switchPackageType(tab.value)"
>
{{ tab.label }}
</view>
</view>
<swiper
class="tab-swiper package-swiper"
:current="packageTypeIndex"
:circular="false"
:disable-touch="true"
>
<swiper-item v-for="tab in packageTypeTabs" :key="tab.value" class="package-swiper-item">
<scroll-view v-if="activePackageType === tab.value" 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>
<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 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>
</swiper-item>
</swiper>
</view>
</scroll-view>
</view>
<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 {
display: flex;
gap: 0;
@@ -848,23 +832,12 @@
z-index: 0;
}
.package-swiper,
.package-swiper-item,
.package-scroll {
width: 100%;
min-height: 0;
}
.package-swiper {
/* 固定页面提供确定高度，轮播填充 Tab 下方的全部可用空间。 */
flex: 1 1 0;
height: auto;
overflow: hidden;
}
.package-swiper-item,
.package-scroll {
height: 100%;
margin-top: 20rpx;
box-sizing: border-box;
}
.package-list {