点餐台样式调整

src/views/order/console.vue

@@ -4,10 +4,10 @@
             v-model="showOrderConsole"
             title="开始点餐"
             direction="rtl"
-            size="80%"
+            size="100%"
             :before-close="beforeClose"
         >
-            <div class="p-2 md:w-1/4 w-full md:h-full h-auto float-left">
+            <div class="p-2 md:w-2/6 w-full md:h-full h-auto float-left">
                 <el-card shadow="never" :body-style="{ padding: '10px' }">
                     <template #header>
                         <div
@@ -82,35 +82,6 @@
                                 </template>
                             </el-input>
                         </div>
-
-                        <div class="mt-2 coupon-container" v-loading="searchLoading">
-                            <el-scrollbar height="200px">
-                                <el-empty v-if="!data.couponList.length" description="暂无可用优惠券" :image-size="60" />
-                                <div v-else class="coupon-list" style="padding: 7px;">
-                                    <div
-                                        v-for="coupon in data.couponList"
-                                        :key="coupon.id"
-                                        class="coupon-item"
-                                        :class="{
-                                            'is-selected': params.couponId === coupon.ticketRecordId,
-                                            'is-disabled': orderData.sumPriceSum < coupon.consumeScore / 100
-                                        }"
-                                        @click="handleCouponClick(coupon)" @dblclick="handleCouponDoubleClick(coupon)"
-                                    >
-                                        <div class="left-part">
-                                            <div class="amount-wrapper">
-                                                <div class="amount">{{ coupon.consumeScore / 100 }}</div>
-                                            </div>
-                                            <!-- <div class="condition">满{{ coupon.consumeScore / 100 }}可用</div> -->
-                                        </div>
-                                        <div class="right-part">
-                                            <div class="name">{{ coupon.productName }}</div>
-                                            <div class="date">券码:{{ coupon.ticketNo}}</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </el-scrollbar>
-                        </div>
                     </div>
                     <el-alert :closable="false" style="padding: 8px 0px;">
                         <template #title>
@@ -157,13 +128,10 @@
                     </div>
                 </el-card>
             </div>
-            <div
-                class="p-2 md:w-3/4 w-full md:h-full h-auto float-left flex-wrap"
-                v-loading="orderLoading"
-            >
-                <div class="w-full h-auto">
-                    <el-scrollbar
-                        ><div class="flex">
+
+            <div class="p-2 md:w-1/6 w-full md:h-full h-auto float-left flex-wrap">
+                <el-scrollbar>
+                    <div class="flex flex-col space-y-2 p-2">
                             <el-button
                                 size="large"
                                 :type="buttonType == 'all' ? 'primary' : ''"
@@ -173,17 +141,23 @@
                                 >全部商品</el-button
                             >
                             <el-button
+                                class="cate-button"
                                 v-for="button in dishCate"
                                 :key="button.name"
-                                size="large"
+                                size="large" style="margin-left: 0;"
                                 :type="buttonType == button.name ? 'primary' : ''"
                                 @click="clickSortButton(button.name)"
                                 text
                                 bg
                                 >{{ button.name }}</el-button
                             >
-                        </div></el-scrollbar
-                    >
+                        </div></el-scrollbar>
+                </div>
+            <div
+                class="p-2 md:w-1/2 w-full md:h-full h-auto float-left flex-wrap"
+                v-loading="orderLoading"
+            >
+                <div class="w-full h-auto">
                     <div class="justify-end flex">
                         <el-input
                             v-model="search"
@@ -255,6 +229,47 @@
         </span>
         </template>
     </el-dialog>
