feat:提交代码 ，完成头部UI改造

src/pages/home/components/header.vue

@@ -1,133 +1,230 @@
 <script lang="ts" setup>
-import { computed, PropType } from "vue";
-import FSearch from "~/components/FSearch/FSearch.vue";
-import type { UserInfoModel } from "~/apis/model/userInfoModel";
-import { useUserStore } from "~/stores/userStore";
-// import {useUserStore} from "~/stores/userStore";
-const userStore = useUserStore()
-
-const systemInfo = uni.getSystemInfoSync()
-const statusBarHeight = systemInfo.statusBarHeight ?? 0
-const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-
-const navBarHeight = computed(() => {
-  // const propsHeight = Number(props.height)
-  let defaultHeight = 44
-  // #ifdef MP
-  // if (props.fixed) {
-  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-  const menuHeight = menuButtonInfo.height
-  const menuTop = menuButtonInfo.top
-  // console.log(menuButtonInfo)
-  defaultHeight = (menuTop - statusBarHeight) * 2 + menuHeight
-  // }
-  // #endif
-  // return propsHeight || defaultHeight
-  return defaultHeight
-})
-
-const navBarStyle = computed(() => {
-  return {
-    paddingTop: `${statusBarHeight}px`,
-  }
-})
-
-const props = defineProps({
-  exClass: {
-    type: String
-  },
-  // userInfo: {
-  //   type: Object as PropType<UserInfoModel>,
-  //   required: true
-  // },
-  yanglaojin: {
-    type: Number,
-    default: NaN
-  }
-})
-function handleClick() {
-  if (userStore.userInfo && userStore.uid) {
-    uni.navigateTo({
-      url: '/pages/annuity/index'
-    })
-  } else {
-    uni.navigateTo({
-      url: '/pages/user/login/index?key=30'
-    })
-  }
-}
-// function handleShowSearchPage() {
-//
-// }
-
-function handleShowMessage() {
-  uni.navigateTo({
-    url: '/pages/message/index'
-  })
-}
-function handleClickser() {
-  uni.navigateTo({
-    url: '/pages/search/index'
-  })
-}
+	import { computed, PropType } from "vue";
+	import FSearch from "~/components/FSearch/FSearch.vue";
+	import type { UserInfoModel } from "~/apis/model/userInfoModel";
+	import { useUserStore } from "~/stores/userStore";
+	import { TOP_LAB_ARR } from '../constants.js';
+
+
+	// import {useUserStore} from "~/stores/userStore";
+	const userStore = useUserStore()
+	
+
+	const systemInfo = uni.getSystemInfoSync()
+	const statusBarHeight = systemInfo.statusBarHeight ?? 0
+	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+
+	const navBarHeight = computed(() => {
+		// const propsHeight = Number(props.height)
+		let defaultHeight = 44
+		// #ifdef MP
+		// if (props.fixed) {
+		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+		const menuHeight = menuButtonInfo.height
+		const menuTop = menuButtonInfo.top
+		// console.log(menuButtonInfo)
+		defaultHeight = (menuTop - statusBarHeight) * 2 + menuHeight
+		// }
+		// #endif
+		// return propsHeight || defaultHeight
+		return defaultHeight
+	})
+	const currentIndex=ref(0)
+
+	const navBarStyle = computed(() => {
+		return {
+			paddingTop: `${statusBarHeight}px`,
+		}
+	})
+
+	const props = defineProps({
+		exClass: {
+			type: String
+		},
+		// userInfo: {
+		//   type: Object as PropType<UserInfoModel>,
+		//   required: true
+		// },
+		yanglaojin: {
+			type: Number,
+			default: NaN
+		}
+	})
+	function handleClick() {
+		if (userStore.userInfo && userStore.uid) {
+			uni.navigateTo({
+				url: '/pages/annuity/index'
+			})
+		} else {
+			uni.navigateTo({
+				url: '/pages/user/login/index?key=30'
+			})
+		}
+	}
+	// function handleShowSearchPage() {
+	//
+	// }
+
+	function handleShowMessage() {
+		uni.navigateTo({
+			url: '/pages/message/index'
+		})
+	}
+	function handleClickser() {
+		uni.navigateTo({
+			url: '/pages/search/index'
+		})
+	}
+	
+	function onTabClick(position:number){
+		console.log("===onTabClick",position);
+		currentIndex.value=position
+	}
 </script>
 <template>
