2. 程式人生 > >【17】MUI 仿拼多多 退換/售後

【17】MUI 仿拼多多 退換/售後

阿新 • • 發佈：2018-11-09

點選此處：MUI仿拼多多總目錄

退換/售後主頁

<!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>

 

相關推薦

【17】MUI 仿拼多多 退換/售後

點選此處：MUI仿拼多多總目錄 退換/售後主頁 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

【16】MUI 仿拼多多 評價詳情

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>立即評價</title> <meta name

【15】MUI 仿拼多多 待評價

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【14】MUI 仿拼多多 待收貨

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【13】MUI 仿拼多多 待付款

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【12】MUI 仿拼多多 全部訂單（頂部選單欄，可左右滑動，webview模式）

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【11】MUI 仿拼多多 賬號管理

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

【10】MUI 仿拼多多 個人中心

點選此處：MUI仿拼多多總目錄 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

【04】MUI 仿拼多多 商品詳情

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

【09】MUI 仿拼多多 聊天

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,i

【開源】NodeJS仿WebApi路由

ole ati amt nbsp amd 使用 ise erp 一個 用過WebApi或Asp.net MVC的都知道微軟的路由設計得非常好，十分方便，也十分靈活。雖然個人看來是有的太靈活了，team內的不同開發很容易使用不同的路由方式而顯得有點混亂。 不過這不是重點，我在

Linux學習之路--日誌管理【17】---20180113

ocs title 軟件 config mil 集中 auto 表示 rap 一、日誌介紹日誌： 歷史事件:時間，地點，人物，事件 日誌級別：事件的關鍵性程度，Loglevel系統日誌服務：sysklogd :CentOS 5之前版本 syslog

【17】有關python面向對象編程的提高【多繼承、多態、類屬性、動態添加與限制添加屬性與方法、@property】

爸爸 mce turn object get 寫法 pri import sel 一、多繼承 案例1：小孩繼承自爸爸，媽媽。在程序入口模塊再創建實例調用執行 #father模塊 class Father(object): def __init__(self,mon

企業IT管理員IE11升級指南【17】—— F12 開發者工具

企業IT管理員IE11升級指南 系列： F12 開發者工具 簡介 使用 F12 開發人員工具，你可以除錯、測試網頁並加快其速度。無論你是需要微調你的 CSS 佈局還是查詢記憶體洩漏，你都能在此處找到幫助工具。 如果你正在 Inte

深度學習【17】物體檢測：Focal Loss 反向求導及darknet上的實現

Focal Loss 反向求導及darknet上的實現 Focal Loss 可以解決不平衡分類問題，是在交叉熵損失函式上的擴充套件。詳見，論文：Focal Loss for Dense Object Detection。 該文，主要推導FL在softmax

【win32】高仿QQ截圖

QQ截圖大家都用過吧，從體驗上來說是一個非常不錯的軟體，它只有200多kb，非常小巧，敢肯定應該是基於原生window api開發的，沒用任何第三方的東西，接下來我想高度仿做一個這樣的軟體 技術難點分

【筆試題】拼多多2018校招內推程式設計

2、大資料相乘 問題描述 有兩個用字串表示的非常大的大整數,算出他們的乘積，也是用字串表示。不能用系統自帶的大整數型別。 輸入描述:  空格分隔的兩個字串，代表輸入的兩個大整數 輸出描述:  輸入的乘積，用字串表 問題分析 只要把加法換成乘法就好，半夜

【拼多多】數三角形

連結：https://www.nowcoder.com/questionTerminal/21094574ed7e49fe9960e96e52aee1e7 來源：牛客網   [程式設計題]數三角形 熱度指數：984 時間限制：1秒 空間限制：32768K 演算法知識

【拼多多】列表補全

  連結：https://www.nowcoder.com/questionTerminal/8d677d9c6af643f28c2153ee4e435ea4 來源：牛客網   [程式設計題]列表補全 熱度指數：1172 時間限制：1秒 空間限制：32768

【拼多多】小熊吃糖

連結：https://www.nowcoder.com/questionTerminal/dc49df3bbc0146dd92322889d40afcb1 來源：牛客網   [程式設計題]小熊吃糖 熱度指數：838 時間限制：1秒 空間限制：32768K 演算法知識