event_edit_input.inc

<?php
/**
 * 志愿者活动编辑
 * $Id: event_edit_input.php,v 1.1 2020/01/03 11:18:46  Exp $
 * @author lixq
 * @package manager.public_html
 **/

?>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=<?=LBS_KEY?>"></script>
<style type="text/css">
	#container{
		width: 600px;
		height: 400px;
	}
</style>
<div id="change">
	<p class="edit_title">志愿者活动编辑</p>
	<form id="form" name="event_edit" action="event_edit_result.php" method="post" enctype="multipart/form-data">
	<input type="hidden" name="id" value="<?=$id?>" />
	<div class="edit_content">
		<p>宣传头图</p>
		<a href='javascript:void(0);' class="el-button el-button--primary blueButton">选择文件</a>
			<input id="front_image" class="myFileUpload" name="front_image" type="file" accept="image/*"/>
		<div id="img_thumbnail">
    	<img id="imgshow" height="150px" alt="宣传头图" />
		</div>
		<p>活动名称</p>
		<el-input v-model="title" name="title" class="input_200"></el-input><br />
		<p>活动介绍</p>
		<textarea v-model="comment"  rows="5" name="comment" ></textarea><br />
		<p>活动地点</p>
		<textarea v-model="position" id="position" name="position" rows="3" ></textarea><br />
		<!-- 地图显示容器   -->
		请在地图上选择活动地址
		<div id="container"></div>
		<input name="position_longitude" type="hidden" />
		<input name="position_latitude" type="hidden" />
		<p>征集范围</p>
		<?if($_account->user_id != 0 ||$_account->school_id != 0 || $_account->government_id != 0){?>
			<template>
        <el-checkbox-group v-model="checkedScope" >
          <el-checkbox name="scope"  v-for="scope in scope_list" :label="scope.id" :key="scope.id" >{{scope.title}}</el-checkbox>
        </el-checkbox-group>
      </template>
		<?}else {?>
  		<template>
        <el-checkbox-group v-model="checkedScope" @change="handleChecked">
          <el-checkbox name="scope[]"  v-for="scope in scope_list" :label="scope.id" :key="scope.id" >{{scope.title}}</el-checkbox>
        </el-checkbox-group>
      </template>
      <div v-if="isAreaShow">
    		<p>省市区县选择 </p>
    		<el-select size="small" style="width: 100px" name="province" v-model="province" placeholder="请选择省份"  v-on:change="getProv($event)">
          <el-option v-for="item in province_list"  :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select size="small" style="width: 100px"  name="city" v-if="province != ''" v-model="city" placeholder="请选择城市" v-on:change="getCity($event)">
          <el-option  v-for="item in new_city_list"  :label="item.label"  :value="item.value"></el-option>
        </el-select>
        <el-select size="small" style="width: 100px"  name="district" v-if="city != ''"  v-model="district"  placeholder="请选择区县"  v-on:change="getArea($event)">
          <el-option v-for="item in new_district_list" :label="item.label" :value="item.value"></el-option>
        </el-select>
    	</div>
		<?}?>
		<p>活动人数</p>
		<template>
  		<el-radio v-model="max_member_flg" name="max_member_flg" label="1">不限</el-radio>
  		<el-radio v-model="max_member_flg" name="max_member_flg" label="2">自定义<el-input type="number" v-model="max_member" name="max_member" class="input_100"></el-input></el-radio>
		</template>
		<p>活动期限</p>
		<el-date-picker  v-model="start_time" name="start_time" type="datetime" align="right"  ></el-date-picker> — 
		<el-date-picker  v-model="finish_time" name="finish_time" type="datetime"  align="right"  ></el-date-picker>
    <p>活动时长</p>
		<el-input v-model="time_length" name="time_length" placeholder="文字描述即可,比如1小时" class="input_200"></el-input><br />
		<p>报名截止时间</p>
		<el-date-picker  v-model="enroll_time" name="enroll_time" type="datetime"  align="right"  ></el-date-picker>
		<p>活动负责人</p>
		<el-input v-model="leader_name" name="leader_name" class="input_200"></el-input><br />
		<p>联系方式</p>
		<el-input v-model="leader_contact" name="leader_contact" class="input_200"></el-input><br />
		<p>集合地点</p>
		<el-input v-model="venue" name="venue" class="input_200"></el-input><br />
		<p>集合时间</p>
		<el-date-picker  v-model="venue_time" name="venue_time" type="datetime"  align="right" ></el-date-picker>
		<p>活动发布人</p>
		<el-input v-model="author" name="author" class="input_200"></el-input><br />
		<br/><br/>
		<el-button type="primary" @click="submit()" class="edit_btn">编辑</el-button>
		<el-button type="primary" @click="back()" class="edit_btn">返回</el-button>
		<br/><br/>
	</div>
	</form>
