veterans_H5/h5_web/pages/recruitment/recruitment.vue

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

<template>
	<view class="recruitment">
    <u-navbar title-color="#FFFFFF" :bpay-bottom="false" back-icon-color="#FFFFFF" :background="{background: '#3D5D4C' }" title="招聘就业" class="recruitment-unavbar" />
    
    <!-- ###################################-- 轮播图 -- ################################### -->
    <view class="recruitment-banner">
      <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">
       <u-search placeholder="请输入您关键词" v-model="headerTopKeyword" :show-action="false" bg-color="#FFFFFF"></u-search>
    </view>
    
    <!-- ###################################-- 企业推荐 -- ################################### -->
    <view class="u-card-wrap recruitment-recommend">
    	<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="recommendListData&&recommendListData.length>0"
            class="recommend-card-content" 
            :display-multiple-items="5"
            >
              <swiper-item v-for="(item,index) in recommendListData" :key="index">
                <view class="swiper-item" @tap="tapRecommendSwiperItem(item)" :data-id="item.id" :data-index="index">
                  <image class="img" :src="item.img" mode="aspectFill"></image>
                  <view class="subject">{{item.subject}}</view>
                  <view class="post u-text-center">
                    岗位
                    <text class="postlink">{{item.postNumber}}</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>
    
    <view class="recruitment-dataarea">
    	<u-tabs bg-color="transparent" :list="dataAreaTabsList" @change="dataAreaTabsChange" :current="dataAreaTabsCurrent" />
      <view class="recruitment-dataarea-card">
        <view class="">
          djkhdsjkhsd
        </view>
        <view class="">
          sjhjshs
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        headerTopKeyword: '',
				paginationConfig:{
					  pageNo: 1,
					  pageSize: 10
				},
				bannerList: [],
        recommendListData:[
        	{
        		id:1,
        		img:"https://img.xiaopiu.com/userImages/img88517697eccbd8.jpg",
        		subject:"顺丰快递",
            postNumber: 10
        	},
        	{
        		id:2,
        		img:"https://img.xiaopiu.com/userImages/img88317697ec8588.jpg",
        		subject:"中国平安",
            postNumber: 14
        	},
        	{
        		id:3,
        		img:"https://img.xiaopiu.com/userImages/img205717698ca4710.png",
        		subject:"保利贵州",
            postNumber: 8
        	},
        	{
        		id:4,
        		img:"https://img.xiaopiu.com/userImages/img87917697ec0c70.png",
        		subject:"海大装饰",
            postNumber: 18
        	},
        	{
        		id:5,
        		img:"https://img.xiaopiu.com/userImages/img87717697ebe178.jpg",
        		subject:"永辉超市",
            postNumber: 10
        	},
        	{
        		id:5,
        		img:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        		subject:"研发测试岗位",
            postNumber: 99
        	}
        ],
        recommendConfigData:{
        	title:'企业推荐',
        	titlemore:'更多',
        	listmore: false
        },
        dataAreaTabsCurrent: 0,
        dataAreaTabsList: [
          {
            name: '最新'
          }, 
          // {
          //   name:  '附近',
          //   count: 7
          // }, {
          //   name: '筛选'
          // }
        ]
			}
		},
		onLoad() {
			// console.log(this.$u.config.v);
			
		},
		onShow() {
			this.getBannerList();
		},
		methods: {
			/**
				 * 打开新页面
				 * @param {String} path 跳转路径
				 * */
			openPage(path,msg) {
			  this.$u.route({
			    url: path,
				params:{
					msg:msg
				}
			  })
			},
			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"
            }
          );
					console.log('bannerList',JSON.parse(JSON.stringify(res)));
				})
			},
			// 轮播图点击
			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
						}
					})
				}
			},
      recommendCardMoreClick(index) {
        console.log("recommendCardMoreClick: ",index);
      },
      tapRecommendSwiperItem(param){
        console.log("tapRecommendSwiperItem: ",param);
      },
      dataAreaTabsChange(index) {
        console.log("dataAreaTabsChange: ",index);
      	this.dataAreaTabsCurrent = index;
      }
		}
	}
</script>

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