重构

components/SiteSwitchHeader/index.vue

@@ -1,15 +1,18 @@
 <template>
 	<view class="site-switch-header">
-		<uni-data-picker
-			placeholder="请选择"
-			popup-title="业态选择"
-			:step-searh="true"
-			:value="siteId"
-			:clear-icon="false"
-			:localdata="siteTypeOptions"
-			:ellipsis="false"
-			@change="handleChange"
-		/>
+		<view class="selector-row">
+			<uni-data-picker
+				placeholder="请选择"
+				popup-title="业态选择"
+				:step-searh="true"
+				:value="siteId"
+				:clear-icon="false"
+				:localdata="siteTypeOptions"
+				:ellipsis="false"
+				@change="handleChange"
+			/>
+			<view class="site-count-badge">{{ displaySiteCount }}</view>
+		</view>
 		<view class="info">
 			<view class="list">
 				<uni-icons type="location" color="#fff" size="20"></uni-icons>
@@ -41,6 +44,19 @@
 			runningTime: {
 				type: String,
 				default: '-'
+			},
+			siteCount: {
+				type: [String, Number],
+				default: 0
+			}
+		},
+		computed: {
+			displaySiteCount() {
+				const count = Number(this.siteCount || 0)
+				if (!Number.isFinite(count) || count <= 0) {
+					return '0'
+				}
+				return count > 99 ? '99+' : String(count)
 			}
 		},
 		methods: {
@@ -58,6 +74,30 @@
 		padding-bottom: 100rpx;
 		color: #fff;
 
+		.selector-row {
+			display: flex;
+			align-items: center;
+			gap: 16rpx;
+		}
+
+		.site-count-badge {
+			min-width: 48rpx;
+			height: 48rpx;
+			padding: 0 12rpx;
+			border-radius: 999rpx;
+			background: #ff4d4f;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 24rpx;
+			line-height: 1;
+			font-weight: 700;
+			color: #fff;
+			box-sizing: border-box;
+			flex-shrink: 0;
+			box-shadow: 0 6rpx 14rpx rgba(255, 77, 79, 0.28);
+		}
+
 		.info {
 			color: #fff;
 			font-size: 26rpx;