src/components/titleFood.vue

@@ -1,25 +1,21 @@
 <!-- 标题 -->
 <template>
-    <div :style="{ fontSize: fontSize,}" class="title">
-      <slot></slot>
-    </div>
-  </template>
-  <script>
-  export default {
-    name: 'Title',
-    props: {
-      fontSize: {
-        type: String,
-        default: '24px',  // 默认字体大小
-      }
-    }
-  }
-  </script>
-  <style scoped>
- .title{
+  <div :style="{ fontSize: fontSize }" class="title">
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+  const props = defineProps({
+    fontSize: {
+      type: String,
+      default: '24px', // 默认字体大小
+    },
+  })
+</script>
+<style scoped>
+  .title {
     height: 50px;
     line-height: 50px;
     font-weight: 600;
- }
-  </style>
-  
+  }
+</style>

src/views/goods/components/BaseButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <button  :class="['btn', btnClass]" @click="handleClick">
+    {{ text }}
+  </button>
+</template>
+<script setup>
+  const props = defineProps({
+    btnClass: {
+      type: String,
+      required: true,
+    },
+    onClick: {
+      type: Function,
+      required: true,
+    },
+    text: {
+      type: String,
+      required: true,
+    },
+  })
+  const handleClick = () => {
+    props.onClick();
+  };
+</script>
+<style scoped lang="scss">
+  .btn {
+    padding: 10px 24px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    transition: background-color 0.2s;
+    white-space: nowrap;
+    cursor: pointer;
+    color: white;
+  }
+
+  .btn-orange {
+    background-color: #fb923c;
+  }
+
+  .btn-yellow {
+    background-color: #facc15;
+  }
+
+  .btn-orange:hover {
+    background-color: #f97316;
+  }
+
+  .btn-yellow:hover {
+    background-color: #fbbf24;
+  }
+</style>

src/views/goods/components/goods-drawer.vue

@@ -6,13 +6,7 @@
       </template>
 
       <template #default>
-        <el-form
-          :model="formData"
-          :rules="rules"
-          ref="formRef"
-          label-width="150px"
-          class="upload-wrapper"
-        >
+        <el-form  :model="formData" :rules="rules" ref="formRef" label-width="150px" class="upload-wrapper">
           <!-- 第一排 -->
           <div class="upload-section">
             <div class="upload_img">
@@ -45,7 +39,7 @@
               <el-form-item prop="productName">
                 <el-input
                   type="text"
-                  v-model="formData.productName"
+                  v-model="table.name"
                   autocomplete="off"
                   placeholder="Please enter the product name"
                 />
@@ -74,7 +68,7 @@
               <el-form-item prop="price">
                 <el-input
                   type="text"
-                  v-model="formData.price"
+                  v-model="table.price"
                   autocomplete="off"
                   placeholder="Please enter the commodity price"
                 />
@@ -85,7 +79,7 @@
               <el-form-item prop="keywords">
                 <el-input
                   type="text"
-                  v-model="formData.keywords"
+                  v-model="table.sales"
                   autocomplete="off"
                   placeholder="Please enter keywords"
                 />
@@ -118,17 +112,8 @@
 
       <template #footer>
         <div style="display: flex; justify-content: space-between">
-          <el-button style="width: 220px; height: 44px" type="primary" @click="cancelClick" plain>
-            Cancel
-          </el-button>
-          <el-button
-            style="width: 408px; height: 44px; background: #f67f20; color: #fff"
-            type="primary"
-            @click="handleSubmit"
-            plain
-          >
-            Save
-          </el-button>
+          <el-button style="width: 220px; height: 44px" type="primary" @click="cancelClick" plain> Cancel</el-button>
+          <el-button style="width: 408px; height: 44px; background: #f67f20; color: #fff" type="primary" @click="handleSubmit" plain >Save</el-button>
         </div>
       </template>
     </el-drawer>
@@ -139,11 +124,19 @@
 <script setup>
   import { ref,reactive } from 'vue'
   import showRadio from "./show-radio.vue"
+  const props =defineProps({
+    table:{
+      type:Object,
+      required:true
+    },
+    type:{
+      type:Boolean,
+      required:true
+    }
+  })
   const show = defineModel('show')