+    <!-- 优惠券弹框 -->
+    <el-dialog
+        v-model="showCouponDialog"
+        title="选择优惠券"
+        width="50%"
+        :close-on-click-modal="false"
+    >
+        <div class="mt-2 coupon-container" v-loading="searchLoading">
+            <el-scrollbar height="200px">
+                <el-empty v-if="!data.couponList.length" description="暂无可用优惠券" :image-size="60" />
+                <div v-else class="coupon-list" style="padding: 7px;">
+                    <div
+                        v-for="coupon in data.couponList"
+                        :key="coupon.id"
+                        class="coupon-item"
+                        :class="{
+                            'is-selected': params.couponId === coupon.ticketRecordId,
+                            'is-disabled': orderData.sumPriceSum <= coupon.consumeScore / 100
+                        }"
+                        @click="handleCouponClick(coupon)"
+                    >
+                        <div class="left-part">
+                            <div class="amount-wrapper">
+                                <div class="amount">{{ coupon.consumeScore / 100 }}</div>
+                            </div>
+                            <!-- <div class="condition">满{{ coupon.consumeScore / 100 }}可用</div> -->
+                        </div>
+                        <div class="right-part">
+                            <div class="name">{{ coupon.productName }}</div>
+                            <div class="date">券码:{{ coupon.ticketNo}}</div>
+                        </div>
+                    </div>
+                </div>
+            </el-scrollbar>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="showCouponDialog = false">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -278,6 +293,7 @@ import feedback from '@/utils/feedback'
 const innerRef = ref<HTMLDivElement>()
 const dishCate = ref<any[]>([])
 const dishList = ref<any[]>([])
+const showCouponDialog = ref(false)
 let dishListall: any[] = []
 const orderLoading = ref(false);
 const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
@@ -346,19 +362,16 @@ const handleCouponClick = (coupon: any) => {
     if (orderData.sumPriceSum < coupon.consumeScore / 100) {
         return
     }
-    params.couponId = coupon.ticketRecordId
-    params.couponAmount = (coupon.consumeScore / 100).toFixed(2)
-    // 计算支付金额
-orderData.payAmount = (Number(orderData.sumPriceSum) - Number(coupon.consumeScore / 100)).toFixed(2)
-}
-
-// 添加双击处理方法
-const handleCouponDoubleClick = (coupon: any) => {
     if (params.couponId === coupon.ticketRecordId) {
         params.couponId = ''
         params.couponAmount = '-'
         orderData.payAmount = orderData.sumPriceSum
+        return
     }
+    params.couponId = coupon.ticketRecordId
+    params.couponAmount = (coupon.consumeScore / 100).toFixed(2)
+    // 计算支付金额
+    orderData.payAmount = (Number(orderData.sumPriceSum) - Number(coupon.consumeScore / 100)).toFixed(2)
 }
 
 const open = (item: any, num?: number, orderNumber?: any) => {
@@ -745,6 +758,12 @@ const searchUserCoupons = () => {
         if (res) {
             data.couponList = res ? res.couponList || [] : []
             params.userId = res ? res.userId || null : null
+            if (data.couponList.length == 0){
+                feedback.msgError('暂无可用优惠券')
+                return false;
+            } else {
+                showCouponDialog.value = true
+            }
         }
     }).finally(() => {
         searchLoading.value = false
@@ -764,12 +783,30 @@ defineExpose({
     open
 })
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
     .el-alert__content{
         width: 100%;
     }
     .scrollbar{
-        height:calc(100vh - 54px - 32px - 16px - 61px - 20px - 52px - 49px - 64px - 40px - 260px);
+        height:calc(100vh - 54px - 32px - 16px - 61px - 20px - 52px - 49px - 64px - 40px - 60px);
+    }
+    .cate-buttons :deep(.el-button) {
+        margin: 0;
+        width: 100%;
+        justify-content: flex-start;
+        padding-left: 1rem;
+    }
+
+    .cate-buttons :deep(.el-button.is-text:focus),
+    .cate-buttons :deep(.el-button.is-text:hover),
+    .cate-buttons :deep(.el-button.is-text.is-active) {
+        color: var(--el-button-hover-border-color);
+        border-color: transparent;
+        background-color: var(--el-color-primary-light-9);
+    }
+
+    .cate-buttons :deep(.el-button.is-text) {
+        color: var(--el-text-color-regular);
     }
 </style>
 <style>