employ-front/pages_subpack/category/index.vue

<template>
	<view class="se-m-10">
		<u-sticky>
			<view class="se-px-20 se-pt-10 se-zi-s se-bgc-white">
				<u-search height="40" placeholder="搜索" :showAction="true" v-model="keyword" @search="onSearch()" @clickIcon="onSearch()" @custom="onSearch()"></u-search>
			</view>
			<u-tabs
				class="se-bgc-white se-pb-20"
				: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>
		</u-sticky>
		<template v-if="current==1">
			<view class="se-m-20 se-br-20 se-bs-b se-bgc-white se-py-20 se-px-30" v-for="(items,indexs) in tList" :key="indexs" @click="onTaskDetail(items)">
				<view class="se-flex se-flex-h-sb">
					<view class="se-flex">
						<text class="se-fw-6 se-c-black se-fs-30">{{items.title}}</text>
					</view>
					<view class="se-c-orange se-fs-32 se-fw-6">
						{{items.salaryMin}}-{{items.salaryMax}}k
					</view>
				</view>
				<view class="se-py-10">
					<text class="se-c-text-sub se-fs-22 se-mr-10 se-py-5 se-px-20 se-br-5 se-bgc-f5" v-if="items.categoryOne_dictText">{{items.categoryOne_dictText}}</text>
					<text class="se-c-text-sub se-fs-22 se-mr-10 se-py-5 se-px-20 se-br-5 se-bgc-f5" v-if="items.categoryTwo_dictText">{{items.categoryTwo_dictText}}</text>
					<text class="se-c-text-sub se-fs-22 se-mr-10 se-py-5 se-px-20 se-br-5 se-bgc-f5" v-if="items.payType_dictText">{{items.payType_dictText}}</text>
				</view>
				<view class="se-flex se-flex-h-sb">
					<view class="se-flex se-flex-h-c">
						<u-icon name="map"></u-icon>
						<text class="se-c-text-sub se-fs-24 se-pr-10">{{items.latitude,items.longitude | getDistance}}km</text>
						<text class="se-c-text-sub se-fs-24 se-pl-10 se-b-l se-toe-3" style="max-width: 220rpx;">{{items.address}}</text>
					</view>
					<view class="se-c-text se-c-text-sub se-fs-24">
						{{items.createTime | formatTime}}
					</view>
					<view class="se-flex se-flex-h-c se-py-10 se-px-20 se-br-12 se-fs-22 se-c-orange se-bgc-ffd se-fw-6">
						<text class="se-ml-5">立即接单</text>
					</view>
				</view>
			</view>
			<u-empty v-if="tList && tList.length==0" mode="list"></u-empty>
		</template>
		<template v-if="current==0">
			<view class="se-m-20 se-br-20 se-bs-b se-bgc-white se-py-20 se-px-30" v-for="(items,indexs) in rlist" :key="indexs">
				<view class="se-flex se-flex-h-sb"  @click.capture="onRoleDetail(items)">
					<view class="se-flex">
						<view class="se-a-80">
							<image class="se-a-80 se-br-p-50 se-bgc-f5" :src="items.hanHaiMember.headImage" mode=""></image>
						</view>
						<view class="se-ml-20 se-flex se-flex-v-c se-flex-ai-fs">
							<text class="se-fw-6 se-c-black se-fs-30">{{items.employAuthenticationPerson.name?items.employAuthenticationPerson.name:items.hanHaiMember.nickName}}</text>
							<text class="se-fs-24 se-c-text-third">{{items.sex_dictText}}-{{items.nation?items.nation:"未知"}}</text>
						</view>
						<view class="se-flex se-flex-h-c">
							<view class="se-py-10 se-px-20 se-br-12 se-fs-22 se-c-orange se-bgc-ffd se-ml-20 se-fw-6 se-toe-1" style="max-width: 100rpx;">
								{{items.categoryOne_dictText}}
							</view>
						</view>
					</view>
					<view class="se-c-orange se-fs-32 se-fw-6">
						{{items.salaryMin}}-{{items.salaryMax}}元
					</view>
				</view>
				<view>
					<text class="se-c-text-third se-fs-22 se-mt-10">{{items.createTime}}</text>
				</view>
				<view class="se-flex se-flex-h-sb">
					<text class="se-c-text-sub se-fs-24 se-toe-5">
						{{items.categoryTwo_dictText}}
						<!-- <u-parse v-if="items.brief" :content="items.brief"></u-parse> -->
					</text>
					<view @click.capture="onCustomerService(items.employAuthenticationPerson.phone)" class="se-flex se-flex-h-c se-py-10 se-px-20 se-br-12 se-fs-22 se-c-orange se-bgc-ffd se-fw-6">
						<u-icon  color="#FF7A31" name="phone-fill"></u-icon>
						<text class="se-ml-5">联系他</text>
					</view>
				</view>
			</view>
			<u-empty v-if="rlist && rlist.length==0" mode="list"></u-empty>
		</template>
		
	</view>
</template>

