research.html 9.5 KB
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/init.css" />
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_to180rktm1butyb9.css" />
		<link rel="stylesheet" type="text/css" href="css/research.css" />
		<link rel="stylesheet" type="text/css" href="css/myweui.css"/>
		<link rel="stylesheet" type="text/css" href="css/weui.css"/>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/myweui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui.js" type="text/javascript" charset="utf-8"></script>
		<title>调研引导</title>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
	</head>

	<body>
		<div class="container" id="research" v-cloak>
			<!--遮罩-->
			<div class="wrap hidden" v-if="success">
			</div>
			<!--弹层-->
			<div class="popup" v-if="success">
				<img src="img/圆角矩形6@2x.png" class="take_btn" @click="recivecompoun()"/>
				<div class="popup_h">
					<span class="line"></span>
					<span class="radius"></span>
					<p class="success">挑战成功</p>
					<span class="radius"></span>
					<span class="line"></span>
				</div>
				<p class="congratulation">恭喜你成为小吃代言人</p>
				<i class="iconfont icon-close"></i>
			</div>
			<!--文本编辑区-->
			<div class="edit">
				{{part1}}
			</div>
			<!--第一问-->
			<div class="question">
				<div class="question_item">
					<div class="question_tit">
						<span class="question_num">1</span><span class="question_tit_text">{{question0.title}}</span>
					</div>
					<p class="question_text">{{question0.content}}</p>
					<div class="question_answer">
						<span class="active product_type" @click="select1()">北舞渡</span><span class="product_type" @click="select2()">逍遥镇</span><span class="product_type" @click="select3()">方中山</span>
					</div>
				</div>
				<!--第二问-->
				<div class="question_item">
					<div class="question_tit">
						<span class="question_num">2</span><span class="question_tit_text">{{question1.title}}</span>
					</div>
					<p class="question_text">{{question1.content}}</p>
					<div class="question_answer_choose">
						<span class="question_answer_choose_num" @click="fre()">{{frequency}} &gt;<span></span></span>
					</div>
				</div>
				<!--第三问-->
				<div class="question_item">
					<div class="question_tit">
						<span class="question_num">3</span><span class="question_tit_text">{{question2.title}}</span>
					</div>
					<div class="question_item_wrap">
						<p class="question_text">{{question2.content}}</p>
						<div class="question_answer_arr">
							<!--<span class="question_answer_item">省 &gt;<span></span></span>
							<span class="question_answer_item">市 &gt;<span></span></span>
							<span class="question_answer_street"><p>区县</p> &gt;</span>
							<span class="question_answer_street"><p>街道</p> &gt;</span>
							<!--<span class="question_answer_item_details">详细地址<span>-->
							<!--<input type="text" style="border:none;outline:none" class="question_answer_item_details" placeholder="详细地址"/>-->
							
							
							<select class="question_answer_item"  v-on:change="selectcity($event.target)"  style="font-size:0.26rem;border:none;outline:none;width:1.6rem;" v-model="proce">
							<!--<option value="" style="font-size:0.26rem">省</option>-->
							<!--<option disabled value="">请选择</option>-->

							<option value="" style="font-size:0.26rem" v-for="item in province" :value="item">{{item.province_name}}</option>
							</select>
	
							<select class="question_answer_item" v-on:change="selectcounty($event.target)" style="font-size:0.26rem;border:none;outline:none;width:1.6rem;" v-model="ci">
								<!--<option value="" style="font-size:0.26rem">市</option>-->
								<option :value="item" style="font-size:0.26rem" v-for="item in city">{{item.city_name}}</option>
							</select>
							<select class="question_answer_item" v-on:change="selectstreet($event.target)" style="font-size:0.26rem;border:none;outline:none;width:1.6rem;" v-model="coun">
								<!--<option value="" style="font-size:0.26rem">区</option>-->
								<option style="font-size:0.26rem" :value="item" v-for="item in county">{{item.county_name}}</option>
							</select>
							<select class="question_answer_item" style="font-size:0.26rem;border:none;outline:none;width:1.6rem;" v-on:change="select($event.target)" v-model="stre">
								<!--<option value="">街道</option>-->
								<option :value="item" style="font-size:0.26rem" v-for="item in street">{{item.town_name}}</option>
							</select>
							<input class="question_answer_item_details" style="border:none;outline:none" v-model="detailaddress" placeholder="详细地址">
						</div>
					</div>
				</div>
				<!--第二问-->
				<div class="question_item">
					<div class="question_tit">
						<span class="question_num">4</span><span class="question_tit_text">{{question3.title}}</span>
						</div>
						<div class="question_item_wrap">
							<div class="question_item_home">
								<span class="question_item_home_text">{{question3_title1}}</span>
								<!--<span class="question_answer_street"><p>省市</p> &gt;</span>
								<span class="question_answer_item">市 &gt;<span></span></span>
								<span class="question_answer_street"><p>区县</p> &gt;</span>-->
                                <div style="height:1.2rem">
                                    <select class="question_answer_item"  style="font-size:0.26rem;border:none;outline:none;width:1.2rem;margin-right: 0;"  v-on:change="selfprove($event.target)" v-model="selfpro" >
                                        <!--<option value="" style="font-size:0.26rem" >省</option>-->
                                        <option value="" style="font-size:0.26rem" :value="item" v-for="item in selfprovince">{{item.province_name}}</option>
                                    </select>
                                    <select class="question_answer_item"  style="font-size:0.26rem;border:none;outline:none;width:1.2rem;margin-right: 0;" v-on:change="selfci($event.target)" v-model="selfc">
                                        <!--<option value="" style="font-size:0.26rem">市</option>-->
                                        <option value="" style="font-size:0.26rem" :value="item" v-for="item in selfcity" >{{item.city_name}}</option>
                                    </select>
                                    <select class="question_answer_item"  style="font-size:0.26rem;border:none;outline:none;width:1.2rem;margin-right: 0;" v-on:change="selfcou($event.target)" v-model="selfcoun">
                                        <!--<option value="" style="font-size:0.26rem">区</option>-->
                                        <option value="" style="font-size:0.26rem" :value="item" v-for="item in selfcounty">{{item.county_name}}</option>
                                    </select>
                                    <span class="question_item_home_text" style="margin-left: 0.2px;">{{question3_title2}}</span>
                                </div>

							</div>
							<div class="favorite_food">
								<span>{{question3_title3}}</span><input type="textbox" v-model="food"/>
							</div>
						</div>
					</div>
				</div>
				<!--footer-->
				<div class="footer">
					<span @click="sure()">挑战完成</span>
				</div>
			</div>
			<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
			
			<script src="js/research.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				var footer = document.getElementsByClassName('footer')[0];
				var icon_close = document.getElementsByClassName('icon-close')[0];
				var popop = document.getElementsByClassName('popup')[0];
				var wrap = document.getElementsByClassName('wrap')[0];
				var product_type = document.getElementsByClassName('product_type');
				//第一问
				for(i = 0; i < product_type.length; i++) {
					product_type[i].onclick = function() {
						for(j = 0; j < product_type.length; j++) {
							product_type[j].classList.remove('active');
						}
						this.classList.add('active');
					}
				}
				//				第二问
//				var ageArr = [];
//				for(let n = 0; n < 8; n++) {
//					var st = {
//						label: n + '次',/**/
//						value: n,
//					}
//					ageArr.push(st);
//				}
//				$(".question_answer_choose").click(function() {
//					weui.picker(ageArr, {
//						className: 'custom-classname',
//						container: 'body',
//						defaultValue: [3],
//						onChange: function(result) {},
//						onConfirm: function(result) {
//							console.log(result) 
//							$('.question_answer_choose_num').html(result[0].label)
//						},
//						id: 'singleLinePicker'
//					});
//				})
				icon_close.onclick = function() {
					popop.style.display = 'none';
					wrap.style.display = 'none';
				}
				footer.onclick = function() {
					popop.style.display = 'block';
					wrap.style.display = 'block';
				}
				
				
			
			</script>
			
			
	</body>

</html>