saas_miniprogram/pages/course/filterStatus.vue

<template>
	<view class="">

		<u-popup v-model="filterStatus" mode="bottom" border-radius="14" height="800" safe-area-inset-bottom
			:mask-close-able="false">
			<view class="header">
				<view> </view>
				<view style="font-size: 32rpx;">筛选课程</view>
				<u-icon name="close" @click="filterStatus = false"></u-icon>
			</view>
			<view class="li_s" @click="openSearch(1)">
				<view class="left">
					教育类型：
				</view>
				<view class="right">
					{{filterEdu(educationType).find(i => i.id == activeData.educationId) && filterEdu(educationType).find(i => i.id == activeData.educationId)['educationName']}}
				</view>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
			<view class="li_s" @click="openSearch(2)">
				<view class="left">
					培训项目：
				</view>
				<view class="right">
					{{filterBus(businessLevel).find(i => i.id == activeData.businessId) && filterBus(businessLevel).find(i => i.id == activeData.businessId)['aliasName']}}
				</view>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
			<view class="li_s" @click="openSearch(3)">
				<view class="left">
					科目：
				</view>
				<view class="right">
					{{filterSuj(sujectType).find(i => i.id == activeData.subjectId) && filterSuj(sujectType).find(i => i.id == activeData.subjectId)['subjectName']}}
				</view>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
			<view class="li_s" @click="openSearch(4)">
				<view class="left">
					排序：
				</view>
				<view class="right">
					{{sortTypeList.find(i => i.value == activeData.sortType)['label']}}
				</view>
				<u-icon class="icon" name="arrow-right"></u-icon>
			</view>
			<view class="footer">
				<view class="custom-style-l" @click="initData">重置</view>
				<view class="custom-style-r" @click="submit">确定</view>
			</view>
			<u-select :mask-close-able="false" v-model="showEdu" :list="filterEdu(educationType)"
				label-name="educationName" value-name="id" @confirm="confirmA"
				:default-value="[filterEdu(educationType).findIndex(i => i.id == activeData.educationId)]"></u-select>
			<u-select :mask-close-able="false" v-model="showBus" :list="filterBus(businessLevel)" label-name="aliasName"
				value-name="id" @confirm="confirmB"
				:default-value="[filterBus(businessLevel).findIndex(i => i.id == activeData.businessId)]"></u-select>
			<u-select :mask-close-able="false" v-model="showSuj" :list="filterSuj(sujectType)" label-name="subjectName"
				value-name="id" @confirm="confirmC"
				:default-value="[filterSuj(sujectType).findIndex(i => i.id == activeData.subjectId)]"></u-select>
			<u-select :mask-close-able="false" v-model="showSort" :list="sortTypeList" @confirm="confirmD"
				:default-value="[sortTypeList.findIndex(i => i.value == activeData.sortType)]"></u-select>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				filterStatus: false,
				showEdu: false,
				showBus: false,
				showSuj: false,
				showSort: false,
				activeData: {
					educationId: "",
					projectId: "",
					businessId: "",
					subjectId: "",
					sortType: 1
				},
				sortTypeList: [{
					label: "综合",
					value: 1
				}, {
					label: "低价",
					value: 2
				}, {
					label: "高价",
					value: 3
				}]
			};
		},
		computed: {
			...mapGetters(["educationType", "businessLevel", "sujectType"]),
			filterEdu: function() {
				return function(list) {
					if (list && list.length > 0) {
						let array = JSON.parse((JSON.stringify(list)))
						array.unshift({
							id: "",
							educationName: "全部",
						})
						return array
					} else {
						return []
					}
				}
			},
			filterBus: function() {
				return function(list) {
					if (list && list.length > 0) {
						let array = JSON.parse((JSON.stringify(list)))
						array.unshift({
							id: "",
							aliasName: "全部",
							projectId: ""
						})
						return array.filter(i => {
							return i.educationId == this.activeData.educationId || i.id == ""
						})
					} else {
						return []
					}
				}
			},
			filterSuj: function() {
				return function(list) {
					if (list && list.length > 0) {
						let array = JSON.parse((JSON.stringify(list)))
						array.unshift({
							id: "",
							subjectName: "全部",
							projectList: []
						})
						return array.filter(i => {
							return i.projectList.includes(this.activeData.projectId) || i.id == ""
						})
					} else {
						return []
					}
				}
			},
		},
		onLoad(option) {},
		methods: {
			initData() {
				this.activeData = {
					educationId: "",
					projectId: "",
					businessId: "",
					subjectId: "",
					sortType: 1
				}
			},
			submit() {
				this.$emit("backFunc", this.activeData)
				this.filterStatus = false
			},
			confirmA(i) {
				this.activeData.educationId = i[0].value
				this.activeData.projectId = ""
				this.activeData.businessId = ""
				this.activeData.subjectId = ""
			},
			confirmB(i) {
				this.activeData.projectId = this.filterBus(this.businessLevel).find(k => k.id == i[0].value)['projectId']
				this.activeData.businessId = i[0].value
				this.activeData.subjectId = ""
			},
			confirmC(i) {
				this.activeData.subjectId = i[0].value
			},
			confirmD(i) {
				this.activeData.sortType = i[0].value
			},
			openSearch(i) {
				let ary = ["showEdu", "showBus", "showSuj", "showSort"]
				this[ary[i - 1]] = true
			},
			openBoxs(item) {
				this.activeData = Object.assign({}, item)
				this.filterStatus = true
			},
		}
	};
</script>


<style scoped lang="scss">
	.header {
		height: 100rpx;
		font-size: 34rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		padding: 0rpx 40rpx;
		justify-content: space-between;
		align-items: center;
	}

	.li_s {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		padding: 0rpx 20rpx 0rpx 40rpx;

		&>.left {
			width: 140rpx;
			margin-right: 40rpx;
			flex-shrink: 0;
			text-align: end;
		}

		&>.right {
			flex: 1;
			width: 1rpx;
			text-align: end;
			margin-right: 20rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}

	.footer {
		margin-top: 160rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 40rpx;
		font-size:28rpx;
		.custom-style-l {
			margin-right: 20rpx;
			flex: 1;
			background-color: #f3f3f3;
			color: #7f7f7f;
			text-align: center;
			padding: 20rpx 0rpx;
			border-radius: 8rpx;
		}

		.custom-style-r {
			border-radius: 8rpx;
			padding: 20rpx 0rpx;
			background-color: #007aff;
			color: #ffffff;
			width: 70%;
			text-align: center;
		}
	}
</style>