employ-front/pages/home/index.vue

<template>
	<view>
		<view class="se-bgc-orange se-pos se-pos-lt se-w-vw-100 se-h-vh-30"
			style="z-index: -1;border-bottom-left-radius: 120rpx;border-bottom-right-radius: 120rpx;"></view>
		<view class="se-flex se-flex-h-sb se-px-40 se-pb-30 se-pt-10 se-bgc-orange se-zi-s">
			<view class="se-c-white se-fs-28" @click="getLocation()">
				<view class="se-bgc-white se-py-5 se-px-10 se-fw-6 se-br-12 se-c-orange se-fs-24 se-display-ib">
					工
				</view>
				<text class="se-ml-10 se-fw-6 se-fs-28">智选猎头</text>
			</view>
			<!-- <view class="se-br-30 se-bgc-white se-fw-6 se-c-orange se-fs-28 se-px-20 se-py-10">
				企业/个人端
			</view> -->
		</view>
		<view class="se-px-20 se-pt-10 se-zi-s">
			<u-search height="40" placeholder="搜索" :showAction="false" v-model="keyword"></u-search>
		</view>
		<view class="se-pb-20 se-pt-40 se-zi-s">
			<view class="se-px-20">
				<u-swiper height="300rpx" :indicator="true" style="background-color: #f5f5f5;height: 300rpx;"
					:list="swiperList" keyName="image" @change="change" @click="click"></u-swiper>
			</view>
			<swiper :autoplay="true" :interval="3000" :duration="1000" circular class="notice" vertical>
				<swiper-item v-for="item in noticeData" :key="item.id">
					<view
						class="se-pt-10 se-bgc-white se-px-0 se-py-10 se-ta-l se-c-orange se-flex se-flex-ai-c se-fs-26">
						<image class="se-a-80" src="@/static/image/aed60x.png" mode=""></image>
						<text class="se-ml-10">{{item.title}}</text>
					</view>
				</swiper-item>
			</swiper>

		</view>
		<view class="se-my-20 se-bgc-white se-grid">
			<navigator :url="`/pages_subpack/category/index`+item.id" v-for="(item, index) in tabList" :key="index"
				class="se-flex-v-c se-pt-30 se-mb-20">
				<image class="se-a-100 se-br-20 se-bgc-f5" :src="item.icon" mode=""></image>
				<text
					class="se-w-150 se-h-60 se-lh-30 se-c-black se-fs-22 se-ta-c se-mt-10 se-toe-2">{{item.name}}</text>
			</navigator>
		</view>
		<view class="se-my-20 se-bgc-white se-p-20 se-flex">
			<view @click="toNavigator(1)"
				class="se-flex-1 se-flex-h-c se-flex-ai-c se-c-white se-py-20 se-fw-6 enterprise">
				<!-- 找工作 -->
				招聘
			</view>
			<view @click="toNavigator(2)"
				class="se-flex-1 se-ml-20 se-flex-h-c se-flex-ai-c se-c-white se-py-20 se-fw-6 master">
				<!-- 找师傅 -->
				求职
			</view>
		</view>
		<u-tabs :current="current" lineWidth="30" lineColor="#FF7A31" :activeStyle="{
				color: '#303133',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}" :inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :list="navList" @click="navClick($event)">
		</u-tabs>
		<!-- 企业端 求职大厅 -->
		<enterpriseBox :rolelist="rlist" v-if="current==0" />
		<!-- 师傅端 招聘大厅 -->
		<masterBox :taskList="tList" v-if="current==1" />
		<view class="se-h-80"></view>
	</view>
</template>

<script>
	import {
		bannerList,
		taskList,
		rolelist,
		industryList,
		getSysText,
		noticeList
	} from "@/common/api.js"
	import enterpriseBox from "./component/enterprise.vue"
	import masterBox from "./component/master.vue"
	import QQMapWX from "@/util/qqmap-wx-jssdk.min.js"
	export default {
		components: {
			enterpriseBox,
			masterBox
		},
		data() {
			return {
				status: 1,
				list: [
					"https://cdn.uviewui.com/uview/swiper/swiper1.png"
				],
				tabList: [], //导航栏
				swiperList: [], //轮播
				current: 0,
				navList: [{
						name: '求职大厅',
					},
					{
						name: '招聘大厅',
					}
				],
				rpageNo: 1,
				rpageSize: 20,
				rlist: [],

				latitude: '34.00',
				longitude: '134.65',
				tpageNo: 1,
				tpageSize: 20,
				tList: [],
				noticeData: [], //公告列表
			}
		},
		mounted() {
			this.onBannerList()
			this.onTaskList()
			this.onRolelist()
			this.onIndustryList()
			this.getLocation()
			this.onSysText()
			this.getNotice()
		},
		onPullDownRefresh() {
			let that = this
			that.rpageNo = 1
			that.rlist = []
			that.onRolelist()
		},
		onReachBottom() {
			let that = this
			that.rpageNo = that.rpageNo + 1
			that.onRolelist()
		},
		methods: {
			// 获取公告列表
			async getNotice() {
				const {
					code,
					result
				} = await noticeList()
				if (code === 200) {
					this.noticeData = result || []
				}
			},
			onSysText() {
				let that = this
				let params = {}
				getSysText(params).then(response => {
					localStorage.setItem("sysList", response.result)
				}).catch(error => {

				})
			},
			getLocation() {
				const that = this;
				console.log('当前位置的经度：');
				wx.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('位置', res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						const qqmapsdk = new QQMapWX({
							key: 'TT7BZ-Z3LW4-KOAUB-KWHOA-SBJJ6-Y5B6R' // 必填
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(response) {
								// that.city = response.result.ad_info.city
								console.log('逆地理编码结果：', response);
							},
							fail: function(error) {
								console.error('逆地理编码失败：', error);
							}
						});
					}
				})
			},
			onIndustryList() {
				industryList({}).then(response => {
					console.info("industryList", response);
					this.tabList = response.result
				}).catch(error => {

				})
			},
			onBannerList() {
				bannerList({}).then(response => {
					console.info("banner", response)
					this.swiperList = response.result[0]
				}).catch(error => {

				})
			},
			onTaskList() {
				taskList({
					latitude: this.latitude,
					longitude: this.longitude,
					pageNo: this.tpageNo,
					pageSize: this.tpageSize
				}).then(response => {
					if (this.tpageNo == 1) {
						this.tList = response.result.records
					} else {
						this.tList = this.tList.concat(response.result.records)
					}

					console.info("taskList", response)
				}).catch(error => {

				})
			},
			onRolelist() {
				rolelist({
					pageNo: this.rpageNo,
					pageSize: this.rpageSize
				}).then(response => {
					if (this.rpageNo == 1) {
						this.rlist = response.result.records
					} else {
						this.rlist = this.rlist.concat(response.result.records)
					}
				}).catch(error => {

				})
			},
			navClick(event) {
				this.current = event.index
			},
			change(event) {
				console.info(event)
			},
			click(event) {
				console.info(event)
			},
			toNavigator(event) {
				uni.navigateTo({
					url: "/pages_subpack/release/index?status=" + event
				})
			},
		}

	}
</script>
<style scoped>
	page {
		background-color: #f5f5f5;
	}

	.enterprise {
		background: #ff7a31;
		border: 4rpx solid rgba(255, 255, 255, 0.50);
		border-radius: 14rpx;
	}

	.master {
		background: #f0b744;
		border: 4rpx solid rgba(255, 255, 255, 0.50);
		border-radius: 14rpx;
	}

	.notice {
		height: 108rpx;
	}
</style>