更新折扣优惠和代客下单

src/views/table/components/tableInfo.vue

@@ -15,70 +15,66 @@
             </el-icon>
             <span class="t">{{ status[props.tableInfo.status] }}</span>
         </div>
-        <div class="place_order">
+        <div class="cart" v-if="props.tableInfo.status == 'using'">
+            <div class="cart_list">
+                <div class="item" v-for="item in cartList" :key="item.id">
+                    <div class="top">
+                        <span class="name">{{ item.name }}</span>
+                        <span class="n">x{{ item.number }}</span>
+                        <span class="p">￥{{ item.salePrice }}</span>
+                    </div>
+                    <div class="tag_wrap" v-if="item.skuName">
+                        <div class="tag" v-for="item in item.skuName.split(',')">
+                            {{ item }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="btn_container">
+                <div class="btn_wrap">
+                    <el-button type="success" style="width: 100%;" @click="toOrderMeal(1)">加菜</el-button>
+                </div>
+                <div class="btn_wrap">
+                    <el-button type="primary" :loading="payLoading" style="width: 100%;" @click="showPayHandle">结算(￥{{
+                        orderInfo.orderAmount || 0 }})</el-button>
+                </div>
+            </div>
+        </div>
+        <div class="place_order" v-else>
             <div class="btn">
                 <div class="top">
                     <el-icon class="icon">
                         <TakeawayBox />
                     </el-icon>
-                    <span class="t">点单</span>
+                    <!-- <span class="t">点单</span> -->
                 </div>
                 <!-- <span class="tips">开始新订单</span> -->
-                <div class="btn_wrap">
-                    <el-button type="primary" style="width: 100%;" @click="toOrderMeal(1)">直接点单</el-button>
-                </div>
-                <div class="btn_wrap">
-                    <el-button type="primary" style="width: 100%;" @click="toOrderMeal(2)">选择会员点单</el-button>
+                <div class="btn_wrap" v-if="props.tableInfo.status == 'idle'">
+                    <el-button type="primary" style="width: 100%;" @click="toOrderMeal(1)">开始新订单</el-button>
                 </div>
             </div>
         </div>
-        <el-dialog :title="`台桌：${props.tableInfo.name} - 选择会员`" v-model="showDialog" width="80%">
-            <el-form inline>
-                <el-form-item>
-                    <el-input placeholder="请输入手机号搜索会员" v-model="tableData.phone" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="getMemberList">搜索</el-button>
-                    <el-button @click="resetTable">重置</el-button>
-                </el-form-item>
-            </el-form>
-            <el-table :data="tableData.list" height="300px" border stripe v-loading="tableData.loading">
-                <el-table-column prop="name" label="昵称" width="120px" />
-                <el-table-column prop="telephone" label="手机" width="150px" />
-                <el-table-column prop="code" label="编号" width="120px" />
-                <el-table-column prop="level" label="等级" />
-                <el-table-column prop="levelConsume" label="积分" />
-                <el-table-column prop="amount" label="余额" width="100px">
-                    <template v-slot="scope">
-                        ￥{{ formatDecimal(scope.row.amount) }}
-                    </template>
-                </el-table-column>
-                <el-table-column label="操作" width="120px">
-                    <template v-slot="scope">
-                        <el-button type="primary" @click="toHomeMember(scope.row)">选择</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-pagination layout="prev, pager, next, total" background style="margin-top: 20px;"
-                :total="Number(tableData.total)" v-model:current-page="tableData.page"
-                @current-change="getMemberList" />
-        </el-dialog>
+        <!-- 结算订单 -->
+        <settleAccount ref="settleAccountRef" :cart="cartList" :amount="orderInfo.orderAmount"
+            :remark="orderInfo.remark" :masterId="orderInfo.masterId" :orderInfo="orderInfo" @paySuccess="paySuccess" />
     </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUser } from "@/store/user.js"
 import { useGlobal } from '@/store/global.js'
 import { queryMembermember } from '@/api/member/index.js'
+import { orderDetail } from '@/api/order/index.js'
 import { formatDecimal } from '@/utils/index.js'
+import settleAccount from "@/views/home/components/settleAccount.vue";
 
 const router = useRouter()
 const global = useGlobal()
 const store = useUser()
 
