diff --git a/pagesOrder/detail/components/extra.vue b/pagesOrder/detail/components/extra.vue
new file mode 100644
index 0000000..0be1bfc
--- /dev/null
+++ b/pagesOrder/detail/components/extra.vue
@@ -0,0 +1,36 @@
+<template>
+	<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
+		<view class="u-flex u-row-between">
+			<view class="font-bold">附加费</view>
+			<my-button plain shape="circle" :width="160" :height="56">退菜</my-button>
+		</view>
+		<view class="u-flex u-row-between u-m-t-20">
+			<view>{{data.name||'餐位费'}}</view>
+			<view>x{{data.number}}</view>
+			<view>￥{{data.number}}</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: () => {}
+		},
+		table:{
+			type: Object,
+			default: () => {}
+		}
+	})
+	
+	const statusMap={
+		unpaid:'未支付'
+	}
+	function returnStatus(status){
+		return statusMap[status]||''
+	}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/pagesOrder/detail/components/list.vue b/pagesOrder/detail/components/list.vue
new file mode 100644
index 0000000..020ed6b
--- /dev/null
+++ b/pagesOrder/detail/components/list.vue
@@ -0,0 +1,144 @@
+<template>
+	<view class="default-box-padding bg-fff border-r-12 u-m-t-20" v-if="data.length">
+		<view class="u-font-32 font-bold">
+			<text>共</text>
+			<text class="color-main font-bold"> {{goodsNumber}}</text>
+			<text>份菜品</text>
+		</view>
+		<view class="u-m-b-20 u-m-t-20" v-for="(order,orderIndex) in data" :key="orderIndex">
+			<view class="u-font-32"> 第{{ order.placeNum }}次下单
+			</view>
+			<view class="u-m-t-20 list">
+				<view class="item  u-m-b-20" v-for="(item,index) in order.info" :key="index">
+					<view class="u-flex u-col-top">
+						<view>
+							<image class="img" :src="item.coverImg" mode=""></image>
+						</view>
+						<view class="u-p-l-30 u-flex-1">
+							<view class="u-flex u-row-between u-col-top">
+								
+								<view class="u-flex">
+									<view class="tui" v-if="item.status=='return'">
+										已退
+									</view>
+									<view :class="{'line-th':item.status=='return'}">{{item.name}}</view>
+								</view>
+								<view class="u-text-right">
+									<view>￥{{item.salePrice}}</view>
+									<view v-if="item.status=='return'" class="line-th color-666 u-font-24">￥{{item.salePrice}}</view>
+									<view class="u-m-t-10 u-font-24">X{{item.number}}</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="u-flex u-row-right gap-20 u-m-t-20" v-if="item.status!='return'">
+						<!-- <my-button :height="60" color="#333" plain type="cancel" shape="circle">更多操作</my-button> -->
+						<my-button :width="168" :height="60" plain shape="circle" @tap="tuicai(item,index)">退菜</my-button>
+					</view>
+				</view>
+			</view>
+			<view class="bg-gray u-p-20 u-m-t-20">
+				<view>备注</view>
+				<view class="u-m-t-10">无</view>
+			</view>
+		</view>
+
+		<view class="u-m-t-40">
+			<view class="u-flex u-row-between border-bottom u-p-b-20">
+				<view class="tag no-pay">
+					未支付
+				</view>
+				<view>
+					<text>小计￥</text>
+					<text class="font-bold u-font-32">{{allPrice}}</text>
+				</view>
+			</view>
+
+			<view class="u-flex u-row-between u-m-t-20">
+				<view></view>
+				<view>
+					<text>总计￥</text>
+					<text class="font-bold u-font-32">{{seatFee*1+allPrice*1}}</text>
+				</view>
+			</view>
+			<view class="u-m-t-30">
+				<my-button @tap="printOrder" type="cancel" :color="color.ColorMain">重新打印</my-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		computed
+	} from 'vue';
+	import color from '@/commons/color.js'
+	const emits=defineEmits(['tuicai'])
+	function tuicai(item,index){
+		emits('tuicai',item,index)
+	}
+	const props = defineProps({
+		data: {
+			type: Array,
+			default: () => []
+		},
+		seatFee:{
+			type:[String,Number],
+			default:0
+		}
+	})
+	const allPrice = computed(() => {
+		return props.data.reduce((prve, cur) => {
+			const curTotal=cur.info.filter(v=>v.isGift !== "true"&& v.status !== "return").reduce((a,b)=>{
+				return a+b.salePrice * b.number
+			},0)
+			return prve + curTotal
+		}, 0).toFixed(2)
+	})
+	
+	const goodsNumber = computed(() => {
+		let result = 0
+		result = props.data.reduce((a, b) => {
+			const bTotal = b.info.reduce((prve, cur) => {
+				return prve + cur.number * 1;
+			}, 0);
+			return a + bTotal
+		}, 0)
+		return result
+	})
+	function printOrder(){
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+	.img {
+		width: 70rpx;
+		height: 70rpx;
+	}
+
+	.border-bottom {
+		border-color: rgb(240, 240, 240);
+	}
+	.line-th{
+		text-decoration: line-through;
+	}
+	.tag {
+		padding: 2rpx 8rpx;
+		border-radius: 8rpx;
+
+		&.no-pay {
+			background-color: rgb(170, 170, 170);
+			color: #fff;
+		}
+	}
+	.tui{
+		background-color: rgb(239, 239, 239);
+		border-radius: 4rpx;
+		margin-right: 6rpx;
+		color: #666;
+		padding: 0 4rpx;
+		font-size: 20rpx;
+	}
+	
+</style>
\ No newline at end of file
diff --git a/pagesOrder/detail/components/order.vue b/pagesOrder/detail/components/order.vue
new file mode 100644
index 0000000..fb6fc52
--- /dev/null
+++ b/pagesOrder/detail/components/order.vue
@@ -0,0 +1,66 @@
+<template>
+	<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
+		<view class="u-flex u-row-between">
+			<view>订单状态</view>
+			<view>{{returnStatus(data.status)}}</view>
+		</view>
+		<view class="u-flex u-row-between u-m-t-20">
+			<view>订单类型</view>
+			<view>堂食</view>
+		</view>
+		<view class="u-flex u-row-between u-m-t-20">
+			<view>桌位号</view>
+			<view>{{table.name}}</view>
+		</view>
+		<view class="u-flex u-row-between u-m-t-20">
+			<view>就餐人数</view>
+			<view>{{seatFee.totalNumber}}</view>
+		</view>
+		<view class="u-flex u-row-between u-m-t-20">
+			<view>支付方式</view>
+			<view></view>
+		</view>
+		<view class="u-flex u-row-between u-m-t-20">
+			<view>预约时间</view>
+			<view></view>
+		</view>
+		<view class="u-flex u-row-between u-m-t-20">
+			<view>下单时间</view>
+			<view ><up-text v-if="data.createdAt" mode="date" :text="data.createdAt"></up-text></view>
+		</view>
+		<view class="u-flex u-row-between u-m-t-20">
+			<view>订单编号</view>
+			<view>{{data.orderNo}}</view>
+		</view>
+		<view class="u-flex u-row-between u-m-t-20">
+			<view>商家备注</view>
+			<my-button plain shape="circle" :width="160" :height="60">编辑</my-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import orderEnum from '@/commons/orderEnum.js'
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: () => {}
+		},
+		table:{
+			type: Object,
+			default: () => {}
+		},
+		seatFee:{
+			type: Object,
+			default: () => {totalNumber:0}
+		}
+	})
+	
+	function returnStatus(status){
+		const item=orderEnum.status.find(v=>v.key==status)
+		return item?item.label:''
+	}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/pagesOrder/detail/components/step.vue b/pagesOrder/detail/components/step.vue
new file mode 100644
index 0000000..8de801f
--- /dev/null
+++ b/pagesOrder/detail/components/step.vue
@@ -0,0 +1,26 @@
+<template>
+	<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
+		<up-steps :dot="true" current="0" direction="column">
+			<up-steps-item title="2024-09-02 09:19" :itemStyle="itemStyle" desc="[东风(id:124413)]使用代客下单提交。(未打印预结单)">
+			</up-steps-item>
+			<up-steps-item title="2024-09-02 09:19" desc="[东风(id:124413)]使用代客下单提交。(未打印预结单)">
+			</up-steps-item>
+		</up-steps>
+
+	</view>
+
+</template>
+
+<script setup>
+	import {
+		reactive
+	} from 'vue';
+	import color from '@/commons/color.js'
+	const itemStyle = reactive({
+		color: 'rgb(255,0,0)'
+	})
+	
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/pagesOrder/detail/components/tuicai.vue b/pagesOrder/detail/components/tuicai.vue
new file mode 100644
index 0000000..a03d2df
--- /dev/null
+++ b/pagesOrder/detail/components/tuicai.vue
@@ -0,0 +1,100 @@
+<template>
+	<my-model title="退菜" ref="model" @close="onModelClose" @open="onModelOpen">
+		<template #desc>
+			<view class="u-p-30 u-text-left">
+				<view>
+					{{data.name}}
+				</view>
+				<view class="u-flex  u-m-t-32">
+					<up-number-box :buttonSize="44" :inputWidth="220" v-model="number"></up-number-box>
+				</view>
+				<view class="u-m-t-32">
+					<view class="u-font-24">
+						<text class="color-999">退菜理由</text>
+						<text class="color-red">*</text>
+					</view>
+					<view class="u-flex u-flex-wrap u-m-t-24">
+						<view class="u-flex u-m-r-16 u-m-b-16"  v-for="(item,index) in tags" :key="index">
+							<up-tag  @click="changeTagSel(item)" :text="item.label" plain v-if="item.checked"> </up-tag>
+							<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#999" :text="item.label" plain v-else> </up-tag>
+						</view>
+					</view>
+					<view class="u-m-t-24">
+						<up-input placeholder="备注"></up-input>
+					</view>
+				</view>
+			</view>
+		</template>
+		<template #btn>
+			<view class="u-p-t-18 u-p-l-30 u-p-r-30 u-p-b-30">
+				<my-button box-shadow shape="circle" @tap="confirm">确认退菜</my-button>
+				<view class="u-m-t-10">
+					<my-button @tap="toggleModelShow" shape="circle" bgColor="#fff" type="cancel" box-shadow>取消</my-button>
+				</view>
+			</view>
+			
+		</template>
+	</my-model>
+</template>
+
+<script setup>
+	import {
+		ref,
+		watch
+	} from 'vue';
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: () => {}
+		},
+		show: {
+			type: Boolean,
+			default: false
+		}
+	})
+	const emits = defineEmits(['update:show','confirm'])
+	let model = ref(null)
+	let modelShow = ref(props.show)
+	let number = ref(1)
+	const tags=ref([{label:"点错",checked:false},{label:"不想要了",checked:false} ,{label:"食材不足",checked:false} ,{label:"等待时间过长",checked:false}])
+	function changeTagSel(item){
+		item.checked=!item.checked
+	}
+	watch(() => props.show, (newval) => {
+		modelShow.value = newval
+	})
+	watch(() => modelShow.value, (newval) => {
+		emits('update:show', newval)
+		if (newval) {
+			open()
+		} else {
+			close()
+		}
+	})
+	
+	function toggleModelShow(show){
+		modelShow.value=show?true:false
+	}
+
+	function onModelClose() {
+		modelShow.value = false
+	}
+
+	function onModelOpen() {
+		modelShow.value = true
+	}
+
+	function open() {
+		model.value.open()
+	}
+
+	function close() {
+		model.value.close()
+	}
+	function confirm(){
+		emits('confirm')
+	}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/pagesOrder/detail/components/user.vue b/pagesOrder/detail/components/user.vue
new file mode 100644
index 0000000..2ad40f5
--- /dev/null
+++ b/pagesOrder/detail/components/user.vue
@@ -0,0 +1,40 @@
+<template>
+	<view class="u-font-28 default-box-padding u-relative bg-fff border-r-12 u-overflow-hide">
+		<view class="change u-absolute my-bg-main color-fff  left-top" >切换</view>
+		<view class="u-flex	u-row-between u-m-t-20 border-bottom u-p-b-20">
+			<view class="u-flex">
+				<up-avatar :size="30"></up-avatar>
+				<view class="color-666 u-m-l-30">未绑定手机号</view>
+			</view>
+			<view>
+				<my-button :height="60" plain shape="circle">他的订单</my-button>
+			</view>
+		</view>
+		<view class="u-flex u-m-t-20 u-row-between">
+			<view class="">
+				<view class="font-bold">0.00</view>
+				<view class="color-666 u-m-t-10">余额</view>
+			</view>
+			<view class="">
+				<view class="font-bold">0.00</view>
+				<view class="color-666 u-m-t-10">积分</view>
+			</view>
+			<view class="">
+				<view class="font-bold">0.00</view>
+				<view class="color-666 u-m-t-10">已消费</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+.change{
+	padding: 4rpx 16rpx;
+	border-radius: 0 0 16rpx 0;
+	z-index: 2;
+}	
+
+</style>
\ No newline at end of file
diff --git a/pagesOrder/detail/detail.vue b/pagesOrder/detail/detail.vue
new file mode 100644
index 0000000..674e62d
--- /dev/null
+++ b/pagesOrder/detail/detail.vue
@@ -0,0 +1,154 @@
+<template>
+	<view class="min-page bg-gray u-font-28 u-p-30">
+		<user-vue></user-vue>
+		<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
+			<text class="color-666">桌位号：</text>
+			<text class="font-bold">{{options.name}}</text>
+		</view>
+		<goods-list :data="orderDetail.goodsList" :seatFee="orderDetail.seatFee.totalAmount"
+			@tuicai="onTuiCai"></goods-list>
+		<extra-vue :data="orderDetail.seatFee"></extra-vue>
+		<order-vue :data="orderDetail.info" :table="options" :seatFee="orderDetail.seatFee"></order-vue>
+		<step-vue></step-vue>
+		<view style="height: 200rpx;"></view>
+		<view class="u-fixed bottom bg-fff ">
+			<view class="u-flex u-abso">
+				<template v-if="orderDetail.info.status=='unpaid'">
+					<view class="u-flex-1">
+						<my-button @tap="diancan" color="#fff" bgColor="rgb(57,53,52)" borderRadius="100rpx 0 0 100rpx"
+							shape="circle" plain type="primary">加菜</my-button>
+					</view>
+					<view class="u-flex-1">
+						<my-button @tap="toPay" borderRadius="0 100rpx 100rpx 0" shape="circle"
+							type="primary">结账</my-button>
+					</view>
+				</template>
+				
+			</view>
+		</view>
+
+		<tuicai-vue @confirm="tuicaiConfirm" v-model:show="tuicai.show" :data="tuicai.selGoods"></tuicai-vue>
+	</view>
+</template>
+
+<script setup>
+	import * as Api from '@/http/yskApi/Instead.js'
+	import * as orderApi from '@/http/yskApi/order.js'
+	import userVue from './components/user.vue';
+	import orderVue from './components/order.vue';
+	import goodsList from './components/list.vue';
+	import stepVue from './components/step.vue';
+	import extraVue from './components/extra.vue';
+	import tuicaiVue from './components/tuicai.vue';
+	import go from '@/commons/utils/go.js'
+	import {
+		onLoad,
+		onShow,
+		onHide
+	} from '@dcloudio/uni-app';
+	import {
+		reactive
+	} from 'vue';
+	import OrderDetail from './page.js'
+	const tuicai = reactive({
+		show: false,
+		selGoods: {}
+	})
+
+	function onTuiCai(goods, index) {
+		tuicai.show = true
+		tuicai.selGoods = goods
+	}
+
+	async function tuicaiConfirm() {
+		const res=await Api.$returnCart({
+			cartId: tuicai.selGoods.id,
+			tableId:options.tableId,
+		})
+		tuicai.selGoods.status='return'
+		tuicai.show = false
+	}
+	const uiPage = new OrderDetail()
+	setTimeout(() => {
+		uiPage.setVal('user', {
+			name: 1
+		})
+	}, 1500)
+
+	function diancan() {
+		go.to('PAGES_CREATE_ORDER', {
+			tableId: options.tableId,
+			tableName: options.name,
+			type: 'add'
+		})
+	}
+
+	function toPay() {
+		go.to('PAGES_CRESATE_ORDER_PAY', {
+			tableId: options.tableId,
+			tableName: options.name,
+			masterId: options.masterId,
+			orderId: orderDetail.info.id,
+			discount: 1
+		})
+	}
+
+	const orderDetail = reactive({
+		goodsList: [],
+		info: {},
+		seatFee: {
+			totalAmount: 0
+		}
+	})
+	const options = reactive({})
+	async function init() {
+		const res= await orderApi.tbOrderInfoDetail(options.id)
+		const masterId=res.masterId
+		options.masterId = res.masterId
+		if(res.status=='unpaid'){
+			const {
+				records,
+				seatFee
+			} = await Api.getCart({
+				masterId,
+				tableId:res.tableId
+			})
+			orderDetail.goodsList = records
+			orderDetail.seatFee = seatFee
+		}else{
+			orderDetail.goodsList = res.detailList
+		}
+		orderDetail.info = res
+	}
+
+	function watchEmit() {
+		uni.$off('orderDetail:update')
+		uni.$once('orderDetail:update', (newval) => {
+			console.log(newval);
+			init()
+		})
+	}
+	onShow(() => {
+		watchEmit()
+	})
+	onLoad((opt) => {
+		Object.assign(options, opt)
+		console.log(options);
+		init()
+	})
+</script>
+
+<style lang="scss" scoped>
+	.bottom {
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 68rpx;
+
+		.u-abso {
+			bottom: 84rpx;
+			left: 28rpx;
+			right: 28rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pagesOrder/detail/page.js b/pagesOrder/detail/page.js
new file mode 100644
index 0000000..10c3daa
--- /dev/null
+++ b/pagesOrder/detail/page.js
@@ -0,0 +1,23 @@
+import {
+	reactive, ref
+} from 'vue';
+function isSameType(a, b) {
+    return a instanceof b === true || b instanceof a === true;
+}
+class OrderDetail {
+	constructor(data) {
+		const user ={}
+		const table = {}
+		const goodsList =[]
+		const orderInfo = {}
+		this.data=reactive({
+			user,table,goodsList,orderInfo
+		})
+		Object.assign(this, data)
+	}
+	setVal(key,val){
+		this.data[key]=val
+	}
+}
+
+export default OrderDetail
\ No newline at end of file
diff --git a/pagesOrder/index/compoents/filter.vue b/pagesOrder/index/compoents/filter.vue
new file mode 100644
index 0000000..572fb71
--- /dev/null
+++ b/pagesOrder/index/compoents/filter.vue
@@ -0,0 +1,194 @@
+<template>
+	<view>
+		<view class="u-flex bg-fff u-p-l-28 u-p-r-28 u-row-between">
+			<view class="u-rela time-item tranistion-2" @click="changeTimeDataSel(index)"
+				:class="{active:timeData.sel==index}" v-for="(item,index) in timeData.list" :key="index">
+				{{item.label}}
+			</view>
+			<view class="u-rela time-item tranistion-2" @click="changeTimeDataSel(-1)"
+				:class="{active:timeData.sel==-1}">自定义</view>
+		</view>
+		<view class="u-m-t-2 bg-fff u-col-center u-flex u-p-l-28 u-p-r-28 u-p-t-30 u-row-between">
+			<view class="status-item " @click="changeStatusSel(index)" :class="{active:statusData.sel==index}"
+				v-for="(item,index) in statusData.list" :key="index">
+				{{item.label}}
+			</view>
+			<view class="status-item u-flex" @click="moreShowOpen">
+				<image src="@/pagesOrder/static/image/icon-search.svg" style="width: 38rpx;height: 30rpx;" mode="">
+				</image>
+			</view>
+		</view>
+		<view class="u-p-l-28 u-flex u-p-r-28 u-p-t-10  bg-gray" v-if="time.length">
+			<view class="time-area u-font-24  color-main u-flex">
+				<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="time[0]"></uni-dateformat>
+				<text class="u-p-l-10 u-p-r-10">至</text>
+				<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="time[1]"></uni-dateformat>
+			</view>
+		</view>
+		<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
+		<!-- 更多状态选择筛选 -->
+		<up-popup :round="10" :show="statusData.moreShow" :closeable="true" @close="moreShowHide">
+			<view class="u-text-center font-bold u-font-32 u-p-t-30">选择状态</view>
+			<view style="height: 20rpx;"></view>
+			<view class="u-p-30 all-list u-flex u-flex-wrap gap-20">
+				<view class="all-list-item" :class="{active:statusItemIndex==statusData.allListSel}" @click="changeAllListSel(statusItemIndex)" v-for="(statusItem,statusItemIndex) in statusData.allList" :key="statusItemIndex">
+					{{statusItem.label}}
+				</view>
+			</view>
+			<view class="u-flex u-p-t-30 u-p-b-30 u-p-l-20 u-p-r-20 gap-20">
+				<up-button @click="moreShowHide">取消</up-button>
+				<up-button type="primary" @click="moreShowHide">确定</up-button>
+			</view>
+		</up-popup>
+
+	</view>
+</template>
+
+<script setup>
+	import orderEnum from '@/commons/orderEnum.js'
+	import * as $time from '@/commons/utils/dayjs-time.js';
+	import {
+		reactive,
+		ref,
+		watch
+	} from 'vue';
+	const props = defineProps({
+		time: {
+			type: Array,
+			default: () => []
+		},
+		status: {
+			type: [String, Number],
+			default: ''
+		}
+	})
+	let datePicker = ref(null)
+	const emits = defineEmits(['update:time', 'update:status'])
+	// 示例使用
+	const today = $time.getTodayTimestamps();
+	const yesterday = $time.getYesterdayTimestamps();
+	const thisWeek = $time.getThisWeekTimestamps();
+	const thisMonth = $time.getThisMonthTimestamps();
+	const timeData = reactive({
+		list: [today, yesterday, thisWeek, thisMonth],
+		sel: 0
+	})
+
+	function changeTimeDataSel(i) {
+		timeData.sel = i
+		if (i == -1) {
+			datePicker.value.open()
+		}
+	}
+
+	watch(() => timeData.sel, (newval) => {
+		const data = timeData.list[newval]
+		if (newval != -1) {
+			emits('update:time', [data.start, data.end])
+		}
+	})
+
+	const statusData = reactive({
+		allList: orderEnum.status,
+		moreShow:false,
+		allListSel: -1,
+		list: [{
+				label: '全部',
+				value: ''
+			},
+			{
+				label: '待完成',
+				value: ''
+			},
+			{
+				label: '待退款',
+				value: ''
+			},
+			{
+				label: '未支付',
+				value: 'unpaid'
+			},
+			{
+				label: '已退款',
+				value: ''
+			}
+		],
+		sel: 0
+	})
+	function moreShowHide(){
+		statusData.moreShow=false
+	}
+	function moreShowOpen(){
+		statusData.moreShow=true
+	}
+	function changeStatusSel(i) {
+		statusData.sel = i
+	}
+
+	function datePickerConfirm(e) {
+		console.log(e);
+		emits('update:time', [e.start, e.end])
+	}
+	function changeAllListSel(i){
+		statusData.allListSel=i
+	}
+</script>
+
+<style lang="scss" scoped>
+	.status-item {
+		color: #666;
+		transition: all .2s ease-in-out;
+		padding-bottom: 24rpx;
+
+		&.active {
+			color: $my-main-color;
+		}
+	}
+	.all-list-item{
+		text-align: center;
+		width: 156rpx;
+		white-space: nowrap;
+		color: #666;
+		padding: 10rpx 20rpx;
+		border-radius: 8rpx;
+		transition: all .2s ease-in-out;
+		border: 1px solid #eee;
+		&.active {
+			color: $my-main-color;
+			border-color: $my-main-color;
+		}
+	}
+	.time-item {
+		color: #666;
+		padding-bottom: 20rpx;
+
+		&::after {
+			content: '';
+			display: block;
+			position: absolute;
+			height: 4rpx;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border-radius: 4rpx 4rpx 4rpx 4rpx;
+		}
+
+		&.active {
+			color: $my-main-color;
+			// font-size: 32rpx;
+			transform: scale(1.1);
+			transform-origin: center;
+			font-weight: 700;
+
+			&::after {
+				background: #318AFE;
+			}
+		}
+	}
+
+	.time-area {
+		background: #E6F0FF;
+		border-radius: 100px;
+		padding: 10rpx 20rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pagesOrder/index/compoents/order-item.vue b/pagesOrder/index/compoents/order-item.vue
new file mode 100644
index 0000000..71541de
--- /dev/null
+++ b/pagesOrder/index/compoents/order-item.vue
@@ -0,0 +1,120 @@
+<template>
+	<view class="bg-fff item" @click="toDetail">
+		<view class="u-flex u-p-b-22 border-bottom u-col-bottom u-row-between">
+			<view class="u-flex u-col-bottom">
+				<view class="u-font-40 color-333">{{data.tableName}}</view>
+				<view class="u-m-l-22">{{data.masterId}}</view>
+			</view>
+			<view class="u-flex">
+				<view>
+					<text :class="[data.status]">{{returnStatus(data.status)}}</text>
+				</view>
+				<view class="color-main u-m-l-24">
+					<text>
+						{{sendTypeFilter(data.sendType)}}
+					</text>
+				</view>
+			</view>
+		</view>
+		<view class="u-m-t-26">
+			<view class="u-flex u-col-bottom u-font-24 color-999">
+				<up-avatar :size="33"></up-avatar>
+				<view class="u-m-l-16">{{formatTime(data.createdAt)}}</view>
+			</view>
+			<view class="u-m-t-32">
+				<view class="u-font-32">1种商品，共1件</view>
+				<view class="border-bottom u-p-b-32">
+					<view class="u-flex u-row-between u-m-t-24" v-for="(item,index) in data.detailList" :key="index">
+						<view>
+							<view class="color-666"> {{item.productName}}</view>
+							<view class="color-999 u-font-24 u-m-t-8">
+								{{item.productSkuName}}
+							</view>
+						</view>
+						<view class="u-flex">
+							<view>×1</view>
+							<view class="u-m-l-24">￥15.00</view>
+						</view>
+					</view>
+				</view>
+				
+			</view>
+			<view class="u-flex u-row-between border-bottom u-m-t-32 u-p-b-32">
+				<view>订单备注</view>
+				<view>{{data.remark||'无'}}</view>
+			</view>
+			<view class="u-m-t-32">
+				<view class="u-flex u-row-right">
+					<text>小计￥</text>
+					<text class="font-bold u-font-32">{{data.orderAmount}}</text>
+				</view>
+				<view class="u-flex u-row-right u-m-t-24">
+					<view class="print">重新打印</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import dayjs from 'dayjs';
+	import orderEnum from '@/commons/orderEnum.js'
+	import go from '@/commons/utils/go.js'
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: () => {}
+		},
+		index: {
+			type: [String, Number],
+			default: 0
+		}
+	})
+	function formatTime(time){
+		return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
+	}
+	function returnStatus(status) {
+		const item = orderEnum.status.find(v => v.key == status)
+		return item ? item.label : ''
+	}
+
+	function sendTypeFilter(t) {
+		if (t) {
+			return orderEnum.sendType.find(item => item.key == t).label;
+		} else {
+			return t;
+		}
+	}
+	function toDetail(){
+		go.to('PAGES_ORDER_DETAIL',{
+			id:props.data.id
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+	.border-bottom {
+		border-bottom: 1rpx solid #E5E5E5;
+	}
+
+	.u-font-40 {
+		font-size: 40rpx;
+	}
+
+	.item {
+		padding: 16rpx 24rpx 32rpx 24rpx;
+		border-radius: 18rpx 18rpx 18rpx 18rpx;
+		margin-bottom: 32rpx;
+	}
+
+	.unpaid {
+		color: #FD7B49;
+	}
+	.print{
+		padding: 6rpx 14rpx 8rpx 18rpx;
+		border:1px solid $my-main-color;
+		color:$my-main-color;
+		font-size: 24rpx;
+		border-radius: 100rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pagesOrder/index/compoents/order-list.vue b/pagesOrder/index/compoents/order-list.vue
new file mode 100644
index 0000000..8c67aa7
--- /dev/null
+++ b/pagesOrder/index/compoents/order-list.vue
@@ -0,0 +1,31 @@
+<template>
+	<view class="list">
+		<view v-for="(item,index) in list" :key="index">
+			<order-item :data="item" :index="index"></order-item>
+		</view>
+		<view v-if="hasAjax&&!list.length">
+			<my-img-empty tips="亲，你还没有订单哦~"></my-img-empty>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import orderItem from './order-item.vue';
+	const props=defineProps({
+		list:{
+			type:Array,
+			default:()=>[]
+		},
+		hasAjax:{
+			type:Boolean,
+			default:false
+		}
+	})
+	
+</script>
+
+<style lang="scss" scoped>
+	.list {
+		padding: 32rpx 28rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pagesOrder/index/index.vue b/pagesOrder/index/index.vue
new file mode 100644
index 0000000..6b44641
--- /dev/null
+++ b/pagesOrder/index/index.vue
@@ -0,0 +1,65 @@
+<template>
+	<view class="min-page bg-gray u-font-28">
+		<view class="top">
+			<view class="search bg-fff u-p-t-32 u-p-l-28 u-p-r-28 u-p-b-32">
+				<up-search v-bind="search" v-model="search.val"></up-search>
+			</view>
+			<filter-vue v-model:time="pageData.order.query.createdAt"></filter-vue>
+		</view>
+		<order-list :hasAjax="pageData.order.hasAjax" :list="pageData.order.list"></order-list>
+	</view>
+</template>
+
+<script setup>
+	import * as Api from '@/http/yskApi/order.js'
+	import filterVue from './compoents/filter.vue';
+	import orderList from './compoents/order-list.vue';
+	import {
+		reactive, watch
+	} from 'vue';
+	const search = reactive({
+		val: '',
+		placeholder: '搜索单号/昵称/姓名/手机号码/商品名称',
+		shape: 'square',
+		inputStyle: {
+			borderRadius: '12rpx'
+		},
+		actionStyle: {
+			textAlign: 'right'
+		}
+	})
+
+	const pageData = reactive({
+		order: {
+			list: [],
+			hasAjax:false,
+			query: {
+				createdAt: [],
+				id: "",
+				orderNo: "",
+				orderType: "0",
+				page: 0,
+				pageSize: 10,
+				payType: "",
+				productName: "",
+				status: ""
+			}
+		}
+	})
+	watch(()=>pageData.order.query.createdAt,(newval)=>{
+		init()
+	})
+	async function init() {
+		const {content}=await Api.tbOrderInfoData(pageData.order.query)
+		pageData.order.hasAjax=true
+		pageData.order.list=content
+		console.log(content);
+	}
+	init()
+</script>
+
+<style>
+	.top {
+		background-color: #E5E5E5;
+	}
+</style>
\ No newline at end of file
diff --git a/pagesOrder/static/image/icon-search.svg b/pagesOrder/static/image/icon-search.svg
new file mode 100644
index 0000000..1438df0
--- /dev/null
+++ b/pagesOrder/static/image/icon-search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.091" height="15" viewBox="0 0 19.091 15"><defs><style>.a{fill:#318afe;}</style></defs><path class="a" d="M64.682,160H82.409a.682.682,0,1,1,0,1.364H64.682a.682.682,0,1,1,0-1.364Zm0,13.636H76.955a.682.682,0,0,1,0,1.364H64.682a.682.682,0,0,1,0-1.364ZM80.773,170.5l2.045,3.136a.682.682,0,1,1-1.091.818l-2.045-3.136a10.526,10.526,0,0,1-2.045.273,4.773,4.773,0,1,1,4.773-4.773A5.15,5.15,0,0,1,80.773,170.5Zm-3.136-.273a3.409,3.409,0,1,0-3.409-3.409A3.376,3.376,0,0,0,77.636,170.227Zm-12.955-3.409h5.455a.682.682,0,1,1,0,1.364H64.682a.682.682,0,0,1,0-1.364Z" transform="translate(-64 -160)"/></svg>
\ No newline at end of file