video-maker/frontend/src/views/Orders.vue

<script setup lang="ts">
import { useMainStore } from "@/stores/main";
import { reactive } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const mainStore = useMainStore();
let orders: any[] = reactive([]);

mainStore
  .getYTViewsList()
  .then((result) => {
    console.log(result);
    if (result) {
      orders.push(result);
    }
  })
  .catch((error) => {
    console.error(error);
  });

console.log("orders", orders);

const headers = [
  {
    title: "付款狀態",
    sortable: true,
    key: "payment_state",
    align: "left",
  },
  {
    title: "ID",
    sortable: true,
    key: "id",
    align: "left",
  },
  {
    title: "商品金額",
    sortable: true,
    key: "amount",
    align: "left",
  },
  {
    title: "姓名",
    sortable: true,
    key: "name",
    align: "left",
  },
  {
    title: "手機號碼",
    sortable: true,
    key: "phone",
    align: "left",
  },
  {
    title: "電子郵件",
    sortable: true,
    key: "email",
    align: "left",
  },
  {
    title: "公司 / 所屬產業",
    sortable: true,
    key: "company",
    align: "left",
  },
  {
    title: "YouTube 影片網址",
    sortable: true,
    key: "url",
    align: "left",
  },
  {
    title: "影片放送地區",
    sortable: true,
    key: "area",
    align: "left",
  },
  {
    title: "受眾語言",
    sortable: true,
    key: "language",
    align: "left",
  },
  {
    title: "客層",
    sortable: true,
    key: "ages",
    align: "left",
  },
  {
    title: "目標對象區隔",
    sortable: true,
    key: "target",
    align: "left",
  },
  {
    title: "影片主題",
    sortable: true,
    key: "theme",
    align: "left",
  },
  {
    title: "統編號碼",
    sortable: true,
    key: "taxID",
    align: "left",
  },
];
</script>

<template>
  <div>
    <v-toolbar light>
      <v-toolbar-title>
        <h3>訂單明細</h3>
      </v-toolbar-title>
    </v-toolbar>
    <v-data-table
      :headers="headers"
      :items="orders[0]"
      :sort-by="[{ key: 'id', order: 'desc' }]"
    >
      <template v-slot:item.payment_state="{ item }">
        <span v-if="item.raw.payment_state === 'succeeded'">
          <v-icon icon="check_circle" color="success" />
          完成
        </span>
        <span v-else-if="item.raw.payment_state === 'waiting'">
          <v-icon icon="pending" color="warning" />
          處理中
        </span>
        <span v-else>
          <v-icon icon="warning" color="error" />
          失敗
        </span>
      </template>
    </v-data-table>
  </div>
</template>

<style lang="scss">
.v-data-table-footer {
  margin-top: 10px;
}
.v-table {
  td,
  th {
    white-space: nowrap;
  }
}
</style>