|
|
@@ -150,15 +150,6 @@ function goPay() {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-function goBack() {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1,
|
|
|
- fail: () => {
|
|
|
- uni.switchTab({ url: '/pages/client/order/order' })
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
const hasBottomActions = computed(() => {
|
|
|
const d = orderDetail.value
|
|
|
if (!d) return false
|
|
|
@@ -201,32 +192,9 @@ onLoad((query) => {
|
|
|
<template v-else-if="orderDetail">
|
|
|
<view class="detail-fixed-top">
|
|
|
<view class="client-subpage-hero order-detail-hero sq-hero-header sq-hero-header--compact">
|
|
|
- <view class="sq-hero-back-row">
|
|
|
- <view class="sq-hero-back-btn" @click="goBack">
|
|
|
- <text>‹</text>
|
|
|
- </view>
|
|
|
- <text class="sq-hero-back-title">订单详情</text>
|
|
|
- </view>
|
|
|
<text class="client-subpage-hero__sub">订单号 {{ orderDetail.orderNo }}</text>
|
|
|
<text class="order-status-badge">{{ statusMap[unifiedStatus(orderDetail)]?.text }}</text>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 收货信息 -->
|
|
|
- <view class="address-section">
|
|
|
- <image class="address-icon" :src="ICON_COORDINATE" mode="aspectFit" />
|
|
|
- <view class="address-info">
|
|
|
- <view class="address-contact">
|
|
|
- <text class="contact-name">{{ orderDetail.contactPerson }}</text>
|
|
|
- <PhoneDialInline
|
|
|
- class="contact-phone-dial"
|
|
|
- :phone="orderDetail.contactPhone"
|
|
|
- hide-icon
|
|
|
- color="#0a9f6d"
|
|
|
- />
|
|
|
- </view>
|
|
|
- <text class="address-detail">{{ orderDetail.deliveryAddress }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
|
|
|
<scroll-view
|
|
|
@@ -240,6 +208,23 @@ onLoad((query) => {
|
|
|
class="detail-scroll-inner"
|
|
|
:class="{ 'detail-scroll-inner--with-actions': hasBottomActions }"
|
|
|
>
|
|
|
+ <!-- 收货信息(与下方区块一并滚动) -->
|
|
|
+ <view class="address-section">
|
|
|
+ <image class="address-icon" :src="ICON_COORDINATE" mode="aspectFit" />
|
|
|
+ <view class="address-info">
|
|
|
+ <view class="address-contact">
|
|
|
+ <text class="contact-name">{{ orderDetail.contactPerson }}</text>
|
|
|
+ <PhoneDialInline
|
|
|
+ class="contact-phone-dial"
|
|
|
+ :phone="orderDetail.contactPhone"
|
|
|
+ hide-icon
|
|
|
+ color="#000000"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <text class="address-detail">{{ orderDetail.deliveryAddress }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 配送员(有分配时显示在商品信息上方) -->
|
|
|
<view v-if="hasDelivererInfo" class="deliverer-section">
|
|
|
<view class="section-title-row">
|
|
|
@@ -259,7 +244,7 @@ onLoad((query) => {
|
|
|
<PhoneDialInline
|
|
|
v-if="orderDetail.delivererPhone"
|
|
|
:phone="orderDetail.delivererPhone"
|
|
|
- color="#0a9f6d"
|
|
|
+ color="#000000"
|
|
|
icon-size="20"
|
|
|
expand
|
|
|
end-align
|
|
|
@@ -299,12 +284,16 @@ onLoad((query) => {
|
|
|
/>
|
|
|
<view class="item-body">
|
|
|
<text class="item-name">{{ item.productName }}</text>
|
|
|
- <text class="item-unit">{{ formatMeasureText(item.measureValue, item.unitName) }}</text>
|
|
|
- <view class="item-line">
|
|
|
- <text class="item-price">¥{{ linePrice(item) }}</text>
|
|
|
- <text class="item-qty">x{{ item.quantity }}</text>
|
|
|
+ <view class="item-meta">
|
|
|
+ <view class="item-meta-row item-meta-row--qty-unit">
|
|
|
+ <text class="item-unit-inline">{{ formatMeasureText(item.measureValue, item.unitName) }}</text>
|
|
|
+ <text class="item-qty-inline">x{{ item.quantity }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-meta-row item-meta-row--sub-price">
|
|
|
+ <text class="item-price-inline">¥{{ linePrice(item) }}</text>
|
|
|
+ <text class="item-sub-inline">小计(元) ¥{{ lineAmount(item) }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <text class="item-sub">小计(元) ¥{{ lineAmount(item) }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -472,7 +461,7 @@ onLoad((query) => {
|
|
|
align-items: flex-start;
|
|
|
background: var(--c-card);
|
|
|
border: 1rpx solid var(--c-border);
|
|
|
- margin: 16rpx 32rpx 0;
|
|
|
+ margin: 0 0 16rpx;
|
|
|
border-radius: 24rpx;
|
|
|
padding: 24rpx;
|
|
|
box-shadow: 0 8rpx 20rpx rgba(10, 159, 109, 0.08);
|
|
|
@@ -507,7 +496,7 @@ onLoad((query) => {
|
|
|
|
|
|
.contact-phone-dial :deep(.phone-dial-inline__text) {
|
|
|
font-size: 28rpx;
|
|
|
- color: var(--c-muted);
|
|
|
+ color: #000000;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
}
|
|
|
@@ -567,6 +556,12 @@ onLoad((query) => {
|
|
|
|
|
|
.deliverer-field--time {
|
|
|
border-top: 1rpx solid #f0f0f0;
|
|
|
+
|
|
|
+ .deliverer-label {
|
|
|
+ width: 248rpx;
|
|
|
+ min-width: 248rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.deliverer-label {
|
|
|
@@ -599,7 +594,7 @@ onLoad((query) => {
|
|
|
}
|
|
|
|
|
|
.deliverer-phone-cell :deep(.phone-dial-inline__text) {
|
|
|
- color: #303133;
|
|
|
+ color: #000000;
|
|
|
font-weight: 500;
|
|
|
font-size: 30rpx;
|
|
|
text-align: right;
|
|
|
@@ -688,51 +683,61 @@ onLoad((query) => {
|
|
|
word-break: break-word;
|
|
|
}
|
|
|
|
|
|
- .item-unit {
|
|
|
- display: block;
|
|
|
- margin: 6rpx 0 12rpx;
|
|
|
+ .item-meta {
|
|
|
+ margin-top: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10rpx;
|
|
|
+ padding-top: 8rpx;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-meta-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 16rpx;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-unit-inline {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
font-size: clamp(20rpx, 3vw, 22rpx);
|
|
|
color: var(--c-muted);
|
|
|
+ text-align: left;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
- .item-line {
|
|
|
- margin-top: auto;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: minmax(0, 1fr) auto;
|
|
|
- align-items: center;
|
|
|
- column-gap: 12rpx;
|
|
|
- min-width: 0;
|
|
|
- padding-bottom: 6rpx;
|
|
|
+ .item-qty-inline {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: clamp(26rpx, 3.4vw, 30rpx);
|
|
|
+ color: #000000;
|
|
|
}
|
|
|
|
|
|
- .item-price {
|
|
|
+ .item-price-inline {
|
|
|
+ flex-shrink: 0;
|
|
|
font-size: clamp(24rpx, 3.8vw, 32rpx);
|
|
|
color: var(--c-danger);
|
|
|
font-weight: 700;
|
|
|
+ white-space: nowrap;
|
|
|
min-width: 0;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .item-qty {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #909399;
|
|
|
- flex-shrink: 0;
|
|
|
- padding-right: 8rpx;
|
|
|
}
|
|
|
|
|
|
- .item-sub {
|
|
|
- margin-top: 6rpx;
|
|
|
+ .item-sub-inline {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
font-size: 24rpx;
|
|
|
color: var(--c-danger);
|
|
|
font-weight: 600;
|
|
|
- display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
text-align: right;
|
|
|
- padding-right: 8rpx;
|
|
|
}
|
|
|
}
|
|
|
|