scancode-miro/pages/hexiao/jxs/order_detail.vue

<template>
  <view class="page-container">
    <view class="info-card">
      <view class="card-header">
        <view class="card-title">基本信息</view>
      </view>
      <view class="card-body">
        <view class="detail-row">
          <text class="label">订单编号</text>
          <text class="value">{{ orderDetails.orderNo }}</text>
        </view>
        <view class="detail-row">
          <text class="label">订单状态</text>
          <text class="value status">{{ getStatusText(orderDetails.status) }}</text>
        </view>
        <view class="detail-row">
          <text class="label">商品种类</text>
          <text class="value">{{ orderDetails.items.length }}种</text>
        </view>
        <view class="detail-row">
          <text class="label">创建时间</text>
          <text class="value">{{ orderDetails.createTime }}</text>
        </view>
        <view class="detail-row no-border">
          <text class="label">订单备注</text>
          <text class="value">{{ orderDetails.remark || '无' }}</text>
        </view>
      </view>
    </view>

    <view class="info-card">
      <view class="card-header">
        <view class="card-title">收货信息</view>
      </view>
      <view class="card-body">
        <view class="address-info">
          <view class="address-text">{{ orderDetails.delivery.address }}</view>
          <view class="user-info">
            <text>{{ orderDetails.delivery.receiverName }}</text>
            <text>{{ orderDetails.delivery.receiverPhone }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="info-card" v-if="orderDetails.status ===2 || orderDetails.status === 3">
      <view class="card-header">
        <view class="card-title">发货信息</view>
      </view>
      <view class="card-body">
        <view class="address-info">
          <view class="address-text">{{ orderDetails.delivery.logisticsCompany }}</view>
          <view class="user-info">
            <text>{{ orderDetails.delivery.logisticsNo}}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="info-card">
      <view class="card-header">
        <view class="card-title">商品信息</view>
      </view>
      <view class="card-body product-list">
        <view class="product-item" v-for="(item, index) in orderDetails.items" :key="item.id">
          <view class="product-name">
            <text class="product-index">{{ index + 1 }}.</text>
            <text>{{ item.productName }}</text>
          </view>
          <view class="product-quantity">
            订货数量：{{ item.quantity }}
          </view>
        </view>
      </view>
    </view>

    <view class="footer-action" v-if="orderDetails.status == 0 || orderDetails.status == 4">
      <button class="action-btn" @click="modifyOrder">修改订单</button>
    </view>

    <view class="footer-action" v-if="orderDetails.status == 2">
      <button class="action-btn" @click="confirmOrder">确认收货</button>
    </view>
  </view>
</template>

<script>
import {getOrderDetail,confirmDealerOrder } from "@/api/hexiao";

export default {
  data() {
    return {
      // 订单详情数据，通常从API获取
      orderDetails: {
        orderId: '',
        status: 'rejected',
        statusText: '已驳回',
        productTypes: 0,
        creationTime: '',
        remarks: '',
        shippingInfo: {
          address: '',
          name: '',
          phone: ''
        },
        items: [],
        id: '',
      }
    };
  },
  onLoad(options) {
    // 页面加载时，会传入一个订单ID
    console.log('加载的订单ID:', options.id);
    this.id = options.id;
    // 根据ID从服务器获取订单详情
    this.fetchOrderDetails();
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        0: '待审核',
        1: '待审核',
        2: '已发货',
        3: '已完成',
        4: '已驳回'
      };
      return statusMap[status] || '未知';
    },
    // 模拟从API获取数据
    fetchOrderDetails() {
      let orderId = this.id;
      uni.showLoading({ title: '加载中...' });
      // 模拟网络请求
      getOrderDetail(orderId).then(res=>{
        this.orderDetails = res.data;
        uni.hideLoading();
      })
    },

    // 点击订单状态
    viewStatusReason() {
      if (this.orderDetails.status === 'rejected') {
        uni.showModal({
          title: '驳回原因',
          content: '库存不足，请修改订单后重新提交。',
          showCancel: false
        });
      }
    },

    // 修改订单
    modifyOrder() {
      // 跳转到下单页面，并带上订单ID，以便复用数据
      uni.navigateTo({ url: `/pages/hexiao/jxs/add_order?id=`+ this.id});
    },
    confirmOrder(){
      confirmDealerOrder(this.id).then(res=>{
        this.fetchOrderDetails();
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #e4efff, #f5f6fa 60%);
  padding: 30rpx;
  box-sizing: border-box;
  padding-bottom: 180rpx; // 为底部按钮留出空间
}

.info-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 35rpx;
    width: 8rpx;
    height: 30rpx;
    background-color: #3c82f8;
    border-radius: 0 4rpx 4rpx 0;
  }
}

.card-header {
  padding-bottom: 20rpx;
  .card-title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.card-body {
  padding-top: 20rpx;
  border-top: 1rpx solid #f5f5f5;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  font-size: 28rpx;
  border-bottom: 1rpx solid #f9f9f9;

  .label { color: #666; }
  .value { color: #333; }

  .status {
    color: #3c82f8;
    text-decoration: underline;
    cursor: pointer;
  }

  &.no-border {
    border-bottom: none;
  }
}

.address-info {
  .address-text {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
  }
  .user-info {
    margin-top: 15rpx;
    font-size: 28rpx;
    color: #666;
    text { margin-right: 20rpx; }
  }
}

.product-list {
  .product-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f9f9f9;
    &:last-child {
      border-bottom: none;
    }
    .product-name {
      font-size: 30rpx;
      font-weight: 500;
      display: flex;
      align-items: center;
      .product-index {
        color: #999;
        margin-right: 15rpx;
      }
    }
    .product-quantity {
      font-size: 26rpx;
      color: #666;
      margin-top: 10rpx;
      padding-left: 38rpx;
    }
  }
}

.footer-action {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: #f5f6fa;
  box-sizing: border-box;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  z-index: 100;
}

.action-btn {
  background-color: #3c82f8;
  color: #ffffff;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  &::after { border: none; }
}
</style>