feat(tabbar): 添加国内资讯标签页并调整标签栏顺序

- 新增国内资讯标签页,包含激活和非激活状态图标
- 调整标签栏顺序,将我的页面与国内资讯位置互换
- 优化标签栏条件渲染逻辑,使用v-else简化代码
This commit is contained in:
zzp 2025-08-28 11:41:03 +08:00
parent 14fa72f32b
commit 77029700ed
4 changed files with 58 additions and 16 deletions

BIN
src/assets/activeCaixun.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 674 B

BIN
src/assets/caixun.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 555 B

View File

@ -2,13 +2,13 @@
<view class="tabbar"> <view class="tabbar">
<view class="tabbar_item" @click="tabChange(0)"> <view class="tabbar_item" @click="tabChange(0)">
<image <image
v-if="tabIndex == 1" v-if="tabIndex == 0"
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/home_icon_normal.png" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/home_icon_pre.png"
class="tabbar_img" class="tabbar_img"
/> />
<image <image
v-if="tabIndex == 0" v-else
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/home_icon_pre.png" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/home_icon_normal.png"
class="tabbar_img" class="tabbar_img"
/> />
<text <text
@ -18,18 +18,31 @@
> >
</view> </view>
<view class="tabbar_item" @click="tabChange(1)"> <view class="tabbar_item" @click="tabChange(2)">
<image <image
v-if="tabIndex == 0" v-if="tabIndex == 2"
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/mine_icon_normal.png" src="../../assets/activeCaixun.png"
class="tabbar_img" class="tabbar_img"
/> />
<image v-else src="../../assets/caixun.png" class="tabbar_img" />
<text
class="tabbar_title"
:style="{ color: tabIndex == 2 ? '#D13E3C' : '#757A80' }"
>国内资讯</text
>
</view>
<view class="tabbar_item" @click="tabChange(1)">
<image <image
v-if="tabIndex == 1" v-if="tabIndex == 1"
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/mine_icon_pre.png" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/mine_icon_pre.png"
class="tabbar_img" class="tabbar_img"
/> />
<image
v-else
src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/mine_icon_normal.png"
class="tabbar_img"
/>
<text <text
class="tabbar_title" class="tabbar_title"
:style="{ color: tabIndex == 1 ? '#D13E3C' : '#757A80' }" :style="{ color: tabIndex == 1 ? '#D13E3C' : '#757A80' }"

View File

@ -1,10 +1,23 @@
<template> <template>
<view class="root" :style="{ backgroundColor: tabIndex == 4 ? '#f6f6f6' : '#ffffff' }"> <view
class="root"
:style="{ backgroundColor: tabIndex == 4 ? '#f6f6f6' : '#ffffff' }"
>
<!-- 首页 start --> <!-- 首页 start -->
<Index v-if="menuStateConfig.home.active" :columnState="menuStateConfig.home" :colList="homeColList" @onChange="handleMenuChange"></Index> <Index
v-if="menuStateConfig.home.active"
:columnState="menuStateConfig.home"
:colList="homeColList"
@onChange="handleMenuChange"
></Index>
<!-- 首页 end --> <!-- 首页 end -->
<!-- vip start --> <!-- vip start -->
<vip v-if="menuStateConfig.vip.active" :columnState="menuStateConfig.vip" :colList="vipColList" @onChange="handleMenuChange"></vip> <vip
v-if="menuStateConfig.vip.active"
:columnState="menuStateConfig.vip"
:colList="vipColList"
@onChange="handleMenuChange"
></vip>
<!-- vip end --> <!-- vip end -->
<!-- 我的 start --> <!-- 我的 start -->
<mine v-if="menuStateConfig.mine.active"></mine> <mine v-if="menuStateConfig.mine.active"></mine>
@ -19,14 +32,24 @@
@change="handleMenuChange($event, 'tabbar')" @change="handleMenuChange($event, 'tabbar')"
z-index="600" z-index="600"
> >
<u-tabbar-item :text="item.title" v-for="(item, index) in menuList" :key="index"> <u-tabbar-item
:text="item.title"
v-for="(item, index) in menuList"
:key="index"
>
<template #active-icon> <template #active-icon>
<view v-if="index == 0" style="height: 40rpx"></view> <view v-if="index == 0" style="height: 40rpx"></view>
<image :src="item.iconc" :class="[index == 0 ? 'vipcass_c' : 'menu_icon']"></image> <image
:src="item.iconc"
:class="[index == 0 ? 'vipcass_c' : 'menu_icon']"
></image>
</template> </template>
<template #inactive-icon> <template #inactive-icon>
<view v-if="index == 0" style="height: 40rpx"></view> <view v-if="index == 0" style="height: 40rpx"></view>
<image :src="item.icon" :class="[index == 0 ? 'vipcass' : 'menu_icon']"></image> <image
:src="item.icon"
:class="[index == 0 ? 'vipcass' : 'menu_icon']"
></image>
</template> </template>
</u-tabbar-item> </u-tabbar-item>
</u-tabbar> </u-tabbar>
@ -135,11 +158,17 @@ const setMenuStateConfig = (option: any) => {
const __menuStateConfig = Session.get("menuStateConfig"); const __menuStateConfig = Session.get("menuStateConfig");
if (__menuStateConfig) { if (__menuStateConfig) {
const activeObject: any = Object.values(__menuStateConfig).find((item: any) => item.active); const activeObject: any = Object.values(__menuStateConfig).find(
(item: any) => item.active
);
const activeId = activeObject ? activeObject.id : 0; const activeId = activeObject ? activeObject.id : 0;
tabIndex.value = activeId; tabIndex.value = activeId;
menuStateConfig.value = __menuStateConfig; menuStateConfig.value = __menuStateConfig;
} else if (option?.tabIndex || option?.columnIndex || option?.subColumnIndex) { } else if (
option?.tabIndex ||
option?.columnIndex ||
option?.subColumnIndex
) {
const index = Number(option?.tabIndex) || 0; const index = Number(option?.tabIndex) || 0;
const columnIndex = Number(option?.columnIndex) || 0; const columnIndex = Number(option?.columnIndex) || 0;
const subColumnIndex = Number(option?.subColumnIndex) || 0; const subColumnIndex = Number(option?.subColumnIndex) || 0;