VAVABUY/pages/store/detail.vue

<template>
  <Theme>
    <view class="wrap">
      <!-- 导航栏 -->
      <Navbar fixed leftIconColor="var(--black)" title="店铺订单详情"> </Navbar>

      <!-- 订单状态 -->
      <view class="status-section">
        <view class="status-icon">
          <i class="icon-font" :class="getStatusIcon(orderDetail.status)"></i>
        </view>
        <view class="status-info">
          <view class="status-text">{{
            getStatusText(orderDetail.status)
          }}</view>
          <view class="status-desc">{{
            getStatusDesc(orderDetail.status)
          }}</view>
        </view>
      </view>

      <!-- 收货信息 -->
      <view class="address-section" v-if="orderDetail.address">
        <view class="section-header">
          <i class="icon-font icon-location"></i>
          <text>收货信息</text>
        </view>
        <view class="address-info">
          <view class="receiver">
            <text class="name">{{ orderDetail.address.name }}</text>
            <text class="phone">{{ orderDetail.address.phone }}</text>
          </view>
          <view class="address">{{ orderDetail.address.address }}</view>
        </view>
      </view>

      <!-- Tab导航 -->
      <view class="tab-section">
        <Tab :active="activeTab" :tabList="tabList" @confirm="onTabChange" />
      </view>

      <!-- 商品信息 -->
      <view class="products-section" v-if="activeTab === 0">
        <view class="section-header">
          <i class="icon-font icon-goods"></i>
          <text>商品信息</text>
        </view>
        <view class="product-list">
          <view
            v-for="(product, index) in orderDetail.goods"
            :key="index"
            class="product-item"
          >
            <view class="product-image">
              <image :src="product.image" mode="aspectFill" />
            </view>
            <view class="product-info">
              <view class="product-name">{{ product.name }}</view>
              <view class="product-spec" v-if="product.spec">{{
                product.spec
              }}</view>
              <view class="product-price">
                <text class="price">{{ formatCurrency(product.price) }}</text>
                <text class="quantity">x{{ product.quantity }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info-section">
        <view class="section-header">
          <i class="icon-font icon-order"></i>
          <text>订单信息</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <text class="label">订单号</text>
            <text class="value">{{ orderDetail.orderNo }}</text>
          </view>
          <view class="info-item">
            <text class="label">下单时间</text>
            <text class="value">{{ formatTime(orderDetail.createTime) }}</text>
          </view>
          <view class="info-item" v-if="orderDetail.payTime">
            <text class="label">支付时间</text>
            <text class="value">{{ formatTime(orderDetail.payTime) }}</text>
          </view>
          <view class="info-item" v-if="orderDetail.shipTime">
            <text class="label">发货时间</text>
            <text class="value">{{ formatTime(orderDetail.shipTime) }}</text>
          </view>
          <view class="info-item" v-if="orderDetail.completeTime">
            <text class="label">完成时间</text>
            <text class="value">{{
              formatTime(orderDetail.completeTime)
            }}</text>
          </view>
          <view class="info-item" v-if="orderDetail.remark">
            <text class="label">备注</text>
            <text class="value">{{ orderDetail.remark }}</text>
          </view>
        </view>
      </view>

      <!-- 金额明细 -->
      <view class="amount-section">
        <view class="section-header">
          <i class="icon-font icon-money"></i>
          <text>金额明细</text>
        </view>
        <view class="amount-list">
          <view class="amount-item">
            <text class="label">商品金额</text>
            <text class="value">{{ formatCurrency(orderDetail.goodsAmount) }}</text>
          </view>
          <view class="amount-item" v-if="orderDetail.shippingFee > 0">
            <text class="label">运费</text>
            <text class="value">{{ formatCurrency(orderDetail.shippingFee) }}</text>
          </view>
          <view class="amount-item" v-if="orderDetail.discountAmount > 0">
            <text class="label">优惠金额</text>
            <text class="value discount"
              >-{{ formatCurrency(orderDetail.discountAmount) }}</text
            >
          </view>
          <view class="amount-item total">
            <text class="label">实付金额</text>
            <text class="value">{{ formatCurrency(orderDetail.totalAmount) }}</text>
          </view>
        </view>
      </view>

      <!-- 物流信息 -->
      <view class="logistics-section" v-if="orderDetail.logistics">
        <view class="section-header">
          <i class="icon-font icon-truck"></i>
          <text>物流信息</text>
        </view>
        <view class="logistics-info">
          <view class="logistics-item">
            <text class="label">快递公司</text>
            <text class="value">{{ orderDetail.logistics.company }}</text>
          </view>
          <view class="logistics-item">
            <text class="label">快递单号</text>
            <text class="value">{{
              orderDetail.logistics.trackingNumber
            }}</text>
          </view>
          <view class="logistics-item" v-if="orderDetail.logistics.status">
            <text class="label">物流状态</text>
            <text class="value">{{ orderDetail.logistics.status }}</text>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <!-- <view class="action-section" v-if="getActionButtons(orderDetail.status).length > 0">
        <view 
          v-for="action in getActionButtons(orderDetail.status)"
          :key="action.type"
          class="action-btn"
          :class="action.class"
          @click="handleAction(action.type)"
        >
          {{ action.text }}
        </view>
      </view> -->
    </view>
  </Theme>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Navbar from "@/components/navbar";
import Tab from "@/components/tabs";
import { t } from "@/locale";
import { onLoad } from "@dcloudio/uni-app";
import { Toast, formatCurrency } from "@/utils";
import { SELLER_SELLER_DETAIL } from "@/api";

// 订单详情数据
const orderDetail = ref({});

// Tab相关
const tabList = ref(["商品信息", "订单详情"]);
const activeTab = ref(0);

// Tab切换
const onTabChange = (index) => {
  activeTab.value = index;
};

// 获取订单详情
const getOrderDetail = async (orderId) => {
  try {
    const res = await SELLER_SELLER_DETAIL(orderId);
    orderDetail.value = res.data;
  } catch (error) {
    Toast(error.msg);
  }
};

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return "";
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: "待付款",
    100: "待发货",
    200: "已发货",
    300: "待发货",
    400: "已完成",
    500: "已取消",
    600: "已退款",
  };
  return statusMap[status] || "未知状态";
};

