Merge remote-tracking branch 'origin/lyz_dev'

src/views/menu/components/pay-drawer.vue

@@ -0,0 +1,112 @@
+<template>
+    <div>
+        <!-- 触发抽屉的按钮，这里简单示例 -->
+        <el-drawer v-model="show" :show-close="false" direction="rtl" size="60%">
+            <div class="grid grid-cols-2 h-screen">
+                <div class="border-r border-gray-100 mr-5 h-full flex flex-col">
+                    <h3 class="p-3 text-2xl ">Confirmation</h3>
+                    <order type="pay" class="h-[calc(100vh-60px)]" ></order>
+                </div>
+                <div class="bg-white rounded-lg pr-5 flex flex-col h-full">
+                    <div class="flex-1">
+                        <div class="mb-8">
+                            <h1 class="text-2xl font-semibold mb-1">A1-Payment</h1>
+                            <p class="text-gray-500 text-sm">3 Payment Methods Available</p>
+                        </div>
+
+                        <div class="space-y-4 mb-8">
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-600">Service Charge</span>
+                                <span class="font-medium">$ 12.00</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-600">Sub Total</span>
+                                <span class="font-medium">$ 100.00</span>
+                            </div>
+                        </div>
+
+                        <div class="mb-8">
+                            <p class="text-gray-600 mb-4">Payment Method</p>
+                            <div class="grid grid-cols-3 gap-4">
+                                <button v-for="method in paymentMethods" :key="method.id"
+                                    @click="selectPaymentMethod(method.id)" :class="[
+                                        'flex flex-col items-center justify-center p-4 rounded-lg border transition-all duration-200 !rounded-button whitespace-nowrap',
+                                        selectedMethod === method.id ? 'border-orange-500 bg-orange-50' : 'border-gray-200 hover:border-orange-300'
+                                    ]">
+                                    <i
+                                        :class="['text-xl mb-2', method.icon, selectedMethod === method.id ? 'text-orange-500' : 'text-gray-400']"></i>
+                                    <span
+                                        :class="['text-sm', selectedMethod === method.id ? 'text-orange-500' : 'text-gray-600']">{{
+                                            method.name }}</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="mb-12">
+                            <p class="text-gray-600 mb-4">Tip</p>
+                            <div class="flex items-center relative">
+                                <span class="text-gray-400 mr-2 absolute top-1/2 right-0 -translate-y-1/2">$</span>
+                                <input type="text" v-model="tipAmount"
+                                    class="w-full p-3 rounded-lg border-gray-200 border focus:border-orange-500 focus:ring-0 text-gray-700"
+                                    placeholder="Enter tip amount">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-5 gap-3 mb-3 box-border ">
+                        <button
+                            class="col-span-2 px-6 py-3 border border-orange-500 text-orange-500 rounded-lg hover:bg-orange-50 transition-colors !rounded-button whitespace-nowrap">
+                            Registration
+                        </button>
+                        <button
+                            class="col-span-3 px-6 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors !rounded-button whitespace-nowrap">
+                            Confirm Payment
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+        </el-drawer>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElDrawer } from 'element-plus';
+import order from './rightOrder/components/order.vue'
+
+const show = defineModel("show")
+const paymentMethods = [
+    { id: 1, name: 'Credit Card', icon: 'fas fa-credit-card' },
+    { id: 2, name: 'PayPal', icon: 'fab fa-paypal' },
+    { id: 3, name: 'Cash', icon: 'fas fa-money-bill' }
+];
+
+const selectedMethod = ref(1);
+const tipAmount = ref('');
+
+const selectPaymentMethod = (id) => {
+    selectedMethod.value = id;
+};
+</script>
+
+<style scoped>
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+:deep(.el-drawer__header) {
+    margin: 0;
+    padding: 0;
+}
+
+:deep(.el-drawer__body) {
+    margin: 0;
+    padding: 0;
+}
+</style>

src/views/menu/components/rightOrder/components/order.vue

@@ -48,13 +48,13 @@
           </div>
         </div>
 
-        <div class="border-t border-gray-100 pt-4">
-          <div class="mb-4">
+        <div class="border-t border-gray-100 pt-4" >
+          <div class="mb-4" v-show="type!='pay'">
             <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">
+          <div class="flex items-center justify-between pt-4  border-gray-100">
             <span class="font-medium">Total</span>
             <span class="text-sm font-medium">${{ total.toFixed(2) }}</span>
           </div>
@@ -75,7 +75,11 @@ interface OrderItem {
   quantity: number
   image: string
 }
-
+const props = defineProps({
+  type:{
+    default:'detail'
+  }
+})
 const orderItems = ref<OrderItem[]>([
   {
     name: 'Spicy Seasoned Seafood',

src/views/menu/components/rightOrder/rightOrder.vue

@@ -16,6 +16,7 @@
           Registration
         </button>
         <button
+          @click="emits('showPayDrawer')"
           class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors"
         >
           Kitchen Receipt
@@ -34,8 +35,7 @@
 <script lang="ts" setup>
 import noProduct from '@/components/noProduct.vue'
 import order from './components/order.vue'
-import { emit } from '@tauri-apps/api/event';
-const emits= defineEmits(['showDeskDrawer'])
+const emits= defineEmits(['showDeskDrawer','showPayDrawer'])
 
 </script>
 

src/views/menu/index.vue

@@ -47,10 +47,11 @@
       </div>
     </div>
     <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
-      <rightOrder @showDeskDrawer="catgroyClick"></rightOrder>
+      <rightOrder @showDeskDrawer="catgroyClick" @showPayDrawer="onPay"></rightOrder>
     </div>
     <OrderDrawer v-model:show="show" />
     <deskDrawer v-model:show="deskShow" />
+    <payDrawer v-model:show="payShow" />
 
   </div>
 </template>
@@ -61,6 +62,7 @@ import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
 import rightOrder from './components/rightOrder/rightOrder.vue'
 import OrderDrawer from './components/order-drawer.vue'
 import deskDrawer from './components/desk-drawer.vue'
+import payDrawer from './components/pay-drawer.vue'
 const { t } = useI18n()
 
 const show = ref(false)
@@ -176,6 +178,12 @@ const selectMenu = (index) => {
   currentIndex.value = index;
   scrollToIndex(index);
 };
+
+//pay
+const payShow = ref(false)
+const onPay = ()=>{
+  payShow.value = true
+}
 </script>
 <style scoped>
 .active {