feat: 优化导航栏样式并添加页面状态持久化

- 修改Navbar箭头颜色为#333
- 在minihome页面添加tabIndex状态持久化
- 为subscribed和bookmark页面添加顶部导航占位
- 调整bookmark页面tabs样式和布局
- 简化mineMini组件代码格式

src/components/mineMini.vue

@@ -3,10 +3,7 @@
     <Navbar title="中证参考" :hasBack="false"></Navbar>
     <!-- 用户信息 -->
     <view class="userContainer">
-      <u-avatar
-        src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/avatar.png"
-        size="60"
-      ></u-avatar>
+      <u-avatar src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/avatar.png" size="60"></u-avatar>
       <view class="userData">
         <text class="phone">{{
           !isLoginStatus ? "未登录用户" : maskPhoneNumber()
@@ -35,53 +32,30 @@
     <!-- 其他功能区 -->
     <view class="otherContainer" v-if="isLoginStatus">
       <u-cell-group :border="false">
-        <u-cell
-          title="已订阅栏目"
-          icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/vip.png"
-          isLink
-          :iconStyle="{ width: '46rpx', height: '32rpx', marginRight: '14rpx' }"
-          :titleStyle="{
+        <!-- <u-cell title="已订阅栏目" icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/vip.png" isLink
+          :iconStyle="{ width: '46rpx', height: '32rpx', marginRight: '14rpx' }" :titleStyle="{
             fontSize: '32rpx',
             color: '#333333',
-          }"
-          @click="handleClick(-1)"
-        >
+          }" @click="handleClick(-1)">
+        </u-cell> -->
+        <u-cell title="我的收藏" icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/star.png" isLink
+          :iconStyle="{ width: '40rpx', height: '40rpx', marginRight: '20rpx' }" :titleStyle="{
+            fontSize: '32rpx',
+            color: '#333333',
+          }" @click="handleClick(0)">
         </u-cell>
-        <u-cell
-          title="我的收藏"
-          icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/star.png"
-          isLink
-          :iconStyle="{ width: '40rpx', height: '40rpx', marginRight: '20rpx' }"
-          :titleStyle="{
+        <u-cell title="我喜欢的" icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/like.png" isLink
+          :iconStyle="{ width: '40rpx', height: '40rpx', marginRight: '20rpx' }" :titleStyle="{
             fontSize: '32rpx',
             color: '#333333',
-          }"
-          @click="handleClick(0)"
-        >
-        </u-cell>
-        <u-cell
-          title="我喜欢的"
-          icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/like.png"
-          isLink
-          :iconStyle="{ width: '40rpx', height: '40rpx', marginRight: '20rpx' }"
-          :titleStyle="{
-            fontSize: '32rpx',
-            color: '#333333',
-          }"
-          @click="handleClick(1)"
-        >
+          }" @click="handleClick(1)">
         </u-cell>
         <!-- title="浏览记录" :icon="time" :border="false"  -->
-        <u-cell
-          icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/time.png"
-          isLink
-          :iconStyle="{ width: '40rpx', height: '40rpx', marginRight: '20rpx' }"
-          :titleStyle="{
+        <u-cell icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/time.png" isLink
+          :iconStyle="{ width: '40rpx', height: '40rpx', marginRight: '20rpx' }" :titleStyle="{
             fontSize: '32rpx',
             color: '#333333',
-          }"
-          @click="handleClick(2)"
-        >
+          }" @click="handleClick(2)">
           <template #title>
             <view class="recordText">
               <text style="font-size: 32rpx">浏览记录</text>
@@ -106,12 +80,8 @@
     </view>
 
     <!-- 登录弹框 -->
-    <LoginPopup
-      :show="LoginShow"
-      @handlePopupClose="handlePopupClose"
-      @handlePopupSuccessCallback="handlePopupSuccessCallback"
-      @handlePopupErrorCallback="handlePopupErrorCallback"
-    />
+    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
+      @handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
   </view>
 </template>
 

src/components/mini/Navbar.vue

@@ -2,7 +2,7 @@
     <view class="r_all">
         <view class="navnar">
             <view>
-                <u-icon name="arrow-left" color="#000" size="22" v-if="hasBack"></u-icon>
+                <u-icon name="arrow-left" color="#333" size="22" v-if="hasBack"></u-icon>
             </view>
             <text>{{ title }}</text>
             <view style="width: 15%;"></view>

src/pages/bookmark/index.vue

@@ -1,20 +1,25 @@
 <template>
   <view class="subscribedContainer">
