【14】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/icons-extra.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: 13px;
			}
			
			.BoxTopRightIcon {
				line-height: 50px;
				font-size: 16px;
				color: black;
				padding-left: 5px;
			}
			
			.BoxTopRightStatus {
				line-height: 50px;
				font-size: 13px;
				color: black;
				padding-right: 10px;
				color: #E02D26;
			}
			
			.BoxTopRightStatus:hover {
				color: #E02D26;
			}
			
			.BoxDetails {
				width: 100%;
				background: #F5F5F5;
			}
			
			.BoxDetailsImg {
				float: left;
			}
			
			.BoxDetailsCenter {
				float: left;
			}
			
			.BoxDetailsCenterName {
				color: black;
				font-size: 13px;
				margin-top: 10px;
				line-height: 20px;
				max-height: 60px;
				overflow: hidden;
			}
			
			.BoxDetailsCenterDesc {
				font-size: 13px;
				color: #A9A9A9;
				margin-top: 3px;
			}
			
			.BoxDetailsRight {
				float: left;
			}
			
			.BoxDetailsRightMoney {
				font-size: 13px;
				color: black;
				text-align: right;
				margin-right: 10px;
				margin-top: 10px;
			}
			
			.BoxDetailsRightCount {
				font-size: 13px;
				color: black;
				text-align: right;
				margin-right: 10px;
				color: #A9A9A9;
			}
			
			.BoxPay {
				width: 100%;
				background: white;
			}
			
			.BoxPayRight {
				height: 40px;
				padding-right: 10px;
			}
			
			.BoxPayLeft {
				padding-left: 10px;
				float: left;
				height: 40px;
				padding-right: 10px;
			}
			
			.BoxPayLeftImgRight {
				width: 32px;
				height: 32px;
				margin-top: 4px;
				border-radius: 50%;
			}
			
			.BoxPayLeftImgRightMargin {
				margin-right: -15px;
			}
			
			.BoxPayRightYF {
				font-size: 13px;
				color: black;
				line-height: 40px;
			}
			
			.BoxPayRightYF:hover {
				color: black;
			}
			
			.BoxPayRightMoney {
				font-size: 14px;
				color: black;
				line-height: 40px;
				padding-right: 5px;
			}
			
			.BoxPayRightMoney:hover {
				color: black;
			}
			
			.BoxPayRightSF {
				font-size: 13px;
				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;
			}
			
			.BoxFooter {
				width: 100%;
				background: white;
				height: 50px;
				border-top: 1px solid #EFEFF4;
			}
			
			.BoxFooterGoOrder {
				margin-top: 5px;
				margin-right: 10px;
				float: right;
				color: white;
				height: 40px;
				background: #E02D26;
				width: 90px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
				font-size: 13px;
			}
			
			.BoxFooterCancelOrder {
				margin-top: 5px;
				margin-right: 10px;
				float: right;
				height: 40px;
				background: white;
				border: 1px solid #DDDDDD;
				width: 90px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
				font-size: 13px;
			}
			
			.BoxFooterTimeOut {
				margin-top: 5px;
				margin-right: 10px;
				float: right;
				height: 40px;
				background: white;
				border: 1px solid #DDDDDD;
				width: 90px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
				font-size: 13px;
			}
			
			.footer {
				height: 60px;
				color: #A9A9A9;
				line-height: 60px;
				text-align: center;
				font-size: 13px;
			}
		</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="BoxTopRightIcon mui-icon mui-icon-arrowright"></a>
					<a class="BoxTopRightStatus mui-pull-right">待收貨</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 class="BoxDetailsCenterDesc">五彩椒500粒</div>
					</div>
					<div class="BoxDetailsRight">
						<div class="BoxDetailsRightMoney">￥19.9</div>
						<div class="BoxDetailsRightCount">x1</div>
					</div>
				</div>
				<div class="BoxPay">
					<div class="BoxPayLeft">
						<img class="BoxPayLeftImgRight BoxPayLeftImgRightMargin" src="http://avatar.yangkeduo.com/a/40f22ae6b32d9d3e97719726931393a04942610c-1520828501?x-oss-process=image/resize,w_100">
						<img class="BoxPayLeftImgRight" src="http://avatar.yangkeduo.com/a/eba2f59a398d049b943bd62990acb6512f1ad13f-1519996610?x-oss-process=image/resize,w_100">
					</div>
					<div class="BoxPayRight">
						<a class="mui-pull-right BoxPayRightYF">(免運費)</a>
						<a class="mui-pull-right BoxPayRightMoney">￥19.9</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 class="BoxFooter">
					<div class="BoxFooterGoOrder">確認收貨</div>
					<div class="BoxFooterCancelOrder">檢視物流</div>
					<div class="BoxFooterTimeOut">延長收貨</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="BoxTopRightIcon mui-icon mui-icon-arrowright"></a>
					<a class="BoxTopRightStatus mui-pull-right">待收貨</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 class="BoxDetailsCenterDesc">五彩椒500粒</div>
					</div>
					<div class="BoxDetailsRight">
						<div class="BoxDetailsRightMoney">￥19.9</div>
						<div class="BoxDetailsRightCount">x1</div>
					</div>
				</div>
				<div class="BoxPay">
					<div class="BoxPayLeft">
						<img class="BoxPayLeftImgRight BoxPayLeftImgRightMargin" src="http://avatar.yangkeduo.com/a/40f22ae6b32d9d3e97719726931393a04942610c-1520828501?x-oss-process=image/resize,w_100">
						<img class="BoxPayLeftImgRight" src="http://avatar.yangkeduo.com/a/eba2f59a398d049b943bd62990acb6512f1ad13f-1519996610?x-oss-process=image/resize,w_100">
					</div>
					<div class="BoxPayRight">
						<a class="mui-pull-right BoxPayRightYF">(免運費)</a>
						<a class="mui-pull-right BoxPayRightMoney">￥19.9</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 class="BoxFooter">
					<div class="BoxFooterGoOrder">確認收貨</div>
					<div class="BoxFooterCancelOrder">檢視物流</div>
					<div class="BoxFooterTimeOut">延長收貨</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="BoxTopRightIcon mui-icon mui-icon-arrowright"></a>
					<a class="BoxTopRightStatus mui-pull-right">待收貨</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 class="BoxDetailsCenterDesc">五彩椒500粒</div>
					</div>
					<div class="BoxDetailsRight">
						<div class="BoxDetailsRightMoney">￥19.9</div>
						<div class="BoxDetailsRightCount">x1</div>
					</div>
				</div>
				<div class="BoxPay">
					<div class="BoxPayLeft">
						<img class="BoxPayLeftImgRight BoxPayLeftImgRightMargin" src="http://avatar.yangkeduo.com/a/40f22ae6b32d9d3e97719726931393a04942610c-1520828501?x-oss-process=image/resize,w_100">
						<img class="BoxPayLeftImgRight" src="http://avatar.yangkeduo.com/a/eba2f59a398d049b943bd62990acb6512f1ad13f-1519996610?x-oss-process=image/resize,w_100">
					</div>
					<div class="BoxPayRight">
						<a class="mui-pull-right BoxPayRightYF">(免運費)</a>
						<a class="mui-pull-right BoxPayRightMoney">￥19.9</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 class="BoxFooter">
					<div class="BoxFooterGoOrder">確認收貨</div>
					<div class="BoxFooterCancelOrder">檢視物流</div>
					<div class="BoxFooterTimeOut">延長收貨</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="BoxTopRightIcon mui-icon mui-icon-arrowright"></a>
					<a class="BoxTopRightStatus mui-pull-right">待收貨</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 class="BoxDetailsCenterDesc">五彩椒500粒</div>
					</div>
					<div class="BoxDetailsRight">
						<div class="BoxDetailsRightMoney">￥19.9</div>
						<div class="BoxDetailsRightCount">x1</div>
					</div>
				</div>
				<div class="BoxPay">
					<div class="BoxPayLeft">
						<img class="BoxPayLeftImgRight BoxPayLeftImgRightMargin" src="http://avatar.yangkeduo.com/a/40f22ae6b32d9d3e97719726931393a04942610c-1520828501?x-oss-process=image/resize,w_100">
						<img class="BoxPayLeftImgRight" src="http://avatar.yangkeduo.com/a/eba2f59a398d049b943bd62990acb6512f1ad13f-1519996610?x-oss-process=image/resize,w_100">
					</div>
					<div class="BoxPayRight">
						<a class="mui-pull-right BoxPayRightYF">(免運費)</a>
						<a class="mui-pull-right BoxPayRightMoney">￥19.9</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 class="BoxFooter">
					<div class="BoxFooterGoOrder">確認收貨</div>
					<div class="BoxFooterCancelOrder">檢視物流</div>
					<div class="BoxFooterTimeOut">延長收貨</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.55).css("height", height);
			$(".BoxDetailsRight").css("width", width * 0.20 - 20).css("height", height);

			//確認收貨
			mui(".BoxFooter").on("tap", ".BoxFooterGoOrder", function() {
				mui.alert("確認收貨")
			})
			//檢視物流
			mui(".BoxFooter").on("tap", ".BoxFooterCancelOrder", function() {
				mui.alert("檢視物流")
			})
			//延長收貨 
			mui(".BoxFooter").on("tap", ".BoxFooterTimeOut", function() {
				mui.alert("延長收貨")
			})

			mui(".Box").on("tap", ".BoxDetails", function() {
				mui.openWindow({
					url: "/tab-botton-subpage/File-tap-botton-subpage-1/DetailsItem.html",
					id: "DetailsItem.html"
				})
			})

			mui.plusReady(function() {
				// 獲取當前視窗物件
				var self = plus.webview.currentWebview();
				// 讀取傳遞過來的引數
				var index = 4;
				/**
				 * 獲取父視窗物件 
				 */
				var parent = self.parent();
				// 左滑事件
				document.addEventListener("swipeleft", function(event) {
					var angle = event.detail.angle;
					angle = Math.abs(angle);
					/**
					 * 控制滑動的角度，為避免誤操作，可自定義限制滑動角度；
					 */
					if(angle > 170 && angle < 185) {
						parentEvent(parent, index, "left");
					}
				});
				// 右滑事件
				document.addEventListener("swiperight", function(event) {
					var angle = event.detail.angle;
					angle = Math.abs(angle);
					/**
					 * 控制滑動的角度，為避免誤操作，可自定義限制滑動角度；
					 */
					if(angle < 10) {
						parentEvent(parent, index, "right");
					}
				});
			});

			/**
			 * 觸發父視窗自定義事件
			 * @param {Object} wvobj 目標視窗物件
			 * @param {Number} index 索引值
			 * @param {String} direction 方向
			 */
			function parentEvent(wvobj, index, direction) {
				/**
				 * 觸發自定義事件
				 * http://dev.dcloud.net.cn/mui/event/#customevent
				 */
				mui.fire(wvobj, "swipe_event", {
					direction: direction,
					index: index
				});
			}
		</script>
	</body>

