kly_uniapp/pages/index/index.vue

<!-- 用户-首页 -->

<template>
	<view style="padding-bottom: 20upx;">
		<view class="top_box">
			<!-- 轮播图 -->
			<view class="swiper_box">
				<swiper circular style="height: 520upx;" class="swiper" autoplay>
					<swiper-item :key="index" v-for="(item, index) in banner_data">
						<view @click="banner_href(item)" class="swiper-item uni-bg-red">
							<image style="width:750upx;height: 520upx;" :src="serverUrl+item.slideshowImg"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 头部区域 -->
			<view style="position: absolute;top: 80upx;left: 0;">
				<image style="width: 260upx;height: 70upx;margin-left: 3%;" :src="serverUrlImg4"></image>
				<view class="main_width top_search">
					<navigator url="./city">
						<view class="pos_box">
							<image style="width: 20upx;height: 30upx;" src="../../static/position_index.png"></image>
							<view class="nowrap" style="color: #ffffff;margin-left: 12upx;width: 150upx;">
								{{currentSelectCity}}
							</view>
						</view>
					</navigator>
					<view class="search_box">
						<view class="search_box_in">
							<image style="width: 27upx;height: 26upx;margin-left: 20upx;"
								src="../../static/search_index.png">
							</image>
							<input @confirm="get_data()" @input="ipt_change" style="" placeholder="服务生" />
						</view>
						<view @click="get_data()" style="color: #FFFFFF;margin-right: 30upx;">搜索</view>
					</view>
				</view>
			</view>

			<!-- 中间头像区域 -->
			<view class="index_bot" :style="'background-image: url('+serverUrlImg3+');'">
				<view @click="to_order"
					style="color: #666666;display: flex;align-items: center;margin-right: 30upx;font-size: 24upx;margin-left: 15upx;">
					已完成{{user_info.ss_finishedTotal||0}}次兼职任务<image
						style="width: 10upx;height: 22upx;margin-left: 15upx;margin-top: 2upx;"
						src="../../static/arrow_grey2.png"></image>
				</view>
			</view>
			<view style="position: absolute;left: 40upx;top: 410upx;display: flex;align-items: center;">
				<view @click="to_perInfo">
					<view
						style="box-shadow: 3px 3px 7px #c9c9c9;width: 100upx;height: 100upx;border: 4upx solid #ffffff;border-radius: 100upx;">
						<image style="width: 100upx;height: 100upx;border-radius: 50%;"
							:src="user_info.profile_photo||'../../static/user.png'"></image>
					</view>
					<view style="color: #333333;text-align: center;margin-top: 4upx;font-size: 24upx;max-width: 150upx;"
						class="nowrap">
						{{user_info.true_name?user_info.true_name:user_info.nickname?user_info.nickname:'会员名称'}}
					</view>
				</view>
				<view style="color: #5D5D5D;font-size: 28upx;margin-top: 70upx;margin-left: 20upx;">
					越努力 越幸运</view>
			</view>
		</view>

		<!-- 切换【完工即结】和【今日零工】 -->
		<view style="margin-top: 30upx;height: 120upx;position: relative;">
			<image style="width: 100%;" mode="widthFix" :src="is_nowUrgent?serverUrl_tab_nav2:serverUrl_tab_nav1">
			</image>
			<view @click="change_is_nowUrgent(false)" class="serverUrl_tab_nav" style="left: 0;"></view>
			<view @click="change_is_nowUrgent(true)" class="serverUrl_tab_nav" style="right: 0;"></view>
		</view>

		<view :class="is_nowUrgent?'tab_nav_next2':'tab_nav_next1'">
			<!-- 数据筛选排序足迹tab栏 -->
			<view class="sort main_width">
				<view class="sort1 sort0" :style="'background-image: url('+serverUrlImg+');'" @click="open_modal"
					:data-type="0">筛选</view>
				<view class="sort2 sort0" :style="'background-image: url('+serverUrlImg+');'" @click="change_filter"
					:data-type="1">
					{{itemList[orderby]}}
				</view>
				<view class="sort3 sort0"
					:style="'background-size: 20upx 20upx;color:'+(traceMode==1?'#ff633a':'#1e2130')+';background-image: url('+(traceMode==1?serverUrlImg2_1: serverUrlImg2)+');'"
					@click="footprint">
					足迹</view>
			</view>

			<!-- 主数据 -->
			<view class="loading_text" v-if="loading">加载中...</view>
			<view v-else>
				<view :key="index" v-for="(item, index) in data">
					<indexItem :index="index" type='index' :dataSource="item"></indexItem>
				</view>
			</view>
			<view class="loading_text" v-if="!loading&&data.length==0">暂无数据</view>
		</view>
		<view @click="toRecruit" style="width: 120upx;position: fixed;right: -10upx;bottom: 150upx;">
			<image style="width: 100%;" mode="widthFix" :src="serverUrl_release_index"></image>
		</view>

		<!-- 数据筛选模态层 -->
		<uni-popup ref="popup" :mask-click="true">
			<view style="width: 100%;background-color: #ffffff;">
				<view style="padding-top: 70upx;" class="filter_title">选择区域</view>
				<view class="filter_con">
					<view @click="change_district(index)"
						:class="district_index_arr.indexOf(index)!=-1?'dis_item dis_item_focus': 'dis_item'"
						:key="index" v-for="(item,index) in district">{{item}}</view>
				</view>
				<view style="clear: both;height: 30upx;"></view>
				<view class="filter_title"></view>
				<view class="filter_con">
					<view @click="change_settlement(index)" :key="index" v-for="(item,index) in settlement"
						:class="settlement_index==index?'dis_item dis_item_focus': 'dis_item'">{{item}}</view>
				</view>
				<view style="clear: both;height: 30upx;"></view>
				<view class="filter_title"></view>
				<view class="filter_con">
					<view @click="change_gender(index)" :key="index" v-for="(item,index) in gender"
						:class="gender_index==index?'dis_item dis_item_focus': 'dis_item'">
						{{item}}
					</view>
				</view>
				<view style="clear: both;height: 30upx;"></view>
				<view class="filter_btn_box">
					<view @click="reset_filter()" style="width: 30%;background-color: #f8f8f8;color: #808080;">重置</view>
					<view @click="confirm_filter()"
						style="width: 65%;margin-left: 5%;background-color: #39d9b5;color: #ffffff;">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonFun from '../../commonFun.js'
	import indexItem from '../order/indexItem.vue'

	export default {
		data() {
			return {
				is_nowUrgent: false, //是否为今日零工-当日急活儿
				serverUrl: this.serverUrlReq,
				serverUrl_tab_nav1: this.serverUrl + 'tab_nav1.png',
				serverUrl_tab_nav2: this.serverUrl + 'tab_nav2.png',
				serverUrlImg: this.serverUrl + 'index_arrow.png',
				serverUrlImg2: this.serverUrl + 'index_clock.png',
				serverUrlImg2_1: this.serverUrl + 'index_clock_orange.png',
				serverUrlImg3: this.serverUrl + 'index_bottom.png',
				serverUrlImg4: this.serverUrl + 'show/logo.png',
				serverUrl_release_index: this.serverUrl + 'release_index.png',

				itemList: ['最新发布', '离我最近', '薪资最高'], //排序方式数组
				orderby: 0, //排序方式索引
				key_words: '', //关键词
				loading: true, //加载中
				settlement_index: 0, //当前所选结算方式
				settlement: ['结算方式不限', '次结', '完工结'], //结算方式数组
				gender_index: 0, //当前所选性别
				gender: ['性别不限', '男生', '女生'], //性别要求数组
				district_index_arr: [], //当前所选区域
				currentSelectCity: '天津市', //当前选择城市名称 
				district: ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '滨海新区',
					'宁河区', '静海区', '蓟州区'
				], //区域
				traceMode: 0, //是否正在查看足迹
				banner_data: [], // 轮播数据
				data: [], // 招聘信息列表
				user_info: {
					profile_photo: '',
					true_name: '',
				}, //个人信息
				latitude: '39.0351862510659',
				longitude: '117.68898010253906',
			}
		},
		components: {
			indexItem
		},
		onShow() {},
		onPullDownRefresh() {
			this.get_data(this.get_banner(this.get_info()))
		},
		onLoad(e) {
			// 存在被分享的情况下执行
			if (e.scene) {
				console.log('onload获取分享参数', e.scene)
				const scene = decodeURIComponent(e.scene);
				var arry = scene.split(':');
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/order/detail?id=' + arry[1] + '&share=' + arry[2]
					})
				}, 1000)
			}
			this.get_position_index()
		},
		methods: {
			// 获取个人信息
			get_info() {
				commonFun.get_user_info(res => {
					if (res.status) {
						this.user_info = res.data.Result
						console.log('首页获取个人信息', this.user_info)
						commonFun.init_go_easy(this.user_info, 'user_')
						setTimeout(() => {
							commonFun.get_message_data()
						}, 2000)
						uni.setStorageSync('USER_INFO', this.user_info)
					}
				})
			},
			// 获取轮播图
			get_banner(callback = () => {}) {
				commonFun.requestUrl('&WsAjaxBiz=Public&WsAjaxAction=entityDataHandle', {
					bizCatalog: 'CyclePicShowEntity',
					handleMode: 'fetchall'
				}, res => {
					if (res.status) {
						this.banner_data = res.data.Result
					}
					callback()
				})
			},
			// 首页获取位置信息
			get_position_index(callback = () => {}) {
				let currentSelectCity = uni.getStorageSync('currentSelectCity') //获取缓存城市名称
				console.log('获取缓存城市名称', currentSelectCity)

				commonFun.getPositionLocal(res => {
					console.log('首页获取位置', res)
					if (res.status) {
						// 设置经纬度
						this.latitude = res.latitude
						this.longitude = res.longitude

						// 如果无存城市名称
						if (currentSelectCity == '') {
							this.currentSelectCity = res.city
						} else {
							this.currentSelectCity = currentSelectCity
							//当前选择城市名称对应的所有区县市
							const currentSelectDistrict = uni.getStorageSync('currentSelectDistrict') ? JSON.parse(
								uni
								.getStorageSync(
									'currentSelectDistrict')) : []
							// 城市区县市数组
							let district = []
							for (let i in currentSelectDistrict) {
								district.push(currentSelectDistrict[i])
							}
							this.district = district
						}
					}
					this.get_data(this.get_banner(this.get_info()))
				})
			},
			// 获取主数据
			get_data(callback = () => {}) {
				this.loading = true
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let params = {
					bizCatalog: 'RecruitEntity',
					handleMode: 'fetchall',
					pageIndex: 1,
					pageSize: 1000,
					orderby: this.traceMode == 1 ? 92 : this.orderby,
					nowLngLat: this.longitude + ',' + this.latitude,
					query: {
						nowUrgent: this.is_nowUrgent ? 1 : 2,
						title: this.key_words,
						traceMode: this.traceMode,
						settleType: this.settlement_index,
						genderMode: this.gender_index,
						workArea: this.district_index_arr.map((item, index) => this.district[item]),
						workCity: this.currentSelectCity,
					},
				}
				console.log('首页主数据请求参数', params)
				commonFun.requestUrl('&WsAjaxBiz=' + (this.traceMode == 1 ? 'Worker' : 'Public') +
					'&WsAjaxAction=fetchPageData', params, res => {
						if (res.status) {
							this.data = res.data.Result.pageData
							console.log('首页主数据获取', this.data)
						}
						this.loading = false
						uni.hideLoading()
						uni.stopPullDownRefresh()
						callback()
					})
			},


			// 轮播跳转
			banner_href(item) {
				if (item.catalog == 3) { //跳转到宣传图
					uni.navigateTo({
						url: '../login/web?index=12&id=' + item.id
					})
				} else if (item.catalog == 2) { //跳转到活动详情
					uni.navigateTo({
						url: '../activity/detail?id=' + item.biz_recruitid
					})
				} else {
					uni.navigateTo({ //跳转到招聘详情
						url: '../order/detail?id=' + item.biz_recruitid
					})
				}
			},
			// 跳转到商家小程序
			toRecruit() {
				uni.navigateToMiniProgram({
					appId: 'wx8c230ea00ceb8676',
					path: 'pages/merchant/index',
				})
			},
			// 切换是否今日零工
			change_is_nowUrgent(value) {
				this.is_nowUrgent = value
				this.get_data()
			},
			// 去我的工单
			to_order() {
				uni.navigateTo({
					url: this.user_info.id ? "/pages/order/index?status=3" : "/pages/login/index"
				})
			},
			// 去个人信息
			to_perInfo() {
				uni.navigateTo({
					url: this.user_info.id ? "../personal/perInfo" : "/pages/login/index"
				})
			},
			// 点击足迹
			footprint() {
				this.traceMode = this.traceMode == 0 ? 1 : 0
				this.get_data()
			},
			// 点击排序
			change_filter(e) {
				const type = e.currentTarget.dataset.type
				uni.showActionSheet({
					itemList: this.itemList,
					success: (res) => {
						this.orderby = res.tapIndex
						this.get_data()
					},
					fail: function(res) {}
				});
			},
			//输入招聘信息标题名称
			ipt_change(e) {
				this.key_words = e.target.value
			},
			// 确定筛选
			confirm_filter() {
				this.$refs.popup.close('top')
				this.get_data()
			},
			// 重置筛选
			reset_filter() {
				this.settlement_index = 0
				this.gender_index = 0
				this.district_index_arr = []
				this.$refs.popup.close('top')
				this.get_data()
			},
			// 筛选-区域选择
			change_district(index) {
				this.district_index_arr = commonFun.select_from_arr([this.district, this.district_index_arr], index)
			},
			// 筛选-结算方式选择
			change_settlement(index) {
				this.settlement_index = index
			},
			// 筛选-性别选择
			change_gender(index) {
				this.gender_index = index
			},
			// 点击筛选弹出遮罩
			open_modal() {
				this.$refs.popup.open('top')
			},
		}
	}
</script>

<style>
	@import url("index.css");
</style>