ykw
/
hemall.terabimsoft.com.cn


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<title>订单详情</title>
	<style>
		body,h1,ul,li,h2{margin:0;padding:0;}
		body{background-color:#f5f5f5;}
		ul,li{list-style-type: none;}
		#basic_info{background-color: #fff;}
		h1{
			background-color: #f5f5f5;
				height:2.5rem;
				line-height: 2.5rem; 
				padding: 0 0.875rem;
				font-size:16px;
				color:#333;
				display: flex;
				position: relative;
			font-size:14px;
		}
		.arrow{
			position: absolute;
			width: 1rem;
			right: 0.875rem;
			top:0.9375rem;
			display: inline-block;
		}
		.buslist{
			display: flex;
			line-height: 1.625rem;
			text-align: left;
			font-size:12px;
		}
		.left{
			width: 5.625rem;
			display: inline-block;
			padding-left:1.25rem;
		}
		.right{padding-right: 1.25rem;}
		#business{padding: 0.625rem 0;}
		#goods_info{background-color: #fff;}
		.goods{
			padding:0.75rem;
			display: flex;
		}
		.goods_img{
			width: 4rem;
			height:4rem;
			background: #fff;
			overflow: hidden;
			margin-right:0.75rem;
		}
		.gd_img{width: 100%;}
		.info{
			width:17.1875rem;
			font-size:14px;
			position: relative;
		}
		.name{
			display: flex;
			justify-content: space-between;
		}
		.goods_name{
			width: 11.25rem;
			text-align: left;
			line-height: 1.25rem;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp:2;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		.standard{
			font-size:12px;
			display: flex;
			justify-content: space-between;
			width: 100%;
			position: absolute;
			bottom:0rem;
			color:#8c8c8c;
		}
		.goods_price{
			
		}
		#price_info{
			margin-bottom:4rem;
			background-color: #fff;
		}
		#list{padding: 0.625rem 0;}
		.list_info{
			font-size:12px;
			padding:0 0.875rem;
			display: flex;
			justify-content: space-between;
			line-height: 1.625rem;
			text-align: left;
		}
		h2{
				height: 2.5rem;
				line-height: 2.5rem;
				border-top:solid 0.0625rem #ebebeb;
				text-align: right;
				font-size: 18px;
				padding-right: 0.875rem;
		}
		.pay_price{
			font-weight: normal;
			font-size: 16px;
		}
		#footer{
			font-size:12px;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			height: 3.0625rem;
			border-top:solid 0.0625rem #ebebeb;
		}
		#footer_a,#footer_b,#footer_c{
			padding-top:0.3125rem;
			flex:1;
		}
		.icon_img{
			width: 1.375rem;
			height: 1.375rem;
			overflow: hidden;
			margin: 0 auto;
		}
		.img{width:100%;}
		.text{
			display:block;
			text-align: center;
		}

		.hide{
			display: none;
		}
	</style>
	<script type="text/javascript">
    (function (doc, win) {
       var docEl = doc.documentElement,
         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
         recalc = function () {
           var clientWidth = docEl.clientWidth; 
           if (!clientWidth) return;
           docEl.style.fontSize = 16 * (clientWidth / 375) + 'px';//其中“16”根据你设置的html的font-size属性值做适当的变化
         };
 
       if (!doc.addEventListener) return;
       win.addEventListener(resizeEvt, recalc, false);
       doc.addEventListener('DOMContentLoaded', recalc, false);
     })(document, window);
 </script>
</head>

