refactor: 拆分小程序 vue 结构
This commit is contained in:
212
src/pages/order/detail/index.vue
Normal file
212
src/pages/order/detail/index.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<view class="od-page">
|
||||
<!-- Loading -->
|
||||
<view v-if="loading" class="od-page__loading">
|
||||
<text class="od-page__loading-text">订单加载中...</text>
|
||||
</view>
|
||||
|
||||
<template v-else-if="order">
|
||||
<!-- Status Hero -->
|
||||
<view class="od-page__status-hero">
|
||||
<view class="od-page__status-deco1" />
|
||||
<view class="od-page__status-deco2" />
|
||||
<view class="od-page__status-row">
|
||||
<view class="od-page__status-icon">
|
||||
<text class="od-page__status-icon-text">🕐</text>
|
||||
</view>
|
||||
<view class="od-page__status-text">
|
||||
<text class="od-page__status-title">{{ order.statusText }}</text>
|
||||
<text class="od-page__status-desc">{{ statusDescription }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="od-page__status-badge">
|
||||
<text>{{ sceneLabel }} · {{ orderSubtitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Store Card -->
|
||||
<view class="od-page__card">
|
||||
<view class="od-page__store">
|
||||
<view class="od-page__store-icon">
|
||||
<text>🏠</text>
|
||||
</view>
|
||||
<view class="od-page__store-info">
|
||||
<text class="od-page__store-name">{{ order.storeName }}</text>
|
||||
<text class="od-page__store-addr">{{ storeAddress }}</text>
|
||||
</view>
|
||||
<view class="od-page__store-call">
|
||||
<text>📞</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Fulfillment Info -->
|
||||
<view class="od-page__card">
|
||||
<view class="od-page__fulfill">
|
||||
<view v-if="order.tableNo" class="od-page__fulfill-row">
|
||||
<text class="od-page__fulfill-label">桌号</text>
|
||||
<view class="od-page__table-badge">
|
||||
<text>{{ order.tableNo }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="od-page__fulfill-row">
|
||||
<text class="od-page__fulfill-label">联系人</text>
|
||||
<text class="od-page__fulfill-value">{{ order.customerName }}</text>
|
||||
</view>
|
||||
<view class="od-page__fulfill-row">
|
||||
<text class="od-page__fulfill-label">手机号</text>
|
||||
<text class="od-page__fulfill-value">{{ order.customerPhone }}</text>
|
||||
</view>
|
||||
<view class="od-page__fulfill-hint">
|
||||
<text>🛡</text>
|
||||
<text class="od-page__fulfill-hint-text">{{ fulfillmentHint }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Timeline -->
|
||||
<view v-if="order.timeline.length" class="od-page__card">
|
||||
<view class="od-page__timeline-section">
|
||||
<text class="od-page__section-title">📋 订单进度</text>
|
||||
<view class="od-page__timeline">
|
||||
<view
|
||||
v-for="(node, index) in order.timeline"
|
||||
:key="index"
|
||||
class="od-page__tl-node"
|
||||
:class="timelineNodeClass(index)"
|
||||
>
|
||||
<view class="od-page__tl-dot">
|
||||
<text v-if="index < currentTimelineIndex" class="od-page__tl-check">✓</text>
|
||||
<text v-else-if="index === currentTimelineIndex" class="od-page__tl-pulse">●</text>
|
||||
</view>
|
||||
<view class="od-page__tl-content">
|
||||
<text class="od-page__tl-title">{{ node.statusText }}</text>
|
||||
<text class="od-page__tl-time">{{ node.occurredAt }}</text>
|
||||
<text v-if="node.notes" class="od-page__tl-sub">{{ node.notes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Products + Fees -->
|
||||
<view class="od-page__card">
|
||||
<view class="od-page__goods-section">
|
||||
<text class="od-page__section-title">🛍 商品明细</text>
|
||||
<view class="od-page__goods-list">
|
||||
<view v-for="item in order.items" :key="item.id" class="od-page__good">
|
||||
<view class="od-page__good-img-placeholder" />
|
||||
<view class="od-page__good-info">
|
||||
<text class="od-page__good-name">{{ item.productName }}</text>
|
||||
<text v-if="item.skuName" class="od-page__good-spec">{{ item.skuName }}</text>
|
||||
</view>
|
||||
<view class="od-page__good-right">
|
||||
<text class="od-page__good-price"><text class="od-page__good-unit">¥</text>{{ item.subTotalText }}</text>
|
||||
<text class="od-page__good-qty">×{{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="od-page__divider" />
|
||||
|
||||
<view class="od-page__fees">
|
||||
<view class="od-page__fee-row">
|
||||
<text class="od-page__fee-label">商品小计</text>
|
||||
<text class="od-page__fee-value">¥{{ formatPrice(order.itemsAmount) }}</text>
|
||||
</view>
|
||||
<view class="od-page__fee-row">
|
||||
<text class="od-page__fee-label">打包费</text>
|
||||
<text class="od-page__fee-value">¥{{ formatPrice(order.packagingFee) }}</text>
|
||||
</view>
|
||||
<view v-if="order.deliveryFee > 0" class="od-page__fee-row">
|
||||
<text class="od-page__fee-label">配送费</text>
|
||||
<text class="od-page__fee-value">¥{{ formatPrice(order.deliveryFee) }}</text>
|
||||
</view>
|
||||
<view v-if="order.discountAmount > 0" class="od-page__fee-row">
|
||||
<text class="od-page__fee-label">优惠抵扣</text>
|
||||
<text class="od-page__fee-value od-page__fee-value--green">-¥{{ formatPrice(order.discountAmount) }}</text>
|
||||
</view>
|
||||
<view class="od-page__fee-row od-page__fee-row--total">
|
||||
<text class="od-page__fee-label">实付金额</text>
|
||||
<text class="od-page__fee-value od-page__fee-value--total">
|
||||
<text class="od-page__fee-unit">¥</text>{{ formatPrice(order.paidAmount || order.payableAmount) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Order Info -->
|
||||
<view class="od-page__card">
|
||||
<view class="od-page__info-section">
|
||||
<text class="od-page__section-title">📄 订单信息</text>
|
||||
<view class="od-page__info-rows">
|
||||
<view class="od-page__info-row">
|
||||
<text class="od-page__info-label">订单编号</text>
|
||||
<text class="od-page__info-value">{{ order.orderNo }}</text>
|
||||
</view>
|
||||
<view class="od-page__info-row">
|
||||
<text class="od-page__info-label">下单时间</text>
|
||||
<text class="od-page__info-value">{{ order.createdAt }}</text>
|
||||
</view>
|
||||
<view v-if="order.paidAt" class="od-page__info-row">
|
||||
<text class="od-page__info-label">支付时间</text>
|
||||
<text class="od-page__info-value">{{ order.paidAt }}</text>
|
||||
</view>
|
||||
<view class="od-page__info-row">
|
||||
<text class="od-page__info-label">支付状态</text>
|
||||
<text class="od-page__info-value">{{ order.paymentStatusText }}</text>
|
||||
</view>
|
||||
<view v-if="order.remark" class="od-page__info-row">
|
||||
<text class="od-page__info-label">订单备注</text>
|
||||
<view class="od-page__info-remark">
|
||||
<text>{{ order.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Bottom Bar -->
|
||||
<view class="od-page__bottom-bar">
|
||||
<view class="od-page__btn-outline" @click="handleContact">
|
||||
<text>📞 联系门店</text>
|
||||
</view>
|
||||
<view class="od-page__btn-primary" @click="handlePrimaryAction">
|
||||
<text>{{ order.actionText || '再来一单' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- Not found -->
|
||||
<view v-else class="od-page__empty">
|
||||
<text class="od-page__empty-title">未找到对应订单</text>
|
||||
<view class="od-page__empty-btn" @click="goOrders">
|
||||
<text>返回订单列表</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useOrderDetailPage } from './composables/useOrderDetailPage'
|
||||
|
||||
const {
|
||||
fulfillmentHint,
|
||||
formatPrice,
|
||||
goOrders,
|
||||
handleContact,
|
||||
handlePrimaryAction,
|
||||
loading,
|
||||
order,
|
||||
orderSubtitle,
|
||||
sceneLabel,
|
||||
statusDescription,
|
||||
storeAddress,
|
||||
timelineNodeClass
|
||||
} = useOrderDetailPage()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './styles/index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user