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

fix: package-list
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 49s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-15 15:04:26 +08:00
parent 0be233e0c0
commit 181d24a388
1 changed files with 95 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,18 +9,20 @@
<view class="card package-card" v-for="item in packageList" :key="item.package_id">
<view class="package-header flex-row-sb">
<view class="package-name">{{ item.package_name }}</view>
<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
{{ item.is_addon ? '加油包' : '正式套餐' }}
<view class="header-right">
<view class="validity-tag">{{ item.validity_days }}天</view>
<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
{{ item.is_addon ? '加油包' : '正式套餐' }}
</view>
</view>
</view>
<view class="package-price">¥{{ formatMoney(item.retail_price) }}</view>
<view class="package-data">{{ formatData(item.data_allowance, item.data_unit) }}</view>
<view class="package-desc">{{ item.description }}</view>
<view class="package-info">
<view class="info-item">流量: {{ formatData(item.data_allowance, item.data_unit) }}</view>
<view class="info-item">有效: {{ item.validity_days }}天</view>
</view>
<view class="btn">
<up-button type="primary" @click="buyPackage(item)">立即订购</up-button>
<view class="package-footer flex-row-sb">
<view class="package-price">¥{{ formatMoney(item.retail_price) }}</view>
<view class="btn">
<up-button type="primary" @click="buyPackage(item)">立即订购</up-button>
</view>
</view>
</view>
@@ -35,6 +37,17 @@
<view class="package-summary">
<view class="summary-name">{{ currentPackage?.package_name }}</view>
<view class="summary-price">¥{{ formatMoney(currentPackage?.retail_price) }}</view>
<view class="summary-details">
<view class="detail-item">
<text class="detail-label">套餐流量</text>
<text class="detail-value">{{ formatData(currentPackage?.data_allowance, currentPackage?.data_unit) }}</text>
</view>
<view class="detail-divider"></view>
<view class="detail-item">
<text class="detail-label">有效期</text>
<text class="detail-value">{{ currentPackage?.validity_days }}天</text>
</view>
</view>
</view>
<view class="payment-methods">
@@ -49,10 +62,7 @@
<view class="method-item" :class="{ active: paymentMethod === 'wallet' }" @tap="selectPaymentMethod('wallet')">
<view class="method-left">
<image class="method-icon" src="/static/wallet.png" mode="aspectFit"></image>
<view class="method-info">
<text class="method-name">账户余额</text>
<text class="wallet-balance">余额: ¥{{ formatMoney(walletBalance) }}</text>
</view>
<text class="method-name">账户余额（¥{{ formatMoney(walletBalance) }}）</text>
</view>
<view class="method-radio" :class="{ checked: paymentMethod === 'wallet' }"></view>
</view>
@@ -331,25 +341,42 @@
.package-header {
margin-bottom: var(--space-sm);
.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
.header-right {
display: flex;
align-items: center;
gap: 12rpx;
.validity-tag {
font-size: 24rpx;
color: var(--text-secondary);
padding: 4rpx 12rpx;
background: var(--gray-100);
border-radius: 8rpx;
}
}
}
.package-price {
font-size: 40rpx;
font-weight: bold;
color: var(--warning);
.package-data {
font-size: 48rpx;
font-weight: 700;
color: var(--primary);
margin-bottom: var(--space-sm);
letter-spacing: -1rpx;
}
.package-desc {
font-size: 26rpx;
color: var(--text-secondary);
margin-bottom: var(--space-sm);
}
.package-info {
display: flex;
gap: var(--space-lg);
margin-bottom: var(--space-md);
.info-item { font-size: 24rpx; color: var(--text-tertiary); }
}
.btn { margin-top: var(--space-sm); }
.package-footer {
align-items: center;
.package-price {
font-size: 32rpx;
font-weight: 600;
color: var(--warning);
}
.btn {
flex-shrink: 0;
}
}
}
}
@@ -385,22 +412,58 @@
}
.package-summary {
padding: 40rpx 30rpx;
background: rgba(0, 122, 255, 0.03);
padding: 40rpx 30rpx 30rpx;
background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(0, 122, 255, 0.02) 100%);
border-bottom: 1rpx solid var(--border-light);
text-align: center;
.summary-name {
font-size: 28rpx;
font-weight: 500;
font-size: 32rpx;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 16rpx;
margin-bottom: 20rpx;
line-height: 1.4;
}
.summary-price {
font-size: 48rpx;
font-size: 56rpx;
font-weight: 700;
color: var(--primary);
margin-bottom: 24rpx;
letter-spacing: -1rpx;
}
.summary-details {
display: flex;
align-items: center;
justify-content: center;
gap: 24rpx;
padding-top: 20rpx;
border-top: 1rpx solid rgba(0, 122, 255, 0.1);
.detail-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
.detail-label {
font-size: 22rpx;
color: var(--text-tertiary);
}
.detail-value {
font-size: 26rpx;
font-weight: 600;
color: var(--text-primary);
}
}
.detail-divider {
width: 1rpx;
height: 40rpx;
background: var(--border-light);
}
}
}
@@ -433,14 +496,8 @@
gap: 20rpx;
.method-icon {
width: 48rpx;
height: 48rpx;
}
.method-info {
display: flex;
flex-direction: column;
gap: 8rpx;
width: 64rpx;
height: 64rpx;
}
.method-name {
@@ -448,11 +505,6 @@
font-weight: 500;
color: var(--text-primary);
}
.wallet-balance {
font-size: 22rpx;
color: var(--text-tertiary);
}
}
.method-radio {