【17】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" /> <style type="text/css"> body, .mui-content { background: white; } .mui-bar-nav { -webkit-box-shadow: none; box-shadow: none; } .mui-bar a { color: #E02D26; } .mui-segmented-control { border: 1px solid #DDDDDD; border-radius: 0px; } .mui-segmented-control .mui-control-item { color: black; border-left: 0px; } .mui-segmented-control .mui-control-item.mui-active { background: white; color: #E02D26; font-weight: 100; font-size: 15px; } #segmentedControl .mui-control-item.mui-active span { height: 40px; color: #E02D26; text-align: center; margin: 0px auto; padding-bottom:9px ; border-bottom: 2px solid red; } .titleFont1, .titleFont2 { font-weight: bold; width: auto; 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 id="segmentedControl" class="mui-segmented-control"> <p class="mui-control-item mui-active" data-wid="ReturnSaleAll.html"><span class="titleFont1">全部</span></p> <p class="mui-control-item" data-wid="ReturnSaleWait.html"><span class="titleFont2">待使用者處理</span></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 type="text/javascript"> mui.init(); var subpage_style = { top: '86px', bottom: '0px', render: 'always' }; var activeTab = null; var self = null; mui.plusReady(function() { self = plus.webview.currentWebview(); var sub = plus.webview.create("ReturnSaleAll.html", "ReturnSaleAll.html", subpage_style); self.append(sub); activeTab = "ReturnSaleAll.html"; mui("#segmentedControl").on("tap", ".mui-control-item", function(e) { var targetTab = this.getAttribute('data-wid'); if(targetTab == activeTab) { return; } var _subWv = plus.webview.getWebviewById(targetTab); if(!_subWv) { var postUrl = targetTab; _subWv = plus.webview.create(postUrl, targetTab, subpage_style); self.append(_subWv); } _subWv.show(); plus.webview.getWebviewById(activeTab).hide('none'); activeTab = targetTab; }); }) mui.back = function() { var _self = plus.webview.currentWebview(); _self.close("auto"); } </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" /> <style type="text/css"> .Box { margin-bottom: 5px; } .BoxTop { height: 50px; width: 100%; background: white; } .BoxTopImg { width: 30px; height: 30px; float: left; margin: 10px 10px; } .BoxTopShopName { float: left; line-height: 50px; font-size: 14px; margin-left: 10px; } .BoxTopRightIcon { line-height: 50px; font-size: 18px; color: black; padding-left: 5px; } .BoxTopRightStatus { line-height: 50px; font-size: 14px; color: black; padding-right: 10px; color: #E02D26; } .BoxTopRightStatus:hover { color: #E02D26; } .BoxDetails { border-top: 1px solid #F5F5F5; border-bottom: 1px solid #F5F5F5; width: 100%; background: white; } .BoxDetailsImg { float: left; } .BoxDetailsCenter { float: left; } .BoxDetailsCenterName { color: black; font-size: 14px; margin-top: 10px; line-height: 20px; max-height: 90px; overflow: hidden; } .BoxPay { width: 100%; background: white; } .BoxPayRight { height: 40px; padding-right: 10px; } .BoxPayRightYF { font-size: 15px; color: black; line-height: 40px; } .BoxPayRightYF:hover { color: black; } .BoxPayRighttkMoney { font-size: 15px; color: #E02D26; line-height: 40px; } .BoxPayRighttkMoney:hover { color: #E02D26; } .BoxPayRightMoney { font-size: 15px; color: black; line-height: 40px; padding-right: 10px; } .BoxPayRightMoney:hover { color: black; } .BoxPayRightSF { font-size: 14px; color: black; line-height: 40px; padding-right: 3px; } .BoxPayRightSF:hover { color: black; } .BoxPayRightIcon { color: #E02D26; font-size: 18px; line-height: 40px; padding-right: 5px; } .BoxPayRightIcon:hover { color: #E02D26; } .footer { height: 60px; color: #A9A9A9; line-height: 60px; text-align: center; } </style> </head> <body> <div class="mui-content"> <div class="Box"> <div class="BoxTop"> <img class="BoxTopImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg"> <div class="BoxTopShopName">優品名寵 </div> <a class="BoxTopRightStatus mui-pull-right" style="">申請收到,商家處理中</a> </div> <div class="BoxDetails"> <img class="BoxDetailsImg" src="http://t01img.yangkeduo.com/images/2018-03-31/08a96178e05991de8edb5f3ba013cb11.jpeg"> <div class="BoxDetailsCenter"> <div class="BoxDetailsCenterName">【30粒碗蓮種子+盆+荷塘泥+營養液】買2送1碗蓮種子水培荷花種子</div> </div> </div> <div class="BoxPay"> <div class="BoxPayRight"> <a class="mui-pull-right BoxPayRighttkMoney">¥18.38</a> <a class="mui-pull-right BoxPayRightYF">退款金額:</a> <a class="mui-pull-right BoxPayRightMoney">¥18.38</a> <a class="mui-pull-right BoxPayRightSF">實付:</a> <a class="BoxPayRightIcon mui-icon-extra mui-icon-extra-gold mui-pull-right"></a> </div> </div> </div> <div class="Box"> <div class="BoxTop"> <img class="BoxTopImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg"> <div class="BoxTopShopName">優品名寵 </div> <a class="BoxTopRightStatus mui-pull-right" style="">申請收到,商家處理中</a> </div> <div class="BoxDetails"> <img class="BoxDetailsImg" src="http://t01img.yangkeduo.com/images/2018-03-31/08a96178e05991de8edb5f3ba013cb11.jpeg"> <div class="BoxDetailsCenter"> <div class="BoxDetailsCenterName">【30粒碗蓮種子+盆+荷塘泥+營養液】買2送1碗蓮種子水培荷花種子</div> </div> </div> <div class="BoxPay"> <div class="BoxPayRight"> <a class="mui-pull-right BoxPayRighttkMoney">¥18.38</a> <a class="mui-pull-right BoxPayRightYF">退款金額:</a> <a class="mui-pull-right BoxPayRightMoney">¥18.38</a> <a class="mui-pull-right BoxPayRightSF">實付:</a> <a class="BoxPayRightIcon mui-icon-extra mui-icon-extra-gold mui-pull-right"></a> </div> </div> </div> <div class="Box"> <div class="BoxTop"> <img class="BoxTopImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg"> <div class="BoxTopShopName">優品名寵 </div> <a class="BoxTopRightStatus mui-pull-right" style="">申請收到,商家處理中</a> </div> <div class="BoxDetails"> <img class="BoxDetailsImg" src="http://t01img.yangkeduo.com/images/2018-03-31/08a96178e05991de8edb5f3ba013cb11.jpeg"> <div class="BoxDetailsCenter"> <div class="BoxDetailsCenterName">【30粒碗蓮種子+盆+荷塘泥+營養液】買2送1碗蓮種子水培荷花種子</div> </div> </div> <div class="BoxPay"> <div class="BoxPayRight"> <a class="mui-pull-right BoxPayRighttkMoney">¥18.38</a> <a class="mui-pull-right BoxPayRightYF">退款金額:</a> <a class="mui-pull-right BoxPayRightMoney">¥18.38</a> <a class="mui-pull-right BoxPayRightSF">實付:</a> <a class="BoxPayRightIcon mui-icon-extra mui-icon-extra-gold mui-pull-right"></a> </div> </div> </div> <div class="Box"> <div class="BoxTop"> <img class="BoxTopImg" src="http://imsproductionimg.yangkeduo.com/9f29e42446c81f0cef0de27b5a34829d.jpg"> <div class="BoxTopShopName">優品名寵 </div> <a class="BoxTopRightStatus mui-pull-right" style="">申請收到,商家處理中</a> </div> <div class="BoxDetails"> <img class="BoxDetailsImg" src="http://t01img.yangkeduo.com/images/2018-03-31/08a96178e05991de8edb5f3ba013cb11.jpeg"> <div class="BoxDetailsCenter"> <div class="BoxDetailsCenterName">【30粒碗蓮種子+盆+荷塘泥+營養液】買2送1碗蓮種子水培荷花種子</div> </div> </div> <div class="BoxPay"> <div class="BoxPayRight"> <a class="mui-pull-right BoxPayRighttkMoney">¥18.38</a> <a class="mui-pull-right BoxPayRightYF">退款金額:</a> <a class="mui-pull-right BoxPayRightMoney">¥18.38</a> <a class="mui-pull-right BoxPayRightSF">實付:</a> <a class="BoxPayRightIcon mui-icon-extra mui-icon-extra-gold mui-pull-right"></a> </div> </div> </div> <div class="footer">沒有更多的退換/售後單了..</div> </div> <script src="../../../js/mui.js"></script> <script type="text/javascript" src="../../../js/jquery-1.11.0.min.js"></script> <script> mui.init(); var width = $(".BoxDetails").width(); var height = width * 0.25 + 20; $(".BoxDetails").css("height", height); $(".BoxDetailsImg").css("width", width * 0.25).css("height", width * 0.25).css("margin", "10px"); $(".BoxDetailsCenter").css("width", width * 0.75 - 20).css("height", height); //進入商品詳情 mui(".Box").on("tap", ".BoxDetails", function() { mui.openWindow({ url: "/tab-botton-subpage/File-tap-botton-subpage-1/DetailsItem.html", id: "DetailsItem.html" }) }) //進入退換/售後詳情 mui(".Box").on("tap", ".BoxTop", function() { mui.openWindow({ url: "ReturnSaleDetails.html", id: "ReturnSaleDetails.html" }) }) </script> </body> </html>