master

分支 (1)

管理

管理

master

chatMe-mui
/
my_face.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/header.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="open_menu" class="mui-icon mui-icon-more mui-icon-right-nav mui-pull-right" style="color: white;"></a>
			<h1 class="mui-title title-color">我的头像</h1>
		</header>

		<div class="mui-content">
		    <img id="img_user_face" src="css/registLogin/headimg.jpg" style="width: 100%;"/>
		</div>
		<div id="sheet_my_face" class="mui-popover mui-popover-bottom mui-popover-action ">
		    <!-- 可选择菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a href="#" id="link_choose_img">选择图片</a>
		      </li>
		      <li class="mui-table-view-cell">
		        <a href="#" id="save_img">保存图片</a>
		      </li>
		    </ul>
		    <!-- 取消菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a href="#sheet_my_face"><b>取消</b></a>
		      </li>
		    </ul>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" ></script>
		<script type="text/javascript">
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			mui.plusReady(function() {
				var fr_user_info = app.getUserInfo();
				var img_user_face = document.getElementById("img_user_face");
			    if(fr_user_info != null){
			    	    var faceImg = fr_user_info.faceImgBig;
			    	    if(app.isNotNull(faceImg)){
			    	    		img_user_face.src = faceImg;
			    	    }
			    }
			    //  获取可见屏幕的宽度
			    	var imgWidth = document.body.clientWidth;
			    	img_user_face.width = imgWidth;
			    	img_user_face.height = imgWidth;

			    // 绑定选择菜单事件
			    var open_menu = document.getElementById("open_menu");
			    open_menu.addEventListener("tap",function(){
			    		mui("#sheet_my_face").popover("toggle");
			    });

			    var link_choose_img = document.getElementById("link_choose_img");
			    link_choose_img.addEventListener("tap",function(){
			    		mui.openWindow({url:"./plugin/v3.1.6/myface_uploader.html",id: "myface_uploader.html",createNew:true});
			    });

			    var save_img = document.getElementById("save_img");
			    save_img.addEventListener("tap",function(){
			    		console.log("==== 下载图片 ====");
			    		plus.nativeUI.showWaiting("正在下载...");

			    		var f_user_info = app.getUserInfo();
					var imgUrl = f_user_info.faceImgBig;
					console.log("imgUrl= " +imgUrl);
					var df_task = plus.downloader.createDownload(
						imgUrl,
						{},
						function(df,status){
							plus.nativeUI.closeWaiting();
							// 下载完成
							if(status == 200){
								var tempFile = df.filename;
								plus.gallery.save( tempFile, function () {
									app.showToast("save success!","success");
								});
							} else {
								app.showToast("Download error!","error");
							}
						}
					);
					df_task.start();
			    });
			    window.addEventListener("refresh",function(){
			    		var img_user_face = document.getElementById("img_user_face");
			    		var fr_user_info = app.getUserInfo();
					var faceImg = fr_user_info.faceImgBig;
			    	    	img_user_face.src = faceImg;
				});
			})
		</script>
	</body>
</html>