diff --git a/src/api/hard/hard-order.ts b/src/api/hard/hard-order.ts
index d191274..e912c21 100644
--- a/src/api/hard/hard-order.ts
+++ b/src/api/hard/hard-order.ts
@@ -1,49 +1,59 @@
 import request from "/@/utils/request"
 
+/**
+ * 离线订单手动支付
+ */
+export function offlinePay(data: any) {
+	return request({
+		url: "/hard/hard-order/offline-pay",
+		method: "post",
+		data,
+	})
+}
+
 export function pageJoin(query?: Object) {
-  return request({
-    url: '/hard/hard-order/page-join',
-    method: 'get',
-    params: query
-  })
+	return request({
+		url: "/hard/hard-order/page-join",
+		method: "get",
+		params: query,
+	})
 }
 
 export function fetchList(query?: Object) {
-  return request({
-    url: '/hard/hard-order/page',
-    method: 'get',
-    params: query
-  })
+	return request({
+		url: "/hard/hard-order/page",
+		method: "get",
+		params: query,
+	})
 }
 
 export function addObj(obj?: Object) {
-  return request({
-    url: '/hard/hard-order',
-    method: 'post',
-    data: obj
-  })
+	return request({
+		url: "/hard/hard-order",
+		method: "post",
+		data: obj,
+	})
 }
 
 export function getObj(id?: string) {
-  return request({
-    url: '/hard/hard-order/' + id,
-    method: 'get'
-  })
+	return request({
+		url: "/hard/hard-order/" + id,
+		method: "get",
+	})
 }
 
 export function delObjs(ids?: Object) {
-  return request({
-    url: '/hard/hard-order',
-    method: 'delete',
-    data: ids
-  })
+	return request({
+		url: "/hard/hard-order",
+		method: "delete",
+		data: ids,
+	})
 }
 
 export function putObj(obj?: Object) {
-  return request({
-    url: '/hard/hard-order',
-    method: 'put',
-    data: obj
-  })
+	return request({
+		url: "/hard/hard-order",
+		method: "put",
+		data: obj,
+	})
 }