// 获取状态描述
const getStatusDesc = (status) => {
  const descMap = {
    0: "等待买家付款",
    100: "等待您发货",
    200: "商品已发出",
    300: "等待您发货",
    400: "订单已完成",
    500: "订单已取消",
    600: "订单已退款",
  };
  return descMap[status] || "";
};

// 获取状态图标
const getStatusIcon = (status) => {
  const iconMap = {
    0: "icon-time",
    100: "icon-package",
    200: "icon-truck",
    300: "icon-package",
    400: "icon-check",
    500: "icon-close",
    600: "icon-refund",
  };
  return iconMap[status] || "icon-order";
};

// 获取操作按钮
const getActionButtons = (status) => {
  const buttonMap = {
    0: [], // 待付款 - 买家操作
    100: [{ type: "ship", text: "发货", class: "btn-primary" }],
    200: [], // 已发货 - 买家操作
    300: [{ type: "ship", text: "发货", class: "btn-primary" }],
    400: [], // 已完成
    500: [], // 已取消
    600: [], // 已退款
  };
  return buttonMap[status] || [];
};

// 处理操作
const handleAction = (actionType) => {
  switch (actionType) {
    case "ship":
      // 发货
      Toast("发货功能待实现");
      break;
    case "cancel":
      // 取消订单
      Toast("取消订单功能待实现");
      break;
    case "refund":
      // 退款
      Toast("退款功能待实现");
      break;
    default:
      break;
  }
};

onLoad((options) => {
  if (options.id) {
    getOrderDetail(options.id);
  }
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: 40rpx;

  .nav_title {
    color: var(--black);
    font-size: 36rpx;
    font-weight: bold;
  }

  .status-section {
    background: var(--light);
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    gap: 30rpx;

    .status-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;

      .icon-font {
        font-size: 48rpx;
        color: var(--light);
      }
    }

    .status-info {
      flex: 1;

      .status-text {
        font-size: 32rpx;
        font-weight: bold;
        color: var(--black);
        margin-bottom: 8rpx;
      }

      .status-desc {
        font-size: 24rpx;
        color: var(--text-01);
      }
    }
  }

  .tab-section {
    background: var(--light);
    margin-bottom: 20rpx;
    padding: 0 30rpx;
  }

  .address-section,
  .products-section,
  .order-info-section,
  .amount-section,
  .logistics-section {
    background: var(--light);
    margin-bottom: 20rpx;
    padding: 30rpx;

    .section-header {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 24rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: var(--black);

      .icon-font {
        font-size: 32rpx;
        color: var(--primary);
      }
    }
  }

  .address-info {
    .receiver {
      display: flex;
      align-items: center;
      gap: 20rpx;
      margin-bottom: 12rpx;

      .name {
        font-size: 28rpx;
        font-weight: bold;
        color: var(--black);
      }

      .phone {
        font-size: 24rpx;
        color: var(--text-01);
      }
    }

    .address {
      font-size: 26rpx;
      color: var(--text);
      line-height: 1.5;
    }
  }

  .product-list {
    .product-item {
      display: flex;
      gap: 20rpx;
      padding: 20rpx 0;
      border-bottom: 1rpx solid var(--border);

      &:last-child {
        border-bottom: none;
      }

      .product-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        overflow: hidden;
        background: var(--bg);

        image {
          width: 100%;
          height: 100%;
        }
      }

      .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .product-name {
          font-size: 28rpx;
          color: var(--black);
          line-height: 1.4;
          margin-bottom: 8rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .product-spec {
          font-size: 24rpx;
          color: var(--text-01);
          margin-bottom: 8rpx;
        }

        .product-price {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .price {
            font-size: 28rpx;
            font-weight: bold;
            color: var(--primary);
          }

          .quantity {
            font-size: 24rpx;
            color: var(--text-01);
          }
        }
      }
    }
  }

  .info-list,
  .amount-list,
  .logistics-info {
    .info-item,
    .amount-item,
    .logistics-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0;
      border-bottom: 1rpx solid var(--border);

      &:last-child {
        border-bottom: none;
      }

      .label {
        font-size: 26rpx;
        color: var(--text-01);
      }

      .value {
        font-size: 26rpx;
        color: var(--text);
        text-align: right;

        &.discount {
          color: var(--success);
        }
      }

      &.total {
        border-top: 2rpx solid var(--border);
        margin-top: 16rpx;
        padding-top: 20rpx;

        .label {
          font-size: 28rpx;
          font-weight: bold;
          color: var(--black);
        }

        .value {
          font-size: 32rpx;
          font-weight: bold;
          color: var(--primary);
        }
      }
    }
  }

  .action-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--light);
    padding: 20rpx 30rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    border-top: 1rpx solid var(--border);
    display: flex;
    gap: 20rpx;
    justify-content: flex-end;

    .action-btn {
      padding: 20rpx 40rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: bold;
      text-align: center;
      min-width: 120rpx;

      &.btn-primary {
        background: var(--primary);
        color: var(--light);
      }

      &.btn-secondary {
        background: var(--light);
        color: var(--black);
        border: 1rpx solid var(--border);
      }

      &.btn-danger {
        background: var(--danger);
        color: var(--light);
      }
    }
  }
}
</style>