From 9681a18bd1507fc6ffe8f3c0da91907d4f9c5ede Mon Sep 17 00:00:00 2001
From: Kroytz <neko_chocola@qq.com>
Date: Fri, 24 Jul 2026 14:21:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor(order):=20=E8=AE=A2=E5=8D=95=E9=A1=B5?=
 =?UTF-8?q?=E9=87=8D=E6=96=B0=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yshop-drink-uniapp-vue3/pages.json            |   2 +
 yshop-drink-uniapp-vue3/pages/order/order.vue | 449 ++++++++++++------
 2 files changed, 314 insertions(+), 137 deletions(-)

diff --git a/yshop-drink-uniapp-vue3/pages.json b/yshop-drink-uniapp-vue3/pages.json
index f997788..89d5b76 100644
--- a/yshop-drink-uniapp-vue3/pages.json
+++ b/yshop-drink-uniapp-vue3/pages.json
@@ -23,6 +23,8 @@
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "订单",
+                "navigationBarBackgroundColor": "#fff3e6",
+                "backgroundColor": "#fff3e6",
                 "enablePullDownRefresh": true
             }
             
diff --git a/yshop-drink-uniapp-vue3/pages/order/order.vue b/yshop-drink-uniapp-vue3/pages/order/order.vue
index 2403f55..25ee559 100644
--- a/yshop-drink-uniapp-vue3/pages/order/order.vue
+++ b/yshop-drink-uniapp-vue3/pages/order/order.vue
@@ -1,220 +1,395 @@
 <template>
-	<uv-navbar
-	  :fixed="false"
-	  :title="title"
-	  left-arrow
-	  @leftClick="$onClickLeft"
-	/>
-	<view class="container order-page">
-		<view class="bg-white">
-			<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
+	<view class="order-page">
+		<uv-navbar
+			:fixed="false"
+			title="我的订单"
+			bgColor="transparent"
+			leftIcon=""
+		/>
+
+		<view class="order-tabs">
+			<uv-tabs
+				:list="tabList"
+				:current="current"
+				@change="change"
+				keyName="name"
+				:scrollable="false"
+				lineWidth="28"
+				lineHeight="6"
+				lineColor="#F28C38"
+				:activeStyle="{ color: '#2b2b2b', fontWeight: '700', fontSize: '28rpx' }"
+				:inactiveStyle="{ color: '#9a9590', fontSize: '28rpx' }"
+			/>
 		</view>
-		<view class="order-page__list d-flex flex-column w-100">
-			<view class="order-item" v-for="(item, index) in orders" :key="index">
-				<list-cell :hover="false">
-					<view class="w-100 d-flex align-items-center">
-						<view class="flex-fill d-flex flex-column">
-							<view class="font-size-lg text-color-base order-item__shop">
-								{{ item.shop.name }}
-							</view>
-							<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
-							<view class="font-size-sm text-color-assist">订单编号：{{ item.orderId }}</view>
-						</view>
-						<view class="font-size-lg text-color-primary">
-							{{ item.statusDto.title }}
+
+		<view class="order-list">
+			<uv-empty v-if="!orders.length" mode="order" text="暂无相关订单" />
+			<view
+				v-for="(item, index) in orders"
+				:key="index"
+				class="order-card"
+				@tap="detail(item.orderId)"
+			>
+				<view class="order-card__head">
+					<view class="order-card__shop">
+						<text class="order-card__shop-name">{{ item.shop.name }}</text>
+						<view class="order-card__tag" v-if="item.orderType">
+							{{ item.orderType === 'takeout' ? '外卖' : '自取' }}
 						</view>
 					</view>
