<?php /** * 募捐活动编辑 * $Id: donations_edit_input.php,v 1.1 2020/01/03 11:18:46 Exp $ * @author lixq * @package manager.public_html **/ ?> <div id="change"> <p class="edit_title">募捐活动编辑</p> <form id="form" action="donations_edit_result.php" method="post" enctype="multipart/form-data"> <input type="hidden" name="id" value="<?=$id?>" /> <input type="hidden" name="action_type" value="<?=$action_type?>" /> <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> <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="max_money" name="max_money" type="number" class="input_200"></el-input>元<br /> <!-- <p>已募捐金额</p> --> <!-- <el-input v-model="money" name="money" type="number"class="input_200"></el-input> --> <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:{ title:'<?=$donations_event_dat->title?>', comment:'<?=$donations_event_dat->comment?>', start_time:'<?=$donations_event_dat->start_time?>', finish_time:'<?=$donations_event_dat->finish_time?>', max_money:'<?=floatval($donations_event_dat->max_money)?>', author:'<?=$donations_event_dat->author?>', money:'<?=floatval($donations_event_dat->money)?>', action_type:'<?=$action_type?>', }, methods:{ submit:function(){ if(this.action_type == 'new' && !$('#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(this.max_money == "0"){ this.$message({ type: 'error', message: '请输入最大募捐金额!' }); return; } if(!isPointNumber(this.max_money)){ this.$message({ type: 'error', message: '最大募捐金额格式为数字!' }); return; } if(!this.start_time || !this.finish_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); }, } }) 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"); }) if(<?=$donations_event_dat->front_image?1:0 ?>){ $('#imgshow').get(0).src = '<?=$donations_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>