|
|
@@ -0,0 +1,127 @@
|
|
|
+<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="h-full bg-gray-50">
|
|
|
+ <div class="w-full mx-auto">
|
|
|
+ <div class="bg-white rounded-lg p-3">
|
|
|
+ <div class="flex items-center justify-between mb-3">
|
|
|
+ <h1 class="text-sm font-medium">Orders #45892</h1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-4 mb-6 overflow-auto h-[200px]">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in orderItems"
|
|
|
+ :key="index"
|
|
|
+ class="flex items-center justify-between p-4 bg-white border border-gray-100 rounded-lg"
|
|
|
+ >
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <div class="w-16 h-16 rounded-full overflow-hidden">
|
|
|
+ <img :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3 class="font-sm">{{ item.name }}</h3>
|
|
|
+ <p class="text-xxs text-gray-500">Size: Large, Middle, Small</p>
|
|
|
+ <p class="text-orange-500 font-medium mt-1">${{ item.price.toFixed(2) }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <button
|
|
|
+ class="w-4 h-4 flex items-center justify-center bg-orange-100 text-orange-500 rounded-lg !rounded-button whitespace-nowrap"
|
|
|
+ @click="decreaseQuantity(index)"
|
|
|
+ >
|
|
|
+ <img src="@/assets/img/menu/reduce.svg" alt="" />
|
|
|
+ </button>
|
|
|
+ <span class="w-4 text-center">{{ item.quantity }}</span>
|
|
|
+ <button
|
|
|
+ class="w-4 h-4 flex items-center justify-center bg-orange-500 text-white rounded-lg !rounded-button whitespace-nowrap"
|
|
|
+ @click="increaseQuantity(index)"
|
|
|
+ >
|
|
|
+ <img src="@/assets/img/menu/add.svg" alt="" />
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-red-500 !rounded-button whitespace-nowrap"
|
|
|
+ @click="removeItem(index)"
|
|
|
+ >
|
|
|
+ <img src="@/assets/img/menu/delete.svg" alt="" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="border-t border-gray-100 pt-4">
|
|
|
+ <div class="mb-4">
|
|
|
+ <h3 class="font-medium mb-2">Order Notes</h3>
|
|
|
+ <p class="text-gray-600 text-sm">No Chili, No Cilantro</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-center justify-between pt-4 border-t border-gray-100">
|
|
|
+ <span class="font-medium">Total</span>
|
|
|
+ <span class="text-sm font-medium">${{ total.toFixed(2) }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+
|
|
|
+interface OrderItem {
|
|
|
+ name: string
|
|
|
+ price: number
|
|
|
+ quantity: number
|
|
|
+ image: string
|
|
|
+}
|
|
|
+
|
|
|
+const orderItems = ref<OrderItem[]>([
|
|
|
+ {
|
|
|
+ name: 'Spicy Seasoned Seafood',
|
|
|
+ price: 4.85,
|
|
|
+ quantity: 2,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/1c3d3c5704265a819a659a8d3589bc21.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Premium Grade Mackerel (Cleaned)',
|
|
|
+ price: 4.65,
|
|
|
+ quantity: 2,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/6d4be10ce5e234dcec1509d199a41a99.jpg',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Grilled Sea Bass',
|
|
|
+ price: 4.85,
|
|
|
+ quantity: 2,
|
|
|
+ image: 'https://ai-public.mastergo.com/ai/img_res/a20aaccbc775fd5729c8b8c6dac46563.jpg',
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+const total = computed(() => {
|
|
|
+ return orderItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
|
|
|
+})
|
|
|
+
|
|
|
+const increaseQuantity = (index: number) => {
|
|
|
+ orderItems.value[index].quantity += 1
|
|
|
+}
|
|
|
+
|
|
|
+const decreaseQuantity = (index: number) => {
|
|
|
+ if (orderItems.value[index].quantity > 1) {
|
|
|
+ orderItems.value[index].quantity -= 1
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const removeItem = (index: number) => {
|
|
|
+ orderItems.value.splice(index, 1)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.order-item {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+input[type='number']::-webkit-inner-spin-button,
|
|
|
+input[type='number']::-webkit-outer-spin-button {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+</style>
|
