proginn-frontend/pages/job/index.vue

<template>
  <div :class="{ isMobile: mobile }">
    <!-- web -->
    <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>为您找到 {{dataList.length}} 个 "{{ 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>
    <!-- mobile -->
    <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 && !isWxapp}"
      >
        <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}`" :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>
      <a v-if="!deviceType.app && mobile && !isBaiduxapp && !isWxapp" :class="{'downapp':isShowDownLoad}" :href="downloadhref">下载APP</a>
    </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";
  import {mapState, mapMutations} from "vuex";
  import deviceType from "../../plugins/deviceType";

  export default {
    name: "JobListSeoIndex",
    // layout: "opacity_header",
    showCommonFooter: false,
    components: {ConnectUs, BindMobile, SeoFooter, BottomBanner},
    data() {
      return {
        expansion: {direction: 0, city: 0},
        isShowToast: false,
        name: "",
        phone: "",
        loading: false,
        refreshing: false,
        firstLoading: false, //移动端加载loading
        isLoading: false,
        selected: {},
        downloadhref: "",
        type: "",
        isShowDownLoad: false,
        isBaiduxapp: false,
        isWxapp: false,
      };
    },
    head() {
      const {
        title = "",
        keyword = "",
        description = "",
        h1 = "",
        canonical = "",
        metaLocation
      } = this.head || {};
      let obj = {
        title: title,
        meta: [
          {
            name: "keywords",
            content: keyword
          },
          {
            name: "description",
            content: description
          },
          {
            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:", 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();
      if (this) {
        this.selected = selected;
      }
      return {
        selected: selected,
        ...ans,
        footer
      };
    },
    watch: {},
    computed: {
      ...mapState(["isPC", "isWeixin", "deviceType", "noneCommonFooter"]),
      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;";
      }

      let UA = navigator.userAgent;
      console.log("-------------", UA);
      this.isWxapp = UA.indexOf('miniProgram') > -1;
      console.error(this.isWxapp ? "是微信" : "不是微信");
      this.isBaiduxapp = navigator.userAgent.indexOf('swan/') > -1;
      console.log(this.$route.params);
      var isAndroid = UA.indexOf("Android") > -1 || UA.indexOf("Adr") > -1; //android终端
      console.error(isAndroid ? "是安卓" : "不是安卓");
      var isiOS = !!UA.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      console.error(isiOS ? "是IOS" : "不是IOS");

      if (this.isWxapp) {
        this.downloadhref =
          "http://a.app.qq.com/o/simple.jsp?pkgname=com.proginn";
      } else if (isAndroid) {
        this.downloadhref =
          "http://inncms.storage.proginn.com/android/proginn-v4.10.0.apk";
      } else if (isiOS) {
        this.downloadhref =
          "https://itunes.apple.com/cn/app/cheng-xu-yuan-ke-zhan/id979914687";
      }
      console.log("this.downloadhref =", this.downloadhref);

      this.type = deviceType.app ? "APP" : "浏览器";


      setTimeout(() => {
        this.isShowDownLoad = true;
        console.log("this.isShowDownload=", this.isShowDownLoad);
      }, 500);
    },
    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;
      },
      is_weixin() {
      }
    }
  };
</script>

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

  .downapp {
    position: absolute;
    bottom: 0;
    z-index: 1000;
    width: 100vw;
    height: 50px;
    background: cornflowerblue;
    color: white;
    font-size: 15px;
    text-align: center;
    line-height: 50px;
  }
</style>