From b62851e377caef54d8dd3e7004384245116e2fc3 Mon Sep 17 00:00:00 2001
From: tianyi <13521030702@163.com>
Date: Thu, 9 Apr 2026 17:18:06 +0800
Subject: [PATCH] 11

---
 package2/shop/merchantCenter.vue       | 464 +++++++++++++++++++++++++
 package2/shop/merchantRegister.vue     |   9 +
 package2/shop/shopBill.vue             | 193 ++++++++++
 package2/shop/shopOrderList.vue        | 330 ++++++++++++++++++
 package2/shop/shopSettlementDetail.vue |  64 +++-
 5 files changed, 1058 insertions(+), 2 deletions(-)
 create mode 100644 package2/shop/merchantCenter.vue
 create mode 100644 package2/shop/merchantRegister.vue
 create mode 100644 package2/shop/shopBill.vue
 create mode 100644 package2/shop/shopOrderList.vue

diff --git a/package2/shop/merchantCenter.vue b/package2/shop/merchantCenter.vue
new file mode 100644
index 0000000..66e1ad4
--- /dev/null
+++ b/package2/shop/merchantCenter.vue
@@ -0,0 +1,464 @@
+<template>
+	<!-- 商家中心 -->
+	<view class="page1">
+		<view class="title">
+			<view class="title-sreach">
+				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
+					<uni-icons type="left" size="28"></uni-icons>
+				</view>
+				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
+					商家中心
+				</view>
+			</view>
+		</view>
+		<view class="shop-title">
+			<view class="title1">
+				<img :src="shop.shopIcon" alt="" />
+			</view>
+			<view class="title2">
+				<view class="title22">
+					{{shop.shopName}}
+				</view>
+				<view class="title33" @tap="updateStatus">
+					{{businessStatus == '1'?'暂停营业':'正常营业'}}
+					<uni-icons type="right" size="12"></uni-icons>
+				</view>
+			</view>
+		</view>
+		<view class="shop-order">
+			<view class="order1">
+				待办事项
+			</view>
+			<view class="order2">
+				<view class="order22">
+					<view class="order33" @tap="goDetail('db',3)">
+						<view class="order44">
+							0
+						</view>
+						<view class="order55">
+							待接单
+						</view>
+					</view>
+					<view class="order33" @tap="goDetail('db',4)">
+						<view class="order44">
+							0
+						</view>
+						<view class="order55">
+							待取货
+						</view>
+					</view>
+					<view class="order33" @tap="goDetail('db',5)">
+						<view class="order44">
+							0
+						</view>
+						<view class="order55">
+							待送达
+						</view>
+					</view>
+				</view>
+				<view class="order22">
+					<view class="order33" @tap="goDetail('db',2)">
+						<view class="order44">
+							0
+						</view>
+						<view class="order55">
+							待消费
+						</view>
+					</view>
+					<view class="order33" @tap="goDetail('db',7)">
+						<view class="order44">
+							0
+						</view>
+						<view class="order55">
+							待退款
+						</view>
+					</view>
+					<view class="order33" @tap="goDetail('db',11)">
+						<view class="order44">
+							0
+						</view>
+						<view class="order55">
+							待售后
+						</view>
+					</view>
+					<view class="order33" @tap="goDetail('pj')">
+						<view class="order44">
+							0
+						</view>
+						<view class="order55">
+							待回复差评
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="shop-order">
+			<view class="order1" style="display: flex;">
+				<view style="flex: 1;">
+					今日实时数据
+				</view>
+				<view @tap="goDetail('tj')">
+					更多
+					<uni-icons type="right" size="12"></uni-icons>
+				</view>
+			</view>
+			<view class="data2">
+				<view class="data22">
+					<view class="data222">
+						0
+					</view>
+					<view class="data333">
+						今日订单
+					</view>
+				</view>
+				<view class="data22">
+					<view class="data222">
+						0
+					</view>
+					<view class="data333">
+						营业额
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="shop-order">
+			<view class="order1">
+				必备工具
+			</view>
+			<view class="menu2">
+				<view class="menu22" @tap="goDetail('sp')">
+					<view class="menu33">
+						<img src="/static/images/dingdan/dd0.png" alt="" />
+					</view>
+					<view class="menu44">
+						商品管理
+					</view>
+				</view>
+				<view class="menu22" @tap="goDetail('dp')">
+					<view class="menu33">
+						<img src="/static/images/dingdan/dd1.png" alt="" />
+					</view>
+					<view class="menu44">
+						店铺管理
+					</view>
+				</view>
+				<view class="menu22" @tap="goDetail('dd')">
+					<view class="menu33">
+						<img src="/static/images/dingdan/dd2.png" alt="" />
+					</view>
+					<view class="menu44">
+						订单管理
+					</view>
+				</view>
+				<view class="menu22" @tap="goDetail('zd')">
+					<view class="menu33">
+						<img src="/static/images/dingdan/dd3.png" alt="" />
+					</view>
+					<view class="menu44">
+						账单结算
+					</view>
+				</view>
+				<view class="menu22" @tap="goDetail('pj')">
+					<view class="menu33">
+						<img src="/static/images/dingdan/dd4.png" alt="" />
+					</view>
+					<view class="menu44">
+						顾客评价
+					</view>
+				</view>
+				<view class="menu22" @tap="goDetail('hx')">
+					<view class="menu33" style="width: 100%;height: 56rpx;">
+						<uni-icons type="scan" size="25"></uni-icons>
+					</view>
+					<view class="menu44">
+						扫码核销
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import base from '@/utils/ossUploadFile/base64.js';
+	export default {
+		data() {
+			return {
+				menuButtonInfo: {},
+				businessStatus:1,
+				shop:{}
+			}
+		},
+		onShow() {
+			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+		},
+		onLoad(option) {
+			this.getBusinessStatus()
+		},
+		methods: {
+			//获取营业状态
+			getBusinessStatus(){
+				this.tui.request("/app/shoptakeaway/getByShopId", "GET", {
+					shopId: uni.getStorageSync('shopId')
+				}, false, true).then((res) => {
+					if (res.code == 200) {
+						this.shop = res.result
+						this.shop.shopIcon = uni.getStorageSync('shopIcon')
+						this.businessStatus = res.result.status
+					} else {
+						this.tui.toast(res.message)
+					}
+					uni.hideLoading()
+				}).catch((res) => {})
+			},
+			//更改营业状态
+			updateStatus(){
+				let that = this;
+				uni.showModal({
+					title: '提示',
+					content: '要更改营业状态吗？',
+					success: function (res1) {
+						if (res1.confirm) {
+							that.tui.request("/app/shoptakeaway/update", "post", {
+								shopId: uni.getStorageSync('shopId'),
+								status:that.businessStatus == "1"?'0':that.businessStatus == "0"?'1':'2'
+							}, false, true).then((res) => {
+								if (res.code == 200) {
+									uni.showToast("更改成功")
+									that.businessStatus = that.businessStatus == "1"?'0':that.businessStatus == "0"?'1':'2'
+								} else {
+									that.tui.toast(res.message)
+								}
+								uni.hideLoading()
+							}).catch((res) => {})
+						}
+					}
+				});
+				
+			},
+			goDetail(type,index) {
+				let url = ''
+				switch (type) {
+					case 'tj':
+						url = '/package1/myCenter/dataStatistics'
+						break;
+					case 'db':
+						url = '/package1/shop/shopOrderList?index=' + index
+						break;
+					case 'sp':
+						url = '/package1/myCenter/goodsList'
+						break;
+					case 'dp':
+						url = ''
+						break;
+					case 'dd':
+						url = '/package1/shop/shopOrderList'
+						break;
+					case 'zd':
+						url = '/package2/shop/shopBill'
+						break;
+					case 'pj':
+						let item = {
+							shopScore:uni.getStorageSync('shopScore'),
+							id:uni.getStorageSync('id')
+						}
+						url = '/package1/group/shopEvaluate?item=' + JSON.stringify(item)
+						break;
+					case 'hx':
+						this.scanCodeAdd()
+						break;
+					default:
+				}
+				uni.navigateTo({
+					url: url
+				})
+			},
+			//扫一扫功能
+			scanCodeAdd() {
+				let that = this;
+				uni.scanCode({
+					success: (res) => {
+						if (res.scanType == "QR_CODE") { //二维码
+							console.log('二维码',res)
+							// let shopId = base.decode(res.result.split(',')[1])
+							// if (shopId == uni.getStorageSync('shopId').substring('10', '12')) {
+							// 	that.productId = base.decode(res.result.split(',')[0])
+							// 	that.toggle('bottom', base.decode(res.result.split(',')[0]));
+								
+							// } else {
+							// 	that.tui.toast('您的店铺中暂无该商品！')
+							// }
+						} else {
+							console.log('条形码',res)
+			// 				that.tui.request("/app/product/getByBarcode", "POST", {
+			// 					barcode: res.result
+			// 				}, false, true).then((res1) => {
+			// 					if (res1.code == 200) {
+			// 						that.productId = res1.result[0].id
+			// 						if (res1.result == '') {
+			// 							that.tui.toast('您的店铺中暂无该商品！')
+			// 						} else {
+			// 							that.toggle('bottom', res1.result[0].id);
+										
+			// 						}
+			
+			// 					} else {
+			// 						that.tui.toast(res.message)
+			// 					}
+			// 				}).catch((res) => {
+			// 					that.tui.toast(res)
+			// 				})
+						}
+			
+					},
+					fail: (res) => {
+						uni.showToast({
+							title: '扫描失败',
+							icon: 'none'
+						})
+					}
+				})
+			},
+			back() {
+				uni.navigateBack()
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		width: 100%;
+		height: 100%;
+		font-size: 24rpx;
+		background: #F5F8F5;
+		color: #00231C;
+	}
+
+	.page1 {
+		width: 100%;
+		height: 100%;
+		font-size: 24rpx;
+		position: relative;
+	}
+
+	.title {
+		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
+		width: 100%;
+		height: 20%;
+	}
+
+	.title-sreach {
+		width: 100%;
+		display: flex;
+		height: 200rpx;
+		position: relative;
+	}
+
+	.back-btn {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+
+	.title-name {
+		padding-top: 110rpx;
+		font-size: 36rpx;
+		font-weight: 700;
+		flex: 1;
+		text-align: center;
+	}
+
+	.shop-title {
+		width: 95%;
+		margin: -130rpx auto 0;
+		padding: 20rpx;
+		background: #fff;
+		border-radius: 20rpx;
+		display: flex;
+		font-size: 28rpx;
+		font-weight: 700;
+	}
+
+	.title1 {
+		width: 70rpx;
+		height: 70rpx;
+
+		img {
+			width: 100%;
+			height: 100%;
+			border-radius: 10rpx;
+		}
+	}
+	.title2{
+		    flex: 1;
+		    line-height: 70rpx;
+		    display: flex;
+	}
+	.title22{
+		    flex: 1;
+		    padding-left: 20rpx;
+	}
+	.shop-order{
+		width: 95%;
+		margin: 20rpx auto 0;
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 0 20rpx 0;
+	}
+	.order1{
+		height: 70rpx;
+		line-height: 70rpx;
+		font-size: 28rpx;
+		font-weight: 700;
+		border-bottom: 1px solid #eee;
+	}	
+	.order22{
+		display: flex;
+		height: 100rpx;
+		padding-top: 20rpx;
+	}
+	.order33{
+		flex: 1;
+		text-align: center;
+	}
+	.order44{
+		font-size: 28rpx;
+		font-weight: 700;
+	}
+	.data2{
+		    display: flex;
+		    height: 140rpx;
+		    text-align: center;
+		    padding-top: 20rpx;
+	}
+	.data22{
+		flex: 1;
+	}
+	.data222{
+		    font-size: 36rpx;
+		    font-weight: 700;
+		    padding-bottom: 20rpx;
+	}
+	.menu2{
+		display: flex;
+		flex-wrap: wrap;
+		text-align: center;
+		padding-top: 20rpx;
+	}
+	.menu22{
+		width: 25%;
+		    height: 120rpx;
+	}
+	.menu33{
+		img{
+			width: 50rpx;
+			    height: 50rpx;
+			background-size: 100%;
+		}
+	}
+	.menu44{
+		height: 40rpx;
+		line-height: 40rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/package2/shop/merchantRegister.vue b/package2/shop/merchantRegister.vue
new file mode 100644
index 0000000..237f36c
--- /dev/null
+++ b/package2/shop/merchantRegister.vue
@@ -0,0 +1,9 @@
+<template>
+	<!-- 商家注册 -->
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/package2/shop/shopBill.vue b/package2/shop/shopBill.vue
new file mode 100644
index 0000000..1fd0ade
--- /dev/null
+++ b/package2/shop/shopBill.vue
@@ -0,0 +1,193 @@
+<template>
+	<!-- 商家账单列表 -->
+	<view class="page1">
+		<view class="title">
+			<view class="title-sreach">
+				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
+					<uni-icons type="left" size="28"></uni-icons>
+				</view>
+				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
+					账单结算
+				</view>
+			</view>
+		</view>
+		<view style="margin: -120rpx auto 0;">
+			<view class="">
+				<view class="content11">
+					2026
+				</view>
+				<view class="box1" @tap="goDetail">
+					<view class="content22">
+						<view class="">
+							10/25-10/25账单
+						</view>
+						<view class="">
+							共<text>0</text>单
+							<uni-icons type="right" size="12"></uni-icons>
+						</view>
+					</view>
+					<view style="border-bottom: 1px solid #eee;">
+						<view class="content33">
+							<view class="content44">
+								商品金额
+							</view>
+							<view class="">
+								$0.00
+							</view>
+						</view>
+						<view class="content33">
+							<view class="content44">
+								餐盒费
+							</view>
+							<view class="">
+								$0.00
+							</view>
+						</view>
+						<view class="content33">
+							<view class="content44">
+								活动成本
+							</view>
+							<view class="">
+								$0.00
+							</view>
+						</view>
+						<view class="content33">
+							<view class="content44">
+								平台服务费
+							</view>
+							<view class="">
+								$0.00
+							</view>
+						</view>
+					</view>
+					<view class="">
+						<view class="content33">
+							<view class="content44">
+								结算金额
+							</view>
+							<view class="">
+								$0.00
+							</view>
+						</view>
+						<view class="content33">
+							<view class="content44">
+								本期期初
+							</view>
+							<view class="">
+								$0.00
+							</view>
+						</view>
+						<view class="content33">
+							<view class="content44">
+								实际打款金额
+							</view>
+							<view class="">
+								$0.00
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				menuButtonInfo: {}
+			}
+		},
+		onShow() {
+			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+		},
+		onLoad(option) {
+			
+		},
+		methods: {
+			goDetail(){
+				uni.navigateTo({
+					url:'/package2/shop/shopSettlementDetail'
+				})
+			},
+			back() {
+				uni.navigateBack()
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		width: 100%;
+		height: 100%;
+		font-size: 24rpx;
+		background: #F5F8F5;
+		color: #00231C;
+	}
+	
+	.page1 {
+		width: 100%;
+		height: 100%;
+		font-size: 24rpx;
+		position: relative;
+	}
+	
+	.title {
+		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
+		width: 100%;
+		height: 20%;
+	}
+	
+	.title-sreach {
+		width: 100%;
+		display: flex;
+		height: 200rpx;
+		position: relative;
+	}
+	
+	.back-btn {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+	
+	.title-name {
+		padding-top: 110rpx;
+		font-size: 36rpx;
+		font-weight: 700;
+		flex: 1;
+		text-align: center;
+	}
+	.box1 {
+		width: 95%;
+		margin: 0 auto 20rpx;
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 20rpx;
+	}
+	.content11{
+		height: 70rpx;
+		line-height: 70rpx;
+		padding-left: 40rpx;
+		font-size: 28rpx;
+		font-weight: 700;
+	}
+	.content22{
+		display: flex;
+		height: 60rpx;
+		line-height: 44rpx;
+		border-bottom: 1px solid #eee;
+		font-size: 26rpx;
+		font-weight: 600;
+	}
+	.content33{
+		height: 50rpx;
+		line-height: 50rpx;
+		display: flex;
+	}
+	.content44{
+		flex: 1;
+	}
+</style>
\ No newline at end of file
diff --git a/package2/shop/shopOrderList.vue b/package2/shop/shopOrderList.vue
new file mode 100644
index 0000000..5c78aa9
--- /dev/null
+++ b/package2/shop/shopOrderList.vue
@@ -0,0 +1,330 @@
+<template>
+	<!-- 商家订单列表 -->
+	<view class="page1">
+		<view class="title">
+			<view class="title-sreach">
+				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
+					<uni-icons type="left" size="28"></uni-icons>
+				</view>
+				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
+					商家订单
+				</view>
+			</view>
+		</view>
+		<view class="title-tab">
+			<scroll-view class="status-scroll-view" scroll-x enable-flex :show-scrollbar="false"
+				:scroll-with-animation="true">
+				<view class="status-list">
+					<view v-for="(item, index) in statusList" :key="index" class="status-item"
+						:class="{ 'active': currentIndex == item.value }" @click="handleStatusClick(item.value,item.value)">
+						<text class="status-text">{{ item.name }}</text>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="box1" @tap="goDetail(item.id)" v-for="(item,index) in orderList" :key="index">
+			<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;">
+				<view>
+					{{'#' + item.numberCode}}
+				</view>
+				<view style="flex: 1;display: flex;padding-left: 20rpx;">
+					{{item.createTime | formatISOTime}} 
+					<!-- <text>已退款</text> -->
+				</view>
+				<view>
+					{{item.status == 0?'待支付':item.status == 1?' 待成团':item.status == 2?'待消费':item.status == 3?'待接单':item.status == 4?'待取货':item.status == 5?'待送达':item.status == 6?'已完成':item.status == 7?'待退款':item.status == 8?'已退款':item.status == 9?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}}
+				</view>
+			</view>
+			<view style="height: 120rpx;padding-top: 20rpx;">
+				<view style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;font-weight: 700;display: flex;">
+					商品 <text>共<text>{{item.goodsNum}}</text>件</text> <text style="color: red;flex: 1;text-align: right;">已出餐</text>
+				</view>
+				<view style="display: flex;" v-for="(item1,index1) in item.goodsList" :key="index">
+					<view style="flex: 1;">
+						{{item1.productName}}
+					</view>
+					<view style="width: 100rpx;">
+						{{'X' + item1.quantity}}
+					</view>
+					<view>
+						{{'￥'+ item1.price}}
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				loadStatus: 'more',
+				searchForm:{
+					pageNum:1,
+					pageSize:10,
+					shopName:'',
+					searchStatus:10,
+					shopId:uni.getStorageSync('shopId'),
+					regionId:JSON.parse(uni.getStorageSync('area')).id
+				},
+				totalPages: 1,
+				orderList:[],
+				currentIndex: 10,
+				menuButtonInfo: {},
+				statusList: [{
+						name: '全部',
+						value: 10,
+						checked: true
+					},{
+						name: '待支付',
+						value: 0,
+						checked: true
+					},
+					{
+						name: '待成团',
+						value: 1,
+						checked: false
+					},
+					{
+						name: '待消费',
+						value: 2,
+						checked: false
+					},
+					{
+						name: '待接单',
+						value: 3,
+						checked: false
+					},
+					{
+						name: '待取货',
+						value: 4,
+						checked: false
+					},
+					{
+						name: '待送达',
+						value: 5,
+						checked: false
+					},
+					{
+						name: '已完成',
+						value: 6,
+						checked: false
+					},
+					{
+						name: '待退款',
+						value: 7,
+						checked: false
+					},
+					{
+						name: '已退款',
+						value: 8,
+						checked: false
+					},
+					{
+						name: '已取消',
+						value: 9,
+						checked: false
+					},
+					{
+						name: '售后中',
+						value: 11,
+						checked: false
+					},
+					{
+						name: '已售后',
+						value: 12,
+						checked: false
+					}
+				]
+			}
+		},
+		onReachBottom() {
+			if (this.searchForm.pageNum >= this.totalPages) return;
+			// this.status = 'loading';
+			this.searchForm.pageNum++;
+			this.getOrderList();
+		},
+		filters:{
+			formatISOTime(isoString) {
+			  const date = new Date(isoString);
+			  const year = date.getFullYear();
+			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+			  const day = date.getDate().toString().padStart(2, '0');
+			  const hours = date.getHours().toString().padStart(2, '0');
+			  const minutes = date.getMinutes().toString().padStart(2, '0');
+			  const seconds = date.getSeconds().toString().padStart(2, '0');
+			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+			}
+		},
+		onShow() {
+			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+		},
+		onLoad(option) {
+			if(option.index){
+				this.searchForm.searchStatus = option.index
+				this.currentIndex = option.index
+			}
+			this.getList()
+		},
+		methods: {
+			getList(){
+				this.loadStatus = 'loading'
+				let that = this
+				that.tui.request("/mall/order/page", "POST", this.searchForm, false, false).then((res) => {
+					that.loadStatus = 'nomore';
+					if (res.code == 200) {
+						if (that.searchForm.pageNum == 1) {
+							that.orderList = res.result.records;
+						} else {
+							that.orderList = [...that.orderList, ...res.result.records]
+						}
+						for(let i=0;i<that.orderList.length;i++){
+							that.orderList[i].goodsNum = 0
+							for(let m=0;m<that.orderList[i].goodsList.length;m++){
+								that.orderList[i].goodsNum += that.orderList[i].goodsList[m].quantity
+							}
+						}
+						that.totalPages = res.result.pages; // pages = 总页数
+						that.$forceUpdate();
+					} else {
+						that.tui.toast(res.message);
+						return;
+					}
+					uni.hideLoading();
+				}).catch((res) => {});
+			},
+			goDetail(id){
+				uni.navigateTo({
+					url:'/package2/shop/orderDetail?id=' + id
+				})
+			},
+			handleStatusClick(index,value) {
+				if (this.currentIndex === index) return;
+				this.currentIndex = index;
+				this.searchForm.searchStatus = value
+				this.getList()
+			},
+			back() {
+				uni.navigateBack()
+			},
+		}
+	}
+</script>
+
+<style>
+	page {
+		width: 100%;
+		height: 100%;
+		font-size: 24rpx;
+		background: #F5F8F5;
+		color: #00231C;
+	}
+
+	.page1 {
+		width: 100%;
+		height: 100%;
+		font-size: 24rpx;
+		position: relative;
+	}
+
+	.title {
+		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
+		width: 100%;
+		height: 20%;
+	}
+
+	.title-sreach {
+		width: 100%;
+		display: flex;
+		height: 200rpx;
+		position: relative;
+	}
+
+	.back-btn {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+
+	.title-name {
+		padding-top: 110rpx;
+		font-size: 36rpx;
+		font-weight: 700;
+		flex: 1;
+		text-align: center;
+	}
+
+	.title-tab {
+		display: flex;
+		margin: -120rpx auto 0;
+	}
+
+	.status-scroll-view {
+		width: 100%;
+		white-space: nowrap;
+		/* 辅助滚动，与 flex 配合确保不换行 */
+		height: auto;
+	}
+
+	.status-list {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		align-items: center;
+		padding: 0 0;
+		/* 可根据设计添加左右留白，但会影响“一排5个”精准计算，故留白为0 */
+		min-height: 88rpx;
+		/* 保证内部项撑开高度 */
+	}
+
+	/* 每个状态项：宽度为屏幕宽度的1/5，保证一行正好显示5个，超出滚动 */
+	.status-item {
+		flex-shrink: 0;
+		width: 20vw;
+		/* 关键：屏幕宽度的1/5，正好一排5个 */
+		text-align: center;
+		padding: 20rpx 0;
+		position: relative;
+		box-sizing: border-box;
+		transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+		/* 点击反馈 */
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.status-text {
+		font-size: 28rpx;
+		color: #666666;
+		font-weight: normal;
+		line-height: 1.4;
+		transition: color 0.2s, font-weight 0.2s;
+	}
+
+	/* 激活状态样式 */
+	.status-item.active .status-text {
+		color: #ff6b35;
+		font-weight: 500;
+	}
+
+	/* 激活指示条（下划线） */
+	.status-item.active::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 40rpx;
+		height: 4rpx;
+		background-color: #ff6b35;
+		border-radius: 2rpx;
+		transition: width 0.2s ease;
+	}
+
+	.box1 {
+		width: 95%;
+		margin: 20rpx auto;
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 20rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/package2/shop/shopSettlementDetail.vue b/package2/shop/shopSettlementDetail.vue
index 054c02e..7f2d6ac 100644
--- a/package2/shop/shopSettlementDetail.vue
+++ b/package2/shop/shopSettlementDetail.vue
@@ -7,12 +7,65 @@
 					<uni-icons type="left" size="28"></uni-icons>
 				</view>
 				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
-					订单详情
+					账单详情
 				</view>
 			</view>
 		</view>
 		<view class="content">
-			
+			<view class="box1">
+				<view style="font-size: 14px;font-weight: 700;margin-bottom: 10px;">
+					2026-04-09
+				</view>
+				<view style="display: flex;font-weight: 700;">
+					<view style="flex: 1;">
+						结算金额：￥100.00
+					</view>
+					<view style="flex: 1;">
+						实际打款金额：￥100.00
+					</view>
+				</view>
+			</view>
+			<view class="box1">
+				<uni-table border stripe emptyText="暂无更多数据" >
+					<!-- 表头行 -->
+					<uni-tr>
+						<uni-th width="90" align="center">订单编号</uni-th>
+						<uni-th width="90" align="center">商品金额</uni-th>
+						<uni-th width="90" align="center">餐盒费</uni-th>
+						<uni-th width="90" align="center">平台抽佣</uni-th>
+						<uni-th width="90" align="center">结算金额</uni-th>
+					</uni-tr>
+					<!-- 表格数据行 -->
+					<uni-tr>
+						<uni-td align="center">5154564164654</uni-td>
+						<uni-td align="center">24</uni-td>
+						<uni-td align="center">1</uni-td>
+						<uni-td align="center">1</uni-td>
+						<uni-td align="center">22</uni-td>
+					</uni-tr>
+					<uni-tr>
+						<uni-td align="center">5154564164654</uni-td>
+						<uni-td align="center">24</uni-td>
+						<uni-td align="center">1</uni-td>
+						<uni-td align="center">1</uni-td>
+						<uni-td align="center">22</uni-td>
+					</uni-tr>
+					<uni-tr>
+						<uni-td align="center">5154564164654</uni-td>
+						<uni-td align="center">24</uni-td>
+						<uni-td align="center">1</uni-td>
+						<uni-td align="center">1</uni-td>
+						<uni-td align="center">22</uni-td>
+					</uni-tr>
+					<uni-tr>
+						<uni-td align="center">5154564164654</uni-td>
+						<uni-td align="center">24</uni-td>
+						<uni-td align="center">1</uni-td>
+						<uni-td align="center">1</uni-td>
+						<uni-td align="center">22</uni-td>
+					</uni-tr>
+				</uni-table>
+			</view>
 		</view>
 	</view>
 </template>
@@ -94,4 +147,11 @@
 	.content{
 		margin: -140rpx auto;
 	}
+	.box1 {
+		width: 95%;
+		margin: 20rpx auto;
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 20rpx;
+	}
 </style>
\ No newline at end of file