pages/index/index.vue

@@ -2,7 +2,7 @@
   <view class="container Index-container">
     <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
       <view class="content">
-        123
+        <van-icon name="search" size="28px" class="search-icon" @click="goSearch" />
         <view class="top-tabs">
           <van-tabs id="topTabs" :active="topTabsActive">
             <van-tab v-for="item in topTabBars" :key="item.val" :title="item.type"></van-tab>
@@ -13,6 +13,14 @@
         </view>
       </view>
     </view>
+    <view class="second-tabs">
+      <van-tabs id="secondTabs" :active="secondActive">
+        <van-tab v-for="item in secondBars" :key="item.ChartPermissionId" :title="item.PermissionName"></van-tab>
+        <!-- <template #nav-right>
+          <img class="tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" alt="" />
+        </template> -->
+      </van-tabs>
+    </view>
   </view>
 </template>
 
@@ -27,14 +35,17 @@ export default {
       navBarStyle: {
         height: 60 + "px",
         paddingTop: 40 + "px",
-        paddingBottom: "4px",
+        paddingBottom: "20px",
       },
       topTabBars: [
+        //一级top
         { type: "最新", val: "1" },
         { type: "纪要", val: "2" },
         { type: "图表", val: "3" },
       ],
-      topTabsActive: "1",
+      topTabsActive: "1", //一级top的tabs
+      secondActive: "", //二级的tabs
+      secondBars: [], //二级的tabs数组
     };
   },
   components: {
@@ -55,14 +66,17 @@ export default {
       this.tabAct_id = optios.tabid;
     }
     this.initNavBar();
-    this.selectComponent("#topTabs").resize();
+    this.getTabs();
   },
   onShow() {
     //进入页面的记录
-     this.$store.dispatch("statistics", { PageType: "Activit" });
+    this.$store.dispatch("statistics", { PageType: "Activit" });
     // #ifdef MP-WEIXIN
     uni.hideHomeButton();
     // #endif
+    this.$nextTick(() => {
+      this.selectComponent("#topTabs").resize();
+    });
   },
   methods: {
     //获取胶囊位置
@@ -74,17 +88,38 @@ export default {
         paddingBottom: "4px",
       };
     },
+    /* 获取tab分类 */
+    getTabs() {
+      Home.Tab().then((res) => {
+        if (res.Ret === 200) {
+          // this.secondBars = res.Data.List;
+          this.secondBars = [
+            { ChartPermissionId: 22, PermissionName: "我的收藏" },
+            { ChartPermissionId: 23, PermissionName: "A股市场" },
+            { ChartPermissionId: 24, PermissionName: "行业数据" },
+            { ChartPermissionId: 25, PermissionName: "大类资产" },
+            { ChartPermissionId: 26, PermissionName: "大宗商品" },
+             { ChartPermissionId: 27, PermissionName: "大宗商品" },
+          ];
+          console.log(this.secondBars);
+          if (!this.secondActive) {
+            this.secondActive = this.secondBars[0].ChartPermissionId;
+          }
+          this.$nextTick(() => {
+            this.selectComponent("#secondTabs").resize();
+          });
+        }
+      });
+    },
     /* 搜索 */
     goSearch() {
       this.$store.dispatch("checkHandle", "/pageMy/search/search");
     },
   },
   /* 下拉刷新 */
-  onPullDownRefresh: Throttle(function () {  
-  }),
+  onPullDownRefresh: Throttle(function () {}),
   // 上拉加载
