|
|
@@ -0,0 +1,226 @@
|
|
|
+<template>
|
|
|
+ <div class="bg-white rounded-lg p-8">
|
|
|
+ <!-- Header -->
|
|
|
+ <div class="flex justify-between items-center mb-8">
|
|
|
+ <div>
|
|
|
+ <h1 class="text-2xl font-medium">Order Details</h1>
|
|
|
+ <p class="text-gray-500 mt-1">Order #{{ orderNumber }}</p>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ class="!rounded-button bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 flex items-center whitespace-nowrap"
|
|
|
+ @click="$router.push('/order/orderList')">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/order12.png" alt="">
|
|
|
+ Back Home
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
+ <!-- Order Information Grid -->
|
|
|
+ <div class="grid grid-cols-3 gap-8 mb-8 text-sm">
|
|
|
+ <div class="space-y-6">
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-48 text-gray-500 flex items-center">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/Order1.svg" alt="">Order Number
|
|
|
+ </div>
|
|
|
+ <div>{{ orderNumber }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-48 text-gray-500 flex items-center">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/order2.svg" alt="">Order Transaction Time
|
|
|
+ </div>
|
|
|
+ <div>{{ orderTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-48 text-gray-500 flex items-center">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/order3.svg" alt="">Trader's Name
|
|
|
+ </div>
|
|
|
+ <div>{{ traderName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-48 text-gray-500 flex items-center">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/order4.svg" alt="">Employee ID
|
|
|
+ </div>
|
|
|
+ <div>{{ employeeId }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-6">
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-48 text-gray-500 flex items-center">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/order5.png" alt="">Amount Receivable
|
|
|
+ </div>
|
|
|
+ <div>$ {{ amount }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-48 text-gray-500 flex items-center">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/order6.svg" alt="">Order Upload Time
|
|
|
+ </div>
|
|
|
+ <div>{{ uploadTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-48 text-gray-500 flex items-center">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/order7.svg" alt="">Order Status
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-sm">
|
|
|
+ {{ orderStatus }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-start">
|
|
|
+ <div class="w-48 text-gray-500 flex items-center">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/order8.png" alt="">Payment Method
|
|
|
+ </div>
|
|
|
+ <div>{{ paymentMethod }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <!-- Additional Information -->
|
|
|
+ <div class="mb-4">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div class="w-48 text-gray-500">
|
|
|
+ <img class="h-5 w-5 mr-2 inline" src="@/assets/img/desk/order11.png" alt="">Commodity Classification
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm">
|
|
|
+ {{ commodityType }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Action Buttons -->
|
|
|
+ <div class="flex flex-col space-y-2">
|
|
|
+ <button
|
|
|
+ class="!rounded-button flex-1 border border-orange-500 text-orange-500 hover:bg-orange-50 px-4 py-3 flex items-center justify-center whitespace-nowrap"
|
|
|
+ @click="handleRefund">
|
|
|
+ <img class="h-5 w-5 mr-2" src="@/assets/img/desk/order9.png" alt="">
|
|
|
+ Refund
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="!rounded-button flex-1 bg-orange-500 hover:bg-orange-600 text-white px-4 py-3 flex items-center justify-center whitespace-nowrap"
|
|
|
+ @click="handlePrint">
|
|
|
+ <img class="h-5 w-5 mr-2 bg-white rounded-full" src="@/assets/img/desk/order10.png" alt="">
|
|
|
+ Print
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bg-white p-6 pt-0 mb-10">
|
|
|
+ <!-- Transaction Details -->
|
|
|
+ <el-table :data="transactionDetails" class="mb-8">
|
|
|
+ <el-table-column prop="serialNumber" label="Transaction Serial Number" align="left" />
|
|
|
+ <el-table-column prop="balance" label="Balance" align="left" />
|
|
|
+ <el-table-column prop="wallet" label="Wallet" align="left" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- Order Details -->
|
|
|
+ <el-table :data="orderDetails">
|
|
|
+ <el-table-column prop="number" label="Number" align="left" />
|
|
|
+ <el-table-column prop="item" label="Item" align="left" />
|
|
|
+ <el-table-column prop="unit" label="Unit" align="left" />
|
|
|
+ <el-table-column prop="quantity" label="Quantity" align="left" />
|
|
|
+ <el-table-column prop="specifications" label="Specifications" align="left" />
|
|
|
+ <el-table-column prop="unitPrice" label="Unit Price" align="right" />
|
|
|
+ <el-table-column prop="transactionAmount" label="Transaction Amount" align="right" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <el-dialog class="top-1/4" v-model="showRefundDialog" :show-close="false" width="400">
|
|
|
+ <template #header="{ close, titleId, titleClass }">
|
|
|
+ <div class="my-header">
|
|
|
+ <h4 :id="titleId" :class="titleClass" class="text-center">Reason for refund</h4>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-input v-model="refundText" placeholder="Please enter the reason for refund"></el-input>
|
|
|
+ <el-button class="w-full mt-3" type="primary" @click="closeFundDialog">Confirm refund</el-button>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, computed } from 'vue';
|
|
|
+
|
|
|
+const orderNumber = ref('123456788987654');
|
|
|
+const orderTime = ref('2023-09-09 24:00:00');
|
|
|
+const traderName = ref('12357633');
|
|
|
+const employeeId = ref('4567645');
|
|
|
+const amount = ref('76.0');
|
|
|
+const uploadTime = ref('2024-2-7 15:09:00');
|
|
|
+const orderStatus = ref('Completed');
|
|
|
+const paymentMethod = ref('Offline payment');
|
|
|
+const commodityType = ref('Hot Dishes');
|
|
|
+const showRefundDialog = ref(false);
|
|
|
+const refundText = ref('');
|
|
|
+const closeFundDialog = ()=>{
|
|
|
+ console.log('Refund');
|
|
|
+ showRefundDialog.value = false;
|
|
|
+}
|
|
|
+const handleBackHome = () => {
|
|
|
+ console.log('Navigate back home');
|
|
|
+};
|
|
|
+
|
|
|
+const handleRefund = () => {
|
|
|
+ console.log('Process refund');
|
|
|
+ showRefundDialog.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handlePrint = () => {
|
|
|
+ console.log('Print order details');
|
|
|
+};
|
|
|
+
|
|
|
+const transactionDetails = ref([
|
|
|
+ {
|
|
|
+ serialNumber: '12345',
|
|
|
+ balance: 1000,
|
|
|
+ wallet: 'Wallet A'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ serialNumber: '67890',
|
|
|
+ balance: 2000,
|
|
|
+ wallet: 'Wallet B'
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+const orderDetails = ref([
|
|
|
+ {
|
|
|
+ number: '001',
|
|
|
+ item: 'Product A',
|
|
|
+ unit: 'Piece',
|
|
|
+ quantity: 5,
|
|
|
+ specifications: 'Standard',
|
|
|
+ unitPrice: 10.5,
|
|
|
+ transactionAmount: 52.5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ number: '002',
|
|
|
+ item: 'Product B',
|
|
|
+ unit: 'Box',
|
|
|
+ quantity: 3,
|
|
|
+ specifications: 'Large',
|
|
|
+ unitPrice: 20.0,
|
|
|
+ transactionAmount: 60.0
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+const totalAmount = ref(orderDetails.value.reduce((sum, order) => sum + order.transactionAmount, 0));
|
|
|
+
|
|
|
+const formatPrice = (row, column, cellValue) => {
|
|
|
+ return `$${cellValue.toFixed(2)}`;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.order-details {
|
|
|
+ font-family: 'Inter', sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table {
|
|
|
+ --el-table-header-bg-color: #f8f9fa;
|
|
|
+ --el-table-border-color: #e5e7eb;
|
|
|
+ --el-table-header-text-color: #4b5563;
|
|
|
+}
|
|
|
+</style>
|