-const emit = defineEmits(['close'])
+const emits = defineEmits(['close', 'success'])
 
 const props = defineProps({
     tableInfo: {
@@ -87,16 +83,61 @@ const props = defineProps({
     }
 })
 
+watch(props, () => {
+    getOrderDetail()
+})
+
+const settleAccountRef = ref(null)
+const orderInfo = ref({})
+const cartList = ref([])
+
 const status = ref({
     'subscribe': '预定',
     'closed': '关台',
-    'opening': '开台中',
+    'idle': '空闲',
+    'using': '开台中',
+    'pending': '挂单中',
+    'paying': '结算中',
     'cleaning': '台桌清理中'
 })
 
+const payLoading = ref(false)
+
+// 显示结算页面
+function showPayHandle() {
+    settleAccountRef.value.show()
+}
+
+// 获取订单详情
+async function getOrderDetail() {
+    try {
+        if (!props.tableInfo.status == 'using') return
+        payLoading.value = true
+        const res = await orderDetail({
+            shopId: store.userInfo.shopId,
+            id: props.tableInfo.orderId
+        })
+        payLoading.value = false
+        orderInfo.value = res
+
+        cartList.value = res.detailList.map(item => {
+            let obj = {
+                name: item.productName,
+                number: item.num,
+                salePrice: item.price,
+                skuName: item.productSkuName
+            }
+            return obj
+        })
+    } catch (error) {
+        payLoading.value = false
+        console.log(error);
+    }
+}
+
 // 关闭
 function close() {
-    emit('close')
+    emits('close')
 }
 
 // 点单
@@ -114,49 +155,14 @@ function toOrderMeal(t) {
     }
 }
 
-const showDialog = ref(false)
-const tableData = reactive({
-    phone: '',
-    loading: false,
-    list: [],
-    page: 1,
-    size: 10,
-    total: 0
+function paySuccess() {
+    getOrderDetail()
+    emits('success')
+}
+
+onMounted(() => {
+    getOrderDetail()
 })
-
-// 重置表格
-function resetTable() {
-    tableData.phone = ''
-    tableData.page = 1
-    getMemberList()
-}
-
-// 获取会员列表
-async function getMemberList() {
-    try {
-        tableData.loading = true
-        const res = await queryMembermember({
-            shopId: store.userInfo.shopId,
-            phone: tableData.phone,
-            page: tableData.page,
-            pageSize: tableData.size
-        })
-        tableData.loading = false
-        tableData.list = res.list
-        tableData.total = res.total
-    } catch (error) {
-        console.log(error);
-    }
-}
-
-// 选择会员去下单
-function toHomeMember(row) {
-    global.setOrderTable(props.tableInfo)
-    global.setOrderMember(row)
-    router.push({
-        name: 'home',
-    })
-}
 </script>
 
 <style scoped lang="scss">
@@ -202,6 +208,74 @@ function toHomeMember(row) {
         }
     }
 
+    .cart {
+        height: calc(100vh - 160px);
+        display: flex;
+        flex-direction: column;
+
+        .cart_list {
+            flex: 1;
+            border-radius: 6px;
+            background-color: #efefef;
+            padding: 0 var(--el-font-size-base);
+            overflow-y: auto;
+
+            .item {
+                padding: var(--el-font-size-base) 0;
+
+                &:not(:last-child) {
+                    border-bottom: 1px solid #ddd;
+                }
+
+                .top {
+
+                    display: flex;
+                    padding-bottom: 6px;
+
+                    .name {
+                        flex: 1;
+                        padding-right: 10px;
+                    }
+
+                    .n {
+                        width: 50px;
+                        color: #555;
+                    }
+
+                    .p {
+                        width: 50px;
+                        color: #555;
+                    }
+                }
+
+                .tag_wrap {
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .tag {
+                        padding: 2px 6px;
+                        background-color: var(--el-color-danger);
+                        color: #fff;
+                        margin-right: 10px;
+                        margin-bottom: 10px;
+                        font-size: 12px;
+                    }
+                }
+
+            }
+        }
+
+        .btn_container {
+            display: flex;
+            gap: 10px;
+
+            .btn_wrap {
+                flex: 1;
+                padding-top: var(--el-font-size-base);
+            }
+        }
+    }
+
     .place_order {
         background-color: #efefef;
         height: calc(100vh - 160px);

src/views/table/index.vue

@@ -45,7 +45,7 @@
             <!-- 台桌统计 -->
             <countCard v-if="!slectTable.id" />
             <!-- 台桌信息 -->
-            <tableInfo v-else :tableInfo="slectTable" @close="slectTableClose" />
+            <tableInfo v-else :tableInfo="slectTable" @close="slectTableClose" @success="paySuccess" />
         </div>
     </div>
 </template>
@@ -65,15 +65,15 @@ const tabActive = ref(0)
 const tabAreas = ref([
     {
         label: '全部',
-        type: 0,
+        type: '',
     },
     {
         label: '空闲',
-        type: 1,
+        type: 'idle',
     },
     {
         label: '使用中',
-        type: 2,
+        type: 'using'
     },
     // {
     //     label: '已预订',
@@ -96,6 +96,13 @@ const slectTable = ref('')
 // 切换类型
 function tabChange(item, index) {
     tabActive.value = index
+    queryShopTableAjax()
+}
+
+// 支付成功，刷新状态
+async function paySuccess() {
+    await queryShopTableAjax()
+    slectTableHandle(tableItemActive.value, tableList.value[tableItemActive.value])
 }
 
 // 选择台桌
@@ -134,7 +141,7 @@ async function queryShopTableAjax() {
         const res = await queryShopTable({
             shopId: store.userInfo.shopId,
             areaId: area.value,
-            status: '',
+            status: tabAreas.value[tabActive.value].type,
             page: 1,
             pageSize: 500
         })
@@ -250,6 +257,7 @@ onMounted(() => {
                 justify-content: space-between;
                 padding: 0 10px;
                 color: #fff;
+                background-color: #999;
 
                 &.subscribe {
                     background-color: var(--el-color-success);
@@ -259,12 +267,20 @@ onMounted(() => {
                     background-color: #999;
                 }
 
+                &.idle {
+                    background-color: var(--primary-color);
+                }
+
+                &.using {
+                    background-color: var(--el-color-success);
+                }
+
                 &.opening {
                     background-color: var(--primary-color);
                 }
 
                 &.cleaning {
-                    background-color: var(--el-color-danger);
+                    background-color: #999;
                 }
             }