odd_job_applet/pages/comjobs/recruitFast.vue

<template>
	<view>
		<view class="topBg" :style="'background-image:url('+$getImageUrl('static/images/applet/bg/course.png')+');'">
			<image class="topBg-image" :src="$getImageUrl('static/images/applet/index/hotRighrOne.png')"></image>
		</view>

		<view class="header">
			<view class="cu-bar search bg-gray">
				<view class="search-form round text-center">
					<text class="cuIcon-search"></text>
					<input v-model="searchval" :adjust-position="false" type="text" placeholder="请输入关键字"
						confirm-type="search" @confirm="btnSearch()"></input>
				</view>
				<view class="action" v-if="searchval!==''">
					<button class="cu-btn bg-white shadow-blur round" @click="btnSearch()">搜索</button>
				</view>
			</view>
			<view class="screen">
				<image class="screen-icon" :src="$getImageUrl('static/images/applet/comJobs/screen.png')"></image>
				<view class="">筛选</view>
			</view>
		</view>

		<view class="list">
			<view class="card" v-for="(item,index) in plist" :key="index" @tap="goDetail(item.id)">
				<view class="card-top">
					<view class="card-top-item long">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/index/cardA.png')"></image>
						<view class="item-text bold">{{item.title}}</view>
					</view>
					<view class="card-top-item short">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/comJobs/icon-pageView.png')"></image>
						<view class="item-text">浏览量：{{item.volume}}</view>
					</view>
					<view class="card-top-item long">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/comJobs/icon-sum.png')"></image>
						<view class="item-text red">工资：{{item.zwagall}}</view>
					</view>
					<view class="card-top-item short">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/index/cardC.png')"></image>
						<view class="item-text">赏金<text class="item-text-money">{{item.retmoney}}元</text></view>
					</view>
					<view class="card-top-item long">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/index/cardB.png')"></image>
						<view class="item-text">工作时间：</view>
					</view>
					<view class="card-top-item short">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/index/cardD.png')"></image>
						<view class="item-text">地点：{{item.district}}</view>
					</view>
				</view>
				<view class="card-bottom">
					<view class="bottom-title">{{item.worker.title}}</view>
					<u-icon name="more-dot-fill" color="#747474" size="20"></u-icon>
				</view>
			</view>
			
			<uni-load-more :status="pstatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				searchval: "",
				ppage: 1,
				psize: 20,
				plist: [],
				pstatus: 'more',
			}
		},
		onLoad() {
			_this = this;
			_this.getMore();
		},
		methods: {
			goDetail: function(comjobsid) {
				uni.navigateTo({
					url: '/pages/comjobs/detail?comjobsid=' + comjobsid
				});
			},
			
			getMore() {
				_this.$req.ajax({
					path: "comjobs/listcomjobs",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						rectype: 2
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					console.log("列表数据", _this.plist)
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.topBg {
		height: 266rpx;
		padding-right: 54rpx;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		
		.topBg-image {
			width: 192rpx;
			height: 170rpx;
		}
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.search {
			flex: 1;
		}

		.screen {
			width: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #191919;

			.screen-icon {
				margin-right: 10rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.list {
		padding: 10rpx 26rpx 0;

		.card {
			margin-bottom: 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.card-top {
				padding: 32rpx 32rpx 0;
				border-bottom: 2rpx solid #E2E2E2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.long {
					width: 57%;
				}

				.short {
					width: 40%;
				}

				.card-top-item {
					margin-bottom: 34rpx;
					display: flex;
					align-items: center;

					.item-icon {
						margin-right: 15rpx;
						width: 35rpx;
						height: 35rpx;
					}

					.item-text {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						font-size: 28rpx;
						font-weight: 400;
						color: #747474;

						.item-text-money {
							margin-left: 10rpx;
							font-size: 40rpx;
							font-weight: 600;
							color: #FF0000;
						}
					}

					.bold {
						font-weight: 600;
						color: #383838;
					}

					.red {
						color: #CA151C;
					}
				}
			}
			
			.card-bottom {
				padding: 20rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.bottom-title {
					width: 80%;
					font-size: 32rpx;
					font-weight: 600;
					color: #383838;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>