veterans_H5/h5_web/pages/recruitment/recruitment.vue

<!-- 
 * @title 招聘就业 
 * @author Rockery(1113269755@qq.com)
-->

<template>
  <view class="recruitment">
    <z-paging
      ref="recruitmentPaging"
      v-model="recruitmentJobList"
      :fixed="false"
      :paging-style="{ minHeight: '120vh' }"
      @query="recruitmentQueryList"
    >
      <u-navbar slot="top" back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
      <!-- ###################################-- 轮播图 -- ################################### -->
      <view class="recruitment-banner" slot="top">
        <u-swiper
          :list="bannerList"
          name="bannerUrl"
          border-radius="0"
          mode="round"
          height="300"
          img-mode="scaleToFill"
          @click="swiperClick"
          :mode="bannerList.length > 1 ? 'round' : 'none'"
        >
        </u-swiper>
      </view>

      <!-- ###################################-- 请输入您关键词 -- ################################### -->
      <view class="recruitment-usearch" slot="top">
        <u-search
          placeholder="请输入您关键词"
          v-model="headerTopKeyword"
          :show-action="false"
          bg-color="#FFFFFF"
          @search="searchKeyword"
          @clear="searchKeyword"
        ></u-search>
      </view>

      <!-- ###################################-- 企业推荐 -- ################################### -->
      <view class="u-card-wrap recruitment-recommend" slot="top">
        <u-card :show-foot="false" class="recruitment-recommend-card">
          <view slot="head">
            <view class="recommend-card-head">
              <view class="recommend-card-head-title">{{ recommendConfigData.title }}</view>
              <view class="recommend-card-head-subtitle" @tap="recommendCardMoreClick">
                {{ recommendConfigData.titlemore }}
                <u-icon name="arrow-right" color="#A3A3A3" size="28"></u-icon>
              </view>
            </view>
          </view>
          <view slot="body">
            <view class="recommend-card-body">
              <swiper v-if="recommendList && recommendList.length > 0" class="recommend-card-content" :display-multiple-items="4" :autoplay="true">
                <swiper-item v-for="(recommendItem, index) in recommendList" :key="'recommendList' + index">
                  <view class="swiper-item" @tap="tapRecommendSwiperItem(recommendItem)" :data-id="recommendItem.id" :data-index="index">
                    <view class="img">
                      <u-image :src="recommendItem.logoUrl" width="140" height="140" border-radius="10" mode="aspectFill">
                        <view slot="error">
                          <u-image src="../../static/img/default-company.png" width="140" height="140" border-radius="10" mode="aspectFill" />
                        </view>
                      </u-image>
                    </view>
                    <view class="subject">{{ recommendItem.companyName }}</view>
                    <view class="post u-text-center">
                      岗位
                      <text class="postlink">{{ recommendItem.postCount }}</text
                      >个
                    </view>
                  </view>
                </swiper-item>
                <swiper-item v-if="recommendConfigData.listmore">
                  <view class="swiper-item lookmore" @tap="recommendCardMoreClick">
                    <view class="moretext">查看更多</view>
                  </view>
                </swiper-item>
              </swiper>
              <u-empty v-else text="列表为空" mode="list"></u-empty>
            </view>
          </view>
        </u-card>
      </view>

      <!-- ###################################-- tabs页签 -- ################################### -->
      <view class="recruitment-tabs" slot="top">
        <u-tabs bg-color="#f2f2f2" :list="dataAreaTabsList" @change="dataAreaTabsChange" :current="dataAreaTabsCurrent" />
      </view>

      <!-- ###################################-- 招聘就业岗位 -- ################################### -->
      <view class="recruitment-dataarea">
        <view
          class="recruitment-dataarea-card"
          v-for="(item, index) in recruitmentJobList"
          :key="'recruitmentJobList' + index"
          @tap="tapDataAreaCard(item)"
        >
          <view class="dataarea-card-left">
            <u-image :src="item.companyLogoUrl" width="120" height="120" border-radius="10" mode="aspectFill">
              <view slot="error">
                <u-image src="../../static/img/default-company.png" width="120" height="120" border-radius="10" mode="aspectFill" />
              </view>
            </u-image>
          </view>
          <view class="dataarea-card-content">
            <view class="dataarea-content-left">
              <view>{{ item.postName }}</view>
              <view class="content">
                {{ item.areaName }}｜ {{ getDictsLabel(workYearList, item.workYear) }}｜{{ getEducationBg(item.educationBg) }}
              </view>
              <view>{{ item.companyName }}</view>
            </view>
            <view class="dataarea-content-right">
              <view>{{ item.lowestSalary }}K~{{ item.highestSalary }}K</view>
              <view>&nbsp;</view>
              <view>{{ $u.timeFormat(new Date(item.createTime).getTime(), 'yyyy-mm-dd') }}</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headerTopKeyword: '',
      bannerList: [],
      // 企业推荐列表
      recommendList: [],
      recruitmentJobList: [],
      recommendListData: [],
      recommendConfigData: {
        title: '企业推荐',
        titlemore: '更多',
        listmore: false
      },
      dataAreaTabsCurrent: 0,
      dataAreaTabsList: [
        {
          name: '最新',
          text: '1'
        }
      ],
      degrEducList: [],
      workYearList: []
    };
  },
  onLoad() {
    // console.log(this.$u.config.v);
    // 获取企业推荐列表
    this.getRecommendList();
  },
  onShow() {
    this.getBannerList();
    this.getVeteDegrEduc();
  },
  methods: {
    /**
     * 获取文化程度类别
     */
    getVeteDegrEduc() {
      this.$u.api
        .getDictdataUrl({
          key: 'degr_educ'
        })
        .then((res) => {
          if (res.code == 200) {
            this.degrEducList = res.data.map((item) => {
              return {
                ...item,
                value: item.text
              };
            });
          }
        });
      this.$u.api
        .getDictdataUrl({
          key: 'work_year'
        })
        .then((res) => {
          if (res.code == 200) {
            this.workYearList = res.data.map((item) => {
              return {
                ...item,
                value: item.text
              };
            });
          }
        });
    },
    /**
     * 获取教育等级名称
     * @param {Object} value
     */
    getEducationBg(value) {
      let name;
      this.degrEducList.forEach((item) => {
        if (item.value == value) {
          name = item.label;
        }
      });
      return name;
    },
    /**
     * 导航栏返回事件
     */
    navbarCustomBack() {
      this.$u.route({
        type: 'switchTab',
        url: 'pages/index/index'
      });
    },
    getBannerList() {
      this.$u.api.indexApi
        .indexBannerListApi({
          type: 1
        })
        .then((res) => {
          if (res?.code === 200) {
            this.bannerList = res.data;
          }
        });
    },
    // 轮播图点击
    swiperClick(index) {
      if (this.bannerList[index].jumpUrl) {
        let url = this.bannerList[index].jumpUrl.split('#')[1];
        this.$u.route({
          url: url
        });
      } else {
        this.$u.route({
          url: 'pages/bannerDetails/bannerDetails',
          params: {
            id: this.bannerList[index].id,
            type: 1
          }
        });
      }
    },
    /**
     * 获取企业推荐列表
     */
    getRecommendList() {
      this.$u.api.recruitment
        .getRecommendList()
        .then((res) => {
          if (res.code === 200) {
            this.recommendList = res.data || [];
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: '系统异常!',
            type: 'error'
          });
        });
    },
    /**
     * 获取招聘就业岗位列表
     * @param { Number } newest
     * @param { Number } pageNum
     * @param { Number } pageSize
     * @param { String } postName
     */
    getRecruitmentJobList(newest, pageNum, pageSize, postName) {
      this.$u.api.recruitment
        .getRecruitmentJobList({
          pageNum,
          pageSize,
          postName,
          newest
        })
        .then((res) => {
          if (res.code === 200) {
            this.$refs.recruitmentPaging.complete(res.rows || []);
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            });
            this.$refs.recruitmentPaging.complete([]);
          }
        })
        .catch((err) => {
          uni.showToast({
            title: '系统异常!',
            type: 'error'
          });
          this.$refs.recruitmentPaging.complete([]);
        });
    },
    /**
     * @param { String } value
     */
    searchKeyword(value) {
      this.$refs.recruitmentPaging.reload(true);
      this.getRecruitmentJobList(this.dataAreaTabsList[this.dataAreaTabsCurrent]?.text, 1, 10, this.headerTopKeyword);
    },
    // tab栏切换
    dataAreaTabsChange(index) {
      this.dataAreaTabsCurrent = index;
      this.$refs.recruitmentPaging.reload(true);
      this.getRecruitmentJobList(this.dataAreaTabsList[index]?.text, 1, 10, this.headerTopKeyword);
    },
    /**
     * 列表加载触发
     */
    recruitmentQueryList(pageNo, pageSize) {
      if (this.dataAreaTabsList.length > 0) {
        this.getRecruitmentJobList(this.dataAreaTabsList[this.dataAreaTabsCurrent]?.text, pageNo, pageSize, this.headerTopKeyword);
      }
    },
    recommendCardMoreClick(index) {
      console.log('recommendCardMoreClick: ', index);
      this.$u.route({
        url: 'pages/cooperativeEnterprise/cooperativeEnterprise',
        params: {
          flag: 'recruitment'
        }
      });
    },
    tapRecommendSwiperItem(param) {
      this.$u.route({
        url: 'pages/businessDetails/businessDetails',
        params: {
          id: param?.id,
          flag: 'recruitment'
        }
      });
    },
    tapDataAreaCard(param) {
      this.$u.route({
        url: 'pages/jobDetails/jobDetails',
        params: {
          id: param?.id
        }
      });
    },
    /**
     * 通过value获取label
     * @param {Object} list
     * @param {Object} value
     */
    getDictsLabel(list, value) {
      let label = '-';
      try {
        list.forEach((item) => {
          if (Number(item.text) === Number(value)) {
            throw item;
          }
        });
      } catch (e) {
        label = e.label;
      }
      return label;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './scss/recruitment.scss';
</style>