</html>

【14】MUI 仿拼多多待收貨

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

【15】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-

【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

【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內的不同開發很容易使用不同的路由方式而顯得有點混亂。不過這不是重點，我在

【14】redux 之 redux-actions

scrip reset case 原來 from reat sin con spa redux-actions有兩大法寶createAction和handleActions. createAction http://www.jianshu.com/p/6ba5cd79507

【14】where字句

where子句篩選條件 exe [] where 如果 from 左值 per 1.簡介 -> where緊跟在from後執行，用來初選-> 語法where 條件-> 註意-> where子句對數據源直接進行篩選-> 篩選可以是表達式、判斷、

MySQL基礎入門學習【14】存儲引擎

nsis ont 過程關系 ali 余額 bili 事務 atom 查看數據表的創建命令：【存儲引擎】: MySQL可以將數據以不同的奇數存儲在文件（內存）中，這種技術就成為存儲引擎　　　　　　每一種存儲引擎都使用了不同的存儲機制、索引技巧、鎖定水平，最

【ACM】刪數問題（待更）

【描述】鍵盤輸入一個正整數N，去掉其中任意S個數字後剩下的數字按原左右次序將組成一個新的正整數。程式設計對給定的N和S尋找一種方案使得剩下的數字組成的新數最小。（N不超過240位，N>S）【輸入】兩行，第一行：正整數N；第二行：正整數S。【輸出】n去掉的s個數字後組成的新的正整

