yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">-->
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content {
				background: #fff;
			}
			
			#popover {
				display: block;
				top: 57px;
				left: 165px;
			}
			/*tab*/
			
			.mui-segmented-control {
				border: none;
			}
			
			.mui-segmented-control .mui-control-item {
				border-left: none;
				color: #333;
			}
			
			.mui-segmented-control .mui-control-item.mui-active {
				color: #333;
				background: transparent;
				border-bottom: 2px solid #007AFF;
			}
			
			.mui-segmented-control .mui-control-item {
				border-bottom: 2px solid #c8c7cc;
			}
			/*提示删除*/
			
			.hint {
				position: absolute;
				bottom: 0;
				color: #9f9e9e;
				z-index: 999;
				text-align: center;
				left: 0;
				right: 0;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">添加害虫种类</h1>
			<a class="mui-icon mui-icon-plus mui-pull-right" id="addWormName"></a>

		</header>
		<div class="mui-content">
			<ul id="category" class="mui-table-view">
				<!--<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle mui-table">
						<div class="mui-table-cell">
							左滑自动触发删除
						</div>

					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle mui-table">
						<div class="mui-table-cell">
							左滑自动触发删除
						</div>

					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle mui-table">
						<div class="mui-table-cell">
							左滑自动触发删除
						</div>

					</div>
				</li>-->
			</ul>
			<div class="hint">
				注：向左滑动删除害虫种类
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/common.js"></script>
		<script type="text/javascript">
			var equipId;
			var addr;
			mui.init({
				beforeback: function() {　　　　 //获得父页面的webview
					var list = plus.webview.currentWebview().opener();　　　　 //触发父页面的自定义事件(refresh),从而进行刷新
					mui.fire(list, 'refresh');
					//返回true,继续页面关闭逻辑
					return true;
				}
			});
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				equipId = self.equipId;
				addr = self.addr;
//				console.log(equipId);
//				console.log(addr);
				//请求害虫名称
				mui.ajax('http://120.27.222.26/cbd_describe_img', {
					data: {
						req: 'pest_kind',
						addr: addr
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var html = '';
						if(data.length) {
							for(var i = 0; i < data.length; i++) {
								html += '<li class="mui-table-view-cell"><div class="mui-slider-right mui-disabled">' +
									'<a class="mui-btn mui-btn-red">删除</a>	</div><div class="mui-slider-handle mui-table">' +
									'<div class="mui-table-cell">' + data[i].pest_name + '</div></div></li>';
							}
							$('#category').append(html);
							listNull();
						} else {
							var nullHtml = '<div class="nullData"><img src="../images/listNull.png" alt="" width="110" /></div>'
							$('.mui-content').html(nullHtml)
						}
					},
					error: function(xhr, type, errorThrown) {
						mui('.mui-content')[0].appendChild(netStyle('../images/netBlocked.png'));
					}
				});

				function listNull() {
					var listlen = document.getElementById('category').children.length;
					if(listlen == 0) {
						mui('.mui-content')[0].appendChild(netStyle('../images/listNull.png'));
					}
				}

				(function(mui, $) {
					//添加害虫名称
					document.getElementById('addWormName').addEventListener('tap', function() {
						var listlen = document.getElementById('category').children.length;
						if(listlen < 8) {
							var btnArray = ['确定', '取消'];
							mui.prompt('请填写害虫名称：', '害虫名称', '害虫', btnArray, function(e) {
								if(e.index == 0) {
									if(e.value == '') {
										return false;
									}
									mui.ajax('http://120.27.222.26/cbd_describe_img', {
										data: {
											req: 'add_pest',
											pest: e.value,
											//											addr:addr
										},
										dataType: 'json', //服务器返回json格式数据
										type: 'get', //HTTP请求类型
										timeout: 10000, //超时时间设置为10秒；
										success: function(data) {
											if(data.length) {
												$('.nullData').remove();
												var html = '<li class="mui-table-view-cell"><div class="mui-slider-right mui-disabled">' +
													'<a class="mui-btn mui-btn-red">删除</a>	</div><div class="mui-slider-handle mui-table">' +
													'<div class="mui-table-cell">' + e.value + '</div></div></li>';
												$('#category').append(html);
											} else {
												var nullHtml = '<div class="nullData"><img src="../images/listNull.png" alt="" width="110" /></div>'
												$('.mui-content').html(nullHtml)
											}
										},
										error: function(xhr, type, errorThrown) {
											console.log(type)
										}
									});

								} else {
									console.log('你点了取消按钮')
								}
							}, 'div')
						} else {
							mui.toast('最多只能添加八种害虫种类')
						}
					})
					//第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
					mui('#category').on('tap', '.mui-btn', function(event) {
						var elem = this;
						var pest = [];
						pest.push(elem.parentNode.nextElementSibling.children[0].innerHTML);
						var li = elem.parentNode.parentNode;
						var btnArray = ['确认', '取消'];
						mui.confirm('确认删除该种害虫？', '删除', btnArray, function(e) {
							if(e.index == 0) {
								mui.ajax('http://120.27.222.26/cbd_describe_img', {
									data: {
										req: 'del_pest',
										pest: JSON.stringify(pest)
									},
									dataType: 'json', //服务器返回json格式数据
									type: 'get', //HTTP请求类型
									timeout: 10000, //超时时间设置为10秒；
									success: function(data) {
										window.location.reload();
									},
									error: function() {

									}
								})
							} else {
								setTimeout(function() {
									mui.swipeoutClose(li);
								}, 0);
							}
						});
					});

				}(mui, jQuery))
			})
		</script>
	</body>

</html>