招工就业

src/mods/publicity/AppJob/AppJob.vue

@@ -1,15 +1,25 @@
 <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>
+
     <div class="search-wrap">
-      <div class="left" @click="show=true">
+      <div class="left">
-        <span>{{ search.typeName ? search.typeName : "全部" }}</span>
+        <!--  @click="show=true" -->
-        <u-icon name="arrow-down" color="#ffffff" size="20"></u-icon>
+        <!-- <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>
+        </AiSelect>
       </div>
       <div class="right">
-        <u-icon name="search" size="32" color="rgba(255,255,255,0.5)" :custom-style="{marginRight:'8px'}"></u-icon>
+        <u-icon name="search" size="32" color="#999999" :custom-style="{marginRight:'8px'}"></u-icon>
         <input placeholder="请输入需要搜索的内容" style="flex: 1;color:#fff;" confirm-type="search"
-               placeholder-style="color:rgba(255,255,255,0.5)" v-model="search.title"
+               placeholder-style="color:#999999" v-model="search.title"
-               @confirm="current=1;getList()"></input>
+               @confirm="current=1;getList()" />
       </div>
     </div>
     <div class="job-list" v-if="list.length">
@@ -84,9 +94,14 @@ export default {
         title: "",
         type: "",
         typeName: "",
-      }
+      },
+      tabs: ['全部','我的发布'],
+      tabIndex: 0,
     }
   },
+  onLoad() {
+    this.$dict.load('yesOrNo')
+  },
   computed: {
     selectList() {
       return [{
@@ -106,15 +121,25 @@ export default {
     preview(index) {
       this.$previewImage(this.list, index, "url");
     },
+
     phone({linkPhone: phoneNumber}) {
       uni.makePhoneCall({phoneNumber});
     },
+
     onConfirm(val) {
       this.search.typeName = val[0].label;
       this.search.type = val[0].value;
       this.current = 1;
       this.getList();
     },
+
+    tabClick(index) {
+      this.current = 1,
+      this.list = [],
+      this.tabIndex = index
+      // this.getList()
+    },
+
     getList() {
       this.$instance.post("/app/appjob/list", null, {
         params: {
@@ -147,22 +172,56 @@ export default {
 
 <style lang="scss" scoped>
 .wrapper {
-  padding-top: 124px;
+  padding-top: 96px;
 }
 
-.search-wrap {
+.tab-select {
   position: fixed;
-  left: 0;
   top: 0;
-  z-index: 11;
+  left: 0;
+  width: 100%;
+  height: 96px;
+  line-height: 96px;
+  background: #4181FF;
+  display: flex;
+  z-index: 999;
+
+  .item{
+    flex: 1;
+    text-align: center;
+    font-size: 28px;
+    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;
-  background: #4181FF;
+  background: #F3F6F9;
   box-sizing: border-box;
   padding: 0 32px;
   display: flex;
   align-items: center;
   box-sizing: border-box;
+  color: #333333;
 
   .left {
     display: flex;
@@ -170,8 +229,8 @@ export default {
 
     & > span {
       font-size: 40px;
-      font-weight: 500;
+      font-weight: 600;
-      color: #FFFFFF;
+      // color: #FFFFFF;
       margin-right: 16px;
     }
   }
@@ -179,7 +238,7 @@ export default {
   .right {
     flex: 1;
     height: 64px;
-    background: rgba(0, 0, 0, .2);
+    background: #FFFFFF;
     border-radius: 32px;
     margin-left: 32px;
     box-sizing: border-box;