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" color="#333" /> 订单详情</span>
    </div>
    <div class="order-status">
      <div class="avatar-wrapper">
        <img class="avatar-img" :src="order.path" :alt="order.kind_name" />
      </div>
    </div>
    <div class="status-info">
      <div class="status-title">{{ getStatus(order.status) }}</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">{{order.model_size}}</span>
        </div>
        <div class="product-row">
      <span class="product-label">购买数量</span>
      <span class="product-value">{{order.count}}</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">{{order.sw_oid}}</span>
        </div>
        <div class="product-row">
          <span class="product-label">购买时间</span>
          <span class="product-value">{{order.pay_at}}</span>
        </div>
      </div>
    </div>
    <div style="height: 30px;"></div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import * as badgeApi from '@/api/badge';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const order = ref({})
const id = ref(0)
onMounted(() => {
  id.value = route.query.id
  getOrderDetail()
})
function getOrderDetail() {
  badgeApi.getOrderDetail({
    id: id.value,
  }).then(res => {
    order.value = res
  })
}
const router = useRouter();
function goBack() {
  router.back()
}
function getStatus(status: number) {
  if(status == 1) {
    return '待支付'
  } else if(status == 2) {
    return '已取消'
  } else if(status == 100) {
    return '生产中'
  } else if(status == 200) {
    return '待收货'
  } else if(status == 300) {
    return '已完成'
  }
}
</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>