+    <view :style="{
+      height: getNavHeight() + 'px',
+      backgroundColor: '#fff',
+      position: 'sticky', top: 0,
+      zIndex: '999999',
+    }"></view>
+    <!-- <Navbar title="中证参考"></Navbar> -->
     <!-- 头部 -->
     <view class="subHeader">
       <view class="flashBack" @click="doBack">
         <u-icon size="20" name="arrow-left" color="#333333"></u-icon>
       </view>
       <view class="title">
-        <u-tabs
-          :list="list"
-          :activeStyle="{
-            color: '#E7303F',
-          }"
-          :current="tableValue"
-          lineColor="#E7303F"
-          @click="handleTabsClick"
-        ></u-tabs>
+        <u-tabs :list="list" :activeStyle="{
+          color: '#E7303F',
+        }" :itemStyle="{
+          fonSize: '22rpx',
+          height: '60rpx',
+          color: '#000',
+        }" :current="tableValue" lineColor="#E7303F" @click="handleTabsClick"></u-tabs>
       </view>
     </view>
     <!-- 内容部分 -->
@@ -29,6 +34,8 @@ import { ref, watch, onMounted } from "vue";
 import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
 import SubArticleList from "./components/articleList.vue";
 import { fetchFavList, fetchLikeList, fetchTrackList } from "@/api/users";
+import { getNavHeight } from "@/utils/util"
+import Navbar from '@/components/mini/Navbar.vue'
 
 const tableValue = ref(0);
 const listData = ref<any>([]);
@@ -146,8 +153,9 @@ onLoad((option) => {
     display: flex;
     align-items: center;
     position: relative;
-    .flashBack {
-    }
+
+    .flashBack {}
+
     .title {
       //   background-color: red;
       font-size: var(--h1-font-size);
@@ -155,7 +163,7 @@ onLoad((option) => {
       // font-weight: bold;
       width: 100%;
       display: flex;
-      justify-content: center;
+      justify-content: start;
       //   left: 50%;
       //   transform: translateX(-50%);
       //   position: absolute;
@@ -164,7 +172,6 @@ onLoad((option) => {
     }
   }
 
-  .subContent {
-  }
+  .subContent {}
 }
 </style>

src/pages/minihome/index.vue

@@ -88,6 +88,7 @@ const tabIndex = ref(0);
 function tabChange(index) {
 
   tabIndex.value = index;
+  uni.setStorageSync('homeTabIndex', index)
 
   switch (index) {
     case 0:
@@ -111,7 +112,11 @@ onPageScroll((val) => {
 })
 
 onShow(() => {
-  tabChange(0)
+  if (uni.getStorageSync('homeTabIndex') == 1) {
+    tabChange(1)
+  } else {
+    tabChange(0)
+  }
 })
 
 onMounted(async () => {

src/pages/subscribed/index.vue

@@ -1,5 +1,11 @@
 <template>
   <view class="subscribedContainer">
+    <view :style="{
+      height: getNavHeight() + 'px',
+      backgroundColor: isScroll ? '#fff' : 'fff',
+      position: 'sticky', top: 0,
+      zIndex: '999999',
+    }"></view>
     <!-- 头部 -->
     <view class="subHeader">
       <view class="flashBack" @click="doBack">
@@ -22,6 +28,8 @@ import { ref, watch, onMounted } from "vue";
 // import NewItem from "@/components/newItem/index.vue";
 import SubCol from "./components/col.vue";
 import { getUnlockList } from "@/api/index";
+import { getNavHeight } from "@/utils/util"
+import { onPageScroll } from "@dcloudio/uni-app";
 
 const tableValue = ref(0);
 const subStatus = ref([]);
@@ -33,6 +41,17 @@ async function getUnlockListFn() {
   }
 }
 
+const isScroll = ref(false)
+onPageScroll((val) => {
+  if (val.scrollTop > 150) {
+    isScroll.value = true
+  } else {
+    isScroll.value = false
+  }
+
+})
+
+
 onMounted(() => {
   const subs = uni.getStorageSync("subStatus");
   const arr = [];
@@ -75,8 +94,9 @@ const doBack = () => {
     display: flex;
     align-items: center;
     position: relative;
-    .flashBack {
-    }
+
+    .flashBack {}
+
     .title {
       //   background-color: red;
       font-size: var(--h1-font-size);
@@ -93,7 +113,6 @@ const doBack = () => {
     }
   }
 
-  .subContent {
-  }
+  .subContent {}
 }
 </style>