</div>

<script type="text/javascript">
	var v = new Vue({
		el:'#change',
		data:{
		  max_member_flg:'<?=$volunteer_event_dat->max_member > 0?"2":"1"?>',
		  title:'<?=$volunteer_event_dat->title?>',
		  comment:'<?=$volunteer_event_dat->comment?>',
		  position:'<?=$volunteer_event_dat->position?>',
		  start_time:'<?=$volunteer_event_dat->start_time?>',
		  finish_time:'<?=$volunteer_event_dat->finish_time?>',
		  time_length:'<?=$volunteer_event_dat->time_length?>',
		  leader_name:'<?=$volunteer_event_dat->leader_name?>',
		  leader_contact:'<?=$volunteer_event_dat->leader_contact?>',
		  venue:'<?=$volunteer_event_dat->venue?>',
		  venue_time:'<?=$volunteer_event_dat->venue_time?>',
		  author:'<?=$volunteer_event_dat->author?>',
		  enroll_time:'<?=$volunteer_event_dat->enroll_time?>',
		  checkedScope:<?=json_encode($checkedScope)?>,
		  province_list:<?=json_encode($province_list)?>,
		  city_list:<?=json_encode($city_list)?>,
		  district_list:<?=json_encode($district_list)?>,
		  province:'<?=$volunteer_event_dat->province?>',
		  city:'<?=$volunteer_event_dat->city?>',
		  district:'<?=$volunteer_event_dat->district?>',
		  new_city_list:<?=json_encode($new_city_list)?>,
		  new_district_list:<?=json_encode($new_district_list)?>,
		  isAreaShow:<?=in_array("school",$checkedScope)?"true":"false"?>,
		  scope_list:<?=json_encode($scope_list)?>,
		  max_member:'<?=$volunteer_event_dat->max_member?>',
		},
		methods:{
			submit:function(){
				if(!this.title){
					this.$message({
		            type: 'error',message: '请输入活动名称!'
		          });
		          return;
				}
				if(!this.comment){
					this.$message({
		            type: 'error',message: '请输入活动介绍!'
		          });
		          return;
				}
				if(!$("#position").val()){
					this.$message({
		            type: 'error', message: '请选择活动地点!'
		          });
		          return;
				}
				if(this.checkedScope.length == 0){
					this.$message({
		            type: 'error', message: '请选择征集范围!'
		          });
		          return;
				}
				if(this.max_member_flg == "0"){
					this.$message({
		            type: 'error', message: '请选择活动人数!'
		          });
		          return;
				}
				if(!this.max_member && this.max_member_flg == "2"){
					this.$message({
		            type: 'error', message: '请输入自定义活动人数!'
		          });
		          return;
				}
				if(this.max_member_flg == "2"  && !isNumber(this.max_member)){
					this.$message({
		            type: 'error', message: '自定义活动人数格式为数字!'
		          });
		          return;
				}
				if(!this.start_time || !this.finish_time){
					this.$message({
		            type: 'error', message: '请选择活动期限!'
		          });
		          return;
				}
				if(!this.time_length){
					this.$message({
		            type: 'error', message: '请输入活动时长!'
		          });
		          return;
				}
				if(!this.enroll_time){
					this.$message({
		            type: 'error', message: '请选择报名截止时间!'
		          });
		          return;
				}
				if(!this.leader_name){
					this.$message({
		            type: 'error', message: '请输入活动负责人!'
		          });
		          return;
				}
				if(!this.leader_contact){
					this.$message({
            type: 'error', message: '请输入联系方式!'
          });
          return;
  			}
	  		if(!this.venue){
    			this.$message({
            type: 'error', message: '请输入集合地点!'
          });
          return;
    		}
	  		if(!this.venue_time){
    			this.$message({
            type: 'error', message: '请输入集合时间!'
          });
          return;
    		}
	  		this.$confirm('是否编辑活动?', '提示', {
		    	confirmButtonText: '确定',
		    	cancelButtonText: '取消',
		    	type: 'warning'
		 		}).then(() => {
		 		 $('#form').submit();
		   	}).catch(() => {
		    	this.$message({
		      	type: 'info',
		      	message: '已取消'
		    	});          
		    });
				
			},
			back:function(){
			  window.history.go(-1);
			},
			getProv: function (prov) {
			  let tempCity=[];
			  tempCity.push({lable: "", value: ""})
			  this.new_city_list = [];
			  this.city = '';
			  for (var val of this.city_list){
			    if (prov == val.lable){
			      tempCity.push({lable: val.lable, value: val.value})
			    }
			  }
			  this.new_city_list = tempCity;
			},
			getCity: function (city) {
			  let tempDistrict=[];
			  tempDistrict.push({lable: "", value: ""})
			  this.new_district_list = [];
			  this.district = '';
			  for (var val of this.district_list){
			    if (city == val.lable){
			      //console.log(val);
			      tempDistrict.push({lable: val.lable, value: val.value})
			    }
			  }
			  this.new_district_list = tempDistrict;
			},
			getArea: function (district) {
				//alert(this.district);
			},
			handleChecked: function () {
				if(this.checkedScope.indexOf("school") != -1){
					this.isAreaShow = true;
				}else{
				  this.isAreaShow = false;
				}
			}
		}
	})
	window.onload = function(){
	  $('#front_image').change(function(){
      var file = $('#front_image').get(0).files[0];
      if(file.type !== 'image/png'&&file.type !=='image/gif'&&file.type !=='image/jpg'&&file.type !=='image/jpeg'){
        v.$message({
          type: 'error',
          message: '上传文件只能是图片格式!'
        });
        return;
      }
//	 			if(file.size / 1024 / 1024 > 2){
//	 			  v.$message({
//	           type: 'error',
//	           message: '上传文件大小不能超过 2MB!'
//	         });
//	         return;
//	 			}
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload=function(e){
        $('#imgshow').get(0).src = e.target.result;
      }
      $('#img_thumbnail').css("visibility","visible");
    })
	    //初始化地图函数
	    function init() {
	    	// 地图的中心地理坐标
	    	var center = new qq.maps.LatLng(39.914850,116.403765);

		    //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
			var map = new qq.maps.Map(
			    document.getElementById("container"),
			    {
			        center: center,		
			        zoom: 13			// 地图的缩放级别。
			    }
			);

			//获取城市列表接口设置中心点
		    citylocation = new qq.maps.CityService({
		        complete : function(result){
		            map.setCenter(result.detail.latLng);
		        }
		    });
		    //调用searchLocalCity();方法    根据用户IP查询城市信息。
		    citylocation.searchLocalCity();

	        // 监听地图点击事件
	        qq.maps.event.addListener(map,'click',function(event) {
	        	var position = new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng());

	        	createMarker(position, map);

	        	geocoder = new qq.maps.Geocoder({
			        complete : function(result){
			            map.setCenter(result.detail.location);
			            //console.log(result);
			            //$("#position").val(result.detail.address);
			            v.position = result.detail.address;
			        }
			    });
			    geocoder.getAddress(position);
			    $("input[name='position_longitude']").val(event.latLng.getLng());
			    $("input[name='position_latitude']").val(event.latLng.getLat());
			});
	    }

	    //调用初始化函数地图
	    init();
	    var markersArray = [];

	    /*添加覆盖物*/
	    function createMarker(position, map) {
	    	deleteOverlays();
	    	var marker = new qq.maps.Marker({
			    position: position,
			    map: map
			});
			markersArray.push(marker);
	    }

	    /*删除覆盖物*/
		function deleteOverlays() {
		    if (markersArray) {
		        for (i in markersArray) {
		            markersArray[i].setMap(null);
		        }
		        markersArray.length = 0;
		    }
		}

	    /*添加比例尺控件 左下角*/
	    function scaleControl(map) {
	        var scaleControl = new qq.maps.ScaleControl({
			    align: qq.maps.ALIGN.BOTTOM_LEFT,
			    margin: qq.maps.Size(85, 15),
			    map: map
			});
	   }
    if(<?=$volunteer_event_dat->front_image?1:0 ?>){
		  $('#imgshow').get(0).src = '<?=$volunteer_event_dat->front_image?>';
		  $('#img_thumbnail').css("visibility","visible");
		}
    $('#front_image').change(function(){
      var file = $('#front_image').get(0).files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload=function(e){
        $('#imgshow').get(0).src = e.target.result;
      }
      $('#img_thumbnail').css("visibility","visible");
	 })
	}
</script>