proginn-frontend/pages/job/index.vue

<template>
  <div :class="{isMobile: mobile}">
    <div v-if="!mobile">
      <div class="jobList">
        <div class="topArea" v-if="!isSeoList">
          <!--{{JSON.stringify(typeList)}}-->
        </div>
        <div class="contentArea">
          <div class="selectArea" v-if="!isSeoList">
            <div class="selectContent" v-for="(key, i) in Object.keys(typeList)" :key="i + 'selectContent'">
              <div class="content">
                <div class="left"><p>{{typeList[key].title}}</p></div>
                <div class="right">
                  <div class="cell"
                       v-for="(item, ii) in typeList[key].list"
                       :class="{selected: item.id === selected[key], noneClick: !canSelectCity && key === 'city'}"
                       @click="changeIndexSeo(key, item)"
                       v-if="ii < 8 || expansion[key]"
                       :key="ii+key+item.id"
                  >
                    <p>{{item.name}}</p>
                  </div>
                </div>
                <div class="more" @click="changeExpansion(key)" v-if="typeList[key].list.length > 8">
                  {{expansion[key] ? "收起" : "更多"}}
                </div>
              </div>
              <div class="smallContent"
                   v-if="key === 'direction' && typeList[key].smallList.length > 0"
              >
                <div class="cell"
                     v-for="(item) in typeList[key].smallList"
                     :class="{selected: item.id === selected.directionSmall}"
                     @click="changeIndexSeo('directionSmall', item)"
                >
                  <p>{{item.name}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="breadcrumb">
            <a
              v-for="(item, index) in breadcrumbList"
              :key="'breadcrumb'+index"
              :href="item.url"
              :title="item.name"
            >
              <p v-if="index!==breadcrumbList.length-1">{{item.name}} <span>&nbsp;>&nbsp;</span></p>
              <h1 v-else>{{item.name}}</h1>
            </a>
          </div>
          <div class="listArea">
            <!--<h1 class="sTitle">{{head.h1 || '解决方案'}}</h1>-->
            <div class="list" v-loading="loading">
              <nuxt-link class="cell"
                         v-for="item in dataList"
                         :key="item.id"
                         :to="`/job/detail/${item.id}.html`"
                         target="_blank"
                         :title="item.name"
              >
                <div class="topArea">
                  <div class="left">{{item.title}}</div>
                  <div class="right">{{item.salaryName}}</div>
                </div>
                <div class="workDesc">{{item.description}}</div>
                <div class="labelList">
                  <div class="label" v-for="skill in (item.skills || [])"><p>{{skill.name}}</p></div>
                  <div class="label"><p>{{item.experienceName}}</p></div>
                </div>
                <div class="bottomArea">
                  <div class="companyInfo">
                    <div class="logo">
                      <img :src="item.companyInfo.logo" alt=""/>
                    </div>
                    <div class="companyName">{{item.companyInfo.name || item.companyInfo.shortName}}</div>
                  </div>
                  <div class="publishTime">{{item.createdAtFormat}}</div>
                </div>
              </nuxt-link>
              <div v-if="dataList.length === 0" class="noneData">
                <p>没有数据</p>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination v-if="!isSeoList" background layout="prev, pager, next" :total="page.total"
                           :page-size="page.pageSize" @current-change="pageChange" :current-page="Number(page.current
            )"></el-pagination>
            <div v-else>
              <div class="list">
                <nuxt-link v-for="(item,index) in new Array(Math.ceil(page.total / page.size))"
                           :to="`/job/?page=${index+1}`"
                           :key="(page)+index"
                >
                  {{index+1}}
                </nuxt-link>
              </div>
            </div>
          </div>
          <BottomBanner></BottomBanner>
        </div>
      </div>
      <SeoFooter style="" :data="footer"/>
    </div>
    <div v-else class="jobListMobile">
      <div class="topSelect">
        <van-dropdown-menu>
          <!--方式-->
          <van-dropdown-item v-model="selected['workType']" :options="typeList['workType'].list" key="workType" @change="changeIndex('workType')"/>
          <!--地区-->
          <van-dropdown-item v-model="selected['city']" :options="typeList['city'].list" key="city"  @change="changeIndex('city')" :disabled="selected.workType===1"/>
          <!--职业-->
          <van-dropdown-item :title="calcName.text" key="direction" ref="directionSelect">
            <van-tree-select
              :items="typeList['direction'].list"
              active-id="1123321100"
              :main-active-index.sync="selected['directionIndex']"
              @click-item="(data)=>{changeIndex('directionSmall', data)}"
            />
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <h1>{{calcH1()}}</h1>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="listArea">
        <div style="text-align: center" v-if="firstLoading">
          <van-loading size="24px">加载中...</van-loading>
        </div>
        <van-list
          v-else
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          class="list"
        >
          <nuxt-link class="cell"
                     v-for="item in dataList"
                     :key="item.id"
                     :to="`/job/detail/${item.id}.html`"
                     target="_blank"
                     :title="item.name"
          >
            <div class="topArea">
              <div class="left">{{item.title}}</div>
              <div class="right">{{item.salaryName}}</div>
            </div>
            <div class="workDesc">{{item.description}}</div>
            <div class="labelList">
              <div class="label" v-for="skill in (item.skills || [])"><p>{{skill.name}}</p></div>
            </div>
            <div class="companyInfo" @click.stop="jumpToCompanyInfo(item)">
              <div class="logo">
                <img :src="item.companyInfo.logo" alt=""/>
              </div>
              <div class="companyName">{{item.companyInfo.name || item.companyInfo.shortName}}</div>
            </div>
          </nuxt-link>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  import ConnectUs from "@/components/common/connectUs"
  import BindMobile from "@/components/common/bindMobile"
  import DealSeoData from "@/components/job/dealSeoIndex"
  import DealSeoFooter from "@/components/job/dealSeoFooter"
  import BottomBanner from "@/components/job/bottomBanner"
  import SeoFooter from "@/components/SeoFooter"

  export default {
    name: "JobListSeoIndex",
    // layout: "opacity_header",
    showCommonFooter: false,
    components: { ConnectUs, BindMobile, SeoFooter, BottomBanner },
    head() {
      const { title = "", keyword = "", descrption = "", h1 = "", canonical = "", metaLocation } = this.head || {}
      let obj = {
        title: title,
        meta: [
          {
            'name': 'keywords',
            'content': keyword
          }, {
            'name': 'descrption',
            'content': descrption
          }, {
            'name': 'h1',
            'content': h1
          }
        ],
        link: [
          { rel: 'canonical', href: canonical },
        ]
      }
      if (metaLocation) {
        obj.meta.push({ 'name': 'location', 'content': metaLocation })
      }
      return obj
    },
    async asyncData({ ...params }) {
      try {
        params.store.commit("updateNoneCommonFooter", true)
      } catch ( e ) {
        console.log("updateNoneCommonFooter", e)
      }
      let dealDataObj = new DealSeoData(params)
      let ans = await dealDataObj.dealData()

      let dealSeoFooterObj = new DealSeoFooter(params)
      let footer = await dealSeoFooterObj.dealData()
      return {
        ...ans,
        ...footer
      }
    },
    data() {
      return {
        expansion: {
          direction: 0,
          city: 0,
        },
        isShowToast: false,
        name: '',
        phone: '',
        loading: false,
        refreshing: false,
        firstLoading: false, //移动端加载loading
        isLoading: false
      }
    },
    watch: {

    },
    computed: {
      canSelectCity() {
        //远程无法选中地区
        return this.selected.workType !== 1
      },
      calcName() {
        const {direction, directionSmall, directionName = "", directionSmallName = "", } = this.selected
        let job = directionSmall || direction
        let jobName = directionSmallName === "全部" ?  directionName : (directionSmallName || directionName)

        return {
          text: jobName || '全部职业',
          value: job
        }
      }
    },
    created() {
      // this.firstLoading = true
    },
    mounted() {
      // this.getList()
      if (this.mobile) {
        document.body.style = "overflow:hidden;"
      }
    },
    methods: {
      //移动端选择器
      changeIndex(key, item) {
        //级联选择 特殊处理一下
        console.log(this.selected, this.typeList)
        if (key === 'directionSmall') {
          //当右侧选择的不是"全部"选项的时候,将大选项初始化
          if (item.id) {
            this.selected[ 'direction'] = 0
            this.selected[ 'directionName'] = ''
            this.selected[ 'directionSlug'] = ''
            this.selected[ key] = item.id
            this.selected[ key + 'Name' ] = item.name
            this.selected[ key + 'Slug' ] = item.slug
          } else {
            //当右侧选择的是"全部"选项的时候, 将右侧数据初始化,只保留左侧数据
            //左侧更改时 直接更改的是索引index,故这里要转换一下
            let myItem = this.typeList.direction.list[this.selected.directionIndex]
            this.selected[ 'direction'] = myItem.id
            this.selected[ 'directionName'] = myItem.name
            this.selected[ 'directionSlug'] = myItem.slug
            this.selected[ key] = 0
            this.selected[ key + 'Name' ] = ''
            this.selected[ key + 'Slug' ] = ''
          }
        }
        //如果选中的工作方式是远程,则初始化 城市选择
        if (key === 'workType' && this.selected.workType === 1) {
          this.selected.city = 0
          this.selected.cityName = ''
        }

        this.page.page = 1
        this.page.total = 0
        this.firstLoading = true
        this.getList()
        this.$refs.directionSelect.toggle(false);
      },
      //web的选择器
      changeIndexSeo(key, item) {
        console.log("key:", key, "item:", item, "selected:", this.selected)

        //远程无法选中地区
        if (!this.canSelectCity && key === 'city') {
          return
        }

        // 如果选中了远程工作，重置城市选择
        if (key === "workType" && item.id === 1) {
          this.selected.city = 0
          this.selected.cityName = ""
          this.selected.citySlug= ""
        }

        this.selected[ key ] = item.id
        this.selected[ key + 'Slug' ] = item.slug
        //大工作分类时，先显示子分类
        if (key === 'direction') {
          if (item.id === 0) {
            this.selected[ 'directionSmall' ] = item.id
            this.selected[ 'directionSmallSlug' ] = item.slug
          } else {
            let list = this.typeList.direction.list.filter(item => item.id === this.selected.direction)[0]
            if (list.children && list.children.length > 1) {
              this.selected[ 'directionSmall' ] = -1
              this.typeList[key].smallList = [...(list && list.children || [])]
              return
            }
          }
        }
        let { citySlug, directionSlug, directionSmallSlug, workTypeSlug} = this.selected
        let url = "/job/"
        if (citySlug) {
          url += citySlug + '/'
        }
        if (directionSmallSlug || directionSlug) {
          url += (directionSmallSlug || directionSlug) + '/'
        }
        //驻场方式 不放到url里面
        if (key === "workType" ) {
          this.page.page = 1
          this.page.total = 0
          this.getList()
          return
        }
        location.href = url
      },
      changeExpansion(key) {
        this.expansion[ key ] = !this.expansion[ key ]
      },
      getList() {
        const { page, selected: {city, direction, directionSmall, workType} } = this
        let p = {
          cityId: city,
          ...page
        }
        direction && (p.occupationId = direction) //一级
        workType && (p.workType = workType)
        directionSmall > 0 && (p.directionId = directionSmall)  //耳二级
        if (this.isLoading) {
          return
        }
        this.loading = true
        this.isLoading = true
        this.$axios.post('/api/recruit/search', p).then(res => {
          if (Number(res.data.status) === 1) {
            let data = res.data.data
            this.page.total = data.total
            if (this.page.page === 1 || !this.mobile) {
              this.dataList = [...data.list]
            } else {
              this.dataList = [ ...this.dataList, ...data.list]
            }
            this.page.page += 1
            this.page.current = Number(data.page)
            if (this.page.total <= this.dataList.length) {
              this.finished = true
            }
          }
        }).finally(() => {
          this.firstLoading = false
          this.refreshing = false
          this.isLoading = false
          this.$nextTick(()=>{
            this.loading = false
          })
          console.log("this.finished", this.finished)
        })
      },
      pageChange(i) {
        this.page.page = i
        this.getList()
      },
      jumpToCompanyInfo(item) {
        const {companyInfo:{uid}} = item
        window.open(`/wo/${uid}`, `targetCompany${uid}`)
      },
      /** 移动端下拉刷新 **/
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        console.log('onRefresh')
        this.onLoad();
      },
      onLoad() {
        console.log('onLoad')
        this.getList()
      },
      calcH1() {
        const { city, cityName = "", direction, directionName = "", directionSmall, directionSmallName = "" } = this.selected
        let job = directionSmall || direction
        let jobName = directionSmallName === "全部" ?  directionName : (directionSmallName || directionName)
        let title = "兼职招聘"
        if (city && job) {
          title = `${cityName}${jobName}兼职招聘`
        } else if (city && !job) {
          //兼职城市
          title = `${cityName}兼职招聘`
        } else if (!city && job) {
          //岗位页
          title = `${jobName}兼职招聘`
        }
        return title
      },
    }
  }
</script>

<style scope lang="scss">
  @import "../../assets/css/job/index.scss";
</style>
<style lang="scss">
  .van-dropdown-menu__title {
    color: #666;
  }
</style>