event_publishing.inc

<?php
/**
 * 活动发布
 * $Id: event_publishing.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_publishing" action="event_publishing_result.php" method="post" enctype="multipart/form-data">
	
	<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="danger" @click="submit()" class="edit_btn">创建</el-button><br/><br/>
	</div>
	</form>
</div>

<script type="text/javascript">
	var v = new Vue({
		el:'#change',
		data:{
		  max_member_flg:'0',
		  title:'',
		  comment:'',
		  position:'',
		  start_time:'',
		  finish_time:'',
		  time_length:'',
		  leader_name:'',
		  leader_contact:'',
		  venue:'',
		  venue_time:'',
		  author:'',
		  enroll_time:'',
		  checkedScope:[],
		  province_list:<?=json_encode($province_list)?>,
		  city_list:<?=json_encode($city_list)?>,
		  district_list:<?=json_encode($district_list)?>,
		  province:'',
		  city:'',
		  district:'',
		  new_city_list:[],
		  new_district_list:[],
		  isAreaShow:false,
		  scope_list:<?=json_encode($scope_list)?>,
		  max_member:'',
		},
		methods:{
			submit:function(){
			  if(!$('#front_image').get(0).files[0]){
					this.$message({
		            type: 'error',message: '请选择宣传头图!'
		          });
		      return;
				}
				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(!$("input[name='position_latitude']").val() || !$("input[name='position_longitude']").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: '已取消'
		    	});          
		    });
				
			},
			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
		});
    }
    $('#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>