From 65d8ebad40dd957d95c8994e3dea7c502900eee6 Mon Sep 17 00:00:00 2001
From: sszdot <szdot@qq.com>
Date: Fri, 20 Dec 2024 17:06:09 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afeat=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E5=BE=BD=E6=A0=87=E7=BB=84=E4=BB=B6=20=20=E7=94=A8?=
 =?UTF-8?q?=E4=BA=8E=E6=A0=87=E8=AF=86=E9=80=89=E9=A1=B9=E5=86=85=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E8=AE=B0=E5=BD=95=E6=80=BB=E6=95=B0=20=E3=80=90?=
 =?UTF-8?q?=E8=BF=87=20=20=E7=A8=8B=E3=80=91=EF=BC=9A=20=E3=80=90=E5=BD=B1?=
 =?UTF-8?q?=20=20=E5=93=8D=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
---
 App.vue                            |  4 ++++
 components/badge/badge.vue         | 38 ++++++++++++++++++++++++++++++
 components/orderItem/orderItem.vue |  4 +++-
 pages/main/order.vue               | 26 +++++++++++++-------
 4 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 components/badge/badge.vue

diff --git a/App.vue b/App.vue
index 8df9324..54a4650 100644
--- a/App.vue
+++ b/App.vue
@@ -54,6 +54,10 @@
 	.r {
 		float: right;
 	}
+	
+	.pr{
+		position: relative;
+	}
 
 	.fc {
 		text-align: center;
diff --git a/components/badge/badge.vue b/components/badge/badge.vue
new file mode 100644
index 0000000..fb582b8
--- /dev/null
+++ b/components/badge/badge.vue
@@ -0,0 +1,38 @@
+<template>
+	<view v-if="cou!==0" class="badge bg-m fci flex mac mc rad-c" :style="{ right: offset[0] + 'rpx', top: offset[1] + 'rpx' }">
+		{{cou>99?99:cou}}
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "badge",
+		data() {
+			return {};
+		},
+		computed: {
+		},
+		props: {
+			offset: {
+				type: Array,
+				default () {
+					return [-16, -10] // 默认值[-16, -10]
+				}
+			},
+			cou: {
+				type: Number,
+				require: true
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.badge {
+		position: absolute;
+		width: 24rpx;
+		height: 24rpx;
+		font-size: 14rpx;
+		font-weight: normal;
+	}
+</style>
\ No newline at end of file
diff --git a/components/orderItem/orderItem.vue b/components/orderItem/orderItem.vue
index b526e4d..2dd4162 100644
--- a/components/orderItem/orderItem.vue
+++ b/components/orderItem/orderItem.vue
@@ -23,7 +23,9 @@
 			<view class="numberBut bg-m fci rad8 fz28 fb flex mac mc" :key="foodSn">
 				{{ foodSn }}
 			</view>
-			<view class="nullBut border fcb rad8 fz28 flex mac mc m-l-24">申请售后</view>
+			<view class="nullBut border fcb rad8 fz28 flex mac mc m-l-24" style="">
+				申请售后
+			</view>
 		</view>
 	</view>
 </template>
diff --git a/pages/main/order.vue b/pages/main/order.vue
index 0d39f51..d0889ff 100644
--- a/pages/main/order.vue
+++ b/pages/main/order.vue
@@ -7,10 +7,13 @@
 			</view>
 		</u-navbar>
 		<!-- tab -->
-		<view class="tabListBox m-l-24 m-r-24 m-t-24 flex msb">
+		<view class="tabListBox m-l-24 m-r-24 m-t-24 flex msb pr">
 			<view class="tabBox flex mac mc fz32" v-for="(tab,index) in tabList" :key="index" @click="handlerTab(index)"
 				:class="current===index?'fb':''">
-				{{tab}}
+				<view class="pr">
+					<badge :cou="orderCouArr[index]"></badge>
+					{{tab}}
+				</view>
 			</view>
 		</view>
 		<!-- tabLine -->
@@ -59,9 +62,9 @@
 				tabLineLeft: 24 //tabLine 样式表的left值
 			}
 		},
-		onLoad(){
+		onLoad() {
 			//初始化 tapline的位置
-			this.lineOffset(this.current)	
+			this.lineOffset(this.current)
 		},
 		computed: {
 			//未付款订单
@@ -69,12 +72,17 @@
 				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_paid() {
+				return this.$store.state.orderList.filter(item => item.main_status === '已付款' && item.refund_status ===
+					'未申请')
 			},
-			//已经申请退款的订单
-			orderList_refund(){
+			//申请中 已同意 主动退 等退款的订单
+			orderList_refund() {
 				return this.$store.state.orderList.filter(item => item.refund_status !== '未申请')
+			},
+			//订单数量 数组[未付款订单数量,已付款没有产生退款相关业务的订单数量,申请中 已同意 主动退 等退款的订单数量]
+			orderCouArr() {
+				return [this.orderList_unpaid.length, this.orderList_paid.length, this.orderList_refund.length]
 			}
 		},
 		methods: {
@@ -87,7 +95,7 @@
 				this.current = e.detail.current
 			},
 			//计算每个 tabLine 的left值
-			lineOffset(val){
+			lineOffset(val) {
 				// 计算每个 tabLine 的left值
 				const tabWidth = 200
 				const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -