关于本站
“最难不过坚持”
本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作
有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339
2655
39
分类目录
最新评论
- https://jueru.net/
-
- :weixiao:
-
- :shuijiao: :weiqu: :zhenbang: :leng:
-
- :yiwen: :yiwen: :yiwen: :yiwen:
-
- 这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
-
文章标签更多
代码来源于网络,作为自己记录参考用。
参考代码
@{ ViewBag.Title = "费用填报"; Layout = "~/Views/Shared/_MForm.cshtml"; } <html > <head> <meta name="viewport" content="width=device-width" /> </head> <body ontouchstart> <header class="mwapp-header"> <div id="back" class="mwapp-header-icon-back"><span></span></div> <div class="mwapp-header-title">费用填报</div> </header> <div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">派车单号</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" value="TRPSH201808000071" disabled> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="FeeName" class="weui-label">费用项</label></div> <div class="weui-cell__bd"> <input class="weui-input" id="FeeName" type="text" value=""> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="Amount" class="weui-label">金额</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" id="Amount" placeholder="请输入金额"> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="time-inline" class="weui-label">数量</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" placeholder="请输入数量,默认1" value="1" id="FeeCount"> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="InvoiceType" class="weui-label">发票类型</label></div> <div class="weui-cell__bd"> <input class="weui-input" id="InvoiceType" type="text" value=""> </div> </div> <div class="weui-cells__title">备注</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__bd"> <input class="weui-input" id="Description" type="text" placeholder="请输入备注"> </div> </div> </div> <div class="weui-cell"> <div class="weui-cell__bd"> <div class="weui-uploader"> <div class="weui-uploader__hd"> <p class="weui-uploader__title">附件上传:</p> <div class="weui-uploader__info"><span id="uploadCount">0</span>/2</div> </div> <div class="weui-uploader__bd"> <ul class="weui-uploader__files" id="uploaderFiles"> </ul> <div class="weui-uploader__input-box"> <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""> </div> </div> </div> </div> </div> </div> <div class="weui-gallery" id="gallery"> <span class="weui-gallery__img" id="galleryImg"></span> <div class="weui-gallery__opr"> <a href="javascript:" class="weui-gallery__del"> <i class="weui-icon-delete weui-icon_gallery-delete"></i> </a> </div> </div> <div class="weui-btn-area"> <a class="weui-btn weui-btn_primary" href="javascript:" id="btnsaveCharge">提交费用</a> </div> </body> </html>
<script> var disno = request('disno'); $(function() { $("#back").click(function() { location.href = '/TMS.App/CargoCharge/Index'; }); $("#FeeName").picker({ cols: [ { textAlign: 'center', values: ['内陆运费', '冷藏费', '压夜费'] } ], onChange: function (p, v, dv) { }, onClose: function (p, v, d) { if (v != null && v.length > 0) { $("#FeeName").val(v[0]); } } }); $("#InvoiceType").picker({ cols: [ { textAlign: 'center', values: ['普通发票', '专用发票'] } ], onChange: function (p, v, dv) { }, onClose: function (p, v, d) { if (v != null && v.length > 0) { $("#InvoiceType").val(v[0]); } } }); // 允许上传的图片类型 var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']; var maxSize = 1024 * 1024*10; // 10240KB,也就是 10MB var maxWidth = 1900; // 图片最大宽度 var maxCount = 2;// 最大上传图片数量 // var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)"><div class="weui_uploader_status_content">0%</div></li>', $gallery = $("#gallery"), $galleryImg = $("#galleryImg"), $uploaderInput = $("#uploaderInput"), $uploaderFiles = $("#uploaderFiles"); $uploaderInput.on("change", function (e) { files = e.target.files; // 如果没有选中文件,直接返回 if (files.length === 0) { return; } for (var i = 0, len = files.length; i < len; ++i) { var file = files[i]; var imgID = genGUID(); var reader = new FileReader(); var fileType = file.type; // 如果类型不在允许的类型范围内 if (allowTypes.indexOf(file.type) === -1) { $.toast('该类型不允许上传' + fileType, "forbidden"); continue; } if (file.size > maxSize) { $.toast("图片太大,不允许上传", "forbidden"); continue; } if ($('.weui-uploader__file').length >= maxCount) { $.toast('最多只能上传' + maxCount + '张图片', "forbidden"); return; } reader.onload = function (e) { var img = new Image(); img.onload = function () { // 不要超出最大宽度 var w = Math.min(maxWidth, img.width); // 高度按比例计算 var h = img.height * (w / img.width); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 设置 canvas 的宽度和高度 canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0, w, h); var base64 = canvas.toDataURL(fileType,0.6); //0.6指的是压缩60% // 插入到预览区 $uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID))); var num = $('.weui-uploader__file').length; $('#uploadCount').text(num); // 模拟上传进度 var progress = 0; function uploading() { $uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%'); if (progress < 100) { setTimeout(uploading, 30); } else { $uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标 } } setTimeout(uploading, 30); }; img.src = e.target.result; //这里实现上传 //$.ajax({}); }; reader.readAsDataURL(file); } }); var index; //第几张图片 $uploaderFiles.on("click", "li", function () { index = $(this).index(); $galleryImg.attr("style", this.getAttribute("style")); $gallery.fadeIn(100); }); $gallery.on("click", function () { $gallery.fadeOut(100); }); //删除图片 $(".weui-gallery__del").click(function () { $uploaderFiles.find("li").eq(index).remove(); var num = $('.weui-uploader__file').length; $('#uploadCount').text(num); }); $("#btnsaveCharge").click(function () { //或者在这里实现批量上传, 不建议批量上传 }); }); //生成guid function genGUID() { var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); return (G1 + G2); } </script>
引入示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动设备 viewport --> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"> <meta name="author" content="mcp"> <link href="~/Content/scripts/weui/jquery-weui.css" rel="stylesheet" /> <link href="~/Content/scripts/weui/weui.css" rel="stylesheet" /> <link href="~/Content/scripts/weui/weui-ext.css" rel="stylesheet" /> </head> <body> <script src="~/Content/scripts/weui/jquery.min.js" charset="utf-8"></script> <script src="~/Content/scripts/weui/jquery-weui.js" charset="utf-8"></script> <script src="~/Content/scripts/weui/jquery-weui.js" charset="utf-8"></script> <script src="~/Content/scripts/weui/mobile-utils.js" charset="utf-8"></script> <script src="~/Content/scripts/weui/min/fastclick.js"></script> @RenderBody() </body> </html>
以下是自己的代码,作为记录用,其他人可忽视。
图片可批量上传,可删除
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>{$seo_title}</title> <link rel="stylesheet" href="/static/module/index/xin/css/weui.css"/> <link rel="stylesheet" href="/static/module/index/xin/css/example.css"/> <link rel="stylesheet" href="/static/module/index/xin/css/weuix.css"/> <link rel="stylesheet" href="/static/module/index/xin/css/login.css"/> <!-- <script src="/static/module/index/xin/js/jquery.js"></script> --> <script src="/static/module/index/xin/js/zepto.min.js"></script> <script src="/static/module/index/xin/js/zepto.weui.js"></script> <script src="/static/module/index/xin/js/lrz.min.js"></script> <script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <style> /* confirm对话框居中 */ .weui-dialog{ left: 50%; } .remark { padding:10px 16px; color: #333333; font-size: 12px; line-height: 26px; background-color: #ffffff; } .red{color: red;} </style> </head> <body> <div class="remark"> 带<span class="red">*</span>号的为必填项。<br> 本站受理以下类别网上有害信息:政治类、暴恐类、诈骗类、色情类、低俗类、赌博类、侵权类、谣言类。 </div> <form action="{:url('index')}" method="post" id="form"> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_active index"> <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>姓名</label></div> <div class="weui-cell__bd"> <input id="name" class="weui-input" placeholder="请输入姓名" type="text" value=""> </div> </div> <div class="weui-cell weui-cell_active index"> <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>手机号</label></div> <div class="weui-cell__bd"> <input id="phone" class="weui-input" placeholder="请输入手机号" type="text" value=""> </div> </div> <div class="weui-cell weui-cell_active index"> <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>邮箱</label></div> <div class="weui-cell__bd"> <input id="email" class="weui-input" placeholder="请输入邮箱" type="text" value=""> </div> </div> <div class="weui-cell weui-cell_active index"> <div class="weui-cell__hd"><label class="weui-label">地址</label></div> <div class="weui-cell__bd"> <input id="address" class="weui-input" placeholder="请输入地址" type="text" value=""> </div> </div> <div class="weui-cell weui-cell_active index"> <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>平台名称</label></div> <div class="weui-cell__bd"> <input id="platform_name" class="weui-input" placeholder="请输入被举报平台名称" type="text" value=""> </div> </div> <div class="weui-cell weui-cell_active index"> <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>平台类型</label></div> <div class="weui-cell__bd"> <input id="platform_type" class="weui-input" placeholder="请选择" type="text" value=""> </div> </div> <div class="weui-cell weui-cell_active index"> <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>链接</label></div> <div class="weui-cell__bd"> <input id="platform_url" class="weui-input" placeholder="请以http://或https://开头" type="text" value=""> </div> </div> <div class="weui-cell weui-cell_active index"> <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>举报类别</label></div> <div class="weui-cell__bd"> <input id="report_type" class="weui-input" placeholder="请选择大类" type="text" value=""> </div> </div> <div class="weui-cell weui-cell_active index"> <div class="weui-cell__hd"><label class="weui-label"></label></div> <div class="weui-cell__bd"> <input id="report_type2" class="weui-input" placeholder="请选择小类" type="text" value=""> </div> </div> <div class="weui-cell weui-cell_active index" style="flex-direction: column;-webkit-align-items: center;align-items: start;"> <div class="weui-cell__hd"><label class="weui-label"><span class="red">*</span>举报内容</label></div> <div class="weui-cell__bd" style="width: 100%; margin-top: 10px;"> <textarea id="report_content" class="weui-textarea" placeholder="请输入内容" style="width: 100%; min-height: 70px;"></textarea> </div> </div> </div> <div class="cardid">附件</div> <style> .fj_remark{ padding-left: 16px; padding-bottom: 10px; color: #999; font-size: 12px; line-height: 20px; background-color: #ffffff; } </style> <div class="fj_remark">上传附件最多不超过10个,每个附件大小不超过10M</div> <div class="weui-uploader__bd"> <ul class="weui-uploader__files" id="zcard"> </ul> <div class="weui-uploader__input-box"> <input class="weui-uploader__input" accept="image/*" multiple="" type="file" id="uploaderInput"> </div> </div> <!-- <input value="" type="text" id="zcard_input" name="zcard" /> --> <script> $(function () { // 允许上传的图片类型 var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']; var maxSize = 1024 * 1024 * 10; // 10240KB,也就是 10MB var maxWidth = 1900; // 图片最大宽度 var maxCount = 10;// 最大上传图片数量 var $uploaderInput = $("#uploaderInput"); $uploaderInput.on("change", function (e) { files = e.target.files; // 如果没有选中文件,直接返回 if (files.length === 0) { return; } for (var i = 0, len = files.length; i < len; ++i) { var file = files[i]; var reader = new FileReader(); var fileType = file.type; // 如果类型不在允许的类型范围内 if (allowTypes.indexOf(file.type) === -1) { $.toast('该类型不允许上传' + fileType, "forbidden"); continue; } if (file.size > maxSize) { $.toast("图片太大,不允许上传", "forbidden"); continue; } if ($('.weui-uploader__file').length >= maxCount) { $.toast('最多只能上传' + maxCount + '张图片', "forbidden"); return; } reader.onload = function (evt) { // console.log(evt); $.post("{:url('upload')}",{imgbase64: evt.target.result},function(rs){ // console.log(rs); $("#zcard").html($("#zcard").html() + '<li onclick="removeimgs(this)" class="weui-uploader__file" style="background-image:url('+evt.target.result+')" v="'+ rs.src +'"></li>'); // $("#zcard_input").val($("#zcard_input").val() + ',' + rs.src); },'json'); }; reader.readAsDataURL(file); // console.log(file.files[0]); } }); }); function removeimgs(obj){ $.confirm('您确定要删除吗?', '确认删除?', function() {$(obj).remove();}); return false; } </script> <div class="weui-form__opr-area" style="margin-top: 15px;"> <a href="javascript:" class="weui-btn weui-btn_default" id="showLoadingToast">提 交</a> </div> </form> <div id="loadingToast" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast" style="visibility:visible;opacity: 1;"> <i class="weui-icon_msg weui-icon-success-circle"></i> <p class="weui-toast__content">信息提交成功!</p> </div> </div> <div id="toast" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast" style="visibility:visible;opacity: 1;"> <i class="weui-icon-warn weui-icon_toast" style="width: 35px;height: 35px;"></i> <p class="weui-toast__content" id="msg">网络错误,稍后再试!</p> </div> </div> <script type="text/javascript"> $(function(){ var $loadingToast = $('#loadingToast'); var $toast = $('#toast'); $('#showLoadingToast').on('click', function(){ var name = $("#name").val(); var phone = $("#phone").val(); var email = $("#email").val(); var address = $("#address").val(); var platform_name = $("#platform_name").val(); var platform_type = $("#platform_type").val(); var platform_url = $("#platform_url").val(); var report_type = $("#report_type").val(); var report_type2 = $("#report_type2").val(); var report_content = $("#report_content").val(); // var zcard = $('input[name="zcard"]').val().substr(1); // 获取附件的值,删除第一个字符',' // 改为通过获取li的属性值,来获取图片的路径,这样删除图片的时候,不用再操作input,比较方便 var gallery = []; $('.weui-uploader__file').each(function(){ gallery.push($(this).attr('v')); }); zcard = gallery.join(','); $.ajax({ type: "POST", dataType: "json", url: "{:url()}", data: {name:name,phone:phone,email:email,address:address,platform_name:platform_name,platform_type:platform_type,platform_url:platform_url,report_type:report_type,report_type2:report_type2,report_content:report_content,zcard:zcard}, success: function (result) { // console.log(result) if (result.code == 200) { if ($loadingToast.css('display') != 'none') return; $loadingToast.fadeIn(100); setTimeout(function () { $loadingToast.fadeOut(100); location.reload(); }, 2000); }else if(result.code==300){ if ($toast.css('display') != 'none') return; $("#msg").html('修改失败'); $toast.fadeIn(100); setTimeout(function () { $toast.fadeOut(100); }, 2000); } }, error : function() { if ($toast.css('display') != 'none') return; $("#msg").html('网络错误!'); $toast.fadeIn(100); setTimeout(function () { $toast.fadeOut(100); }, 2000); } }) }); }); </script> <script type="text/javascript"> $(function(){ // 平台类型 var aa = {$a}; $("#platform_type").picker({ title: "请选择平台类型", cols: [ { textAlign: 'center', values: aa } ], onChange: function(p, v, dv) { console.log(p, v, dv); }, onClose: function(p, v, d) { console.log("close"); } }); // 举报类别 var bb = {$b}; var cc = []; $("#report_type").picker({ title: "请选择大类", cols: [ { textAlign: 'center', values:bb } ], onChange: function(p, v, dv) { $.ajax({ type: "POST", dataType: "json", url: "{:url('getreport_type2')}", data: {province:dv}, success: function (result) { if (result.code == 200) { // console.log(result.data); var xx=$.parseJSON(result.data); cc.length = 0; for (var i = 0; i < xx.length; i++) { cc.push(xx[i]); } }; }, error : function(result) { } }); }, onClose: function(p, v, d) { console.log(cc) } }); $("#report_type2").picker({ title: "请选择小类", cols: [ { textAlign: 'center', values:cc } ], onChange: function(p, v, dv) { }, onClose: function(p, v, d) { } }); }); </script> </body> </html>
效果图
赏
相关推荐
无法获取用户身份 登录的微信号未绑定为公众号的网页开发者
无法获取用户身份 登录的微信号未绑定为公众号的网页开发者,无法使用Oauth授权登录获取用户身份,请查看文档并完成绑定
绑定为公众号网页开发者的流程如下
使用 appid 对应的公众号登录公众号管理后台
启用开发者中心,在 开发者工具 —— web 开发者工具 页面,向开发者微信号发送绑定邀请。绑定页面如下图所示:
...
公司企业邮箱绑定微信后,手机登录提示验证失败
公司企业邮箱绑定微信后,手机端不能用原密码登录了,老是提示失败。
原因是:开启安全登录后,原密码无法登录企业邮箱。网页版需使用微信扫码登录;客户端需使用“客户端专用密码”登录,让我们的邮件安全再无后顾之忧。
客户端专用密码的生成方法:
1,pc端登录邮箱后,设置-账户-客户端专用密码-生成新密码
...
评论加载中...
前一篇: 微信公众号实现文章列表页功能
后一篇: 微信小程序——客服功能接入