【类型】：feat

【原因】：【过程】：订单页 tab标签 swiper容器功能和 ui 【影响】： # 类型包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style：格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
【类型】：docs
2024-12-19 19:32:10 +08:00 · 2024-12-19 15:38:03 +08:00 · 2024-12-19 15:36:44 +08:00
5 changed files with 129 additions and 31 deletions
--- a/App.vue
+++ b/App.vue
@ -62,6 +62,18 @@
 	.fr {
 		text-align: right;
 	}
+	
+	.animation {
+	  transition: all 0.2s ease;
+	}
+	//占位 空符
+	.extra-space1 {
+		height: 400rpx;
+	}
+	//占位 空符
+	.extra-space2 {
+		height: 200rpx;
+	}

 	.checkBox {
 		weight: 40rpx;
--- a/components/orderItem/orderItem.vue
+++ b/components/orderItem/orderItem.vue
@ -1,5 +1,5 @@
 <template>
-	<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-t-24 p-24 bg-w boxshadow">
+	<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-b-24 p-24 bg-w boxshadow">
 		<view class="flex">
 			<view class="flex3 ofh">
 				<view class="fz24 fcb m-t-12">订单号：{{order.order_sn}}</view>
--- a/package.json
+++ b/package.json
@ -10,11 +10,11 @@
  "license": "ISC",
  "dependencies": {
    "mqtt": "^2.18.9",
-    "uview-ui": "^2.0.36"
+    "uview-ui": "^2.0.38"
  },
  "repository": {
    "type": "git",
    "url": "http://111.229.174.37:3000/Food/food_wechat.git"
  },
  "description": "飞行魔方，物流、送餐小程序"
-}
+}
--- a/pages/main/order.vue
+++ b/pages/main/order.vue
@ -1,6 +1,52 @@
 <template>
 	<view>
-		<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
+		<!-- topbar -->
+		<u-navbar title="确认订单" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
+			<view class="u-nav-slot" slot="left">
+				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
+			</view>
+		</u-navbar>
+		<!-- tab -->
+		<view class="tabListBox m-l-24 m-r-24 m-t-24 flex msb">
+			<view class="tabBox flex mac mc fz32" v-for="(tab,index) in tabList" :key="index" @click="handlerTab(index)"
+				:class="current===index?'fb':''">
+				{{tab}}
+			</view>
+		</view>
+		<!-- tabLine -->
+		<view class="tabLineBox flex mac mc z-top" :style="{ left: tabLineLeft + 'rpx' }">
+			<view class="tabLine rad8 bg-m"></view>
+		</view>
+		<!-- 订单页 swiper -->
+		<swiper class="swiperClass m-t-12" :current="current" @animationfinish="animationfinish">
+			<swiper-item class="swiperClass">
+				<scroll-view scroll-y class="swiperClass">
+					<view v-if="orderList_unpaid.length>0">
+						<orderItem v-for="order in orderList_unpaid" :order=order :key="order.id"></orderItem>
+						<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
+						<view class="extra-space2"></view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item>
+				<view v-if="orderList_paid.length>0">
+					<orderItem v-for="order in orderList_paid" :order=order :key="order.id"></orderItem>
+					<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
+					<view class="extra-space2"></view>
+				</view>
+			</swiper-item>
+			<swiper-item>
+				<view v-if="orderList_refund.length>0">
+					<orderItem v-for="order in orderList_refund" :order=order :key="order.id"></orderItem>
+					<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
+					<view class="extra-space2"></view>
+				</view>
+			</swiper-item>
+		</swiper>
+		<!-- tabbar -->
+		<view>
+			<tabbar></tabbar>
+		</view>
 	</view>
 </template>

@ -8,15 +54,73 @@
 	export default {
 		data() {
 			return {
-				list: [{
-					name: '待收货'
-				}, {
-					name: '待付款'
-				}, {
-					name: '待评价',
-					count: 5
-				}],
+				tabList: ['待支付', '已付款', '退款售后'], // tab标签
+				current: 0, //当前激活标签
+				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
+				tabLineLeft: 24 //tabLine 样式表的left值
+			}
+		},
+		computed: {
+			//未付款订单
+			orderList_unpaid() {
+				return this.$store.state.orderList.filter(item => item.main_status === '未付款')
+			},
+			//已付款 并且没有申请退款的订单
+			orderList_paid(){
+				return this.$store.state.orderList.filter(item => item.main_status === '已付款' && item.refund_status === '未申请')
+			},
+			//已经申请退款的订单
+			orderList_refund(){
+				return this.$store.state.orderList.filter(item => item.refund_status !== '未申请')
+			}
+		},
+		methods: {
+			//点击tab标签时 设置current
+			handlerTab(index) {
+				this.current = index
+			},
+			// swiper滑动结束，设置current
+			animationfinish(e) {
+				this.current = e.detail.current
+			}
+		},
+		watch: {
+			current: {
+				handler(val) {
+					// 计算每个 tabLine 的left值
+					const tabWidth = 200
+					const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
+						1) // 750是屏幕宽度，48是左右边距
+					this.tabLineLeft = 24 + val * (tabWidth + spacing) // 计算新的 left 值
+				}
 			}
 		}
 	}
-</script>
+</script>
+
+<style lang="scss" scoped>
+	.tabListBox {
+		height: 77rpx;
+	}
+
+	.tabBox {
+		width: 200rpx;
+		height: 77rpx;
+	}
+
+	.tabLineBox {
+		width: 200rpx;
+		height: 8rpx;
+		position: absolute;
+		transition: all .2s ease;
+	}
+
+	.tabLine {
+		width: 70rpx;
+		height: 8rpx;
+	}
+
+	.swiperClass {
+		height: calc(100vh - 297rpx);
+	}
+</style>
--- a/pages/shop/list.vue
+++ b/pages/shop/list.vue
@ -127,16 +127,6 @@
 			this.$store.commit('setTabbarCurrent', 1)
 		},
 		watch: {
-			// 'spuList': {
-			// 	handler(newVal, oldVal) {
-			// 		console.log("spuList 发生变化")
-			// 		console.log("新值:", newVal)
-			// 		console.log("旧值:", oldVal)
-			// 		// 更新其他状态或执行其他操作
-			// 		// this.someOtherFunction()
-			// 	},
-			// 	deep: true // 如果需要深度监视对象或数组的变化，则需要设置为true
-			// }
 		},
 		computed: {
 			//站点信息
@ -349,14 +339,6 @@
 		background-color: $uni-color-error;
 	}

-	.extra-space1 {
-		height: 400rpx;
-	}
-
-	.extra-space2 {
-		height: 200rpx;
-	}
-
 	.cartBox {
 		z-index: 10071;
 		width: calc(100vw - 48rpx);