新增订单快捷收银

src/views/order/components/cashTable.vue

@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <div class="tab_container">
+            <el-table :data="tableData.list" height="560px" v-loading="tableData.loading">
+                <el-table-column label="订单号" prop="orderNo"></el-table-column>
+                <el-table-column label="金额" prop="amount">
+                    <template v-slot="scope">
+                        ￥{{ scope.row.amount }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="支付类型" prop="payType">
+                    <template v-slot="scope">
+                        <el-tag disable-transitions :type="payTypeFilter(scope.row.payType).type">
+                            {{ payTypeFilter(scope.row.payType).label }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="创建时间" prop="createTime">
+                    <template v-slot="scope">
+                        {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="pagination">
+            <el-pagination @current-change="paginationChange" :current-page="tableData.page" :page-size="tableData.size"
+                layout="total, prev, pager, next, jumper" :total="tableData.total" background>
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import dayjs from 'dayjs'
+import { queryQuickPay } from '@/api/order'
+import { ref, reactive, onMounted } from 'vue'
+
+const tableData = reactive({
+    resetLoading: false,
+    proName: '',
+    status: '',
+    loading: false,
+    list: [],
+    page: 1,
+    size: 10,
+    total: 0
+})
+
+// 分页变化
+function paginationChange(e) {
+    tableData.page = e
+    queryQuickPayAjax()
+}
+
+// 支付类型
+function payTypeFilter(t) {
+    const m = {
+        cash: {
+            type: 'primary',
+            label: '现金'
+        },
+        scanCode: {
+            type: 'warning',
+            label: '扫码'
+        }
+    }
+    return m[t]
+}
+
+// 查询快捷收银订单
+async function queryQuickPayAjax() {
+    try {
+        tableData.loading = true
+        const res = await queryQuickPay({
+            page: tableData.page,
+            pageSize: tableData.size
+        })
+        tableData.loading = false
+        tableData.list = res.list
+        tableData.total = res.total
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+onMounted(() => {
+    queryQuickPayAjax()
+})
+</script>
+
+<style scoped lang="scss">
+.tab_container {
+    padding: 0 var(--el-font-size-base) var(--el-font-size-base);
+}
+
+.pagination {
+    display: flex;
+    padding: 0 14px;
+}
+</style>