hire-wx-houxuanren/pagesD/my-shoucang.vue

<template>
	<view class="page">
		<view class="list" v-for="(item,index) in list" :key="item.id" @click="todetails(item.id)">
			<view class="top u-flex u-row-between">
				<text class="left">{{item.job_name}}</text>
				<text class="right">{{item.salary_min}}-{{item.salary_max}}K·{{item.salary_structure}}</text>
			</view>
			<view class="content">
				<text class="item">{{item.companys.category_industry.name}}</text>
				<text class="item">{{item.companys.company_stage.name}}</text>
				<text class="item">{{item.companys.company_scale.name}}</text>
			</view>
			<view class="">
				<text class="item-text">{{item.work_province.slice(0,-1)}}-{{item.work_city}}</text>
				<text class="item-text">{{item.education_name}}</text>
				<text class="item-text">{{item.experience_name}}</text>
			</view>
			<view class="bottom u-flex">
				<image style="width: 50rpx;height: 50rpx; border-radius: 50%;margin-right: 16rpx;"
					:src="item.usermanager.avatar" mode=""></image>
				<text>{{item.usermanager.name}}·</text>
				<text>{{item.usermanager.job_text}}</text>
			</view>
		</view>
		<view style="height: 70vh;display: flex;justify-content: center;align-items: center;" v-if="list.length == 0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		collect_get_list
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				page: 1,
				list: [],
				total: 0
			}
		},
		onLoad() {
			this.slist()
		},
		onReachBottom() {
			if (this.list.length != this.total) {
				this.page++
				this.slist()
			}
		},
		methods: {
			slist() {
				collect_get_list({
					page: this.page
				}).then(res => {
					this.total = res.data.total
					if (this.page == 1) {
						this.list = res.data.data
					} else {
						this.list = this.list.concat(res.data.data)
					}
				})
			},
			todetails(id) {
				uni.navigateTo({
					url: "/pagesB/details?id=" + id
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.page {
		background-color: #f3f3f3;
		padding: 0 24rpx;
		// height: calc(100vh - 48rpx);
		height: 100vh;
		box-sizing: border-box;
		border-top: 2rpx solid rgba(0, 0, 0, 0);
		.top {
			.left {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}

			.right {
				font-size: 32rpx;
				font-family: SFPro-Medium, SFPro;
				font-weight: 500;
				color: #0C66C2;
			}
		}

		.content {
			margin-top: 16rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #555555;
			margin-bottom: 20rpx;

			.item {
				margin-right: 16rpx;
			}
		}

		.list {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 24rpx 32rpx;
			height: 282rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.item-text {
			height: 46rpx;
			background: #F3F3F3;
			border-radius: 4rpx;
			line-height: 46rpx;
			text-align: center;
			margin-right: 16rpx;
			padding: 6rpx 14rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #5F5F5F;
		}

		.bottom {
			margin-top: 24rpx;
			box-sizing: border-box;
		}
	}
</style>