代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公益活动</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/mui.picker.css">
<link href="css/mui.poppicker.css" rel="stylesheet" />
<style>
html,
body {
background-color: #fdfefe;
}
.mui-views,
.mui-view,
.mui-pages,
.mui-page,
.mui-page-content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #efeff4;
}
.mui-pages {
top: 46px;
height: auto;
}
.mui-scroll-wrapper,
.mui-scroll {
background-color: #efeff4;
position: absolute;
z-index: 2;
overflow: hidden;
}
.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-page-left {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-ios .mui-page-left {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mui-navbar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 44px;
background-color: #f7f7f8;
}
.mui-navbar .mui-bar {
position: absolute;
background: transparent;
text-align: center;
}
.mui-android .mui-navbar-inner.mui-navbar-left {
opacity: 0;
}
.mui-ios .mui-navbar-left .mui-left,
.mui-ios .mui-navbar-left .mui-center,
.mui-ios .mui-navbar-left .mui-right {
opacity: 0;
}
.mui-navbar .mui-btn-nav {
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}
.mui-navbar .mui-bar .mui-title {
display: inline-block;
width: auto;
}
.mui-page-shadow {
position: absolute;
right: 100%;
top: 0;
width: 16px;
height: 100%;
z-index: -1;
content: '';
}
.mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
}
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}
.mui-page {
display: none;
}
.mui-pages .mui-page {
display: block;
}
.mui-page .mui-table-view:first-child {
margin-top: 15px;
}
.mui-page .mui-table-view:last-child {
margin-bottom: 0.5rem;
background: #fdfefe;
}
.mui-table-view {
margin-top: 0.5rem;
padding: 5% 0;
}
.mui-table-view span.mui-pull-right {
color: #999;
}
.mui-table-view-divider {
background-color: #efeff4;
font-size: 14px;
}
.mui-table-view-divider:before,
.mui-table-view-divider:after {
height: 0;
}
.update {
font-style: normal;
color: #999999;
margin-right: -25px;
font-size: 15px
}
.mui-fullscreen {
position: fixed;
z-index: 0;
}
.mui-ios .mui-navbar .mui-bar .mui-title {
position: static;
}
/*问题反馈在setting页面单独的css*/
#feedback .mui-popover{
position: fixed;
}
#feedback .mui-table-view:last-child {
margin-bottom: 0px;
}
#feedback .mui-table-view:first-child {
margin-top: 0px;
}
/*问题反馈在setting页面单独的css==end*/
.preservation{
display: block;
position: fixed;
top: 0;
right: 0rem;
width: 4rem;
height: 3rem;
z-index: 9;
border: 0;
color: #fff;
font-size: 1rem;
background: #3EBDF5;
}
.mui-navbar .mui-bar,.mui-pull-left_style{
background: #3EBDF5;
height: 3rem;
}
.mui-title_fff{
color: #fff;
height: 3rem;
line-height: 3rem;
font-size: 1rem;
}
.mui-bar .mui-btn-link {
color: #fff;
}
.mui-icon-left-nav>img{
padding: 6px 12px;
width: 2.9rem;
margin-top: 0.3rem;
}
#head-img{
border-radius: 100%;
float: right;
}
.mui-media-body{
height: 2.63rem;
line-height: 2.9rem;
font-size: 0.8rem;
float: left;
color: #525252;
}
.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn) {
margin: 0 0 3% 0;
padding: 0;
}
.mui-page .mui-table-view:first-child {
margin-top: 0;
}
.mui-table-view-cell:after {
background-color: #ebebeb;
height: 0;
}
.modify_input{
width: 95%;
margin: 0 auto;
background: #efeff4;
}
.modify_input>li{
border-radius: 0.4rem;
background: #fbfbfb;
padding: 0;
margin-top: 1rem;
}
.modify_input>li>input{
border-radius: 0.4rem;
margin-bottom: 0px;
color: #c2c2c2;
font-size: 0.8rem;
}
.modify_input:after,.modify_input:before{
height: 0px;
}
.right_name_head-img1{
width: 5rem;
position: relative;
}
.head-img1{
border-radius: 100%;
right: 0;
top: 0;
width: 5rem;
height: 5rem;
margin-left: 5px;
}
#head>div>p{
color: #c1c1c1;
font-size: 0.8rem;
text-align: center;
margin-left: 5px;
}
.mui-pull-right_name{
margin: 0 auto;
}
.modify_username{
width: 90% !important;
border: 0 !important;
text-align: right !important;
margin-bottom: 0 !important;
font-size: 1rem !important;
color: #a4a4a4;
}
.mui-pull-right_10{
margin-right: 0.25rem;
}
.mui-btn-blue, .mui-btn-primary, input[type=submit] {
border: 1px solid #3EBDF5;
background-color: #3EBDF5;
}
.mui-wh_zidingyi_jiantou{
font-size: 0.8rem;
}
.mui-table-view-chevron .mui-table-view-cell {
padding-right: 0;
padding: 0 5%;
}
.weifare_p_style{
color: #464646;
font-size: 0.9rem;
}
.weifare_input_style{
margin-top: 0.5rem !important;
margin-bottom: 0rem !important;
width: 100% !important;
height: auto !important;
background: #fafafa !important;
color: #c1c1c1 !important;
padding: 0.5rem !important;
font-size: 0.9rem !important;
}
#head{
margin: 0 !important;
}
.qiandao_welfare{
background: #53b0ff !important;
text-align: center !important;
color: #fff !important;
border-radius: 3px !important;
padding: 0.5rem !important;
margin: 0 !important;
font-size: 1rem;
}
.weifare_input_style_textarea{
height: 6rem !important;
}
</style>
<link rel="stylesheet" type="text/css" href="css/feedback.css" />
</head>
<body>
<!--页面主结构开始-->
<div id="app" class="mui-views">
<div class="mui-view">
<div class="mui-navbar">
</div>
<div class="mui-pages">
</div>
</div>
</div>
<!--页面主结构结束-->
<!--单页面开始-->
<div id="setting" class="mui-page">
<!--页面标题栏开始-->
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left mui-pull-left_style">
<span class="mui-icon mui-icon-left-nav"></span>
</button>
<h1 class="mui-center mui-title mui-title_fff">公益活动</h1>
</div>
<!--页面标题栏结束-->
<!--页面主内容区开始-->
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a id="head">
<div class="mui-pull-right_name right_name_head-img1">
<img class="head-img mui-action-preview head-img1" id="head-img1" src="img/camera.png">
<p>点击上传照片</p>
</div>
</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-righ">
<p class="weifare_p_style">
公益活动名称：
</p>
<input type="text" name="" id="activityName" class="weifare_input_style" placeholder="请输入活动名称">
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-righ">
<p class="weifare_p_style">
位置详情：
</p>
<input type="text" name="" id="locationDetail" class="weifare_input_style" placeholder="请输入详细的位置">
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-righ">
<p class="weifare_p_style">
我要说：
</p>
<textarea class="weifare_input_style weifare_input_style_textarea" placeholder="请输入活动名称"></textarea>
</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-righ qiandao_welfare" id="confirm">
签 到
</a>
</li>
</ul>
</div>
</div>
</div>
<!--页面主内容区结束-->
</div>
</body>
<script src="js/jquery-1.9.0.js"></script>
<script src="js/mui.min.js "></script>
<script src="js/mui.view.js "></script>
<script src='js/feedback.js'></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
//初始化单页view
var viewApi = mui('#app').view({
defaultPage: '#setting'
});
//初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll();
var phoneNum = "";
var picture = new Array();
var imgurl = "",
address = "",
name = "",
lon = "",
lat = "";
var isOpenGps = false;
mui.plusReady(function() {});
$("#allmap").hide();
$("#confirm").click(function() {
alert(1);
compress(imgurl);
});
$('#back').click(function() {
Location.href = "home.html";
});
$(function() {
mui.plusReady(function() {
if ($("#locationDetail").text() == '' || $("#locationDetail").text() == null) {
getGEO_status();
}
phoneNum = localStorage.getItem("phoneNum");
if (phoneNum == "" || phoneNum == null) {
mui.toast("请先登录！");
location.href = "login.html";
}
});
});
setTimeout(function () {
defaultImg();
setTimeout(function() {
initImgPreview();
}, 300);
},500);
function compress(url) {
// 兼容以“file:”开头的情况
picture.splice(0,picture.length);
if (url != null) {
if (0 != url.toString().indexOf("file://")) {
url = "file://" + url;
}
//var _div_ = $(".showimg")[0];
var _img_ = new Image();
_img_.src = url; // 传过来的图片路径在这里用。
_img_.onclick = function() {
plus.runtime.openFile(url);
};
_img_.onload = function() {
var tmph = _img_.height;
var tmpw = _img_.width;
var isHengTu = tmpw > tmph;
var max = Math.max(tmpw,
tmph);
var min = Math.min(tmpw,
tmph);
var bili = min / max;
if (max > 1200) {
max = 1200;
min = Math.floor(bili * max);
}
tmph = isHengTu ? min : max;
tmpw = isHengTu ? max : min;
_img_.style.border = "1px solid rgb(200,199,204)";
_img_.style.margin = "10px";
_img_.style.width = "300px";
_img_.style.height = "380px";
_img_.onload = null;
var nwaiting = plus.nativeUI.showWaiting(); //显示原生等待框
plus.io.resolveLocalFileSystemURL(url, function(entry) {
entry.file(function(file) {
name = file.name;
canvasResize(file, {
width: tmpw,
height: tmph,
crop: false,
quality: 50, //压缩质量
rotate: 0,
callback: function(data, width, height) {
picture.push(data);
upload(nwaiting);
_img_.src = data;
}
});
});
},
function(e) {
console.log(e.message);
}
);
};
}
}
var view = viewApi.view;
(function($) {
//处理view的后退与webview后退
var oldBack = $.back;
$.back = function() {
if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
viewApi.back();
} else { //执行webview后退
oldBack();
}
};
//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
view.addEventListener('pageBeforeShow', function(e) {
// console.log(e.detail.page.id + ' beforeShow');
});
view.addEventListener('pageShow', function(e) {
// console.log(e.detail.page.id + ' show');
});
view.addEventListener('pageBeforeBack', function(e) {
// console.log(e.detail.page.id + ' beforeBack');
});
view.addEventListener('pageBack', function(e) {
// console.log(e.detail.page.id + ' back');
});
})(mui);
//更换头像
mui(".mui-table-view-cell").on("tap", "#head", function(e) {
if(mui.os.plus){
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改头像",
cancel: "取消",
buttons: a
}, function(b) {
switch (b.index) {
case 0:
break;
case 1:
getImage();
break;
case 2:
galleryImg();
break;
default:
break
}
})
}
});
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
console.log(s);
document.getElementById("head-img1").src = s;
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.jpg"
})
}
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.jpg", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.copyTo(root, 'head.jpg', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
document.getElementById("head-img1").src = e;
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
},
function(e) {
console.log('copy image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.copyTo(root, 'head.jpg', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
document.getElementById("head-img1").src = path;
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
},
function(e) {
console.log('copy image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
function defaultImg() {
if(mui.os.plus){
plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
var s = entry.fullPath + "?version=" + new Date().getTime();;
document.getElementById("head-img1").src = s;
}, function(e) {
document.getElementById("head-img1").src = 'img/camera.png';
})
}else{
document.getElementById("head-img1").src = 'img/camera.png';
}
}
function initImgPreview() {
var imgs = document.querySelectorAll("img.mui-action-preview");
imgs = mui.slice.call(imgs);
if (imgs && imgs.length > 0) {
var slider = document.createElement("div");
slider.setAttribute("id", "__mui-imageview__");
slider.classList.add("mui-slider");
slider.classList.add("mui-fullscreen");
slider.style.display = "none";
slider.addEventListener("tap", function() {
slider.style.display = "none";
});
slider.addEventListener("touchmove", function(event) {
event.preventDefault();
})
var slider_group = document.createElement("div");
slider_group.setAttribute("id", "__mui-imageview__group");
slider_group.classList.add("mui-slider-group");
imgs.forEach(function(value, index, array) {
//给图片添加点击事件，触发预览显示；
value.addEventListener('tap', function() {
slider.style.display = "block";
_slider.refresh();
_slider.gotoItem(index, 0);
})
var item = document.createElement("div");
item.classList.add("mui-slider-item");
var a = document.createElement("a");
var img = document.createElement("img");
img.setAttribute("src", value.src);
a.appendChild(img)
item.appendChild(a);
slider_group.appendChild(item);
});
slider.appendChild(slider_group);
document.body.appendChild(slider);
var _slider = mui(slider).slider();
}
}
if(mui.os.stream){
document.getElementById("check_update").display = "none";
}
function getGEO_status() {
var wid = '';
wid = plus.geolocation.getCurrentPosition(function(p) {
//mui.toast("成功定位！");
getLocation();
/*alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );*/
}, function(e) {
mui.toast("定位失败！请开启GPS！");
/*alert( "Geolocation error: " + e.message );*/
});
}
function supportsGeoLocation() {
return !!navigator.geolocation;
}
function getLocation() {
//navigator.geolocation.getCurrentPosition(mapIt, locationError);
plus.geolocation.getCurrentPosition(function(p) {
// transform(p.coords.longitude, p.coords.latitude);
marker = new BMap.Marker(new BMap.Point(p.coords.longitude, p.coords.latitude));
//bmap.addOverlay(marker);
marketFirst = false;
//bmap.setCenter(new BMap.Point(p.coords.longitude, p.coords.latitude));
mapIt(p);
}, function(e) {
alert("定位失败！");
}, {
provider: 'baidu'
});
} //定位成功时，执行的函数
function mapIt(position) {
lon = position.coords.longitude;
lat = position.coords.latitude;
//alert("您位置的经度是："+lon+" 纬度是："+lat);
var map = new BMap.Map("allmap");
var point = new BMap.Point("" + lon + "",
"" + lat + "");
map.centerAndZoom(point,
19);
var gc = new BMap.Geocoder();
// BMap.Convertor.translate(point,0,translateCallback);
//translateCallback(point);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.setCenter(point);
gc.getLocation(point,
function(rs) {
var addComp = rs.addressComponents;
if (addComp.province !== addComp.city) {
address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
} else {
address = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
}
if (address != null) {
//alert(address);
mui.toast("成功定位！");
$("#locationDetail").html(address);
}
}
);
}
function locationError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
mui.toast("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
mui.toast("Location information is unavailable.");
break;
case error.TIMEOUT:
mui.toast("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
mui.toast("An unknown error occurred.");
break;
}
}
$(function() {
$("#activityName").blur(function(){
if($(this).val()==""){
mui.toast("请输入活动名称");
$(this).focus();
}
});
$("#locationDetail").blur(function(){
if($(this).val()==""){
mui.toast("请输入位置明细");
$(this).focus();
}
});
});
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。