<body>
	<div id="detail">
		<div id="basic_info">
			<h1>
				<span>基本信息</span>
				<img class="arrow" src="images/up@2x.png">
			</h1>
			<ul id="business">
				<li class="buslist">
					<span class="left">基地地址</span>
					<span class="right"></span>
				</li>
				<li class="buslist">
					<span class="left">基地名称</span>
					<span class="right"></span>
				</li>
				<li class="buslist">
					<span class="left">订单号</span>
					<span class="right"></span>
				</li>
				<li class="buslist">
					<span class="left">收件人</span>
					<span class="right"></span>
				</li>
				<li class="buslist">
					<span class="left">联系电话</span>
					<span class="right"></span>
				</li>
				<li class="buslist">
					<span class="left">收货地址</span>
					<span class="right"></span>
				</li>
			</ul>
		</div>
		<div id="goods_info">
			<h1>
				<span>商品信息</span>
				<img  class="arrow" src="images/up@2x.png">
			</h1>
				<!--<div class="goods">-->
					<!--<div class="goods_img">-->
						<!--<img class="gd_img" src="images/yz-logo.png">-->
					<!--</div>-->
					<!--<ul class="info">-->
						<!--<li class="name">-->
							<!--<span class="goods_name" style="-webkit-box-orient: vertical;">微型照相机超小 迷你摄像机袖珍高清录音笔无线微型X3+8G内存卡 官方标配</span>-->
							<!--<span class="goods_price">￥1860.00</span>-->
						<!--</li>-->
						<!--<li class="standard">-->
							<!--<span>规格：</span>-->
							<!--<span>×1</span>-->
						<!--</li>-->
					<!--</ul>-->
				<!--</div>-->

		</div>
		<div id="price_info">
			<h1>
				<span>金额信息</span>
				<img  class="arrow"  src="images/up@2x.png">
			</h1>
			<ul id="list">
				<!--<li class="list_info">-->
					<!--<span>单品满额优惠：</span>-->
					<!--<span>¥0.00</span>-->
				<!--</li>-->

				<li class="list_info">
					<span>商品小计：</span>
					<span></span>
				</li>
			</ul>
			<h2><span class="pay_price" id="total"></span></h2>
		</div>
		<!--<div id="footer">-->
			<!--<div id="footer_a">-->
				<!--<div class="icon_img">-->
					<!--<img class="img" src="images/home@2x.png">-->
				<!--</div>-->
				<!--<span class="text">首页</span>-->
			<!--</div>-->
			<!--<div id="footer_b">-->
				<!--<div class="icon_img">-->
					<!--<img class="img" src="images/curtaskct@2x.png">-->
				<!--</div>-->
				<!--<span class="text">任务</span>-->
			<!--</div>-->
			<!--<div id="footer_c">-->
				<!--<div class="icon_img">-->
					<!--<img class="img" src="images/center@2x.png">-->
				<!--</div>-->
				<!--<span class="text">我的</span>-->
			<!--</div>-->
		<!--</div>-->
	</div>
</body>
<script>
	$(function(){
		var token=getQueryString("token");

		var order_id=getQueryString("order_id");

		var i=getQueryString("i");

		var url = getRequestUrl();

		$.ajax({
			type:"GET",
			url: url+"/addons/yun_shop/api.php?i="+i+"&route=plugin.delivery-driver.home.api.order.detail&token="+token+"&order_id="+order_id+"",
			dataType:"JSON",
			success:function(res){
				if(res.result == 1){
					getData(res.data);
				}else{
					console.log("请求失败");
				}
			}

		})

	})

    function getRequestUrl() {
        var protocol = window.location.protocol;
        var host = window.location.host;
        return protocol+'//'+host;
    }

	//获取url后面的参数
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) return unescape(r[2]);
		return null;
	}

	function getData(data){

		//商品金额

		var moneny=[];

		var monenyStr="";

		//商品

		var goods=[];

		var goodsStr="";

		moneny=data.order.order_discount;

		goods=data.order.has_many_order_goods;


		//基本信息

		$("#business li").eq(0).find('.right').html(data.driver_order.has_one_base.full_address);

		$("#business li").eq(1).find('.right').html(data.driver_order.has_one_base.store_name);

		$("#business li").eq(2).find('.right').html(data.driver_order.order_sn);

		$("#business li").eq(3).find('.right').html(data.driver_order.has_one_order_address.realname);

		$("#business li").eq(4).find('.right').html(data.driver_order.has_one_order_address.mobile);

		$("#business li").eq(5).find('.right').html(data.driver_order.has_one_order_address.address);


		//金额信息

		if(moneny.length == 0){
			$('#price_info').addClass('hide');
		}else{
			for(var i=0;i<moneny.length;i++){
				monenyStr+='<li class="list_info"><span>'+moneny[i].name+'：</span><span>¥'+moneny[i].amount+'</span></li>'
			}

			$('#list').prepend(monenyStr);
		}

		//商品信息


		for(var j=0;j<goods.length;j++){
			goodsStr+='<div class="goods">'+
						'<div class="goods_img"><img class="gd_img" src="'+goods[j].thumb+'" style="width:100%;height:100%;"></div>'+
						'<ul class="info">'+
							'<li class="name">'+
								'<span class="goods_name" style="-webkit-box-orient: vertical;">'+goods[j].title+'</span>'+
								'<span class="goods_price">￥'+ toDecimal2(goods[j].goods_price / goods[j].total)+'</span>'+
							'</li>'+
							'<li class="standard">'+
								'<span>规格：'+goods[j].goods_option_title+'</span>'+
								'<span>×'+goods[j].total+'</span>'+
							'</li>'+
						'</ul>'+
					'</div>';
		}


		$('#goods_info').append(goodsStr);

		$('#list li:last').find('span').eq(1).html("¥"+data.order.goods_price);

		$('#total').html("实付款（含运费）：¥"+data.order.price);


	}

    function toDecimal2(x) {
        var f = parseFloat(x);
        if (isNaN(f)) {
            return false;
        }
        var f = Math.round(x*100)/100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
            rs = s.length;
            s += '.';
        }
        while (s.length <= rs + 2) {
            s += '0';
        }
        return s;
    }
</script>
</html>