-
diff --git a/src/views/hard/hard-offline-order/index.vue b/src/views/hard/hard-offline-order/index.vue
new file mode 100644
index 0000000..438a41d
--- /dev/null
+++ b/src/views/hard/hard-offline-order/index.vue
@@ -0,0 +1,429 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+				<el-row>
+					<el-form-item style="width: 300px" label="用户" prop="userIds">
+						<select-user v-model="state.queryForm.userIds" />
+					</el-form-item>
+					<el-form-item style="width: 300px" label="商户" prop="mchIds">
+						<select-mch v-model="state.queryForm.mchIds" :apiParams="{ parentIsNull: false }" />
+					</el-form-item>
+					<el-form-item style="width: 300px" label="设备类型" prop="hardTypeCode">
+						<dict-select v-model="state.queryForm.hardTypeCode" dict-code="hard_type" />
+					</el-form-item>
+					<el-form-item style="width: 300px" label="用户部门" prop="deptId">
+						<select-dept v-model="state.queryForm.deptId" />
+					</el-form-item>
+					<el-form-item style="width: 300px" label="用餐时间段" prop="hourType">
+						<dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
+					</el-form-item>
+					<el-form-item style="width: 450px" label="创建时间" prop="payTimeList">
+						<el-date-picker v-model="state.queryForm.payTimeList" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" />
+					</el-form-item>
+					<el-form-item>
+						<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn") }}</el-button>
+						<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
+					</el-form-item>
+				</el-row>
+			</el-form>
+
+			<el-row>
+				<!-- :export="'sys_audit_export'" -->
+				<div class="mb8" style="width: 100%">
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						@exportExcel="exportExcel"
+						@queryTable="getDataList"
+						class="ml10 mr20"
+						style="float: right"
+					/>
+				</div>
+			</el-row>
+
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+				:show-summary="false"
+				:summary-method="getSummaries"
+			>
+				<el-table-column type="selection" width="60" align="center" />
+				<el-table-column type="index" label="#" width="50" />
+				<el-table-column width="200" label="用户">
+					<template #default="{ row }">
+						<div class="flex flex-row items-center justify-center">
+							<preview-image width="50px" height="50px" :src="row.userAvatar" />
+							<div class="flex flex-col ml-2 items-start cursor-pointer hover:underline hover:text-blue-500">
+								<span> {{ row.username }}</span>
+								<span> {{ row.userMobile }}</span>
+							</div>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="200px" label="商品">
+					<template #default="{ row }">
+						<div class="desc">
+							<span>商品</span>
+							<el-tooltip :content="row.productDesc" placement="top-start">
+								<span class="text-line">{{ row.productDesc }}</span>
+							</el-tooltip>
+						</div>
+						<div class="status" v-if="row.hourType">
+							<span>用餐时间段</span>
+							<span>
+								<dict-tag :options="daily_menu" :value="row.hourType" />
+							</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="250px" label="设备信息">
+					<template #default="{ row }">
+						<div class="status">
+							<span>商户</span>
+							<span>
+								{{ row.merchantName }}
+							</span>
+						</div>
+						<div class="status">
+							<span>设备名</span>
+							<span>
+								{{ row.hardName }}
+							</span>
+						</div>
+						<div class="status">
+							<span>设备类型</span>
+							<span>
+								<dict-tag :options="hard_type" :value="row.hardType" />
+							</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="250px" label="订单信息">
+					<template #default="{ row }">
+						<div class="status">
+							<span>订单类型</span>
+							<span>
+								<dict-tag :options="hard_order_type" :value="row.orderType" />
+							</span>
+						</div>
+						<div class="status">
+							<span>支付方式</span>
+							<span>
+								<dict-tag :options="hard_pay_type" :value="row.payType" />
+							</span>
+						</div>
+						<div class="status">
+							<span>订单状态</span>
+							<span>
+								<dict-tag :options="hard_order_status" :value="row.orderStatus" />
+							</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="200px" prop="paymentInformation" label="付款信息">
+					<template #default="{ row }">
+						<div class="status">
+							<span>商品总价</span>
+							<span class="color-success">
+								{{ displayPrice(row.totalPrice, "元", 2) }}
+							</span>
+						</div>
+						<div class="status">
+							<span>额外支付</span>
+							<span class="color-danger">
+								{{ displayPrice(row.extraPrice, "元", 2) }}
+							</span>
+						</div>
+						<div class="status">
+							<span>实际支付</span>
+							<span class="color-primary">
+								{{ displayPrice(row.payPrice, "元", 2) }}
+							</span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column width="270px" label="退款信息">
+					<template #default="{ row }">
+						<div v-if="row.payRefundId">
+							<div class="status">
+								<span>退款金额</span>
+								<span class="color-success">
+									{{ displayPrice(row.refundPrice, "元", 2) }}
+								</span>
+							</div>
+							<div class="status">
+								<span>退款状态</span>
+								<span class="color-success">
+									<dict-tag :options="hard_refund_status" :value="row.refundStatus" />
+								</span>
+							</div>
+							<div class="status">
+								<span>退款时间</span>
+								<span>
+									{{ row.refundTime }}
+								</span>
+							</div>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column label="支付时间" align="center" prop="payTime" width="250px">
+					<template #default="{ row }">
+						<div class="status">
+							<span>创建时间</span>
+							<span>{{ row.createTime }} </span>
+						</div>
+						<div class="status">
+							<span>支付时间</span>
+							<span>{{ row.payTime }} </span>
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column fixed="right" label="操作" width="200">
+					<template #default="{ row }">
+						<el-button
+							v-if="row.orderStatus == 2"
+							icon="VideoPlay"
+							v-auth="'hard_hardwareOrder_offlinePay'"
+							text
+							@click="submitPay(row)"
+							type="primary"
+						>
+							确认支付
+						</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="systemHardwareOrder">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import * as hardOrder from "/@/api/hard/hard-order"
+import * as hardInvoice from "/@/api/hard/hard-invoice"
+import { getDicts } from "/@/api/admin/dict"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
+import { displayPrice } from "/@/utils/formatMoney"
+import { ElLoading, TableColumnCtx } from "element-plus"
+import { VNode } from "vue"
+
+const { push } = useRouter()
+
+// 引入组件
+
+// 定义查询字典
+const { hard_pay_type, hard_order_type, hard_order_status, hard_type, hard_refund_status, daily_menu } = useDict(
+	"hard_pay_type",
+	"hard_order_type",
+	"hard_order_status",
+	"hard_type",
+	"hard_refund_status",
+	"daily_menu",
+)
+// 定义变量内容
+const tabList = ref<any>([{}])
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {
+		isOfflineOrder: 1,
+	},
+	pageList: hardOrder.pageJoin,
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+
+onMounted(async () => {
+	const { data } = await getDicts("hard_order_type")
+	data.unshift({ label: "全部", value: null })
+	tabList.value = data
+})
+
+// 清空搜索条件
+const resetQuery = () => {
+	// 清空搜索条件
+	queryRef.value?.resetFields()
+	// 清空多选
+	selectObjs.value = []
+	state.queryForm.deptId = ""
+	state.queryForm.deptIds = []
+	// draggableDepTreeRef.value.resetData()
+	getDataList()
+}
+
+const submitPay = async (row: any) => {
+	try {
+		await useMessageBox().confirm("是否确认支付")
+	} catch {
+		return
+	}
+	try {
+		const pa = {
+			orderIds: [row.id],
+		}
+		await hardOrder.offlinePay(pa)
+		useMessage().success("操作成功")
+		getDataList()
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
+
+// 树节点选择时
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+	state.queryForm.deptId = curClickedNode.id
+	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
+	state.queryForm.isDeepDept = isDeepTree
+	getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+	downBlobFile("/hard/hard-order/export", Object.assign(state.queryForm, { ids: selectObjs }), "订单记录.xlsx")
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
+
+	try {
+		await hardOrder.delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
+
+interface SummaryMethodProps<T = any> {
+	columns: TableColumnCtx<T>[]
+	data: T[]
+}
+
+// 表格行尾合计
+const getSummaries = (param: SummaryMethodProps) => {
+	const { columns, data } = param
+	const sums: (string | VNode | number)[] = []
+	columns.forEach((column, index) => {
+		if (index === 0) {
+			sums[index] = "合计"
+			return
+		}
+		if (column.property === "paymentInformation") {
+			const priceVNode: VNode[] & string[] = []
+			;[
+				{ column: "totalPrice", columnName: "商品总价", color: "#67C260" },
+				{ column: "extraPrice", columnName: "额外支付", color: "#F56E9B" },
+				{ column: "payPrice", columnName: "实际支付", color: "#355CF6" },
+			].forEach(({ column, columnName, color }: any, index: number) => {
+				const values = data.map((item) => Number(item[column]))
+				if (!values.every((value) => Number.isNaN(value))) {
+					priceVNode.push(
+						h("div", {}, [
+							h("span", { style: { marginRight: "40px", minWidth: "60px", fontWeight: "bold" } }, [columnName]),
+							h("span", { style: { color, minWidth: "50px", flex: 1 } }, [
+								displayPrice(
+									values.reduce((prev, curr) => {
+										const value = Number(curr)
+										if (!Number.isNaN(value)) {
+											return prev + curr
+										} else {
+											return prev
+										}
+									}, 0),
+									"元",
+									2,
+								),
+							]),
+						]),
+					)
+				} else {
+					priceVNode.push("NaN")
+				}
+			})
+			sums[index] = h("div", { style: {} }, [...priceVNode])
+		} else {
+			sums[index] = ""
+		}
+	})
+
+	return sums
+}
+</script>
+
+<style scoped lang="scss">
+.text-line {
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.desc {
+	display: flex;
+	align-items: center;
+	margin-bottom: 2px;
+
+	span {
+		display: inline-block;
+	}
+
+	span:nth-child(1) {
+		min-width: 60px;
+		max-width: 100px;
+		text-align: left;
+	}
+
+	span:nth-child(2) {
+		flex: 1;
+		min-width: 50px;
+	}
+}
+
+.status {
+	display: flex;
+	align-items: center;
+	margin-bottom: 2px;
+
+	span {
+		display: inline-block;
+	}
+
+	span:nth-child(1) {
+		min-width: 60px;
+		max-width: 100px;
+		text-align: left;
+	}
+
+	span:nth-child(2) {
+		flex: 1;
+		min-width: 50px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+</style>