xingmingyi_applet/pages/index/screenList.vue

<template>
	<view class="pageCon">
		<view class="list">
			<view class="title fontbase textgrey">选择科目</view>
			<view class="libox dffs">
				<view @click="changHandle(ite, 1)" :class="[ite.is_select ? 'lisel' : '', 'li']" v-for="(ite, ind) in lists.subject">{{ ite.name }}</view>
			</view>
		</view>
		<view class="list">
			<view class="title fontbase textgrey">选择年级</view>
			<view class="libox dffs">
				<view @click="changHandle(ite, 2)" :class="[ite.is_select ? 'lisel' : '', 'li']" v-for="(ite, ind) in lists.grade">{{ ite.name }}</view>
			</view>
		</view>
		<view class="list">
			<view class="title fontbase textgrey">选择年份</view>
			<view class="libox dffs">
				<view @click="changHandle(ite, 3)" :class="[ite.is_select ? 'lisel' : '', 'li']" v-for="(ite, ind) in lists.year">{{ ite.name }}</view>
			</view>
		</view>
		<view class="fixBox btns dfsb">
			<navigator open-type="navigateBack" class="btn">返回</navigator>
			<view @click="sure()" class="btn two">确定</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			lists: {},
			subject_id: '',
			grade_id: '',
			year: ''
		};
	},
	onLoad(opt) {
		this.onload();
	},
	methods: {
		changHandle(ite, val) {
			if (val == 1) {
				this.lists.subject.forEach(item => {
					if (ite.id == item.id) {
						item.is_select = !item.is_select;
						this.subject_id = item.is_select ? item.id : '';
					} else {
						item.is_select = false;
					}
				});
			} else if (val == 2) {
				this.lists.grade.forEach(item => {
					if (ite.id == item.id) {
						item.is_select = !item.is_select;
						this.grade_id = item.is_select ? item.id : '';
					} else {
						item.is_select = false;
					}
				});
			} else if (val == 3) {
				this.lists.year.forEach(item => {
					if (ite.id == item.id) {
						item.is_select = !item.is_select;
						this.year = item.is_select ? item.id : '';
					} else {
						item.is_select = false;
					}
				});
			}
		},
		onload() {
			this.$api.request('common/getScreen').then(data => {
				console.log(data);
				if (data.code == 200) {
					this.lists = data.data;
				} else {
					this.$api.toast(data.msg);
				}
			});
		},
		sure() {
			this.$api.prePage().subject_id = this.subject_id;
			this.$api.prePage().grade_id = this.grade_id;
			this.$api.prePage().year = this.year;
			this.$api.prePage().search();
			uni.navigateBack({
				delta: 1
			});
			console.log(this.$api.prePage());
		}
	}
};
</script>

<style lang="scss" scoped>
.pageCon {
	background-color: #fff;
	padding: 30rpx 30rpx 120rpx;

	.list {
		.title {
			margin-bottom: 30rpx;
		}
		.libox {
			margin-bottom: 35rpx;
			flex-wrap: wrap;
			.li {
				padding: 0 15rpx;
				font-size: 26rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 9rpx;
				border: 1rpx solid #979797;
				margin-bottom: 26rpx;
				margin-right: 42rpx;
			}
			.lisel {
				color: #fff;
				border: 1rpx solid #e8973e;
				background-color: #e8973e;
			}
		}
	}
	.btns {
		.btn {
			width: 46%;
			height: 80rpx;
			line-height: 80rpx;
			background: #e8973f;
			border-radius: 11rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
		}
		.two {
			background: #ed742e;
		}
	}
}
</style>