<template>
  <view class="order-detail-wrapper">
    <image class="icon-back" src="./images/back.png" />

    <OrderStatusInfo :orderData="orderData" />
    <OrderQrcode size="132" unit="px" :val="orderData.orderId" />
    <GoodsInfo :orderData="orderData" />
    <UserInfo :orderData="orderData" />
    <NoticeInfo :orderData="orderData" />
    <OrderInfo :orderData="orderData" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { userOrderDetail } from "@/request/api/OrderApi";
import OrderQrcode from "./components/OrderQrcode/index.vue";
import OrderStatusInfo from "./components/OrderStatusInfo/index.vue";
import GoodsInfo from "./components/GoodsInfo/index.vue";
import UserInfo from "./components/UserInfo/index.vue";
import NoticeInfo from "./components/NoticeInfo/index.vue";
import OrderInfo from "./components/OrderInfo/index.vue";

const orderData = ref({});
onLoad(async ({ orderId }) => {
  console.log("onShow", orderId);
  const res = await userOrderDetail({ orderId });

  orderData.value = res.data;
  console.log(res);
});
</script>

<style lang="scss" scoped>
@import "./styles/detail.scss";
</style>