-  const isShow=ref(false)
-  const cancelClick = () => {
-    show.value = false
-  }
+  const isShow=ref(false) //复选框
+  
   const formData = ref({
     productName: '',
     category: '',
@@ -184,20 +177,15 @@
   const handleChange = (file, fileList) => {
     console.log('File changed:', file)
   }
-
+  // 关闭弹窗
+  const cancelClick = () => {
+    show.value = false
+  }
+  // 确定
   const handleSubmit = () => {
-    // const formRef = ref('')
-    // formRef.value.validate((valid) => {
-    //   if (valid) {
-    //     console.log('Form Submitted:', formData.value)
-    //   } else {
-    //     console.log('Form validation failed')
-    //   }
-    // })
     console.log('Form Submitted:', formData.value)
-
   }
-
+  //  单选框选择事件
   const radioShow=(end)=>{
     isShow.value=true
     if(end === '2'){
@@ -206,12 +194,16 @@
       isShow.value=false
     }
   }
+  console.log(props,'propsprops');
 </script>
 
 <style lang="scss" scoped>
   :deep(.el-drawer__header) {
     margin-bottom: 0px !important;
   }
+  :deep(.el-drawer__body::-webkit-scrollbar ){
+    display: none;
+  }
   .food_title {
     height: 56px;
     font-size: 24px;

src/views/goods/components/show-radio.vue

@@ -1,7 +1,223 @@
 <template>
-  <div>111111111111111111111</div>
+  <div class="multi-center">
+    <!-- 1 -->
+    <div class="container">
+      <Title fontSize="16px">Multi specification parameters</Title>
+      <el-divider />
+      <div class="button-container">
+        <BaseButton btnClass="btn-orange" :onClick="handleAddSpec" text="Add new specifications" />
+        <BaseButton btnClass="btn-yellow" :onClick="handleGenerate" text="Generate immediately" />
+      </div>
+      <el-form :model="formData" ref="formRef" class="spec-form">
+        <div v-for="(spec, index) in specifications" :key="index" class="specification-row">
+          <div class="specification-item">
+            <div class="specification-label">{{ `Specifications ${index + 1}` }}</div>
+            <el-form-item>
+              <el-input
+                v-model="spec.name"
+                placeholder="Enter specification name"
+                required
+              ></el-input>
+            </el-form-item>
+          </div>
+          <div class="specification-item">
+            <div class="specification-label">{{ `Specification value ${index + 1}` }}</div>
+            <el-form-item>
+              <el-input v-model="spec.value" placeholder="Enter value" required></el-input>
+            </el-form-item>
+          </div>
+          <div class="specification-item" style="margin-top: 30px">
+            <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn"> Save</el-button>
+            <el-button style="background: #fff; color: #fb923c" @click="cancelSpec(index)" class="cancel-btn">Cancel</el-button>
+          </div>
+        </div>
+      </el-form>
+    </div>
+
+    <!-- 2 -->
+    <div class="container">
+      <Title fontSize="16px">Multi specification parameters</Title>
+      <el-divider />
+      <div class="button-container">
+        <BaseButton btnClass="btn-orange" :onClick="handleMemory" text="Add new specifications" />
+        <BaseButton btnClass="btn-yellow" :onClick="MemoryImmediately" text="Generate immediately" />
+      </div>
+        <div class="h-[80px]" v-for="(spec,index) in memoryList" :key="index">
+          <div class="specification-label">{{ `Memory ${index + 1}` }}</div>
+          <div class="flex">
+            <div class="flex w-[400px] 	justify-between">
+              <el-input style="width: 60px;" v-model="spec.name" ></el-input>
+              <el-input style="width: 60px;" v-model="spec.value"></el-input>
+              <el-input style="width: 60px;" v-model="spec.weight"></el-input>
+              <el-input style="width: 180px" v-model="spec.center" placeholder="Please enter attributes" ></el-input>
+            </div>
+            <div style="margin: 2px 0px 0px 10px">
+              <el-button style="background: #fb923c; color: #fff" @click="memoryAdd(spec)" class="save-btn">Add</el-button>
+            </div>
+          </div>
+        </div>
+    </div>
+
+    <!-- 3 -->
+    <div class="container">
+      <Title fontSize="16px">Multi specification parameters</Title>
+      <el-divider />
+      <div class="button-container">
+        <BaseButton btnClass="btn-orange" :onClick="xxxxx" text="Add new specifications" />
+        <BaseButton btnClass="btn-yellow" :onClick="ccccc" text="Generate immediately" />
+      </div>
+        <div class="specificationAdd h-[80px]">
+          <div class="specification-label">Memory</div>
+          <div class="flex">
+            <div class="flex w-[340px] 	justify-between">
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 180px;" placeholder="Please enter attributes" ></el-input>
+            </div>
+            <div style="margin: 2px 0px 0px 10px">
+              <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn">Add</el-button>
+            </div>
+          </div>
+        </div>
+        <el-form  class="spec-form">
+        <div class="specification-row mt-[5px]">
+          <div class="specification-item">
+            <div class="specification-label">Specifications</div>
+            <el-form-item>
+              <el-input  placeholder="Enter specification name" required></el-input>
+            </el-form-item>
+          </div>
+          <div class="specification-item">
+            <div class="specification-label">Specifications</div>
+            <el-form-item>
+              <el-input  placeholder="Enter value" required></el-input>
+            </el-form-item>
+          </div>
+          <div class="specification-item" style="margin-top: 30px">
+            <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn"> Save</el-button>
+            <el-button  style="background: #fff; color: #fb923c" @click="cancelSpec(index)" class="cancel-btn"> Cancel</el-button>
+          </div>
+        </div>
+        </el-form>
+    </div>
+
+     <!-- 4 -->
+     <div class="container mb-[25px]">
+      <Title fontSize="16px">Multi specification parameters</Title>
+      <el-divider />
+      <div class="button-container">
+        <BaseButton btnClass="btn-orange" :onClick="xxx" text="Add new specifications" />
+        <BaseButton btnClass="btn-yellow" :onClick="ccc" text="Generate immediately" />
+      </div>
+        <div class="specificationAdd h-[80px]">
+          <div class="specification-label">Memory</div>
+          <div class="flex">
+            <div class="flex w-[400px] 	justify-between">
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 180px;" placeholder="Please enter attributes" ></el-input>
+            </div>
+            <div style="margin: 2px 0px 0px 10px">
+              <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn">Add</el-button>
+            </div>
+          </div>
+        </div>
+    </div>
+
+    <el-table :data="tableData" :cell-style="{ textAlign: 'center' }"
+    :header-cell-style="{ textAlign: 'center' }">
+        <el-table-column prop="memory" label="memory" width="130" />
+        <el-table-column prop="color" label="color" width="130" />
+        <el-table-column prop="price" label="price" width="300" >
+            <template #default="scope">
+              <el-input
+              v-model="scope.price"
+              placeholder="Please enter the selling price"
+              :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+              :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="Operation">
+          <template #default="scope">
+             <el-button  @click="deleteVariant(scope.row)" type="text" size="small">Delete</el-button>
+          </template>
+        </el-table-column>
+     </el-table>
+
+ </div>
 </template>
 
-<script setup></script>
+<script setup>
+  import Title from '@/components/titleFood.vue'
+  import BaseButton from './BaseButton.vue'
+  import { ref } from 'vue'
+  const formData = ref({})
+  const specifications = ref([ { name: '', value: '' }])
+  const memoryList = ref([ { name: '', value: '',weight:'', center:"",}])
+  const tableData =ref([
+    { memory: '8GB', color: 'Black', price: '' },
+    { memory: '16GB', color: 'White', price: '' },
+  ])
+  // specification 新增
+  const handleAddSpec = () => {
+    console.log('新增')
+    specifications.value.push({ name: '', value: '' })
+  }
+  const handleGenerate = () => {
+    console.log('specifications生成完成')
+  }
+  const saveSpec = (index) => {
+    console.log('保存', index)
+  }
+  const cancelSpec = (index) => {
+    console.log('取消', index)
+    specifications.value.splice(index, 1)
+  }
+  // Memory 添加规格
+ const handleMemory=()=>{
+  console.log("memoryList新增");
+  memoryList.value.push({ name: '', value: '',weight:'', center:"",})
+ }
+ const MemoryImmediately=()=>{
+  console.log('memoryList立即生产',memoryList.value);
+ }
+ const memoryAdd=(spec)=>{
+  console.log("memoryList添加完成",spec);
+ }
+
+//  表格删除
+const deleteVariant=(index)=>{
+  tableData.value.splice(index, 1);
+}
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  :deep(.el-divider--horizontal) {
+    margin: 0 0 12px 0;
+  }
+  .container {
+    width: 100%;
+  }
+  .scroll::-webkit-scrollbar {
+    display: none;
+  }
+  .button-container {
+    display: flex;
+    gap: 16px;
+  }
+  .specification-row {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+  .specification-label {
+    margin: 12px 0px;
+  }
+  .el-table {
+  --el-table-header-bg-color: #f8f9fa;
+  --el-table-border-color: #e5e7eb;
+  --el-table-header-text-color: #4b5563;
+}
+</style>

src/views/goods/index.vue

@@ -15,9 +15,11 @@
         <el-option label="Offline" value="offline" />
       </el-select>
       <el-button type="danger" class="btn-reset" @click="Reset_Btn">Reset</el-button>
-      <el-button type="danger" class="btn-new"   @click="show = true">New Product</el-button>
+      <el-button type="danger" class="btn-new"   @click="Add_Btn">New Product</el-button>
     </div>
-    <el-table :data="productList" style="width: 100%">
+    <!-- table表格 -->
+    <el-table :data="tableList" style="width: 100%" :cell-style="{ textAlign: 'center' }"
+    :header-cell-style="{ textAlign: 'center' }" >
       <el-table-column prop="id" label="Id" />
       <el-table-column label="Product Image">
         <template #default="scope">
@@ -39,25 +41,43 @@
       <el-table-column prop="time" label="Time" />
       <el-table-column label="Operation">
         <template #default="scope">
-          <el-button type="primary" text>Edit</el-button>
-          <el-button type="danger" text>Delete</el-button>
+           <el-button type="primary" text @click="editBtn(scope)">Edit</el-button>
+          <el-button type="danger" @click="deleteBtn" text>Delete</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <GoodsDrawer v-model:show="show"></GoodsDrawer>
+    <!-- Pagination -->
+    <div class="fixed bottom-5 right-5 flex items-center justify-between">
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50]"
+        :total="total" layout="prev, pager, next, sizes" />
+    </div>
+    <GoodsDrawer v-model:show="show" :table="currentRow" :type="isSwitch" ></GoodsDrawer>
   </div>
 </template>
 <script setup>
   import { ref } from 'vue'
-import GoodsDrawer from './components/goods-drawer.vue'
+  import GoodsDrawer from './components/goods-drawer.vue'
+
   const show = ref(false)
   const searchText = ref('')
-  const selectedCategory = ref('')
-  const selectedStatus = ref('')
+  const selectedCategory = ref('')   // 下拉框数据
+  const selectedStatus = ref('')    // 下拉框数据
+  const currentRow=ref([])     
+  const isSwitch = ref('add');      // 默认是新增操作
+  const currentPage = ref(1);
+  const pageSize = ref(10);
+  const total = ref(600);
+
+  // 重置
   const Reset_Btn=()=>{
    console.log('重置');
   }
-  const productList = ref([
+  // 新增
+  const Add_Btn=()=>{
+    isSwitch.value = 'add'; 
+    show.value = true
+  }
+  const tableList = ref([
     {
       id: '00010',
       image: 'https://ai-public.mastergo.com/ai/img_res/a59d5d07e117eb6d961215c66250fdd2.jpg',
@@ -95,6 +115,18 @@ import GoodsDrawer from './components/goods-drawer.vue'
       time: '2024-12-15 15:22:11',
     },
   ])
+  const editBtn=(scope)=>{
+    // console.log('编辑',scope.row);
+    currentRow.value = scope.row
+    isSwitch.value = 'edit'; // 设置为编辑模式
+    show.value = true
+  }
+  const deleteBtn=()=>{
+    console.log('删除');
+  }
+  const getList = () => {
+  // 请求分页数据的逻辑
+};
 </script>
 <style scoped lang="scss">
   .container {
@@ -145,13 +177,9 @@ import GoodsDrawer from './components/goods-drawer.vue'
     object-fit: cover;
   }
 
-  :deep(.el-table) {
-    --el-table-border-color: #f0f0f0;
-    --el-table-header-bg-color: #fafafa;
-    --el-table-row-hover-bg-color: #f5f5f5;
-  }
-
-  :deep(.el-table .el-table__row:nth-child(even)) {
-    background-color: #fafafa;
-  }
+  .el-table {
+  --el-table-header-bg-color: #f8f9fa;
+  --el-table-border-color: #e5e7eb;
+  --el-table-header-text-color: #4b5563;
+}
 </style>

src/views/layout/index.vue

@@ -23,7 +23,7 @@ import Header from './components/Header.vue'
 import menuCooker1 from '/imgs/menu-cooker1.png'
 import menuCooker2 from '/imgs/menu-cooker2.png'
 import menuCooker3 from '/imgs/menu-cooker3.png'
-// import menuCooker3 from '/imgs/menu-cooker3.png'
+import menuCooker4 from '/imgs/menu-cooker4.png'
 
 import { useStoreI18n } from '@/hook/i18n'
 const { t, locale } = useI18n()
@@ -44,7 +44,7 @@ const menus = ref([
   },
   {
     name: $t('sidebar.goods'),
-    img: menuCooker3,
+    img: menuCooker4,
     key: 4,
     path: '/goods',
   },

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 {