master

分支 (1)

管理

管理

master

Campus
/
assist-add.html

<!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="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.picker.min.css" rel="stylesheet">
		<style type="text/css">
			html {
				font-size: 77px;
			}

			.mui-bar {
				background-color: white;
			}

			.mui-bar a {
				color: black;
			}

			.mui-input-group:before {
				height: 0;
			}

			ul {
				list-style: none;
			}

			#place .mui-popover {
				height: 5rem;
				background-color: #fff !important;
			}

			#place .mui-slider-group {
				height: 4.42rem !important;
			}

			#place .mui-slider-item {
				border: none !important;
			}

			.select-head {
				position: relative;
				display: flex;
				justify-content: space-between;
				padding: 0 0.26rem;
				width: 100%;
				height: 0.58rem;
			}

			.select-head:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background-color: #e5e5e5;
				transform: scaleY(.5);
			}

			.select-head ul {
				flex: 1;
				margin: 0;
				padding: 0;
			}

			.select-head ul li {
				position: relative;
				float: left;
				margin-right: 0.24rem;
				font-size: 0.186rem;
				color: #333;
				line-height: 0.58rem;
				color: #CE3D3A;
			}

			.select-head ul li.active {
				color: #333;
			}

			.select-head ul li.active:after {
				height: 0;
			}

			.select-head ul li:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2px;
				background-color: #CE3D3A;
			}

			.select-head a {
				float: right;
				border: none;
				font-size: 0.186rem;
				line-height: 0.58rem;
			}

			.select-con {
				position: relative;
			}

			.select-con .mui-scroll-wrapper {
				margin: 0;
				height: 4.42rem;
			}

			.select-con .mui-scroll-wrapper #select-con-1 {
				padding: 0 0.26rem;
			}

			.select-con .mui-scroll-wrapper #select-con-2 {
				padding: 0 1.06rem;
			}

			.select-con .mui-scroll-wrapper #select-con-3 {
				padding: 0 1.86rem;
			}

			.select-con .mui-scroll-wrapper li {
				line-height: 0.58rem;
				font-size: 0.186rem;
				color: #333;
			}

			.select-con .mui-scroll-wrapper li.active {
				color: #CE3D3A;
			}

			#content {
				height: 160px;
			}

			#publish {
				padding: 7px 12px 5px;
				top: 5px;
			}

			.btn-orange {
				color: white;
				background-color: #fb5d11;
				border: 1px solid #fb5d11;
			}

			.mui-content label {
				display: inline-block;
				width: 30% !important;
			}

			.mui-input-row label~input {
				width: 70%;
			}

			.mui-table-view {
				margin-top: 5px;
			}
		</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>
			<button class="mui-btn btn-orange mui-pull-right" id="publish" data-loading-text="发布中">发布</button>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>标题</label>
						<input type="text" class="mui-input-clear" placeholder="简单描述需求(必填)" id="title">
					</div>
					<textarea placeholder="详细描述您遇到的问题(可不填)" id="content"></textarea>
				</form>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<label>悬赏积分</label>
					<div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='500'>
						<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
						<input class="mui-numbox-input" type="number" id="reward">
						<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="type_picker">
					<label>任务分类</label>
					<span id="type" style="color: #CE3D3A;">请选择</span>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="address_picker">
					<label>位置</label>
					<span id="pre_address" style="color: #CE3D3A;"></span>
				</li>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<input type="text" class="mui-input-clear" placeholder="请输入详细地址" id="detail_address">
					</div>
				</form>
			</ul>
		</div>
		<div id="place">
			<div id="addSelect" class="mui-popover mui-popover-bottom mui-popover-action">
				<div id="slider" class="mui-slider">
					<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="select-head">
							<ul class="select-nav mui-clearfix" id="selectNav">
								<li>请选择</li>
								<li class="mui-hidden">请选择</li>
								<li class="mui-hidden">请选择</li>
							</ul>
							<a id="addressBtn">确定</a>
						</div>
					</div>
					<div class="mui-slider-group select-con" id="selectCon">
						<div id="item1" class="mui-slider-item mui-control-content mui-active">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul id="select-con-1">
									</ul>
								</div>
							</div>
						</div>
						<div id="item2" class="mui-slider-item mui-control-content">
							<div id="scroll2" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul id="select-con-2">
									</ul>
								</div>
							</div>
						</div>
						<div id="item3" class="mui-slider-item mui-control-content">
							<div id="scroll3" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul id="select-con-3">
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/locPicker.js" type="text/javascript"></script>
		<script src="js/city.data-3.js" type="text/javascript"></script>
		<script type="text/javascript">
			var typeListUrl = localStorage.getItem('serverUrl') + "assist_type/lst";
			var addUrl = localStorage.getItem('serverUrl') + 'assist/add';
			var uid = JSON.parse(localStorage.getItem('user')).uid;
			var publish = document.getElementById('publish');
			var parentPage;
			mui.init();
			mui.plusReady(function() {
				parentPage = plus.webview.currentWebview().opener();
				if(parentPage.id=='assist-list-header')
					parentPage=plus.webview.getWebviewById('assist-list');
			});
			var picker = new mui.PopPicker();
			document.querySelector("#type_picker").addEventListener("tap", function() {
				document.activeElement.blur(); //关闭软键盘
				getTypeList();
				picker.show(function(selectedItems) {
					document.querySelector("#type").innerText = selectedItems[0].text;
				});
			});

			document.getElementById('content').addEventListener('keyup', function() {
				//文本框自动增长
				if(this.scrollHeight > this.clientHeight) {
					this.style.height = this.scrollHeight + "px";
				}
			});

			publish.addEventListener('tap', function() {
				document.activeElement.blur(); //关闭软键盘
				mui(publish).button('loading');
				var addData = getAddData();
				//				console.log(JSON.stringify(addData));
				mui.post(addUrl, addData, function(data) {
					if(data.code) {
						//按钮重置为初始状态
						mui(publish).button('reset');
						mui.toast(data.msg);
						reloadList();
						mui.back();
					} else {
						//按钮重置为初始状态
						mui(publish).button('reset');
						mui.toast(data.msg);
					}

				}, 'json');
			});

			function getTypeList() {
				mui.post(typeListUrl, {}, function(data) {
					picker.setData(getPickData(data));
				}, 'json');
			}

			function getPickData(data) {
				var retData = new Array();
				for(var i = 0; i < data.length; i++) {
					retData[i] = {
						value: data[i].assist_type_id,
						text: data[i].name,
					}
				}
				return retData;
			}

			function getAddData() {
				var addData = {};
				addData.owner_id = uid;
				addData.title = document.getElementById('title').value;
				addData.content = document.getElementById('content').value;
				addData.reward = document.getElementById('reward').value;
				var assist_type_id = picker.getSelectedItems()[0].value;
				if(assist_type_id)
					addData.assist_type_id = assist_type_id;
				var pre_address = document.getElementById('pre_address').innerText;
				var detail_address = document.getElementById('detail_address').value;
				if(pre_address && detail_address)
					addData.address = pre_address + detail_address;
				return addData;
			}
			function reloadList() {

				mui.fire(parentPage, 'reloadList', {
					userRole: 'owner',
				});
			}
		</script>
	</body>

</html>