年级学科等按钮筛选选择 template模板 ajax请求封装方法

<!-- 选项 -->
<div class="filterbox filterbox_h">
	<div class="filter studysectionWrap"></div>
	<div class="filter diffcultyWrap"></div>
	<div class="filter questiontypeWrap"></div>
	<div class="filter subjectWrap"></div>
	<div class="filter questionstatusWrap"></div>
	<div class="filter awardWrap"></div>
</div>

<!-- 查询条件模板 -->
<script type="text/template" id="btntpl">
	<div class="title">{{@ str}}</div>
	<div class="list">
		<span data-value="" class="active">全部</span>
		{{each arr}}
		<span data-value="{{$value.id}}">{{$value.item}}</span>
		{{/each}}
	</div>
</script>

<!-- 查询条件模板渲染 -->
function randerBtn(selector, arr, str) {
	var html = template('btntpl', {
		arr: arr,
		str: str
	});
	$(selector).html(html);
}

//点击查询按钮
$('.studysectionWrap').on('click', 'span', function(e) {
	e.stopPropagation();
	gdata.studysection = $(this).attr('data-value');
	$(this).addClass('active').siblings().removeClass('active');
	getLibs();
	$('.testlist').html('');
	toggles();
})
$('.subjectWrap').on('click', 'span', function(e) {
	e.stopPropagation();
	gdata.subject = $(this).attr('data-value');
	$(this).addClass('active').siblings().removeClass('active');
	getLibs();
	$('.testlist').html('');
	toggles();
})
$('.diffcultyWrap').on('click', 'span', function(e) {
	e.stopPropagation();
	gdata.difficulty = $(this).attr('data-value');
	$(this).addClass('active').siblings().removeClass('active');
	getLibs();
	$('.testlist').html('');
	toggles();
})
$('.questiontypeWrap').on('click', 'span', function(e) {
	e.stopPropagation();
	gdata.questiontype = $(this).attr('data-value');
	$(this).addClass('active').siblings().removeClass('active');
	getLibs();
	$('.testlist').html('');
	toggles();
})
$('.questionstatusWrap').on('click', 'span', function(e) {
	e.stopPropagation();
	gdata.questionstatus = $(this).attr('data-value');
	$(this).addClass('active').siblings().removeClass('active');
	getLibs();
	$('.testlist').html('');
	toggles();
})
$('.awardWrap').on('click', 'span', function(e) {
	e.stopPropagation();
	var temptype = $(this).attr("data-value");
	switch (temptype) {
		case '10':
			gdata.setvip = '90';
			gdata.setmoney = '';
			break;
		case '20':
			gdata.setvip = '10';
			gdata.setmoney = '';
			break;
		case '30':
			gdata.setvip = '';
			gdata.setmoney = '90';
			break;
		case '40':
			gdata.setvip = '';
			gdata.setmoney = '10';
			break;
		default:
			gdata.setvip = '';
			gdata.setmoney = '';
	}
	$(this).addClass('active').siblings().removeClass('active');
	getLibs();
	$('.testlist').html('');
	toggles();
})

// 全局变量
var gdata = {
	studysectionList: [],
	subjectList: [],
	diffcultyArr: [{
		id: '10',
		item: '易'
	}, {
		id: '20',
		item: '较易'
	}, {
		id: '30',
		item: '中档'
	}, {
		id: '40',
		item: '较难'
	}, {
		id: '50',
		item: '难'
	}],
	questiontypeArr: [{
		id: '10',
		item: '单选'
	}, {
		id: '40',
		item: '填空'
	}, {
		id: '50',
		item: '解答'
	}],
	questionstatusArr: [{
		id: '20',
		item: '等待录制'
	}, {
		id: '30',
		item: '录制中'
	}, {
		id: '40',
		item: '待审核'
	}, {
		id: '10',
		item: '已录制'
	}],
	awardArr: [{
		id: '10',
		item: '未设置会员奖励'
	}, {
		id: '20',
		item: '会员奖励'
	}, {
		id: '30',
		item: '未设置金额奖励'
	}, {
		id: '40',
		item: '金额奖励'
	}],
	studysection: '',
	subject: '',
	difficulty: '',
	questiontype: '',
	questionstatus: '',
	libs: [],
	options: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
	total: 0,
	pagesize: '',
	page: 1,
	setvip: '',
	setmoney: '',
	tlid: '',
	resid: '',
	aid: '',
	temp_money: 0,
	videoList: [],
	auditstatus: '20',
	pagedetail: 1,
	pagedetailsize: '',
	totaldetail: 0,
	auditcontent: '',
}

// 获取查询学段年级学科等字段
function getSubject() {
	myloading(true);
	$_request({
		url: '/system/auditquestions/getsubjectarr'
	}, function(res) {
		myloading(false);
		gdata.studysectionList = res.data.schterm;
		gdata.subjectList = res.data.subject;
		gdata.studysectionList = gdata.studysectionList.map(function(v, i) {
			return {
				id: v,
				item: v
			}
		})
		gdata.subjectList = gdata.subjectList.map(function(v, i) {
			return {
				id: v,
				item: v
			}
		})
		randerBtn('.studysectionWrap', gdata.studysectionList, '学段');
		randerBtn('.subjectWrap', gdata.subjectList, '学科');
		randerBtn('.diffcultyWrap', gdata.diffcultyArr, '难度');
		randerBtn('.questiontypeWrap', gdata.questiontypeArr, '题型');
		randerBtn('.questionstatusWrap', gdata.questionstatusArr, '录制状态');
		randerBtn('.awardWrap', gdata.awardArr, '录制奖励');
		$('.questionstatusWrap [data-value="40"]').click();
	})
}

gdata.studysectionList = res.data.schterm;
gdata.studysectionList = gdata.studysectionList.map(function(v, i) {
	return {
		id: v,
		item: v
	}
})

//ajax请求封装方法
function $_request(para, callback) {
	para.data = para.data ? para.data : '';
	$.ajax({
		url: para.url,
		type: para.type || 'POST',
		dataType: para.dataType || 'JSON',
		data: para.data,
		success: function(res) {
			callback(res);
		},
		error: function(res) {
			window.location.href = "/mobile/index/newlogin";
		}
	});
}

// 加载动画指令
function myloading(boolean) {
	// 指令第一次绑定到元素身上时执行
	let len = $('body .loadingWrap').length;
	if (len <= 0) {
		let loadingWrap = document.createElement('div')
		loadingWrap.className = 'loadingWrap'
		loadingWrap.innerHTML =
			`
				<div class="trianglebox">
				<div class="la-ball-triangle-path la-2x">
					<div></div>
					<div></div>
					<div></div>
				</div>
				<p class="text">加载中</p>
				</div>
			`
		$('body').append(loadingWrap);
	}
	if (boolean) {
		$('body').find('.loadingWrap').show()
	} else {
		$('body').find('.loadingWrap').hide()
	}
}

getSubject(); //查询条件