WenWuGuanJia/index_fenbao/SaoMaBaoMing/district.vue

<template>
	<view class="district-page">
		<u-navbar
			@leftClick="goBack"
			title="志愿者招募"
			bgColor="rgba(255,255,255,0)"
			:placeholder="true"
			titleStyle="font-weight:bold;color:#000000"
		></u-navbar>
		<view class="district-content">
			<view class="district-list">
				<view
					v-for="item in districtList"
					:key="item.key"
					class="district-item"
				>
					<view class="district-button" @click="selectDistrict(item)">
						<text class="district-button-text">{{ item.name }}</text>
					</view>
					<text class="district-button-subtext">需招募岗位数：{{ item.recruitCount }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: '',
			districtList: []
		};
	},
	onLoad(options) {
		this.type = options.type || '';
		this.getVolunteerNumber();
	},
	methods: {
		getTypeField() {
			const typeFieldMap = {
				volunteer: 'volunteer',
				xuanjiang: 'xuanjiang',
				publicize: 'publicize'
			};
			return typeFieldMap[this.type] || '';
		},
		getDistrictRecruitCount(item = {}) {
			const typeField = this.getTypeField();
			if (!typeField) {
				return 0;
			}
			const count = Number(item[typeField]);
			return Number.isNaN(count) ? 0 : count;
		},
		getDistrictName(item = {}) {
			return item.name || item.title || '';
		},
		normalizeDistrictList(list = []) {
			return list.map((item, index) => ({
				...item,
				key: item.region_id || item.id || item.title || `district_${index}`,
				name: item.title || item.name || '',
				recruitCount: this.getDistrictRecruitCount(item)
			}));
		},
		getVolunteerNumber() {
			this.$api.getVolunteerNumber({ main_body_id: 1 }, (res) => {
				const responseData = res && res.data ? res.data : res || {};
				const districtList = Array.isArray(responseData.list) ? responseData.list : [];
				this.districtList = this.normalizeDistrictList(districtList);
			});
		},
		goBack() {
			uni.navigateBack({
				fail() {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			});
		},
		selectDistrict(item) {
			if (!item.recruitCount) {
				this.$common.errorToShow('当前无岗位需求');
				return;
			}

			const query = [`regionName=${encodeURIComponent(this.getDistrictName(item))}`];
			if (item.region_id !== undefined && item.region_id !== null && item.region_id !== '') {
				query.push(`region_id=${encodeURIComponent(item.region_id)}`);
			}
			if (this.type) {
				query.unshift(`type=${encodeURIComponent(this.type)}`);
			}

			uni.navigateTo({
				url: `/index_fenbao/fuWu/baoMing/baoMing2?${query.join('&')}`
			});
		}
	}
};
</script>

<style scoped>
.district-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%;
}

.district-content {
	flex: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	padding: 8vh 0 60rpx;
}

.district-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.district-item {
	width: 80%;
	margin-bottom: 56rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.district-button {
	width: 100%;
	height: 110rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url('https://wwgj.wenlvti.net/uploads/20260318/ad8233a3c8306fbb2fc2ff5738f0fcb4.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

.district-item:last-child {
	margin-bottom: 0;
}

.district-button-text {
	color: #ffffff;
	font-size: 52rpx;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 8rpx;
	text-indent: 8rpx;
}

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