【11】MUI 仿拼多多 賬號管理
阿新 • • 發佈：2018-11-09
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>賬號管理</title> <link href="../../css/mui.min.css" rel="stylesheet" /> <link href="../../css/mui.picker.min.css" rel="stylesheet" /> <title></title> <style type="text/css"> .mui-content>.mui-table-view:first-child { margin-top: 0px; } .mui-table-view-cell { padding: 12px 15px } .photo { padding: 17px 15px; } .right-info-photo { line-height: 1; display: inline-block; padding: 3px 3px; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; border-radius: 50%; } .right-info { line-height: 1; display: inline-block; padding: 3px 6px; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .right-info-details { color: #999999; line-height: 1; display: inline-block; padding: 3px 6px; position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .mui-bar a { color: #E02D26; } ul li a, span { font-size: 14px; } .mui-preview-image.mui-fullscreen { position: fixed; z-index: 20; background-color: #000; } .mui-preview-header, .mui-preview-footer { position: absolute; width: 100%; left: 0; z-index: 10; } .mui-preview-header { height: 44px; top: 0; } .mui-preview-footer { height: 50px; bottom: 0px; } .mui-preview-header .mui-preview-indicator { display: block; line-height: 25px; color: #fff; text-align: center; margin: 15px auto 4; width: 70px; background-color: rgba(0, 0, 0, 0.4); border-radius: 12px; font-size: 16px; } .mui-preview-image { display: none; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .mui-preview-image.mui-preview-in { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .mui-preview-image.mui-preview-out { background: none; -webkit-animation-name: fadeOut; animation-name: fadeOut; } .mui-preview-image.mui-preview-out .mui-preview-header, .mui-preview-image.mui-preview-out .mui-preview-footer { display: none; } .mui-zoom-scroller { position: absolute; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; margin: 0; -webkit-backface-visibility: hidden; } .mui-zoom { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .mui-slider .mui-slider-group .mui-slider-item img { width: auto; height: auto; max-width: 100%; max-height: 100%; } .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img { width: 100%; } .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item { display: inline-table; } .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img { display: table-cell; vertical-align: middle; } .mui-preview-loading { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; } .mui-preview-loading.mui-active { display: block; } .mui-preview-loading .mui-spinner-white { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; height: 50px; width: 50px; } .mui-preview-image img.mui-transitioning { -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; transition: transform 0.5s ease, opacity 0.5s ease; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } p img { max-width: 100%; height: auto; } .mui-popup-input input { height: 35px; } .mui-popup-button { color: #E02D26; } .mui-popup-button.mui-popup-button-bold { font-weight: 100; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back"></a> <h1 class="mui-title">我的資料</h1> </header> <div class="mui-content"> <ul class="mui-table-view"> <li id="sltPhoto" class="mui-table-view-cell photo"> <a>頭像</a> <img id="photo_detail" class="right-info-photo" src="http://up.qqya.com/allimg/201710-t/17-101804_132321.jpg" data-preview-src="" data-preview-group="1"> <span class='right-info'></span> </li> <li id="name" class="mui-table-view-cell"> <a>暱稱</a> <span id="name_value" class='right-info'>一步一生</span> </li> <li id="sex" class="mui-table-view-cell"> <a>性別</a> <span id="sex_value" class='right-info'>男</span> </li> <li id="address" class="mui-table-view-cell"> <a>常住地</a> <span id="address_value" class='right-info'>廣東 深圳</span> </li> <li id="birthday" class="mui-table-view-cell"> <a class="mui-navigate-right">生日</a> <span id="birthday_value" class='right-info-details'>未填寫，填寫後會匹配星座</span> </li> <li id="qianming" class="mui-table-view-cell"> <a class="mui-navigate-right">個性簽名</a> <span id="qianming_value" class='right-info-details'>知進退明得失</span> </li> </ul> </div> <script type="text/javascript" src="../../js/mui.min.js"></script> <script type="text/javascript" src="../../js/mui.zoom.js"></script> <script type="text/javascript" src="../../js/mui.previewimage.js"></script> <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="../../js/mui.picker.min.js"></script> <script type="text/javascript" src="../../js/mui.poppicker.js"></script> <script type="text/javascript" src="../../js/city.data.js"></script> <script> mui.init({ //預載入 preloadPages: [{ id: 'EditUserName.html', url: 'EditUserName.html' }, { id: 'EditQianming.html', url: 'EditQianming.html' }] }); mui.previewImage(); function photoSelect(event) { if(mui.os.plus) { var buttonTit = [{ title: "拍照" }, { title: "從手機相簿選擇" }]; plus.nativeUI.actionSheet({ cancel: "取消", buttons: buttonTit }, function(b) { /*actionSheet 按鈕點選事件*/ switch(b.index) { case 0: break; case 1: getImage(); /*拍照*/ break; case 2: galleryImg(); /*開啟相簿*/ break; default: break; } }) } } // 從相簿中選擇圖片 function galleryImg() { // 從相簿中選擇圖片 plus.gallery.pick(function(e) { for(var i in e.files) { var fileSrc = e.files[i] $("#photo_detail").attr("src", fileSrc) } }, function(e) { console.log("取消選擇圖片"); }, { filter: "image", multiple: true, maximum: 1, system: false, onmaxed: function() { plus.nativeUI.alert('只能選擇一張圖片'); } }); } // 拍照獲取圖片 function getImage() { var c = plus.camera.getCamera(); c.captureImage(function(e) { plus.io.resolveLocalFileSystemURL(e, function(entry) { var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到圖片路徑 $("#photo_detail").attr("src", imgSrc) }, function(e) { console.log("讀取拍照檔案錯誤：" + e.message); }); }, function(s) { console.log("error" + s); }, { filename: "_doc/camera/" }) } //繫結上傳圖片事件 document.getElementById("sltPhoto").addEventListener('tap', photoSelect, false); //預覽圖片 document.getElementById("photo_detail").addEventListener("tap", function(e) { //移除上傳圖片事件，因為事件冒泡導致觸發父級事件 document.getElementById("sltPhoto").removeEventListener('tap', photoSelect, false); }) // 根據生日的月份和日期，計算星座。 http://blog.csdn.net/cuixiping/ function getAstro(month, day) { var s = "魔羯水瓶雙魚牡羊金牛雙子巨蟹獅子處女天秤天蠍射手魔羯"; var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]; return s.substr(month * 2 - (day < arr[month - 1] ? 2 : 0), 2); } //選擇生日 document.getElementById("birthday").addEventListener("tap", function() { // var dtPicker = new mui.DtPicker({ // "beginYear": 1897, // "endYear": new Date().getFullYear(), // "type": "date", // "value": "2018-04-04" // }); // dtPicker.show(function(rs) { // var xz = getAstro(rs.text.split("-")[1], rs.text.split("-")[2]) + "座"; // $("#birthday_value").html(rs.text + " " + xz); // }); var dDate = new Date(); dDate.setFullYear(dDate.getFullYear(), dDate.getMonth() + 1, dDate.getDay()); var minDate = new Date(); minDate.setFullYear(1897, 0, 1); var maxDate = new Date(); var strDate = maxDate.getDate(); maxDate.setFullYear(maxDate.getFullYear(), maxDate.getMonth() + 1, maxDate.getDay()); plus.nativeUI.pickDate(function(e) { var d = e.date; var xz = getAstro((d.getMonth() + 1), d.getDate()) + "座"; $("#birthday_value").html(d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + " " + xz); }, function(e) { // console.log("您沒有選擇日期"); }, { title: "請選擇生日", date: dDate, minDate: minDate, maxDate: maxDate }); }, false); //選擇性別 document.getElementById("sex").addEventListener("tap", function() { var picker = new mui.PopPicker(); picker.setData([{ value: "0", text: "男" }, { value: "1", text: "女" }]) picker.show(function(rs) { $("#sex_value").html(rs[0].text); }) }, false); //選擇常住地 document.getElementById("address").addEventListener("tap", function() { var city_picker = new mui.PopPicker({ layer: 2 }); city_picker.setData(cityData); setTimeout(function() { city_picker.show(function(items) { if((items[0] || {}).text == undefined) { (items[0] || {}).text = ""; } else if((items[1] || {}).text == undefined) { (items[1] || {}).text = ""; } else if((items[2] || {}).text == undefined) { (items[2] || {}).text = ""; } //該ID為接收城市ID欄位 $("#address_value").html((items[0] || {}).text + "  " + (items[1] || {}).text); }); }, 200); }, false); //修改暱稱 document.getElementById("name").addEventListener("tap", function() { var setPage = plus.webview.getWebviewById('EditUserName.html'); var site = $("#name_value").html(); mui.fire(setPage, 'EditUserName', { UserName: site }); mui.openWindow({ id: 'EditUserName.html', show: { autoShow: true, //頁面loaded事件發生後自動顯示，預設為true aniShow: "slide-in-right" }, }); }, false); var Qianming = ""; Qianming = $("#qianming_value").html(); //修改簽名 document.getElementById("qianming").addEventListener("tap", function() { var setPage = plus.webview.getWebviewById('EditQianming.html'); var site = Qianming; mui.fire(setPage, 'EditQianming', { Qianming: site }); mui.openWindow({ id: 'EditQianming.html', show: { autoShow: true, //頁面loaded事件發生後自動顯示，預設為true aniShow: "slide-in-right" }, }); }, false); //監聽修改暱稱事件 window.addEventListener('SaveUserName', function(event) { var UserName = event.detail.UserName; $("#name_value").html(UserName) }); //監聽修改簽名事件 window.addEventListener('SaveQianming', function(event) { Qianming = event.detail.Qianming; if(Qianming.length > 15) $("#qianming_value").html(Qianming.substring(0, 15) + "...") else $("#qianming_value").html(Qianming) }); </script> </body> </html>
修改個性簽名
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>修改個性簽名</title> <link href="../../css/mui.min.css" rel="stylesheet" /> <title></title> <style type="text/css"> body, .mui-content { background: white; } .mui-bar a { color: #E02D26; } #save { font-size: 15px; padding-top: 15px; } .mui-content { width: 95%; margin: 0px auto; } #Qianming { font-size: 15px; border: 0px; border-radius: 0px; border-bottom: 1px solid #E02D26; padding: 0px; height: 40px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a id="save" class="mui-icon mui-pull-right">儲存</a> <h1 class="mui-title">修改簽名</h1> </header> <div class="mui-content"> <div class="mui-input-row" style="margin: 10px 5px;"> <textarea id="Qianming" rows="5" placeholder="請輸入個性簽名"></textarea> <p>好的簽名可以讓你的朋友更容易瞭解你。</p> </div> </div> <script type="text/javascript" src="../../js/mui.min.js"></script> <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script> <script> mui.init(); var Qianming = ""; mui.back = function() { plus.webview.currentWebview().hide("auto", 200); } mui.plusReady(function() { //右滑返回隱藏webview plus.webview.currentWebview().setStyle({ 'popGesture': 'hide' }); }) //監聽編輯暱稱事件 window.addEventListener('EditQianming', function(event) { Qianming = event.detail.Qianming; $("#Qianming").val(Qianming); }); //儲存 document.getElementById("save").addEventListener("tap", function() { var setPage = plus.webview.getWebviewById('AccountManager.html'); var site = $("#Qianming").val(); mui.fire(setPage, 'SaveQianming', { Qianming: site }); mui.openWindow({ id: 'AccountManager.html', show: { autoShow: true, //頁面loaded事件發生後自動顯示，預設為true aniShow: "slide-in-right" }, }); }) </script> </body> </html>
修改暱稱
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>修改暱稱</title> <link href="../../css/mui.min.css" rel="stylesheet" /> <title></title> <style type="text/css"> body, .mui-content { background: white; } .mui-bar a { color: #E02D26; } #save { font-size: 15px; padding-top: 15px; } .mui-content { width: 95%; margin: 0px auto; } #userName { font-size: 15px; border: 0px; border-radius: 0px; border-bottom: 1px solid #E02D26; padding: 0px; height: 50px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a id="save" class="mui-icon mui-pull-right">儲存</a> <h1 class="mui-title">修改暱稱</h1> </header> <div class="mui-content"> <input id="userName" type="text" class="mui-input-clear" placeholder="請輸入暱稱"> <p>好名字可以讓你的朋友更容易記住你。</p> </div> <script type="text/javascript" src="../../js/mui.min.js"></script> <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script> <script> mui.init(); var UserName = ""; mui.back = function() { plus.webview.currentWebview().hide("auto", 200); } mui.plusReady(function() { //右滑返回隱藏webview plus.webview.currentWebview().setStyle({ 'popGesture': 'hide' }); }) //監聽編輯暱稱事件 window.addEventListener('EditUserName', function(event) { UserName = event.detail.UserName; $("#userName").val(UserName); }); //儲存 document.getElementById("save").addEventListener("tap", function() { var setPage = plus.webview.getWebviewById('AccountManager.html'); var site = $("#userName").val(); mui.fire(setPage, 'SaveUserName', { UserName: site }); mui.openWindow({ id: 'AccountManager.html', show: { autoShow: true, //頁面loaded事件發生後自動顯示，預設為true aniShow: "slide-in-right" }, }); }) </script> </body> </html>