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

This commit is contained in:
luo
2026-07-29 16:53:19 +08:00
parent b5e4a1259b
commit 7136655f48
3 changed files with 38 additions and 42 deletions

View File

@@ -18,7 +18,8 @@
{{ networkStatus == 1 ? '正常' : '停机' }}
</view>
</view>
<button v-if="hasPackageName" class="renew-button" @tap.stop="emit('renew')">立即续费</button>
<up-button v-if="hasPackageName" class="renew-button" type="primary" size="small"
@tap.stop="emit('renew')">立即续费</up-button>
</view>
</template>
@@ -56,14 +57,8 @@
.renew-button {
margin: 24rpx 0 0;
background: var(--primary);
color: #fff;
border: none;
border-radius: 12rpx;
font-size: 26rpx;
line-height: 2.6;
&::after { border: none; }
width: 180rpx;
margin-left: auto;
}
}

View File

@@ -37,27 +37,19 @@
<view class="card-body">
<view class="info-grid">
<view class="info-item">
<view class="info-label">套餐名称</view>
<view class="info-value">
<view class="package-item" v-for="(pkgName, pkgIndex) in item.package_names" :key="pkgIndex">
<text class="package-name">{{ pkgName }}</text>
</view>
</view>
<view class="info-label">套餐名称</view>
<view class="info-value">{{ getPackageNamesText(item) }}</view>
</view>
<view class="info-item">
<view class="info-label">购买角色</view>
<view class="info-value">{{ item.purchase_role || '-' }}</view>
</view>
<view class="info-item">
<view class="info-label">资产标识</view>
<view class="info-label">资产标识</view>
<view class="info-value">{{ item.asset_identifier || '-' }}</view>
</view>
<view class="info-item">
<view class="info-label">订单金额</view>
<view class="info-label">订单金额</view>
<view class="info-value amount">¥{{ formatMoney(item.total_amount) }}</view>
</view>
<view class="info-item">
<view class="info-label">下单时间</view>
<view class="info-label">下单时间</view>
<view class="info-value">{{ item.created_at }}</view>
</view>
</view>
@@ -67,8 +59,8 @@
@tap.stop="showOrderPaymentMethods(item)">
{{ isOrderPaying(item) ? '处理中...' : '立即支付' }}
</button>
<button class="btn-pay btn-renew" :disabled="orderPayingId !== null"
@tap.stop="startOrderRenewal(item)">立即续费</button>
<up-button class="btn-renew" type="primary" size="small"
:disabled="orderPayingId !== null" @tap.stop="startOrderRenewal(item)">立即续费</up-button>
</view>
</view>
</view>
@@ -234,6 +226,13 @@
const isOrderPaying = (order) => orderPayingId.value === order.order_id;
const getPackageNamesText = (order) => {
const packageNames = Array.isArray(order?.package_names)
? order.package_names.filter(Boolean)
: [];
return packageNames.join('、') || '-';
};
const openOrderDetail = (order) => {
if (!order?.order_id || orderPayingId.value !== null) return;
uni.navigateTo({ url: `/pages/order-detail/order-detail?id=${order.order_id}` });
@@ -491,19 +490,26 @@
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
grid-template-columns: 1fr;
gap: 16rpx;
.info-item {
display: flex;
align-items: baseline;
gap: 8rpx;
.info-label {
font-size: 22rpx;
color: #999;
margin-bottom: 8rpx;
flex-shrink: 0;
}
.info-value {
font-size: 26rpx;
color: #333;
flex: 1;
min-width: 0;
word-break: break-all;
&.amount {
color: #ff6b6b;
@@ -514,22 +520,12 @@
}
}
.package-item {
display: flex;
align-items: center;
padding: 8rpx 0;
}
.package-name {
font-size: 26rpx;
color: #333;
}
.card-footer {
margin-top: 24rpx;
padding-top: 24rpx;
border-top: 1rpx solid #f0f0f0;
display: flex;
justify-content: flex-end;
gap: 16rpx;
.btn-pay {
@@ -537,11 +533,13 @@
color: #fff;
border: none;
border-radius: 20rpx;
padding: 16rpx 40rpx;
height: 64rpx;
padding: 0 28rpx;
font-size: 26rpx;
font-weight: 500;
width: auto;
flex: 1;
min-width: 168rpx;
line-height: 64rpx;
&[disabled] {
opacity: 0.7;
@@ -550,8 +548,11 @@
&::after {
border: none;
}
}
&.btn-renew { background: #52c41a; }
.btn-renew {
flex-shrink: 0;
width: 180rpx;
}
}
}

View File

@@ -30,7 +30,7 @@
<text class="package-price">{{ formatPackagePrice(item.retail_price) }}</text>
</view>
<view class="btn">
<up-button type="primary" @click="buyPackage(item)">立即订购</up-button>
<up-button type="primary" size="small" @click="buyPackage(item)">立即订购</up-button>
</view>
</view>
</view>