FX/web/fx/js/run_station.js

//蜘蛛班次：
//使用：
/*
 html中     <div id="sel_car" class="ub ub-ver select_hei"></div>
 */
/*
 js    
 run_list：班次数组
 run_date：配合cache_select_data使用   cache_select_data中的key  
 cache_select_data:缓存对象  格式如下
 window.runbus.init({
				run_list:js.data.class_station_list,
				run_date:"2017-03-08",
				cache_select_data:{"2017-03-08":{cache_run_id:2,cache_start_station_id:"2_0",cache_end_station_id:"2_0_2"}}
			},function(run,start,end){
				console.log(run,start,end);
			});
			
			
			//callback=>班次回调
			//callback2=>上车站回调
			//callback3=>下车站回调
 */
(function($) {

	window.runbus = window.runbus || {};
	var initData = {};

	var cache_select_data = {};

	//切换班次信息
	var passindex = '';
	var selectindex = '';

	var runlist = [];
	var run_date = "";

	//回调出去的参数
	var call_run = {};
	var call_start_station = {};
	var call_end_station = {};

	window.runbus.init = function(initData, callback, callback2, callback3) {

		runlist = initData['run_list'] ? initData['run_list'] : [];
		run_date = initData['run_date'] ? initData['run_date'] : "";
		cache_select_data = initData['cache_select_data'] ? initData['cache_select_data'] : {};

		showGoInfo(runlist);
		//展示去程的站点信息
		function showGoInfo(runlist) {
			console.log(runlist);
			var listHTML = '';
			var start_stationHTML = '';
			var end_stationHTML = '';
			runlist.forEach(function(dict, index) {
				//上车站内容
				var start_station_list = dict['start_station_list'];
				start_stationHTML = getStartHtml(start_station_list);

				var end_list = [];
				var cache_sel = 'bus_kong';
				var t = '';
				var temp = '';
				if(cache_select_data.hasOwnProperty(run_date)) {
					t = cache_select_data[run_date];
					if(t.cache_run_id == dict['run_id']) {
						cache_sel = 'bus_sel_image';
						temp = 'open';
						start_station_list.forEach(function(v, i) {
							if(v['start_res_id'] == t.cache_start_station_id) {
								end_list = v.end_station_list;
							}
						})
					}
				}
				end_stationHTML = getEndHtml(end_list, false);
				var dictstr = JSON.stringify(dict);
				//			onclick="changeTheBusInfo(this)"
				dictstr = dictstr.replace(/"/g, '&quot;');
				//				var html1 = `<div class="ub ub-ver bor_b_e5">
				//							<div class="ub ub-ac runbus ${temp}" dict="${dictstr}" >
				//								<div class="ui_p_t12 ui_p_b12 ui_p_l15 ulev1 text_c_2b" style="padding-right: 0.22rem;" run_time_id="${dict.run_id}">${dict.run_time}</div>
				//								<div class="ub-f1 text_c_80">余票充足</div>
				//								<div class="ui_p_r15 ui_p_t10 ui_p_b10 ui_p_l15">
				//									<div class="${cache_sel} run_bus"></div>
				//								</div>
				//							</div>
				//							<div class="ub ub-ver station" style="background-color: #f6f6f6;display: none;">
				//								<div class="ub start_station">
				//									<div class="ulev1 text_c_2b ui_p_l15 ui_p_r15 ui_p_t12">上车站</div>
				//									<div class="ub ub-ver ub-f1" style="width: 1%;">
				//										${start_stationHTML}
				//									</div>
				//								</div>
				//								<div class="ub ">
				//									<div class="ulev1 text_c_2b ui_p_l15 ui_p_r15 ui_p_t12">下车站</div>
				//									<div class="ub ub-ver ub-f1 end_station" style="width: 1%;">
				//										${end_stationHTML}
				//									</div>
				//								</div>
				//							</div>
				//						</div>`
				var html1 = '<div class="ub ub-ver bor_b_e5">' +
					'<div class="ub ub-ac runbus ' + temp + '" dict="' + dictstr + '" >' +
					'	<div class="ui_p_t12 ui_p_b12 ui_p_l15 ulev1 text_c_2b" style="padding-right: 0.22rem;" run_time_id="' + dict.run_id + '">' + dict.run_time + '</div>' +
					'	<div class="ub-f1 text_c_80">余票充足</div>' +
					'	<div class="ui_p_r15 ui_p_t10 ui_p_b10 ui_p_l15">' +
					'		<div class="' + cache_sel + ' run_bus"></div>' +
					'	</div>' +
					'</div>' +
					'<div class="ub ub-ver station" style="background-color: #f6f6f6;display: none;">' +
					'	<div class="ub start_station">' +
					'		<div class="ulev1 text_c_2b ui_p_l15 ui_p_r15 ui_p_t12">上车站</div>' +
					'		<div class="ub ub-ver ub-f1" style="width: 1%;">' +
					start_stationHTML +
					'		</div>' +
					'	</div>' +
					'	<div class="ub ">' +
					'		<div class="ulev1 text_c_2b ui_p_l15 ui_p_r15 ui_p_t12">下车站</div>' +
					'		<div class="ub ub-ver ub-f1 end_station" style="width: 1%;">' +
					end_stationHTML +
					'		</div>' +
					'	</div>' +
					'</div>' +
					'</div>';

				listHTML += html1;
			})
			$('#sel_car').html(listHTML);
			$('.runbus').on('click', function(e) {
				changeTheBusInfo($(this));
			});
			$('.start_station_all').on('click', function(e) {
				var list = $(this).attr('dict');
				list = JSON.parse(list);
				changeTheStartStation(list, $(this), true);
			})

			$('.open').next().slideDown();

			var tobj = $('.open').next().find('.sel_station_sigle_start');
			passindex = $('.open');
			var cstr = $('.open').next().find('.sel_station_sigle_start').attr('dict');
			if(cstr) {
				var endlist = JSON.parse(cstr);
				changeTheStartStation(endlist, tobj, false);
			}

		}

		//得到上车站内容
		function getStartHtml(start_station_list) {
			var temp_start_stationHTML = '';
			var temp_end_stationFirst = '';
			start_station_list.forEach(function(start_dict, index) {

				var cache_sel = 'select_quan';
				var t = '';
				var sel_station_sigle_start = '';
				if(cache_select_data.hasOwnProperty(run_date)) {
					t = cache_select_data[run_date];
					if(t.cache_start_station_id == start_dict['start_res_id']) {
						cache_sel = 'select_gou';
						sel_station_sigle_start = 'sel_station_sigle_start';

					}
				} else {
					if(index == 0) {
						cache_sel = 'select_gou';
						sel_station_sigle_start = 'sel_station_sigle_start';
					}
				}

				var cstr = JSON.stringify(start_dict['end_station_list']);
				cstr = cstr.replace(/"/g, '&quot;');
				//			onclick="changeTheStartStation(${cstr},this,true)"
				var html2 = '<div class="start_station_all ub ub-ac ui_p_t12 ui_p_b12 bor_b_e5 ' + sel_station_sigle_start + '" dict="' + cstr + '" >' +
					'<div class="ub-f1 text_c_80 " start_station_id="' + start_dict.start_res_id + '">' + start_dict.start_res_name + '</div>' +
					'<div class="ui_p_r15"><div class="start_image ' + cache_sel + '"></div></div>' +
					'</div>'
				temp_start_stationHTML += html2;
			})
			return temp_start_stationHTML
		}

		//得到下车站内容
		function getEndHtml(end_station_list, isClick) {
			var html = '';
			var end_ids = [];
			if(end_station_list.length > 0) {
				end_ids = end_station_list.map(function(v) { return v['station_id'] });
			}
			var t = '';
			end_station_list.forEach(function(end_dict, index) {

				var cache_sel = 'select_quan';
				var sel_station_sigle_end = '';
				if(isClick == true) {
					if(index == 0) {
						cache_sel = 'select_gou';
						sel_station_sigle_end = 'sel_station_sigle_end';
					}
				} else {
					if(cache_select_data.hasOwnProperty(run_date)) {
						t = cache_select_data[run_date];
						if($.inArray(t.cache_end_station_id, end_ids) > -1) {
							if(t.cache_end_station_id == end_dict['station_id']) {
								cache_sel = 'select_gou';
								sel_station_sigle_end = 'sel_station_sigle_end';
							}
						} else {
							if(index == 0) {
								cache_sel = 'select_gou';
								sel_station_sigle_end = 'sel_station_sigle_end';
							}
						}
					} else {
						if(index == 0) {
							cache_sel = 'select_gou';
							sel_station_sigle_end = 'sel_station_sigle_end';
						}
					}
				}

				var str = 'bor_b_e5';
				if(index == end_station_list.length - 1) {
					str = '';
				}
				//			onclick="changeTheEndStation(this)"
				var html3 = '<div class="end_station_all ub ub-ac ui_p_t12 ' + sel_station_sigle_end + ' ui_p_b12 '+str+'">' +
					'	<div class="ub-f1 text_c_80 " count="' + end_dict.count + '" pro_cate_id="' + end_dict.pro_cate_id + '"  end_station_id="' + end_dict.station_id + '">' + end_dict.station_name + '</div>' +
					'	<div class="ui_p_r15"><div class="end_image ' + cache_sel + '"></div></div>' +
					'</div>';
				html += html3;
			})
			return html;
		}

		function changeTheBusInfo(obj) {

			var cstr = $(obj).attr('dict');
			var dict = JSON.parse(cstr);
			var tobj = $(obj).next().find('.start_station_all:first');
			var endlist = dict.start_station_list[0].end_station_list;
			changeTheStartStation(endlist, tobj, true);
			var next = $(obj).next();
			next.slideToggle();
			$(obj).parent().parent().find('.station').not(next).slideUp();

			selectindex = obj;
			if(selectindex.hasClass('open') && passindex.hasClass('open')) {
				$(selectindex).removeClass('open');
				$(selectindex).removeClass('bor_b_e5');
				$(selectindex).find('.run_bus').removeClass('bus_sel_image');
				$(selectindex).find('.run_bus').addClass('bus_kong');
				$('#select_run_bus').text('选择乘坐班次');
				passindex = '';

			} else {

				$(passindex).removeClass('open');
				$(passindex).removeClass('bor_b_e5');
				$(passindex).find('.run_bus').removeClass('bus_sel_image');
				$(passindex).find('.run_bus').addClass('bus_kong');

				$(selectindex).addClass('open');
				$(selectindex).addClass('bor_b_e5');
				$(selectindex).find('.run_bus').removeClass('bus_kong');
				$(selectindex).find('.run_bus').addClass('bus_sel_image');

				var t_text = $(obj).children().eq(0).text();
				$('#select_run_bus').text('选择乘坐班次--' + t_text);
				passindex = selectindex;
			}
			$('.open').next().find('.start_station_all').first().addClass('sel_station_sigle_start');
			$('.open').next().find('.end_station_all').first().addClass('sel_station_sigle_end');
			$('.open').next().find('.start_image').removeClass('select_gou');
			$('.open').next().find('.start_image').addClass('select_quan');
			$('.open').next().find('.end_image').removeClass('select_gou');
			$('.open').next().find('.end_image').addClass('select_quan');

			$('.open').next().find('.start_image').first().removeClass('select_quan');
			$('.open').next().find('.start_image').first().addClass('select_gou');
			$('.open').next().find('.end_image').first().removeClass('select_quan');
			$('.open').next().find('.end_image').first().addClass('select_gou');

			if(typeof(callback) == 'function') {
				var run_id = $('.open').children().eq(0).attr('run_time_id');
				var run_time = $('.open').children().eq(0).text();

				var count = $('.sel_station_sigle_end').children().eq(0).attr('count');
				var pro_cate_id = $('.sel_station_sigle_end').children().eq(0).attr('pro_cate_id');
				call_run = {
					run_id: run_id,
					run_time: run_time,
					count: count,
					pro_cate_id: pro_cate_id
				}
				console.log('callback1', call_run);
				callback(call_run);
			}

		}

		//切换上车站站点
		function changeTheStartStation(cstr, obj, isClick) {
			var html = getEndHtml(cstr, isClick);
			$(obj).closest('.start_station').next().find('.end_station').html(html);
			$('.end_station_all').on('click', function(e) {
				changeTheEndStation($(this));
			})

			$('.start_station_all').find('.start_image').removeClass('select_gou');
			$('.start_station_all').find('.start_image').addClass('select_quan');
			$(obj).find('.start_image').addClass('select_gou');
			$(obj).find('.start_image').removeClass('select_quan');
			$('.start_station_all').removeClass('sel_station_sigle_start');
			$(obj).addClass('sel_station_sigle_start');

			if(typeof(callback2) == 'function') {

				var start_station_id = $('.sel_station_sigle_start').children().eq(0).attr('start_station_id');
				var start_station_name = $('.sel_station_sigle_start').children().eq(0).text();

				var count = $('.sel_station_sigle_end').children().eq(0).attr('count');
				var pro_cate_id = $('.sel_station_sigle_end').children().eq(0).attr('pro_cate_id');

				call_start_station = {
					start_station_id: start_station_id,
					start_station_name: start_station_name,
					count: count,
					pro_cate_id: pro_cate_id
				}
				console.log('callback2', call_start_station);
				callback2(call_start_station);
			}

		}

		//切换下车站站点
		function changeTheEndStation(obj) {
			$('.end_station_all').removeClass('sel_station_sigle_end');
			$(obj).addClass('sel_station_sigle_end');
			$('.end_station_all').find('.end_image').removeClass('select_gou');
			$('.end_station_all').find('.end_image').addClass('select_quan');
			$(obj).find('.end_image').removeClass('select_quan');
			$(obj).find('.end_image').addClass('select_gou');

			if(typeof(callback3) == 'function') {
				var end_station_id = $('.sel_station_sigle_end').children().eq(0).attr('end_station_id');
				var end_station_name = $('.sel_station_sigle_end').children().eq(0).text();
				var count = $('.sel_station_sigle_end').children().eq(0).attr('count');
				var pro_cate_id = $('.sel_station_sigle_end').children().eq(0).attr('pro_cate_id');

				call_end_station = {
					end_station_id: end_station_id,
					end_station_name: end_station_name,
					count: count,
					pro_cate_id: pro_cate_id
				}
				console.log('callback3', call_end_station);
				callback3(call_end_station);
			}

		}
	}

})(jQuery)