keysass_app/pages/personal/setup/usepeople.vue

<template>
	<view class="peixunbanpage">
		<view class="nodata" v-if="!useList.length">
			<img src="../../index/testtraining/noUsePerson.png" alt="">
			<view>暂无数据</view>
		</view>
		<view class="boxuser" v-else>
			<view class="items" v-for="it in useList">
				<view class="toptitle">
					<view class="skill">
						技能要求：{{ it.service }}
					</view>
					<view class="peonum">
						{{ it.peopleNum }}人
					</view>
				</view>
				<view class="bottominfo">
					<view class="beizhu">
						备注：{{ it.remark }}
					</view>
					<view v-if="it.status == 0" class="btninfo nored">
						处理中
					</view>
					<view v-else class="btninfo yesred">
						已处理
					</view>

				</view>


			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			useList: []
		}
	},
	onLoad() {
		this.getList()
	},
	methods: {
		async getList() {
			const id = uni.getStorageSync('wxUserInfo').userId
			const {
				data
			} = await this.http.quickGet(`/labor/my/demand/${id}`, true)
			console.log(data)
			if (data.code == 200) {
				this.useList = data.rows
			} else {
				uni.showToast({
					title: '获取数据失败'
				})
			}
		},
		gozixun() {
			uni.navigateTo({
				url: '/pages/index/test'
			})
		}
	}
}
</script>

<style scoped>
.peixunbanpage {
	height: 100%;
	width: 100%;
	background: #f5f7fa;
}

.boxuser {
	box-sizing: border-box;
	padding: 40rpx;
}

.items {
	width: 100%;
	min-height: 200rpx;
	margin-bottom: 30rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 10rpx 20rpx;
}

.toptitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 75rpx;
	border-bottom: 1px solid rgba(153, 153, 153, 0.2);
}

.skill {
	font-weight: 500;
	font-size: 28rpx;
	color: #1A1A1A;
}

.peonum {
	font-weight: 500;
	font-size: 28rpx;
	color: #1F80F2;
}

.bottominfo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
}

.nodata {
	/* display: flex;
		justify-content: center;
		align-items: center;
		font-size: 46rpx;
		font-weight: bold;
		color: #9D9D9D;
		text-align: center;
		margin-top: 100px */
	font-size: 23px;
	font-weight: bold;
	color: #9D9D9D;
	text-align: center;
	margin-top: 100px;


}

.nodata img {
	width: 338rpx;
	height: 254rpx;
}

.beizhu {
	font-weight: 500;
	font-size: 22rpx;
	color: #808080;
	width: 70%;
	padding-right: 20rpx;
	box-sizing: border-box;
}

.btninfo {
	width: 170rpx;
	height: 40rpx;
	border-radius: 20rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 40rpx;
	text-align: center;
	width: 30%;
}

.nored {
	background: #FBA02A;
}

.yesred {
	background: #28D17C;
}
</style>