【16】MUI 仿拼多多 評價詳情
阿新 • • 發佈：2018-11-09
<!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" /> <style type="text/css"> .mui-bar a { color: #E02D26; } .mui-bar-nav { -webkit-box-shadow: none; box-shadow: none; } .mui-icon-star { color: #B5B5B5; font-size: 22px; } .mui-icon-star-filled { color: #E02D26; font-size: 22px; } .mui-inline { font-size: 13px; } .BoxTop { height: 60px; background: white; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; } .BoxTopImg { height: 40px; height: 40px; margin: 10px 10px 0px 10px; float: left; } .BoxTopShopName { font-size: 13px; line-height: 60px; } .BoxEvaluateContent { height: 120px; } #txt_EvaluateContent { height: 100%; border: none; font-size: 13px; margin-bottom: 0px; padding: 10px; } #BoxUploadImg { height: 130px; width: 100%; background: white; border: 1px solid white; } .BoxUploadDiv { width: 110px; height: 110px; border: 1px dashed #C7C7CC; margin: 10px; text-align: center; padding-top: 10px; } .BoxUploadIcon { font-size: 60px; color: #C7C7CC; } .BoxUploadIcon:hover { color: #C7C7CC; } .BoxUploadFont { font-size: 13px; color: #C7C7CC; } .BoxUploadShopScore { height: 40px; background: white; margin-top: 8px; line-height: 40px; } .BoxUploadShopScoreIcon { color: #797979; padding-left: 10px; } .BoxUploadShopScoreFont { color: black; font-size: 13px; } .BoxUploadLevel { background: white; border: 1px solid white; } .mui-content-padded { vertical-align: bottom; font-size: 13px; color: #8f8f94; } .icons { margin-left: 6px; } .BoxFooter { width: 100%; height: 60px; } #btn_Evaluate { height: 45px; width: 94%; background: #E02D26; color: white; font-size: 15px; border-radius: 5px; line-height: 45px; text-align: center; margin: 10px auto; } .mui-icon-home:hover { color: black; } .BoxUploadShopScoreFont:hover { color: black; } </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> <h1 class="mui-title">發表評價</h1> </header> <div class="mui-content"> <div class="Box"> <div class="BoxTop"> <img class="BoxTopImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg"> <div class="BoxTopShopName mui-ellipsis">廠家用品夏貓產房可摺疊八角寵物圍欄</div> </div> <div class="BoxEvaluateContent"> <textarea id="txt_EvaluateContent" class="mui-input-clear" placeholder="親,您對這個商品滿意嗎?您的評價會幫助我們選擇更好的產品哦~"></textarea> </div> <div id="BoxUploadImg" class="BoxUploadImg"> <div class="BoxUploadDiv"> <a class="mui-icon mui-icon-camera BoxUploadIcon"></a> <div class="BoxUploadFont">上傳圖片</div> </div> </div> <div class="BoxUploadShopScore"> <a class="mui-icon mui-icon-home BoxUploadShopScoreIcon"></a> <a class="BoxUploadShopScoreFont">店鋪評分</a> </div> <div class="BoxUploadLevel"> <div class="mui-content-padded"> <div class="mui-inline">描述相符</div> <div class="icons mui-inline"> <i data-index="1" class="mui-icon mui-icon-star"></i> <i data-index="2" class="mui-icon mui-icon-star"></i> <i data-index="3" class="mui-icon mui-icon-star"></i> <i data-index="4" class="mui-icon mui-icon-star"></i> <i data-index="5" class="mui-icon mui-icon-star"></i> </div> </div> <div class="mui-content-padded"> <div class="mui-inline">物流服務</div> <div class="icons mui-inline"> <i data-index="1" class="mui-icon mui-icon-star"></i> <i data-index="2" class="mui-icon mui-icon-star"></i> <i data-index="3" class="mui-icon mui-icon-star"></i> <i data-index="4" class="mui-icon mui-icon-star"></i> <i data-index="5" class="mui-icon mui-icon-star"></i> </div> </div> <div class="mui-content-padded"> <div class="mui-inline">服務態度</div> <div class="icons mui-inline"> <i data-index="1" class="mui-icon mui-icon-star"></i> <i data-index="2" class="mui-icon mui-icon-star"></i> <i data-index="3" class="mui-icon mui-icon-star"></i> <i data-index="4" class="mui-icon mui-icon-star"></i> <i data-index="5" class="mui-icon mui-icon-star"></i> </div> </div> </div> <div class="BoxFooter"> <div id="btn_Evaluate">提交評價</div> </div> </div> </div> <script src="../../../js/mui.js"></script> <script type="text/javascript" src="../../../js/jquery-1.11.0.min.js"></script> <script> mui.init(); //評分 mui('.icons').on('tap', 'i', function() { var index = parseInt(this.getAttribute("data-index")); var parent = this.parentNode; var children = parent.children; if(this.classList.contains("mui-icon-star")) { for(var i = 0; i < index; i++) { children[i].classList.remove('mui-icon-star'); children[i].classList.add('mui-icon-star-filled'); } } else { for(var i = index; i < 5; i++) { children[i].classList.add('mui-icon-star') children[i].classList.remove('mui-icon-star-filled') } } starIndex = index; }); //提交評價 document.getElementById("btn_Evaluate").addEventListener("tap", function() { mui.alert("提交評價") }) document.getElementById('BoxUploadImg').addEventListener('tap', function() { if(mui.os.plus) { var buttonTit = [{ title: "拍照" }, { title: "從手機相簿選擇" }]; plus.nativeUI.actionSheet({ title: "上傳圖片", cancel: "取消", buttons: buttonTit }, function(b) { /*actionSheet 按鈕點選事件*/ switch(b.index) { case 0: break; case 1: getImage(); /*拍照*/ break; case 2: galleryImg(); /*開啟相簿*/ break; default: break; } }) } }, false); // 拍照獲取圖片 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(); //拿到圖片路徑 setHtml(imgSrc); }, function(e) { console.log("讀取拍照檔案錯誤：" + e.message); }); }, function(s) { console.log("error" + s); }, { filename: "_doc/camera/" }) } // 從相簿中選擇圖片 function galleryImg() { // 從相簿中選擇圖片 plus.gallery.pick(function(e) { for(var i in e.files) { var fileSrc = e.files[i] // setHtml(fileSrc); } }, function(e) { console.log("取消選擇圖片"); }, { filter: "image", multiple: true, maximum: 5, system: false, onmaxed: function() { plus.nativeUI.alert('最多隻能選擇5張圖片'); } }); } </script> </body> </html>