tab栏

src/project/grid/AppJob/AppJob.vue

@@ -1,15 +1,22 @@
 <template>
   <div class="wrapper">
-
-    <div class="tab-select">
-      <div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{item}}<span></span></div>
+    <div class="tabs">
+      <u-tabs
+          :list="tabs"
+          font-size="40"
+          bg-color="transparent"
+          :bold="false"
+          inactive-color="#ccddff"
+          :is-scroll="true"
+          :gutter="16"
+          active-color="#fff"
+          :current="index"
+          @change="onChange">
+      </u-tabs>
     </div>
 
     <div class="search-wrap">
       <div class="left">
-        <!--  @click="show=true" -->
-        <!-- <span>{{ search.typeName ? search.typeName : "全部" }}</span> -->
-        <!-- <u-icon name="arrow-down" color="#ffffff" size="20"></u-icon> -->
         <AiSelect :dict="yesOrNo" v-model="search.typeName" placeholder="请选择">
           <span>{{ search.typeName ? search.typeName : "全部类型" }}</span>
           <u-icon name="arrow-down" color="#333333" size="20"></u-icon>
@@ -23,12 +30,6 @@
       </div>
     </div>
     <div class="job-list" v-if="list.length">
-      <!-- <header>
-        <span>招工就业列表</span>
-        <div class="right">
-          共<em>{{ total }}</em>个职位
-        </div>
-      </header> -->
       <div class="card" v-for="(item,index) in list" :key="index">
         <template v-if="item.type == 1">
           <div class="top" @click="toDetail(0,item)">
@@ -95,8 +96,7 @@ export default {
         type: "",
         typeName: "",
       },
-      tabs: ['全部','我的发布'],
-      tabIndex: 0,
+      index: 0,
     }
   },
   onLoad() {
@@ -110,12 +110,18 @@ export default {
       }, {
         value: '0',
         label: '企业招工'
-      },
-        {
-          value: '1',
-          label: '个人求职'
-        }];
-    }
+      },{
+        value: '1',
+        label: '个人求职'
+      }];
+    },
+    tabs() {
+      return [{
+        name: '全部'
+      }, {
+        name: '我的发布'
+      }]
+    },
   },
   methods: {
     preview(index) {
@@ -133,11 +139,12 @@ export default {
       this.getList();
     },
 
-    tabClick(index) {
-      this.current = 1,
-      this.list = [],
-      this.tabIndex = index
-      // this.getList()
+    onChange(val) {
+      this.index = val;
+      this.current = 1;
+      if (!!this.index) {
+        this.getMine();
+      } else this.getAll();
     },
 
     getList() {
@@ -175,43 +182,17 @@ export default {
   padding-top: 96px;
 }
 
-.tab-select {
+.tabs {
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 11;
   width: 100%;
-  height: 96px;
-  line-height: 96px;
+  padding: 10px 0 10px 16px;
+  box-sizing: border-box;
   background: #4181FF;
-  display: flex;
-  z-index: 999;
-
-  .item{
-    flex: 1;
-    text-align: center;
-    font-size: 40px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    color: #CDDCF0;
-  }
-
-  .active{
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    position: relative;
-    color: #fff;
-    span{
-      width: 48px;
-      height: 4px;
-      background: #FFF;
-      position: absolute;
-      bottom: 14px;
-      left: 50%;
-      margin-left: -24px;
-    }
-  }
 }
 
-
 .search-wrap {
   width: 100%;
   height: 124px;