-  <div class="home-header fixed w-screen text-white z-10" :style="navBarStyle" :class="exClass">
-    <div class="flex">
-      <div @click="handleClick" class="flex gap-2 mb-2 pl-2 flex-1">
-        <image v-if="userStore && userStore.userInfo && userStore.userInfo.avatar" :src="userStore.userInfo.avatar"
-          style="width:74rpx; height:74rpx;" class="rounded-full" />
-        <image v-else src="https://app.bjtdba.com/uploads/logo.jpg" mode="widthFix" class="w-9 h-9 rounded-full" />
-        <div class="flex flex-col ">
-          <div class="text-sm" v-if="userStore.userInfo && userStore.userInfo.nickname">{{ userStore.userInfo.nickname ?
+	<div class="home-header-content home-header fixed w-screen text-white z-10" :style="navBarStyle">
+		<image  class="top-bg" src="/static/img/jd_bg.png" mode="widthFix"></image>
+		<div class="flex user-info">
+			<div @click="handleClick" class="flex gap-2 mb-2 pl-2 flex-1">
+				<image v-if="userStore && userStore.userInfo && userStore.userInfo.avatar"
+					:src="userStore.userInfo.avatar" style="width:74rpx; height:74rpx;" class="rounded-full" />
+				<image v-else src="https://app.bjtdba.com/uploads/logo.jpg" mode="widthFix"
+					class="w-9 h-9 rounded-full" />
+				<div class="flex flex-col ">
+					<div class="text-sm" v-if="userStore &&userStore.userInfo && userStore.userInfo.nickname">{{ userStore.userInfo.nickname ?
             userStore.userInfo.nickname : '登录' }}</div>
-          <div class="text-sm" v-else>登录</div>
-          <div class="text-xs" v-if="!isNaN(yanglaojin) && userStore.userInfo">{{ yanglaojin }}元养老金</div>
-          <div v-else class="text-xs">
-            领取养老金
-          </div>
-        </div>
-
-      </div>
-      <div class=" right-26 flex flex-col text-[10px] justify-center items-center " @tap.stop="handleShowMessage"
-        :style="{ marginRight: `${menuButtonInfo.width + 15}px` }">
-        <image src="/static/icon/message-dark.png" mode="widthFix" class="w-4 h-4" v-if="exClass"></image>
-        <image src="/static/icon/message.png" mode="widthFix" class="w-4 h-4" v-else></image>
-        <div>消息</div>
-      </div>
-
-
-    </div>
-    <div class="p_3">
-      <!-- 搜索 -->
-      <div @click="handleClickser"
-        class="w-full bg-white rounded-full flex flex-row justify-between items-center border-solid border-1 border-red h-8">
-
-        <image src="https://cdn.bjtdba.com/vod/image/2023-02-15/20230215112840149.png" mode="widthFix"
-          class="w-5 h-5  pl-2 py-1"></image>
-        <div class="flex flex-1 w-100%">
-          <div class="flex-1 guand ">输入商品关键字</div>
-          <div class="bg-[#D71608] text-white text-xs w-11 rounded-full text-center p-1.5  mr-0.5 ">
-            搜索
-          </div>
-        </div>
-
-
-      </div>
-
-    </div>
-
-  </div>
+					<div class="text-sm" v-else>登录</div>
+					<div class="text-xs" v-if="!isNaN(yanglaojin) && userStore &&userStore.userInfo">{{ yanglaojin }}元养老金</div>
+					<div v-else class="text-xs">
+						领取养老金
+					</div>
+				</div>
+			</div>
+			<div class=" right-26 flex flex-col text-[10px] justify-center items-center " @tap.stop="handleShowMessage"
+				:style="{ marginRight: `${menuButtonInfo.width + 15}px` }">
+				<image src="/static/icon/message-dark.png" mode="widthFix" class="w-4 h-4" v-if="exClass"></image>
+				<image src="/static/icon/message.png" mode="widthFix" class="w-4 h-4" v-else></image>
+				<div>消息</div>
+			</div>
+		</div>
+
+		<view class="head-conent">
+			<div class="p_3">
+				<!-- 搜索 -->
+				<div @click="handleClickser"
+					class="w-full bg-white rounded-full flex flex-row justify-between items-center border-solid border-1 border-red h-8">
+					<image src="https://cdn.bjtdba.com/vod/image/2023-02-15/20230215112840149.png" mode="widthFix"
+						class="w-5 h-5  pl-2 py-1"></image>
+					<div class="flex flex-1 w-100%">
+						<div class="flex-1 guand ">输入商品关键字</div>
+						<div class="bg-[#D71608] text-white text-xs w-11 rounded-full text-center p-1.5  mr-0.5 ">
+							搜索
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<view class="lab-content">
+				<scroll-view scroll-x="true" class="lab-item">
+                     <view class="lab-item-x" v-for="(item,index) in TOP_LAB_ARR">
+						<view class="lab-item-small"  @click="onTabClick(index)">
+							<text :class="currentIndex==index?'lab-title':'lab-default-title'" >{{item.title}}</text>
+							<view :class="currentIndex==index?'lab-line':'lab-default-line'"></view>
+						</view>
+					 </view>
+				</scroll-view>
+			</view>
+
+		</view>
+
+	</div>
 </template>
-<style  scoped>
-.p_3 {
-  padding-left: 24rpx;
-  padding-right: 24rpx;
-}
-
-.guand {
-  padding-left: 10rpx;
-  line-height: 56rpx;
-  color: #9ca3af
-}
+<style scoped lang="scss">
+	.home-header-content {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.p_3 {
+		padding-left: 24rpx;
+		padding-right: 24rpx;
+	}
+
+	.guand {
+		padding-left: 10rpx;
+		line-height: 56rpx;
+		color: #9ca3af
+	}
+
+	.user-info {
+		z-index: 666;
+	}
+
+	.lab-content {
+		width: 100%;
+		height: 90rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		margin-top: 20rpx;
+
+		.lab-item {
+			display: flex;
+			flex-direction: row;
+			white-space: nowrap;
+			width: 100%;
+		}
+		
+		.lab-item-x {
+			display: inline-block;
+			margin-right: 10px;
+			text-align: center;
+		}
+		.lab-item-small{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			width: 124rpx;
+			
+			.lab-default-title {
+				font-size: 28rpx;
+				margin-bottom: 10rpx;
+			}
+			.lab-title {
+				font-size: 32rpx;
+				margin-bottom: 10rpx;
+			}
+			.lab-line{
+				width: 50rpx;
+				height: 6rpx;
+				background-color: #FFF;
+				border-radius: 4rpx;
+			}
+			
+			.lab-default-line{
+				width: 50rpx;
+				height: 6rpx;
+				border-radius: 4rpx;
+			}
+			
+		}
+	}
+
+	.user-info {
+		z-index: 666;
+	}
+
+	.head-conent {
+		z-index: 666;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.top-bg {
+		width: 100%;
+		height: 100rpx;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
 </style>

src/pages/home/constants.js

@@ -0,0 +1,19 @@
+export const TOP_LAB_ARR = [
+	{title:"精品", checked:true,titleId: 0},
+	{title:"居家日用", checked:true,titleId: 1},
+	{title:"食品", checked:false,titleId: 2},
+	{title:"生鲜", checked:false,titleId: 3},
+	{title:"图书", checked:false,titleId: 4},
+	{title:"美妆个护", checked:false,titleId: 5},
+	{title:"母婴", checked:false,titleId: 6},
+	{title:"数码家电", checked:false,titleId: 7},
+	{title:"内衣", checked:false,titleId: 8},
+	{title:"配饰", checked:false,titleId: 9},
+	{title:"女装", checked:false,titleId: 10},
+	{title:"男装", checked:false,titleId: 11},
+	{title:"鞋品", checked:false,titleId: 12},
+	{title:"家装家纺", checked:false,titleId: 13},
+	{title:"文娱车品", checked:false,titleId: 14},
+	{title:"箱包", checked:false,titleId: 15},
+	{title:"户外运动", checked:false,titleId: 16},
+];