ece.suwa3d.com/src/views/badge/orderDetail.vue

<template>
  <div class="my-order">
    <div class="header" @click="goBack">
      <span class="back-icon"><van-icon name="arrow-left" size="16px" /> 返回</span>
    </div>
    <div class="order-status">
      <div class="avatar-wrapper">
        <img class="avatar-img" src="@/assets/badge/suiji.png" alt="生产中" />
      </div>
    </div>
    <div class="status-info">
      <div class="status-title">生产中</div>
      <div class="status-desc">
        下单后预计需要7天完成生产发货。如对产品有疑问，可以联系客服咨询。
      </div>
    </div>
    <div style="padding: 0 16px;">
      <van-divider />
    </div>
    <div class="product-info">
      <div class="product-title">产品信息</div>
      <div class="product-details">
        <div class="product-row">
      <span class="product-label">产品名称</span>
      <span class="product-value">立体徽章</span>
        </div>
        <div class="product-row">
      <span class="product-label">尺寸</span>
      <span class="product-value">5cm</span>
        </div>
        <div class="product-row">
      <span class="product-label">购买数量</span>
      <span class="product-value">1</span>
        </div>
      </div>
    </div>
    <div style="padding: 0 16px;">
      <van-divider />
    </div>
    <div class="address-info" style="padding: 0 16px;">
      <div class="address-title">收货信息</div>
      <div class="address-row">
        <img class="address-img" src="@/assets/badge/location.png" alt="" >
        <span class="address-name">张先生</span>
        <span class="address-phone">136****0731</span>
      </div>
      <div class="address-detail">
        详细地址详细地址详细地址详细地址详细地址详细地址
      </div>
    </div>
    <div style="padding: 0 16px;">
      <van-divider />
    </div>
    <div class="product-info">
      <div class="product-title">订单信息</div>
      <div class="product-details">
        <div class="product-row">
          <span class="product-label">购买订单id</span>
          <span class="product-value">O98462</span>
        </div>
        <div class="product-row">
          <span class="product-label">购买时间</span>
          <span class="product-value">2025-03-24 16:12:46</span>
        </div>
      </div>
    </div>
    <div style="height: 30px;"></div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
function goBack() {
  router.push('/badge/myOrder');
}
</script>
<style scoped>
  .header {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 14px;
    color: #999;
    padding: 16px 16px 0 16px;
  }
  .back-icon {
    margin-right: 8px;
    color: #222;
    font-size: 16px;
    cursor: pointer;
  }
  .order-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
  }
  .avatar-wrapper {
    width: 85vw;
    height: 85vw;
    border-radius: 50%;
    box-shadow: 2px 2px 4px  #00000042,inset -2px -2px 4px  #00000048,inset 2px 2px 4px  #ffffffb4;
    margin-bottom: 24px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .status-info {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
  }
  .status-title {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    margin-bottom: 8px;
  }
  .status-desc {
    font-size: 10px;
    color: #888;
  }
  .product-info {
    width: 100%;
    padding: 0 16px;
  }

  .product-title {
    font-size: 15px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
  }

  .product-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

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

  .product-label {
    color: #bdbdbd;
    font-size: 14px;
  }

  .product-value {
    color: #222;
    font-size: 14px;
  }
  
  .address-info {
    margin-top: 16px;
  }
  .address-title {
    font-size: 15px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
  }
  .address-row {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #222;
    margin-bottom: 4px;
  }
  .address-img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
  .address-name {
    margin-right: 12px;
    font-weight: bold;
  }
  .address-phone {
    color: #888;
    font-size: 13px;
    margin-left: 4px;
  }
  .address-detail {
    font-size: 12px;
    color: #bdbdbd;
    margin-left: 24px;
  }
</style>