keysass_app/pages/index/outsourcing/cloudUserPage.vue

<template>
	<view class="moreCould">
		<image src="http://image.keyitest.cn/static/index/renliwb/cloudbanner.png" class="topbanner" mode=""></image>
		<view class="topbanner1">
			<image src="http://image.keyitest.cn/static/index/renliwb/cloudbanner1.png" class="topbanner1img" mode="">
			</image>
			<view class="topbtntext">
				关键云员工，助力<text>软件测试人才</text>
			</view>
			<view class="topbtn" @click="ruzhu">
				立即入驻
			</view>
		</view>
		<view class="titlePeo">
			<view class="titletopt">
				<image src="../../../static/crowd/rihhj.png" alt="" />
				<p style="margin:0px 10px">优选企业岗位</p>
				<image src="../../../static/crowd/lesftt.png" alt="" />
			</view>
		</view>
		<view class="userCont">
			<view class="userContIt" v-for="it in jobList" :key="it.jobId" @click="goDetail(it)">
				<view class="userContItT">
					<view class="userContItTT">
						<view class="userContItTTL">
							{{it.title}}
						</view>
						<view class="userContItTTR">
							{{ it.emolument }}
						</view>
					</view>
					<view class="userContItTB">
						<view class="userContItTBit">{{ it.city }}</view>
						<view class="userContItTBit">{{ it.experience }}</view>
						<view class="userContItTBit">{{ it.education }}</view>
					</view>
				</view>
				<view class="userContItB">
					<view class="userContItBL">{{ it.company }}</view>
					<view class="userContItBR">计算机软件</view>
				</view>
			</view>
		</view>

		<view class="maskDia" v-if="showida">
			<view class="maskBox">
				<view class="maskBoxT">
					入驻云员工，请前往PC端认证
				</view>
				<view class="maskBoxM">
					PC端网址：https://www.keyitest.cn/
				</view>
				<view class="maskBoxB" @click="copyUrl">
					复制网址
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showida: false,
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				jobList: []
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.queryParams.pageNum * this.queryParams.pageSize < this.total) {
				this.queryParams.pageNum += 1
				this.getList()
			}
		},
		methods: {
			// 获取joblist
			getList() {
				this.http.quickGet(
					`/job/findAll?pageSize=${this.queryParams.pageSize}&pageNum=${this.queryParams.pageNum}`,
					false).then(res => {
					this.jobList = [...this.jobList, ...res.data.rows]
					this.total = res.data.total
				})
			},
			goDetail(it) {
				uni.navigateTo({
					url: '/pages/index/outsourcing/cloudUserdetail?id=' + it.jobId
				})
			},
			ruzhu() {
				this.showida = true
			},
			copyUrl() {
				uni.setClipboardData({
					data: 'https://www.keyitest.cn/', //	这里是个坑接受字符串类型 value转化为字符串
					success: function() {
						//调用方法成功
						uni.showToast({
							title: '已复制到剪切板',
							icon: 'none'
						})
					}
				})
				this.showida = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.moreCould {
		padding: 25px;
		box-sizing: border-box;

		.topbanner {
			width: 100%;
			height: 250rpx;
			margin-bottom: 24rpx;
		}

		.topbanner1 {
			height: 200rpx;
			position: relative;
			margin-bottom: 40rpx;

			.topbanner1img {
				width: 100%;
				height: 100%;
			}

			.topbtntext {
				width: 100%;
				position: absolute;
				bottom: 128rpx;
				left: 50%;
				transform: translateX(-50%);
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				text-align: center;
			}

			.topbtntext text {
				color: #D4393C;
			}

			.topbtn {
				width: 190rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: linear-gradient(90deg, #6B3AF8, #2080FE);
				border-radius: 4rpx;
				position: absolute;
				bottom: 54rpx;
				left: 50%;
				transform: translateX(-50%);
				font-weight: 500;
				font-size: 22rpx;
				color: #F4F5F7;
			}

		}

		.userCont {
			.userContIt {
				height: 220rpx;
				background: rgba(255, 255, 255, 0.8);
				box-shadow: 0rpx 4rpx 27rpx 3rpx rgba(16, 60, 117, 0.1);
				border-radius: 6rpx;
				margin-bottom: 26rpx;

				.userContItT {
					height: calc(100% - 61rpx);
					padding: 39rpx 28rpx 0 28rpx;
					box-sizing: border-box;

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

						.userContItTTL {
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.userContItTTR {
							font-weight: bold;
							font-size: 28rpx;
							color: #FB3838;
						}
					}

					.userContItTB {
						display: flex;
						align-content: center;
						font-weight: 500;
						font-size: 19rpx;
						color: #666666;
						margin-top: 20rpx;

						.userContItTBit {
							height: 38rpx;
							background: rgba(230, 231, 235, 0.3);
							border-radius: 3rpx;
							padding: 0 20rpx;
							line-height: 38rpx;
							margin-right: 18rpx;
						}
					}
				}

				.userContItB {
					height: 61rpx;
					background: linear-gradient(270deg, rgba(253, 238, 1235, 0.65), rgba(234, 241, 252, 0.65));
					border-radius: 6rpx;
					padding: 0 28rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
				}
			}
		}
	}

	.maskDia {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(5, 5, 7, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.maskBox {
			width: 570rpx;
			height: 220rpx;
			background: linear-gradient(0deg, #FFFFFF, #EFF3FE);
			box-shadow: 0rpx 4rpx 21rpx 4rpx rgba(22, 27, 33, 0.1);
			border-radius: 6rpx;
			border: 1px solid #999999;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.maskBoxT {
				color: #1A1A1A;
				font-size: 26rpx;
				font-weight: bold;

			}

			.maskBoxM {
				color: #1A1A1A;
				font-size: 26rpx;
				font-weight: 500;
				margin: 20rpx 0;
			}

			.maskBoxB {
				color: #1578ED;
				font-size: 26rpx;
				font-weight: 500;
			}
		}
	}

	.titlePeo {
		font-weight: bold;
		font-size: 35rpx;
		color: #1A1A1A;
		margin: 40rpx 0;
	}

	.titletopt {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.titletopt image {
		height: 20rpx;
		width: 200rpx;
	}
</style>