consumer-front/src/pages/door/complete.vue

<template>
  <view class="door-page">
    <!-- 顶部状态区域 -->
    <view class="status-section">
      <view class="status-icon success">
        <view class="icon-check"></view>
      </view>
      <text class="status-title">订单已完成</text>
      <text class="status-desc">感谢您的购买</text>
    </view>

    <!-- 订单信息 -->
    <view class="order-card">
      <view class="card-title">订单信息</view>
      <view v-if="orderLoading" class="loading-tip">
        <text>加载中...</text>
      </view>
      <view v-else-if="orderInfo">
        <view class="info-row">
          <text class="info-label">订单编号</text>
          <text class="info-value">{{ orderInfo.order_no }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">下单时间</text>
          <text class="info-value">{{ orderInfo.created_at }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">商品数量</text>
          <text class="info-value">{{ orderInfo.product_count || '-' }} 件</text>
        </view>
        <view class="info-row total">
          <text class="info-label">订单金额</text>
          <text class="info-value price">¥{{ orderInfo.total_amount || '0.00' }}</text>
        </view>
      </view>
      <view v-else class="empty-tip">
        <text>暂无订单信息</text>
      </view>
    </view>

    <!-- 商品明细 -->
    <view v-if="orderInfo && orderInfo.items && orderInfo.items.length" class="products-card">
      <view class="card-title">商品明细</view>
      <view class="product-item" v-for="(item, idx) in orderInfo.items" :key="idx">
        <view class="product-info">
          <text class="product-name">{{ item.name }}</text>
          <text class="product-spec">{{ item.spec || '' }}</text>
        </view>
        <view class="product-right">
          <text class="product-price">¥{{ item.price }}</text>
          <text class="product-qty">x{{ item.quantity }}</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <view class="btn-outline" @click="handleViewOrder">查看全部订单</view>
      <view class="btn-primary" @click="handleBack">返回首页</view>
    </view>
  </view>
</template>

<script>
import { get } from '@/utils/request.js';

export default {
  data() {
    return {
      deviceId: '',
      flowId: '',
      orderInfo: null,
      orderLoading: false
    };
  },
  onLoad(options) {
    this.deviceId = options.device_id || '';
    this.flowId = options.flow_id || '';
    this.fetchOrderInfo();
  },
  methods: {
    async fetchOrderInfo() {
      if (!this.flowId) return;

      this.orderLoading = true;
      try {
        // 通过 flow_id 查询订单信息
        const res = await get('/order/getByFlowId', {
          flow_id: this.flowId
        });

        const ret = res.data || {};
        if (ret.code === 0 && ret.data) {
          this.orderInfo = ret.data;
        } else {
          console.warn('[complete] 获取订单信息失败:', ret.message);
        }
      } catch (e) {
        console.error('[complete] 获取订单信息异常:', e);
      } finally {
        this.orderLoading = false;
      }
    },
    handleViewOrder() {
      uni.navigateTo({ url: '/pages/order/order' });
    },
    handleBack() {
      uni.navigateBack({ delta: 10 });
    }
  }
};
</script>

<style scoped>
page {
  height: 100%;
  background-color: #f5f5f5;
}

.door-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 状态区域 */
.status-section {
  background: linear-gradient(135deg, #52c41a, #389e0d);
  padding: 80rpx 40rpx 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-icon {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}

.status-icon.success .icon-check {
  width: 50rpx;
  height: 28rpx;
  border-left: 6rpx solid #fff;
  border-bottom: 6rpx solid #fff;
  transform: rotate(-45deg);
  margin-top: -10rpx;
}

.status-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 16rpx;
}

.status-desc {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.85);
}

/* 通用卡片 */
.order-card,
.products-card {
  background: #fff;
  margin: 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

/* 订单信息行 */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.info-row.total {
  padding-top: 24rpx;
  margin-top: 12rpx;
  border-top: 1rpx solid #f0f0f0;
}

.info-label {
  font-size: 28rpx;
  color: #999;
}

.info-value {
  font-size: 28rpx;
  color: #333;
}

.info-value.price {
  font-size: 36rpx;
  font-weight: bold;
  color: #e4393c;
}

/* 商品明细 */
.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.product-item:last-child {
  border-bottom: none;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
}

.product-spec {
  font-size: 24rpx;
  color: #999;
}

.product-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rpx;
}

.product-price {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.product-qty {
  font-size: 24rpx;
  color: #999;
}

/* 加载/空状态 */
.loading-tip,
.empty-tip {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 28rpx;
}

/* 底部按钮 */
.bottom-actions {
  margin-top: auto;
  padding: 30rpx;
  display: flex;
  gap: 20rpx;
}

.btn-outline {
  flex: 1;
  background: #fff;
  color: #2979ff;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  padding: 28rpx;
  border-radius: 48rpx;
  border: 2rpx solid #2979ff;
}

.btn-primary {
  flex: 1;
  background: linear-gradient(135deg, #2979ff, #1e60e0);
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  padding: 28rpx;
  border-radius: 48rpx;
}
</style>