veterans_H5/h5_web/pages/recruitment/recruitment.vue

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

<template>
	<view class="recruitment">
    <u-navbar title-color="#FFFFFF" :customBack="navbarCustomBack" :bpay-bottom="false" back-icon-color="#FFFFFF" :background="{background: '#3D5D4C' }" title="招聘就业" class="recruitment-unavbar" />
    
    <z-paging ref="recruitmentPaging"
      v-model="recruitmentJobList"
      @query="recruitmentQueryList">
      
      <!-- ###################################-- 轮播图 -- ################################### -->
      <view class="recruitment-banner" slot="top">
        <u-swiper
          :list="bannerList"
          name="bannerUrl"
          border-radius="0"
          mode="round"
          height="440"
          img-mode="scaleToFill"
          @click="swiperClick"
        ></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="5"
              :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">
                    <image class="img" :src="recommendItem.logoUrl" mode="aspectFill"></image>
                    <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>
            </view>
      		</view>
      	</u-card>
      </view>
      
      <!-- ###################################-- tabs页签 -- ################################### -->
      <view class="recruitment-tabs" slot="top">
        <u-tabs bg-color="transparent" :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">
            <image :src="item.companyLogoUrl" mode="aspectFill" class="image"></image>
          </view>
          <view class="dataarea-card-content">
            <view class="dataarea-content-left">
              <view>{{item.postName}}</view>
              <view class="content">{{item.workPlace}}｜{{item.workYear}}｜{{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>{{item.createTime}}</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        headerTopKeyword: '',
				bannerList: [],
        // 企业推荐列表
        recommendList: [],
        recruitmentJobList: [],
        recommendListData:[
        	{
        		id:1,
        		img:"https://img.xiaopiu.com/userImages/img88517697eccbd8.jpg",
        		subject:"顺丰快递",
            postNumber: 10,
            postCompany: '顺丰速运有限公司贵州分公司',
            postName: '快递员',
            postContent: '云岩区｜经验不限｜中等专科',
            postWage: '4.0k-8.0k',
            deadline: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
        	},
        	{
        		id:2,
        		img:"https://img.xiaopiu.com/userImages/img88317697ec8588.jpg",
        		subject:"中国平安",
            postNumber: 14,
            postCompany: '中国平安贵州分公司',
            postName: '保险员',
            postContent: '贵州省｜经验不限｜中等专科',
            postWage: '4.0k-8.0k',
            deadline: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
        	},
        	{
        		id:3,
        		img:"https://img.xiaopiu.com/userImages/img205717698ca4710.png",
        		subject:"保利贵州",
            postNumber: 8,
            postCompany: '保利贵州酒店管理有限公司',
            postName: '保安员',
            postContent: '贵州省｜经验不限｜中等专科',
            postWage: '4.0k-8.0k',
            deadline: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
        	},
        	{
        		id:4,
        		img:"https://img.xiaopiu.com/userImages/img87917697ec0c70.png",
        		subject:"海大装饰",
            postNumber: 18,
            postCompany: '海大装饰有限公司',
            postName: '设计师',
            postContent: '贵州省  | 设计师经验 | 中等专科',
            postWage: '4.0k-8.0k',
            deadline: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
        	},
        	{
        		id:5,
        		img:"https://img.xiaopiu.com/userImages/img87717697ebe178.jpg",
        		subject:"永辉超市",
            postNumber: 10,
            postCompany: '永辉超市有限公司',
            postName: '收银员',
            postContent: '贵州省  | 相关经验 | 中等专科',
            postWage: '4.0k-8.0k',
            deadline: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
        	},
        	{
        		id:5,
        		img:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        		subject:"研发测试岗位",
            postNumber: 99,
            postCompany: '智能科技有限公司',
            postName: '研发员',
            postContent: '贵州省｜经验不限｜中等专科',
            postWage: '4.0k-8.0k',
            deadline: this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
        	}
        ],
        recommendConfigData:{
        	title:'企业推荐',
        	titlemore:'更多',
        	listmore: false
        },
        dataAreaTabsCurrent: 0,
        dataAreaTabsList: [
          {
            name: '最新',
            text: '1'
          }, 
          // {
          //   name:  '附近',
          //   count: 7
          // }, {
          //   name: '筛选'
          // }
        ]
			}
		},
		onLoad() {
			// console.log(this.$u.config.v);
      // 获取企业推荐列表
			this.getRecommendList();
		},
		onShow() {
			this.getBannerList();
		},
		methods: {
      /**
       * 导航栏返回事件
       */
      navbarCustomBack(){
        this.$u.route({
          type: 'switchTab',
          url: 'pages/index/index'
        });
      },
			getBannerList(){
				this.$u.api.getIndexBannerList()
				.then(res=>{
					this.bannerList = res.data;
          this.bannerList = [];
          this.bannerList.push(
            {
              bannerUrl: 'https://img.xiaopiu.com/userImages/img146217698746a98.jpg',
              content: '<p>代码固定测试内容999997</p>',
              id: "999997",
              name: "代码固定测试999997"
            }
          );
          this.bannerList.push(
            {
              bannerUrl: 'https://img.xiaopiu.com/userImages/img14641769874a530.png',
              content: '<p>代码固定测试内容999998</p>',
              id: "999998",
              name: "代码固定测试999998"
            }
          );
          this.bannerList.push(
            {
              bannerUrl: 'https://img.xiaopiu.com/userImages/img14661769874c088.jpg',
              content: '<p>代码固定测试内容999999</p>',
              id: "999999",
              name: "代码固定测试999999"
            }
          );
				})
			},
			// 轮播图点击
			swiperClick (index) {
				// console.log('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
						}
					})
				}
			},
      /**
       * 获取企业推荐列表
       */
      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.getRecruitmentJobList(this.dataAreaTabsList[this.dataAreaTabsCurrent]?.text, 1, 10, this.headerTopKeyword);
			},
      // tab栏切换
      dataAreaTabsChange(index) {
        this.dataAreaTabsCurrent = index;
        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
        	}
        });
      }
		}
	}
</script>

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