sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/styleChoose.css">
		<link rel="stylesheet" type="text/css" href="../css/styleFilter.css">
		<link rel="stylesheet" type="text/css" href="../css/html.css"/>
		<style>
			body, html {
				background-color: transparent !important;
				height: 100%;
				width: 100%;
			}
			.up, .up1 {
				height: 35%;
			}
			.down {
				height: 65%;
				border-top: 1px solid #ddd;
				padding-bottom: 1rem;
			}
			.screening-conditions {
				display: block;
			}
			#filtratePage {
				height: 100%;
				overflow: scroll;
			}
			.filtrate-footer {
				position: relative;
				bottom: 10%;
			}
			input.filtrate-submit {
				border: 1px #067974 !important;
			}
			.filtrate-input {
				width: 50% !important;
				float: right;
				margin-right: 0px !important;
				margin-top: 8px !important;
			}
			.filtrate-price input:focus {
				border: 1px solid #00787B;
			}
			.zmq-em {
				/*padding: 2px 5px;
				 border: 1px solid#009944;
				 border-radius: 8px;*/
			}
		</style>
	</head>
	<body>
		<div class="subFly" id="app" v-cloak>
			<div class="down">
				<section id="filtratePage" class="screening-conditions">
					<header class="wap-header">
						<a id="filtrateBackContains" class="wap-header-back wap-header-l" href="javascript:void(0)"></a>
						<div class="zmq-padding-btn">
							已选条件：<em class="zmq-text-success zmq-margin-level-5 zmq-em" v-for="(d,i) in chooseList">{{d.value}}</em>
						</div>
					</header>
					<article class="filtrate-cont">
						<!--<div id="classify" class="filtrate-category">
						<a href="javascript:void(0)"> 分类<span>全部展开</span> </a>
						</div>-->
						<!--<div class="filtrate-classify">
						<ul class="filtrate-classify-list">
						<li class="active">
						<a href="javascript:void(0)">图书</a>
						<ul>
						<li>
						<a href="javascript:void(0)">童书</a>
						<ul>
						<li>
						<a href="javascript:void(0)">3-6岁</a>
						<ul>
						<li>
						<a href="javascript:void(0)">卡通/动漫/图画书</a>
						</li>
						<li>
						<a href="javascript:void(0)">文学</a>
						</li>
						<li>
						<a href="javascript:void(0)">科普/百科</a>
						</li>
						<li>
						<a href="javascript:void(0)">益智游戏</a>
						</li>
						</ul>
						</li>
						<li>
						<a href="javascript:void(0)">7-10岁</a>
						<ul>
						<li>
						<a href="javascript:void(0)">文学</a>
						</li>
						<li>
						<a href="javascript:void(0)">科普/百科</a>
						</li>
						<li>
						<a href="javascript:void(0)">卡通/动漫/图画书</a>
						</li>
						</ul>
						</li>
						<li>
						<a href="javascript:void(0)">11-14岁</a>
						<ul>
						<li>
						<a href="javascript:void(0)">通话</a>
						</li>
						<li>
						<a href="javascript:void(0)">励志成长</a>
						</li>
						<li>
						<a href="javascript:void(0)">少儿英语</a>
						</li>
						</ul>
						</li>
						</ul>
						</li>
						<li>
						<a href="javascript:void(0)">小说</a>
						<ul>
						<li>
						<a href="javascript:void(0)">外国小说</a>
						</li>
						<li>
						<a href="javascript:void(0)">中国当代小说</a>
						</li>
						<li>
						<a href="javascript:void(0)">中国古代小说</a>
						</li>
						<li>
						<a href="javascript:void(0)">中国现代小说</a>
						</li>
						</ul>
						</li>
						<li>
						<a href="javascript:void(0)">考试</a>
						<ul>
						<li>
						<a href="javascript:void(0)">财税外贸保险类考试</a>
						<ul>
						<li>
						<a href="javascript:void(0)">注册会计师考试</a>
						</li>
						<li>
						<a href="javascript:void(0)">中级会计职称考试</a>
						</li>
						<li>
						<a href="javascript:void(0)">证券从业资格考试</a>
						</li>
						</ul>
						</li>
						<li>
						<a href="javascript:void(0)">外语考试</a>
						<ul>
						<li>
						<a href="javascript:void(0)">英语四/六级</a>
						</li>
						<li>
						<a href="javascript:void(0)">IELTS考试用书</a>
						</li>
						<li>
						<a href="javascript:void(0)">TOEFL考试用书</a>
						</li>
						<li>
						<a href="javascript:void(0)">日语考试用户</a>
						</li>
						<li>
						<a href="javascript:void(0)">英语专业四/八级</a>
						</li>
						</ul>
						</li>
						<li>
						<a href="javascript:void(0)">建筑工程类职称考试</a>
						<ul>
						<li>
						<a href="javascript:void(0)">全国一级建造师考试</a>
						</li>
						<li>
						<a href="javascript:void(0)">全国二级建造师考试</a>
						</li>
						<li>
						<a href="javascript:void(0)">全国造价工程师考试</a>
						</li>
						<li>
						<a href="javascript:void(0)">勘察设计注册公用设备工程师</a>
						</li>
						</ul>
						</li>
						</ul>
						</li>
						<li>
						<a href="javascript:void(0)">中小学教辅</a>
						<ul>
						<li>
						<a href="javascript:void(0)">中小学阅读</a>
						<ul>
						<li>
						<a href="javascript:void(0)">课外阅读</a>
						</li>
						<li>
						<a href="javascript:void(0)">新课标</a>
						</li>
						<li>
						<a href="javascript:void(0)">文言文/古诗词</a>
						</li>
						</ul>
						</li>
						<li>
						<a href="javascript:void(0)">教育理论/教师用书</a>
						<ul>
						<li>
						<a href="javascript:void(0)">教育理论/教育主张</a>
						</li>
						<li>
						<a href="javascript:void(0)">幼儿园/学前教育</a>
						</li>
						<li>
						<a href="javascript:void(0)">学科教学</a>
						</li>
						<li>
						<a href="javascript:void(0)">教师成长/教师内功</a>
						</li>
						<li>
						<a href="javascript:void(0)">课堂教学/课堂管理</a>
						</li>
						<li>
						<a href="javascript:void(0)">班主任用书</a>
						</li>
						</ul>
						</li>
						</ul>
						</li>
						</ul>
						</li>
						</ul>
						</div>-->
						<div v-for="(d,i) in chooseList">
							<div class="filtrate-price" v-show="d.type =='input'">
								{{d.name}}
								<input class="filtrate-input" id="minPrice" v-bind:placeholder="'请输入'+ d.name +'信息'" type="text" v-model="d.value"/>
							</div>
							<div v-show="d.type =='radio'">
								<div id="address" class="filtrate-category">
									<a href="javascript:void(0)"> {{d.name}}<span>收起</span> </a>
								</div>
								<div class="filtrate-address">
									<ul class="clearfix">
										<li v-for="(cd,di) in d.key" v-on:click="doneChooseThis(i,cd)">
											<a href="javascript:void(0)">{{cd}}</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<!--<div class="filtrate-other">
						<h2>其他条件</h2>
						<ul class="clearfix">
						<li>
						<label>促销</label>
						</li>
						<li>
						<label>尾品汇</label>
						</li>
						<li>
						<label>自营</label>
						</li>
						<li class="active">
						<label>有货</label>
						</li>
						<li>
						<label>预售</label>
						</li>
						<li>
						<label>海外购</label>
						</li>
						</ul>
						</div>-->
					</article>
				</section>
				<footer class="filtrate-footer">
					<ul class="filtrate-btn clearfix">
						<li>
							<input class="filtrate-reset" type="button" value="取消筛选" v-on:click="calcel">
						</li>
						<li>
							<input class="filtrate-submit zmq-bg-noraml" type="button" value="确定" v-on:click="done">
						</li>
					</ul>
				</footer>
			</div>
			<div class="up"></div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/vue.js"></script>
	<script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="../script/jquery.filter.js"></script>
	<script type="text/javascript" src="../script/vue_plugins.js"></script>
	<script type="text/javascript">
		apiready = function() {
			var extra = JSON.parse(api.pageParam.e);
			var o = JSON.parse(api.pageParam.o)
			new Vue({
				el : '#app',
				data : {
					//  已经选择的
					hasChoose : '',
					//  选择项
					chooseList : '',
					//  监听名称（frameName）
					frameName : '',
				},
				methods : {
					init : function() {
						this.hasChoose = extra.value.has;
						this.chooseList = o;
						this.frameName = extra.value.f;
						this.$nextTick(function() {
							configDown();
						});
					},
					// 取消筛选
					calcel : function() {
					    api.sendEvent({
							name : 'kucunjjs_body',
							extra : {
							   brand : '',
							   gg : '',
							   hw : '',
							   done : true
							}
						});
						api.closeFrame({
							name : api.frameName
						});
					},
					//  确认筛选
					done : function() {
						var option = {
							brand : this.chooseList[2].value,
							gg : this.chooseList[0].value,
							hw : this.chooseList[1].value,
							done : true
						}
						api.sendEvent({
							name : 'kucunjjs_body',
							extra : option
						});
					},
					doneChooseThis : function(i, n) {
						this.$set(this.chooseList[i], "value", n);
					},
				},
				mounted : function() {
					this.init();
				}
			})
		};
	</script>
</html>