<script>
	import {
		bannerList,
		taskList,
		rolelist,
		industryList,
		getSysText
	} from "@/common/api.js"
	export default{
		data(){
			return{
				tpageNo:1,
				tpageSize:20,
				tList:[],
				
				rpageNo:1,
				rpageSize:20,
				rlist:[],
				id:null,
				keyword:"",
				current:0,
				navList:[
					{
						name: '求职大厅',
					}, 
					{
						name: '招聘大厅',
					}
				],
			}
		},
		onLoad(options) {
			this.id=options.id
			// this.onTaskList()
			this.onRolelist()
		},
		onReachBottom() {
			let that = this
			if(that.current==0){
				that.rpageNo = that.rpageNo + 1
				that.onRolelist()
			}else if(that.current==1){
				that.tpageNo = that.tpageNo + 1
				this.onTaskList()
			}
		},
		onPullDownRefresh() {
			let that = this
			if(that.current==0){
				that.rpageNo =  1
				that.rlist=[]
				that.onRolelist()
			}else if(that.current==1){
				that.tpageNo =  1
				that.tList = []
				this.onTaskList()
			}
		},
		filters:{
			formatTime(time) {
				const timestamp = new Date(time).getTime();
			  const currentTime = new Date().getTime();
			  console.info("currentTime",currentTime)
			  const diff = (currentTime - timestamp) / 1000; // 时间差，单位：秒
			
			  // 计算月差，判断是否超过一个月
			  const oneMonthInSeconds = 30 * 24 * 60 * 60;
			  if (diff > oneMonthInSeconds) {
			    let date = new Date(timestamp);
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			
			    if (month < 10) month = "0" + month;
			    if (day < 10) day = "0" + day;
			
			    return `${year}-${month}-${day}`;
			  } else {
			    // 计算秒、分钟、小时的差值
			    if (diff < 60) {
			      return `${Math.floor(diff)}秒钟前`;
			    } else if (diff < 60 * 60) {
			      return `${Math.floor(diff / 60)}分钟前`;
			    } else if (diff < 60 * 60 * 24) {
			      return `${Math.floor(diff / 60 / 60)}小时前`;
			    } else {
			      // 显示天数
			      return `${Math.floor(diff / 60 / 60 / 24)}天前`;
			    }
			  }
			},
			formDate(date){
				return dayjs(date).format("YYYY-MM-DD").fromNow();
			},
			getDistance(lat1, lng1) {
				let lng2 = uni.getStorageSync("longitude")
				let lat2 = uni.getStorageSync("latitude")
				if(!lng2 && !lat2){
					return "请授权"
				}
			  const R = 6371; // 地球半径，单位：km
			  const radLat1 = (lat1 * Math.PI) / 180;
			  const radLat2 = (lat2 * Math.PI) / 180;
			  const deltaLat = radLat2 - radLat1;
			  const deltaLng = ((lng2 - lng1) * Math.PI) / 180;
			
			  const a =
			    Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
			    Math.cos(radLat1) *
			      Math.cos(radLat2) *
			      Math.sin(deltaLng / 2) *
			      Math.sin(deltaLng / 2);
			
			  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
			  return (R * c).toFixed(2); // 返回保留两位小数的公里数
			}
		},
		methods:{
			navClick(event){
				this.current=event.index
				this.keyword = ""
				if(event.index==0){
					this.rpageNo=1
					this.onRolelist()
				}else if(event.index==1){
					this.tpageNo=1
					this.onTaskList()
				}
			},
			onSearch(){
				let that = this
				if(that.current==0){
					that.rpageNo =  1
					that.onRolelist()
				}else if(that.current==1){
					that.tpageNo =  1
					this.onTaskList()
				}
			},
			onRolelist(){
				rolelist({
					pageNo:this.rpageNo,
					pageSize:this.rpageSize,
					title:this.keyword,
				}).then(response=>{
					console.info("response",response)
					if(this.rpageNo==1){
						this.rlist = response.result.records
					}else{
						this.rlist = this.rlist.concat(response.result.records)
					}
				}).catch(error=>{
					
				})
			},
			onTaskList(){
				taskList({
					latitude:uni.getStorageSync("latitude"),
					longitude:uni.getStorageSync("longitude"),
					pageNo:this.tpageNo,
					title:this.keyword,
					pageSize:this.tpageSize
				}).then(response=>{
					if(this.tpageNo==1){
						this.tList = response.result.records
					}else{
						this.tList = this.tList.concat(response.result.records)
					}
				}).catch(error=>{
					
				})
			},
			onTaskDetail(event){
				console.info(event)
				uni.navigateTo({
					url:"/pages_subpack/work-detail/index?id="+event.id
				})
			},
			onRoleDetail(event){
				console.info("event",event)
				uni.navigateTo({
					url:"/pages_subpack/master-detail/index?id="+event.id
				})
			},
			onCustomerService(phome){
				let that = this
				// let obj = that.$utils.getkeyContent('phone')
				if (uni.canIUse('makePhoneCall')) {
					uni.makePhoneCall({
					  phoneNumber: String(phome),
					  success: function () {
						console.log('拨打电话成功');
					  },
					  fail: function () {
						console.log('拨打电话失败');
					  }
					});
				} else {
					console.log('你的设备不支持拨打电话功能');
				}
				
			},
		}
	}
</script>

<style>
</style>