-  onReachBottom: Throttle(function () {
-  }),
+  onReachBottom: Throttle(function () {}),
   /** 用户点击分享*/
   onShareAppMessage: function (res) {
     return {
@@ -103,228 +138,60 @@ export default {
   background-color: #f7f7f7;
   font-size: 30rpx;
   .nav-bar-wrap {
-    color: #f00;
-    position: fixed;
+    background-color: #fff;
+    position: sticky;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 999;
     .content {
-      display:flex;
-      .tabs-img {
-        padding-top: 16rpx;
-        margin-left: -15rpx;
-        width: 46rpx;
-        height: 26rpx;
+      position: relative;
+      height: 90%;
+      .search-icon {
+        text-align: center;
+        position: absolute;
+        left: 34rpx;
+        top: 60%;
+        transform: translateY(-50%);
+      }
+      .top-tabs {
+        width: 460rpx;
+        padding-right: 50rpx;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        .van-ellipsis {
+          font-size: 34rpx;
+        }
       }
     }
+    .tabs-img {
+      padding-top: 16rpx;
+      margin-left: -20rpx;
+    }
+  }
+  .second-tabs {
+    width: 100%;
+    overflow-x: auto;
+    background-color: #fff;
+    .van-ellipsis {
+      font-size: 32rpx;
+    }
+    .tabs-img {
+      padding-top: 16rpx;
+      margin-left: -30rpx;
+    }
+  }
+  .tabs-img {
+    width: 46rpx;
+    height: 26rpx;
+  }
+  .van-tabs__line {
+    background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
+  }
+  .van-tab--active {
+    color: #3385ff;
   }
-  // .index-fixed {
-  //   width: 750rpx;
-  //   position: fixed;
-  //   left: 0;
-  //   top: 0;
-  //   z-index: 999;
-  //   .index-header {
-  //     background-color: #fff;
-  //     padding: 32rpx 34rpx;
-  //     position: relative;
-  //     .sea_ipt_placeholder {
-  //       color: #8d8d8d;
-  //       opacity: 0.7;
-  //     }
-  //     .sea_ipt {
-  //       width: 100%;
-  //       height: 70rpx;
-  //       font-size: 30rpx;
-  //       color: #707070;
-  //       background-color: #f6f6f6;
-  //       padding: 0 34rpx 0 70rpx;
-  //       border-radius: 70rpx;
-  //       border: 1rpx solid #e5e5e5;
-  //     }
-  //     .search_ico {
-  //       display: block;
-  //       position: absolute;
-  //       color: #8d8d8d;
-  //       left: 60rpx;
-  //       top: 50%;
-  //       z-index: 100;
-  //       transform: translateY(-50%);
-  //     }
-  //   }
-  //   .tab-cont {
-  //     padding: 0 26rpx;
-  //     background-color: #fff;
-  //     font-size: 32rpx;
-  //     box-shadow: 0 3rpx 6rpx rgba(187, 216, 255, 0.2);
-  //     .scroll-tab {
-  //       position: relative;
-  //       width: 100%;
-  //       white-space: nowrap;
-  //     }
-  //     .limit-box {
-  //       position: absolute;
-  //       text-align: center;
-  //       display: inline-block;
-  //       padding-right: 50rpx;
-  //       top: -9rpx;
-  //       margin-left: -38rpx;
-  //       image {
-  //         width: 46rpx;
-  //         height: 26rpx;
-  //       }
-  //     }
-  //     .scroll-tab-item {
-  //       // flex-grow: 1;
-  //       text-align: center;
-  //       display: inline-block;
-  //       padding: 10rpx 8rpx 20rpx 8rpx;
-  //       margin-right: 35rpx;
-  //       border-bottom: 8rpx solid transparent;
-  //       position: relative;
-  //       &:last-child {
-  //         margin-right: 0;
-  //       }
-  //       &.active {
-  //         border-bottom: none;
-  //         color: #2c83ff;
-  //         font-weight: 700;
-  //       }
-  //       .border_act {
-  //         width: 100%;
-  //         height: 8rpx;
-  //         position: absolute;
-  //         bottom: 0;
-  //         left: 0;
-  //       }
-  //     }
-  //   }
-  // }
-  // .data-cont {
-  //   padding: 228rpx 20rpx 10rpx;
-  //   display: flex;
-  //   .report-ul {
-  //     width: 50%;
-  //     &:first-child {
-  //       margin-right: 10rpx;
-  //     }
-  //     .report-item {
-  //       padding: 20rpx 20rpx 24rpx 20rpx;
-  //       margin-bottom: 20rpx;
-  //       border-radius: 8rpx;
-  //       box-shadow: 0 3rpx 6rpx rgba($color: #000000, $alpha: 0.16);
-  //       background: #fff;
-  //       .item-content-img {
-  //         display: flex;
-  //         align-items: center;
-  //         image {
-  //           width: 100%;
-  //           height: 232rpx;
-  //           vertical-align: middle;
-  //         }
-  //       }
-  //       .item-content {
-  //         height: 273rpx;
-  //         font-size: 24rpx;
-  //         line-height: 40rpx;
-  //         color: #7f7f7f;
-  //         overflow: hidden;
-  //         text-overflow: ellipsis;
-  //         display: -webkit-box;
-  //         -webkit-line-clamp: 7;
-  //         -webkit-box-orient: vertical;
-  //         image {
-  //           width: 100% !important;
-  //         }
-  //       }
-  //       .line {
-  //         margin: 18rpx 0;
-  //         content: "";
-  //         width: 100%;
-  //         height: 1px;
-  //         padding: 0 32rpx;
-  //         box-sizing: border-box;
-  //         background-color: #e5e5e5;
-  //         -webkit-transform: scale(1, 0.5);
-  //         transform: scale(1, 0.5);
-  //         -webkit-transform-origin: center bottom;
-  //         transform-origin: center bottom;
-  //       }
-  //       .item-title {
-  //         font-size: 28rpx;
-  //         color: #4a4a4a;
-  //         margin-bottom: 10rpx;
-  //       }
-  //       .item-abstract {
-  //         font-size: 26rpx;
-  //         color: #6a6a6a;
-  //         margin-bottom: 10rpx;
-  //         .report_ico {
-  //           width: 32rpx;
-  //           height: 26rpx;
-  //           margin-right: 20rpx;
-  //           display: inline-block;
-  //         }
-  //       }
-  //       .item-createtime {
-  //         display: flex;
-  //         align-items: center;
-  //         justify-content: space-between;
-  //         color: #acacac;
-  //         font-size: 24rpx;
-  //         .item-examine {
-  //           display: flex;
-  //           align-items: center;
-  //           image {
-  //             width: 30rpx;
-  //             height: 24rpx;
-  //             margin: 0 10rpx 0 15rpx;
-  //           }
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-  // .advice_ico {
-  //   width: 81rpx;
-  //   height: 81rpx;
-  //   position: fixed;
-  //   right: 30rpx;
-  //   bottom: 214rpx;
-  // }
-  // .content-intimate {
-  //   position: fixed;
-  //   display: flex;
-  //   align-items: center;
-  //   bottom: 96rpx;
-  //   right: 41rpx;
-  //   height: 156rpx;
-  //   .content {
-  //     width: 432rpx;
-  //     height: 112rpx;
-  //     background-color: #fff;
-  //     display: flex;
-  //     border-radius: 56rpx;
-  //     overflow: hidden;
-  //     .cont-border {
-  //       margin: 0 2rpx;
-  //     }
-  //     view {
-  //       flex: 1;
-  //       background-color: #3385ff;
-  //       font-size: 30rpx;
-  //       color: #fff;
-  //       padding-top: 15rpx;
-  //       text-align: center;
-  //     }
-  //   }
-
-  //   image {
-  //     width: 156rpx;
-  //     height: 100%;
-  //     z-index: 99;
-  //   }
-  // }
 }
 </style>