WenWuGuanJia/index_fenbao/SaoMaBaoMing/job.vue

<template>
	<view class="job-page">
		<u-navbar
			@leftClick="goHome"
			leftText="首页"
			title="志愿者招募"
			bgColor="rgba(255,255,255,0)"
			:placeholder="true"
			titleStyle="font-weight:bold;color:#000000"
		></u-navbar>

		<view class="job-content">
			<image
				class="job-header-image"
				src="https://wwgj.wenlvti.net/uploads/20260318/e94fb36598d415e39e7cd3d4bd6f915a.png"
				mode="widthFix"
			/>

			<view class="job-buttons">
				<view class="job-button" @click="goToPage('volunteer')">
					<view class="job-button-content">
						<text class="job-button-text">巡查志愿者</text>
						<text class="job-button-subtext">需招募岗位数：{{ summary.volunteer || 0 }}</text>
					</view>
				</view>

				<view class="job-button" @click="goToPage('xuanjiang')">
					<view class="job-button-content">
						<text class="job-button-text">宣讲志愿者</text>
						<text class="job-button-subtext">需招募岗位数：{{ summary.xuanjiang || 0 }}</text>
					</view>
				</view>

				<view class="job-button" @click="goToPage('publicize')">
					<view class="job-button-content">
						<text class="job-button-text">传播志愿者</text>
						<text class="job-button-subtext">新媒体拍摄、制作及摄影</text>
						<text class="job-button-subtext">需招募岗位数：{{ summary.publicize || 0 }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			summary: {
				title: '',
				volunteer: 0,
				xuanjiang: 0,
				publicize: 0
			}
		};
	},
	onShow() {
		this.getVolunteerNumber();
	},
	methods: {
		getVolunteerNumber() {
			this.$api.getVolunteerNumber({ main_body_id: 1 }, (res) => {
				const responseData = res && res.data ? res.data : res || {};
				const summary = responseData.summary || {};
				this.summary = {
					title: summary.title || '',
					volunteer: Number(summary.volunteer) || 0,
					xuanjiang: Number(summary.xuanjiang) || 0,
					publicize: Number(summary.publicize) || 0
				};
			});
		},
		goHome() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		goToPage(type) {
			const urlMap = {
				volunteer: '/index_fenbao/SaoMaBaoMing/saoMaBaoMing',
				xuanjiang: '/index_fenbao/SaoMaBaoMing/district',
				publicize: '/index_fenbao/SaoMaBaoMing/district'
			};

			uni.navigateTo({
				url: `${urlMap[type]}?type=${type}`
			});
		}
	}
};
</script>

<style scoped>
.job-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-image: url('https://wwgj.wenlvti.net/uploads/20260318/2663cbc99de9048f820be7badf3fb1e6.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 100%;
}

.job-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 8vh 0 60rpx;
}

.job-header-image {
	display: block;
	width: 80%;
	margin: 0 auto;
}

.job-buttons {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 100rpx;
}

.job-button {
	width: 76%;
	aspect-ratio: 22/8;
	margin-bottom: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url('https://wwgj.wenlvti.net/uploads/20260318/b85db3427f60df0b7522ee47d4bf9781.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

.job-button:last-child {
	margin-bottom: 0;
}

.job-button-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.job-button-text {
	color: #ffffff;
	font-size: 40rpx;
	font-weight: 600;
	letter-spacing: 16rpx;
	text-indent: 16rpx;
	line-height: 1;
}

.job-button-subtext {
	margin-top: 18rpx;
	color: #ffffff;
	font-size: 24rpx;
	line-height: 1.2;
}
</style>