【类 型】：feat

【原  因】：徽标组件  用于标识选项内列表记录总数
【过  程】：
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

App.vue

@@ -54,6 +54,10 @@
 	.r {
 		float: right;
 	}
+	
+	.pr{
+		position: relative;
+	}
 
 	.fc {
 		text-align: center;

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>

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>

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 -