-				</list-cell>
-				<list-cell :hover="false" last>
-					<view class="w-100 d-flex flex-column">
-						<view class="w-100 text-truncate font-size-lg text-color-base order-item__goods">
-							<view class="flex order-item__goods-row mb-2" v-for="(good,index) in item.cartInfo" :key="index">
-								<image :src="good.image" mode="aspectFill" class="order-item__thumb"></image>
-								<view class="flex flex-column">
-									<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
-									<view class="font-size-sm mt-1">{{ good.spec }}</view>
-									<view class="font-size-sm mt-2">×{{ good.number }}  ¥{{ good.price }}</view>
-								</view>
+					<text class="order-card__status">{{ item.statusDto.title }}</text>
+				</view>
+
+				<view class="order-card__meta">
+					<text>取餐号：{{ item.numberId || '--' }}</text>
+					<text>订单号：{{ item.orderId }}</text>
+				</view>
+
+				<view class="order-card__goods">
+					<view
+						v-for="(good, gIndex) in item.cartInfo"
+						:key="gIndex"
+						class="order-good"
+					>
+						<image
+							v-if="good.image"
+							:src="good.image"
+							mode="aspectFill"
+							class="order-good__img"
+						/>
+						<view v-else class="order-good__img order-good__img--placeholder" />
+						<view class="order-good__body">
+							<text class="order-good__name">{{ good.title }}</text>
+							<text v-if="good.spec" class="order-good__spec">{{ good.spec }}</text>
+							<view class="order-good__row">
+								<text>×{{ good.number }}</text>
+								<text class="order-good__price">¥{{ good.price }}</text>
 							</view>
 						</view>
-						<view class="d-flex justify-content-between align-items-center order-item__meta">
-							<view class="font-size-sm text-color-assist">
-								{{formatDateTime(item.createTime) }}
-							</view>
-							<view class="d-flex font-size-sm text-color-base align-items-center">
-								<view class="order-item__summary">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
-								<view class="font-size-lg">￥{{ item.payPrice }}</view>
-							</view>
-						</view>
-						<view class="d-flex align-items-center justify-content-end order-item__actions">
-							<button
-								v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
-								class="order-item__btn"
-								plain
-								size="mini"
-								@tap.stop="receive(item)"
-							>确认收到餐</button>
-							<button class="order-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
-						</view>
 					</view>
-				</list-cell>
+				</view>
+
+				<view class="order-card__footer">
+					<text class="order-card__time">{{ formatDateTime(item.createTime) }}</text>
+					<view class="order-card__pay">
+						<text>共{{ goodsNum(item.cartInfo) }}件，实付</text>
+						<text class="order-card__amount">￥{{ item.payPrice }}</text>
+					</view>
+				</view>
+
+				<view class="order-card__actions" @tap.stop>
+					<button
+						v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
+						class="order-card__btn order-card__btn--plain"
+						size="mini"
+						@tap="receive(item)"
+					>确认收到餐</button>
+					<button
+						class="order-card__btn order-card__btn--primary"
+						size="mini"
+						@tap="detail(item.orderId)"
+					>订单详情</button>
+				</view>
 			</view>
 		</view>
-		<uv-empty v-if="orders.length == 0" mode="order"></uv-empty>
 	</view>
 </template>
 
-
 <script setup>
-import {
-  ref,
-  computed
-} from 'vue'
+import { ref, computed } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
-import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
-import { formatDateTime,kmUnit } from '@/utils/util'
-import {
-  orderGetOrders,
-  orderReceive
-} from '@/api/order'
+import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
+import { formatDateTime } from '@/utils/util'
+import { orderGetOrders, orderReceive } from '@/api/order'
+
 const main = useMainStore()
 const { isLogin } = storeToRefs(main)
-const title = ref('我的订单')
 
 const page = ref(1)
 const pageSize = ref(10)
 const orders = ref([])
-const tabList = ref([{
-			type: -1,
-			name: '全部',
-		}, {
-			type: 0,
-			name: '待支付',
-		}, {
-			type: 1,
-			name: '进行中'
-		}, {
-			type: 4,
-			name: '已完成'
-		}, {
-			type: -3,
-			name: '退款单'
-		}]
-)
+const tabList = ref([
+	{ type: -1, name: '全部' },
+	{ type: 0, name: '待支付' },
+	{ type: 1, name: '进行中' },
+	{ type: 4, name: '已完成' },
+	{ type: -3, name: '退款单' }
+])
 const current = ref(0)
 const type = ref(-1)
 
-const goodsNum = computed(() => { //计算单个饮品添加到购物车的数量
+const goodsNum = computed(() => {
 	return (goods) => {
-		let num = 0;
-		goods.forEach(good => num += parseInt(good.number))
-		return num;
+		let num = 0
+		;(goods || []).forEach((good) => (num += parseInt(good.number)))
+		return num
 	}
 })
+
 onLoad(() => {
-	if(!isLogin.value) {
-		uni.navigateTo({url: '/pages/components/pages/login/login'})
+	if (!isLogin.value) {
+		uni.navigateTo({ url: '/pages/components/pages/login/login' })
 	}
 	getOrders(false)
 })
+
 onPullDownRefresh(() => {
-	 getOrders(false)
+	getOrders(true)
 })
+
 onReachBottom(() => {
 	getOrders(false)
 })
 
-// tab栏切换
 const change = (e) => {
-	//console.log('e;',e.type)
-	//console.log('e.index;',e.index)
 	type.value = e.type
+	current.value = e.index
 	getOrders(true)
 }
 
-const getOrders = async(isRefresh = false) => {
-	uni.showLoading({
-		title: '加载中'
-	})
-	if(isRefresh) {
+const getOrders = async (isRefresh = false) => {
+	uni.showLoading({ title: '加载中' })
+	if (isRefresh) {
 		orders.value = []
 		page.value = 1
 	}
-	let ordersData = await orderGetOrders({page:page.value, limit:pageSize.value,type:type.value});
-
-	if(ordersData) {
+	const ordersData = await orderGetOrders({
+		page: page.value,
+		limit: pageSize.value,
+		type: type.value
+	})
+	if (ordersData) {
 		orders.value = orders.value.concat(ordersData)
 		page.value += 1
 	}
-	uni.stopPullDownRefresh();
+	uni.stopPullDownRefresh()
 	uni.hideLoading()
 }
+
 const detail = (id) => {
 	uni.navigateTo({
 		url: '/pages/components/pages/orders/detail?id=' + id
 	})
 }
-// 确认收到货
-const receive  = async(order) => {
-	let data = await orderReceive({uni:order.orderId});
+
+const receive = async (order) => {
+	const data = await orderReceive({ uni: order.orderId })
 	if (data) {
 		await getOrders(true)
 	}
 }
-	
-
 </script>
 
 <style lang="scss" scoped>
-// 订单页局部 token（与 uni.scss 全局变量配合）
-$order-list-padding-x: $spacing-row-base;
-$order-list-padding-bottom: 0;
-$order-item-gap: $spacing-row-lg;
-$order-section-gap: $spacing-row-base;
-$order-btn-gap: $spacing-row-base;
-$order-summary-gap: $spacing-row-base;
-$order-thumb-size: 160rpx;
-$order-thumb-radius: 8rpx;
+$bg-top: #fff3e6;
+$bg-mid: #fff8f0;
+$bg-bottom: #ffffff;
+$accent: #f28c38;
+$accent-deep: #ff6817;
+$text-main: #2b2b2b;
+$text-sub: #9a9590;
+$card-radius: 24rpx;
 
 .order-page {
-	--order-thumb-size: #{$order-thumb-size};
-
-	&__list {
-		padding: $order-list-padding-x;
-		padding-bottom: $order-list-padding-bottom;
-	}
+	min-height: 100vh;
+	padding: 0 24rpx 40rpx;
+	box-sizing: border-box;
+	background: linear-gradient(180deg, $bg-top 0%, $bg-mid 42%, $bg-bottom 100%);
 }
 
-.order-item {
-	margin-bottom: $order-item-gap;
+.order-tabs {
+	margin-bottom: 20rpx;
+	padding: 8rpx 8rpx 4rpx;
+	border-radius: $card-radius;
+	background: #fff;
+	box-shadow: 0 8rpx 24rpx rgba(180, 120, 60, 0.08);
+}
+
+.order-list {
+	padding-bottom: 20rpx;
+}
+
+.order-card {
+	margin-bottom: 20rpx;
+	padding: 28rpx 24rpx 20rpx;
+	border-radius: $card-radius;
+	background: #fff;
+	box-shadow: 0 8rpx 24rpx rgba(180, 120, 60, 0.08);
+
+	&__head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16rpx;
+	}
 
 	&__shop {
-		margin-bottom: $order-section-gap;
+		display: flex;
+		align-items: center;
+		gap: 12rpx;
+		min-width: 0;
+		flex: 1;
 	}
 
-	&__goods {
-		margin-bottom: $order-section-gap;
+	&__shop-name {
+		font-size: 30rpx;
+		font-weight: 700;
+		color: $text-main;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	&__thumb {
+	&__tag {
 		flex-shrink: 0;
-		width: var(--order-thumb-size);
-		height: var(--order-thumb-size);
-		margin-right: $spacing-row-lg;
-		border-radius: $order-thumb-radius;
+		padding: 4rpx 12rpx;
+		border-radius: 999rpx;
+		font-size: 20rpx;
+		color: #fff;
+		background: linear-gradient(90deg, #ff9b20, #ff6817);
+	}
+
+	&__status {
+		flex-shrink: 0;
+		font-size: 26rpx;
+		font-weight: 600;
+		color: $accent;
 	}
 
 	&__meta {
-		margin-bottom: $order-item-gap;
+		display: flex;
+		flex-direction: column;
+		gap: 6rpx;
+		margin-top: 12rpx;
+		font-size: 22rpx;
+		color: $text-sub;
 	}
 
-	&__summary {
-		margin-right: $order-summary-gap;
+	&__goods {
+		margin-top: 20rpx;
+		padding-top: 8rpx;
+		border-top: 1rpx solid #f3ebe3;
 	}
 
-	&__btn + &__btn {
-		margin-left: $order-btn-gap;
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16rpx;
+		margin-top: 16rpx;
+	}
+
+	&__time {
+		font-size: 22rpx;
+		color: $text-sub;
+	}
+
+	&__pay {
+		display: flex;
+		align-items: baseline;
+		gap: 8rpx;
+		font-size: 22rpx;
+		color: $text-main;
+	}
+
+	&__amount {
+		font-size: 32rpx;
+		font-weight: 700;
+		color: $accent-deep;
+	}
+
+	&__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 16rpx;
+		margin-top: 20rpx;
+		padding-top: 16rpx;
+		border-top: 1rpx solid #f3ebe3;
+	}
+
+	&__btn {
+		margin: 0;
+		padding: 0 28rpx;
+		height: 56rpx;
+		line-height: 52rpx;
+		border-radius: 999rpx;
+		font-size: 24rpx;
+
+		&::after {
+			border: none;
+		}
+
+		&--plain {
+			color: $accent;
+			background: #fff;
+			border: 2rpx solid $accent !important;
+		}
+
+		&--primary {
+			color: #fff;
+			background: linear-gradient(90deg, #ff9b20, #ff6817);
+			border: none;
+		}
+	}
+}
+
+.order-good {
+	display: flex;
+	padding: 16rpx 0;
+
+	&__img {
+		width: 128rpx;
+		height: 128rpx;
+		margin-right: 20rpx;
+		border-radius: 18rpx;
+		flex-shrink: 0;
+		background: #fff3e6;
+
+		&--placeholder {
+			background: linear-gradient(135deg, #fff3e6, #f5e6d4);
+		}
+	}
+
+	&__body {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__name {
+		font-size: 28rpx;
+		font-weight: 700;
+		color: $text-main;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__spec {
+		margin-top: 8rpx;
+		font-size: 22rpx;
+		color: $text-sub;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: auto;
+		padding-top: 10rpx;
+		font-size: 24rpx;
+		color: $text-sub;
+	}
+
+	&__price {
+		font-size: 28rpx;
+		font-weight: 700;
+		color: $text-main;
 	}
 }
 </style>