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,ii) in typeList[key].smallList"
                  :class="{selected: item.id === selected.directionSmall}"
                  @click="changeIndexSeo('directionSmall', item)"
                  :key="ii+key+item.id"
                >
                  <p>{{item.name}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="breadcrumb" v-if="!page.keyword">
            <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="breadcrumb" v-else>
            <h1>搜索包含"{{page.keyword}}"的兼职招聘</h1>
          </div>
          <div class="listArea">
            <div class="list" v-loading="loading">
              <nuxt-link
                class="cell"
                v-for="item in dataList"
                :key="item.id"
                :to="`/d/${item.hashId}`"
                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.shortName || item.companyInfo.name }}</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="`/?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"
        :class="{noneInWx: !$deviceType.app}"
      >
        <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="`/d/${item.hashId}`"
            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.shortName || item.companyInfo.name}}</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 }) {
    console.log(params);
    try {
      params.store.commit("updateNoneCommonFooter", true);
    } catch (e) {
      console.log("updateNoneCommonFooter", e);
    }
    console.log("asyncdata..............");
    let dealDataObj = new DealSeoData(params);
    let ans = await dealDataObj.dealData();

    let dealSeoFooterObj = new DealSeoFooter(params);
    let { footer, selected } = await dealSeoFooterObj.dealData();
    console.log(footer, selected);
    if (this) {
      this.selected = selected;
    }
    return {
      selected: selected,
      ...ans,
      footer,
    };
  },
  data() {
    return {
      expansion: {
        direction: 0,
        city: 0,
      },
      isShowToast: false,
      name: "",
      phone: "",
      loading: false,
      refreshing: false,
      firstLoading: false, //移动端加载loading
      isLoading: false,
      selected: {},
    };
  },
  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() {
    console.log("created................", this.selected, this.typeList);
    // this.firstLoading = true
  },
  mounted() {
    console.log("mounted................", this.selected, this.typeList);
    // 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("hhhahahahahhhhhhhhhhhhhhhhh");
      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 = "/";
      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(
        this.$store.state.domainConfig.baseUrl + `/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>