clsd/app/pages/index/index.vue

<template>
	<view class="main">
		<!--搜索-->
		<view class="search">
			<view class="usearch">
				<u-search placeholder="搜索工作" :disabled="true" bgColor="white" :showAction="false" @click="go('/pages/job/search')"></u-search>
			</view>
			<view class="address omit" @click="go('/pages/job/position/city')">
				<text class="icon">&#xe64b;</text>
				<text>{{ param.cityName || '南宁市' }}</text>
			</view>
		</view>
		<!--轮播图-->
		<view class="banner">
			<u-swiper circular :radius="5" :indicator="true" keyName="pic" :list="bannerList" :height="160" class="uni-swiper" @click="BannerClick"></u-swiper>
		</view>
		<view class="tab">
			<u-tabs :scrollable="false" :lineHeight="5" :inactiveStyle="{ fontSize: '17px' }" :activeStyle="{ color: '#3c9cff', fontSize: '17px' }" :list="tab" @click="tabClick"></u-tabs>
		</view>
		<!--职位列表-->
		<view class="list">
			<jobIndex :list="list" v-if="list.length > 0"></jobIndex>
			<u-empty v-else text="该城市暂无工作"></u-empty>
			<button class="btn" v-if="list.length == 8" @click="go('/pages/job/list?type=' + param.type + '&current=' + param.current)">
				<text>查看更多</text>
				<text class="icon">&#xe62b;</text>
			</button>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			tab: [
				{ name: '推荐工作', orderBy: 'id', type: 0, recommend: 1, current: 1 },
				{ name: '身边工作', orderBy: 'distance', type: 0, recommend: 1, current: 2 },
				{ name: '现结工作', orderBy: 'id', type: 1, recommend: 1, current: 0 }
			],
			list: [],
			param: { pageNum: 1, pageSize: 8, type: 0, recommend: 1, current: 1 },
			bannerList: []
		};
	},
	onLoad() {
		this.getData();
		this.initData();
		uni.$on('select_city', (res) => {
			this.param.cityName = res.title;
			this.param.regionId = res.id;
			this.getData();
		});
	},
	methods: {
		initData() {
			//轮播图
			this.http.request({
				url: '/app/home/banner/0',
				success: (res) => {
					this.bannerList = res.data.data;
				}
			});
			//初始化所有地区
			this.http.request({
				url: '/app/common/column/city/all',
				success: (res) => {
					uni.setStorageSync('city_all', res.data.data);
				}
			});
			// #ifdef MP-WEIXIN
			//授权获取位置
			uni.authorize({
				scope: 'scope.userLocation',
				success: (s) => {
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							uni.setStorageSync('location', res);
							this.param.latitude = res.latitude;
							this.param.longitude = res.longitude;
							this.getData();
						}
					});
				},
				fail(res) {
					uni.showModal({ title: '提示', content: '定位失败,请检查是否允许定位', showCancel: false });
				}
			});
			// #endif
		},
		getData() {
			this.http.request({
				url: '/app/position/list',
				data: this.param,
				success: (res) => {
					this.list = res.data.rows;
				}
			});
		},
		tabClick(e) {
			this.param.orderBy = e.orderBy;
			this.param.type = e.type;
			this.param.recommend = e.recommend;
			this.param.current = e.current;
			this.getData();
		},
		//点击轮播图
		BannerClick(index) {
			let item = this.bannerList[index];
			if (item.contentType == '新闻资讯') {
				uni.navigateTo({ url: '/pages/news/detail?id=' + item.contentId });
			}
			if (item.contentType == '通知公告') {
				uni.navigateTo({ url: '/pages/notice/detail?id=' + item.contentId });
			}
			if (item.contentType == '工作职位') {
				uni.navigateTo({ url: '/pages/job/detail?id=' + item.contentId });
			}
		},
		go(url) {
			uni.navigateTo({ url: url });
		}
	}
};
</script>

<style lang="scss">
.banner {
	margin-top: 15px;
	box-shadow: $box-shadow;
}
.tab {
	background-color: white;
	margin-top: 10px;
	border-radius: 5px;
	box-shadow: $box-shadow;
}
.btn {
	width: 60%;
	margin-top: 10px;
}
</style>