LeetCode：最長公共字首【14】

LeetCode：最長公共字首【14】題目描述編寫一個函式來查詢字串陣列中的最長公共字首。如果不存在公共字首，返回空字串 ""。示例 1: 輸入: ["flower","flow","flight"] 輸出: "fl" 示例 2: 輸入: ["dog","

LeetCode：最長公共前綴【14】

true 編寫 pub class solution leetcode int npr car LeetCode：最長公共前綴【14】題目描述編寫一個函數來查找字符串數組中的最長公共前綴。如果不存在公共前綴，返回空字符串 ""。示例 1: 輸入: ["flower"

【14】Caffe學習系列：計算圖片資料的均值

圖片減去均值後，再進行訓練和測試，會提高速度和精度。因此，一般在各種模型中都會有這個操作。那麼這個均值怎麼來的呢，實際上就是計算所有訓練樣本的平均值，計算出來後，儲存為一個均值檔案，在以後的測試中，就可以直接使用這個均值來相減，而不需要對測試圖片重新計算。一、二進位制格式的均值計算

【14】程序監控指令碼-getRSSMem.sh

# get size of java process RSS memory PName=$1 #echo $PName if [ "$PName" != "" ];then a=`ps aux | grep $PName | grep -v grep | grep -v z

【ACM】家喻戶曉的中藥店（待更）

題目連結：http://acm.nuc.edu.cn/OJ/contest/show/43/1007 【問題描述】 long_xiao和const_hhh是一對恩愛的夫妻。他們在京城經營著一家中藥店，夫妻二人醫術精湛、古道熱腸，雖然年過花甲，身體依然硬朗。更重要的是，

【14】MUI 仿拼多多 待收貨

相關推薦

【14】MUI 仿拼多多待收貨