<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en" data-dpr="1" style="font-size: 37.52px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
	<c:set var="ctx" value="${pageContext.request.contextPath}"  scope="request"/>
	<c:set var="resourcePath" value="${ctx}/resources"  scope="request"/>
	<script type="text/javascript">
		var ctx = "${ctx}"; //上下文路径
		var resourcePath = "${resourcePath}";
		document.writeln('<script type="text/javascript" src="'+resourcePath+'/js/global.js?d=' + new Date().getTime() + '" ><\/script>');
	</script>
<%--	<script type="text/javascript" src="${resourcePath}/js/zepto.min.js"></script>--%>
	<script type="text/javascript" src="${resourcePath}/js/zepto.weui.js"></script>
    <title>商品兑换详情</title>
	<link rel="stylesheet" href="${resourcePath}/css/h5.css">
	<link rel="stylesheet" href="${resourcePath}/css/h5-common.css">
	<link rel="stylesheet" href="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.css">
	<link rel="stylesheet" href="${resourcePath}/css/weui.css">
	<link rel="stylesheet" href="${resourcePath}/css/weuix.css">
	<style>
		* {
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			outline: 0;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
		}
		div {
			display: block;
		}
		.ui-page, .ui-page:after {
			background-color: #f7f7f7;
		}
		#app, body, html {
			font-size: .34333333rem;
			height: 100%;
			color: #333;
			-webkit-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}
		.ui-page[data-v-07f6ffda] {
			position: relative;
			max-width: 256px;
			max-width: 16rem;
			min-height: 100%;
			background-color: #f7f7f7;
			padding-top: 1px;
			margin: -1px auto 0;
		}
		.money-exchange[data-v-07f6ffda] {
			height: 100%;
		}
		.money-exchange .money-header-amount[data-v-07f6ffda] {
			width: 100%;
			height: 34.133px;
			height: 2.13333333rem;
			box-sizing: border-box;
			background-image: linear-gradient(153deg,#fca195, #ef5151 89%);
			color: #fff;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-ms-flex-align: center;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.money-exchange .money-header-amount .money-amount[data-v-07f6ffda] {
			height: 34.133px;
			height: 2.13333333rem;
			padding-left: 6.4px;
			padding-left: .4rem;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-ms-flex-direction: column;
			flex-direction: column;
			padding: 5.333px;
			padding: .33333333rem;
		}
		.money-exchange .money-header-amount .money-amount div.title[data-v-07f6ffda] {
			height: .6rem;
			font-size: 5.12px;
			font-size: .32rem;
			line-height: 9.6px;
			line-height: .6rem;
			font-family: DINAlternate-Bold;
		}
		.money-exchange .money-header-amount .money-amount div.money[data-v-07f6ffda] {
			height: .86666667rem;
			font-size: .66666667rem;
			line-height: .86666667rem;
			font-family: DINAlternate-Bold;
		}
		.money-exchange .money-header-amount .money-record[data-v-07f6ffda] {
			margin-right: 5.12px;
			margin-right: .32rem;
			height: 10.666px;
			height: .66666667rem;
			line-height: 10.24px;
			line-height: .64rem;
			width: 42.666px;
			width: 2.66666667rem;
			border-radius: .39333333rem;
			font-size: 5.546px;
			font-size: .34666667rem;
			border: 1px solid #fff;
			text-align: center;
		}
		.money-exchange .money-content[data-v-07f6ffda] {
			width: 100%;
			height: 100%;
			padding-top: 34.133px;
			position: relative;
			overflow: auto;
		}
		.money-exchange .money-content div.no-goods[data-v-07f6ffda] {
			position: absolute;
			width: 85.333px;
			width: 5.33333333rem;
			height: 106.666px;
			height: 6.66666667rem;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
		.money-exchange .money-content div.no-goods span[data-v-07f6ffda] {
			display: inline-block;
			width: 85.333px;
			width: 5.33333333rem;
			height: 21.333px;
			height: 1.33333333rem;
			text-align: center;
			line-height: 21.333px;
			line-height: 1.33333333rem;
			font-size: 6.4px;
			font-size: .4rem;
			color: #999;
		}
		.money-exchange .money-content div.no-goods img[data-v-07f6ffda] {
			width: 85.333px;
			width: 5.33333333rem;
			height: 85.333px;
			height: 5.33333333rem;
		}
		.money-exchange .money-content .goods-list[data-v-07f6ffda] {
			padding-left: 4.266px;
			padding-left: .26666667rem;
			padding-right: 4.266px;
			padding-right: .26666667rem
		}
		.money-exchange .money-content .goods-list .list-title[data-v-07f6ffda] {
			height: 14.933px;
			height: .93333333rem;
			line-height: 14.933px;
			line-height: .93333333rem;
			font-size: 6.4px;
			font-size: .4rem;
			font-weight: 700
		}
		.money-exchange .money-content .goods-list .list-wrap[data-v-07f6ffda] {
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap
		}
		.money-exchange .money-content .goods-list .list-wrap .list-item[data-v-07f6ffda] {
			width: 49%;
			font-size: 0;
			margin-bottom: .6666rem;
		}
		.money-exchange .money-content .goods-list .list-wrap .list-item .item-image[data-v-07f6ffda] {
			width: 100%;
			height: 48px;
			height: 3rem
		}
		.money-exchange .money-content .goods-list .list-wrap .list-item .item-name[data-v-07f6ffda] {
			display: block;
			font-weight: 700;
			padding-top: 2.133px;
			padding-top: .13333333rem;
			font-size: 5.973px;
			font-size: .37333333rem
		}
		.money-exchange .money-content .goods-list .list-wrap .list-item .item-image img[data-v-07f6ffda] {
			width: 100%;
			height: 100%;
			border-radius: 10px 10px 0 0;
		}
		.money-exchange .money-content .goods-list .list-wrap .list-item .item-amount[data-v-07f6ffda] {
			color: #ff721f;
			font-size: 9.6px;
			font-size: .45rem;
			height: 12.8px;
			height: .8rem;
			display: inline-block;
			margin-right: 1.066px;
			margin-right: .06666667rem
		}
		.money-exchange .money-content .goods-list .list-wrap .list-item .item-detail[data-v-07f6ffda] {
			color: #ff721f;
			font-size: 5.546px;
			font-size: .34666667rem;
			height: 12.8px;
			height: .8rem;
			display: inline-block;
			margin-right: 2.133px;
			margin-right: .13333333rem
		}

		.money-exchange .money-content .goods-list .list-wrap .list-item .item-tip[data-v-07f6ffda] {
			font-size: 5.546px;
			font-size: .34666667rem;
			height: 12.8px;
			height: .8rem;
			display: inline-block;
			text-decoration: line-through;
			color: #999
		}
		div.polaroid {
			box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
			border-radius: 10px;
		}
		.goods-content{
			display: flex;
			justify-content: space-between;
			line-height: .7rem;
			padding: 0 .2rem;
		}
		.item-name{
			margin-top: .1rem;
		}
		.item-amount{
			margin-top: .2rem;
		}
		.wrapper-order-item{
			width: 95%;
			background-color: #fff; padding: 0.233rem; line-height: .8rem;box-shadow: 0 4px 8px 0 hsla(0, 0%, 78%, .5);border-radius: 10px;margin-bottom: .4rem;
		}
		.wrapper-order-item-content{
			display: flex;
			justify-content: space-between;
		}
		.mescroll{
			position: fixed;
			top: 60px;
			bottom: 0;
			height: auto;
		}
		.ellipsis{
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		.good-label{
			width: 25%;
		}
		.expressNo{
			color: #06A6F1;
		}
		.hread{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.3rem 0.25rem;
			background-color: #fff;
			margin-bottom: 0.3rem;
			font-size: 16px;
			position: fixed;
			top: 0;
			border: 0;
			z-index: 1;
			width: 100%;
			height: 1.2rem;
			border-bottom: 1px solid #d5d3d3;
		}
		.integral{
			display: flex;
			align-items: center;
		}
		.integral-label{
			color: #888888;
		}
		.integral-value{
			color: #ff721f;
			font-weight: bold;
		}
		.integral-record-btn{
			height: 0.66666667rem;
			line-height: .64rem;
			width: 2.3rem;
			border-radius: 0.1rem;
			font-size: .34666667rem;
			border: 1px solid #ff721f;
			text-align: center;
			color: #ff721f;
		}
	</style>
	<link rel="stylesheet" href="${resourcePath}/css/mobileSelect.css">
	<script src="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="${resourcePath}/js/auto-size.js"></script>
	<script type="text/javascript" src="${resourcePath}/js/mobileSelect.js"></script>
</head>
<body style="font-size: 12px;">
	<div id="app">
		<div class="hread">
			<div class="integral">
				<div class="integral-label">可用积分：</div>
				<div class="integral-value">${useAmt}</div>
			</div>
<%--			<div class="integral-record-btn money-record">兑换记录</div>--%>
		</div>
		<div data-v-07f6ffda="" class="ui-page money-exchange">
			<div data-v-07f6ffda="" class="money-content">
				<c:if test="${empty goodExchange.records }">
					<div data-v-07f6ffda="" class="no-goods">
						<img data-v-07f6ffda="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzIwcHgiIGhlaWdodD0iMzIwcHgiIHZpZXdCb3g9IjAgMCAzMjAgMzIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0OC4yICg0NzMyNykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+54q25oCB5Zu+5qCHL+epuuiusOW9lTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i54q25oCB5Zu+5qCHL+epuuiusOW9lSI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSIzMjAiIGhlaWdodD0iMzIwIj48L3JlY3Q+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xODcuOTkzLDQ4LjUyMjIgTDIyMy42MjYsNDguNTIyMiBMMjIzLjY0MiwxOTkuMDA2MiBMOTYsMTk5LjAwNjIgTDk2LDQ4LjUyMjIgTDEzMS42MzMsNDguNTIyMiBMMTMxLjYzMyw2MS44NTYyIEwxMDkuMzM1LDYxLjg1NjIgTDEwOS4zMzUsMTg1LjY3MjIgTDIxMC4yOTEsMTg1LjY3MjIgTDIxMC4yOTEsNjEuODU2MiBMMTg3Ljk5Myw2MS44NTYyIEwxODcuOTkzLDQ4LjUyMjIgWiBNMTMwLjkxNDQsMTAyLjg5MyBMMTMwLjkxNDQsODkuNTU5IEwxODcuNDI3NCw4OS41NTkgTDE4Ny40Mjc0LDEwMi44OTMgTDEzMC45MTQ0LDEwMi44OTMgWiBNMTMwLjkxNDQsMTI4LjU2IEwxMzAuOTE0NCwxMTUuMjI2IEwxODcuNDI3NCwxMTUuMjI2IEwxODcuNDI3NCwxMjguNTYgTDEzMC45MTQ0LDEyOC41NiBaIE0xMzAuOTE0NCwxNTQuMjI2IEwxMzAuOTE0NCwxNDAuODkyIEwxODcuNDI3NCwxNDAuODkyIEwxODcuNDI3NCwxNTQuMjI2IEwxMzAuOTE0NCwxNTQuMjI2IFogTTE0MS43MTY0LDYxLjk1NCBMMTQxLjcxNjQsNDEgTDE3Ny45MDg0LDQxIEwxNzcuOTA4NCw2MS45NTQgTDE0MS43MTY0LDYxLjk1NCBaIE0xMzUuNTg0NCwyNDUuNzAxIEwxMzUuNTg0NCwyMTMuMDAzIEwxNDMuOTk1NCwyMTMuMDAzIEwxNDMuOTk1NCwyNDUuNzAxIEwxMzUuNTg0NCwyNDUuNzAxIFogTTEzNS41ODQ0LDI3MS4xODggTDEzNS41ODQ0LDI1MC41MTEgTDE0My45OTU0LDI1MC41MTEgTDE0My45OTU0LDI3MS4xODggTDEzNS41ODQ0LDI3MS4xODggWiBNMTYxLjQxODQsMjM3Ljg2NSBMMTYxLjQxODQsMjEwLjExOCBMMTY5LjgyOTQsMjEwLjExOCBMMTY5LjgyOTQsMjM3Ljg2NSBMMTYxLjQxODQsMjM3Ljg2NSBaIE0yMDIuODYzNCwyNDAuMzQ3IEwyMDIuODYzNCwyMTcuMjE3IEwyMTEuMjc0NCwyMTcuMjE3IEwyMTEuMjc0NCwyNDAuMzQ3IEwyMDIuODYzNCwyNDAuMzQ3IFogTTE2MS40MTg0LDI1My45MDggTDE2MS40MTg0LDI0NS4xODkgTDE2OS44Mjk0LDI0NS4xODkgTDE2OS44Mjk0LDI1My45MDggTDE2MS40MTg0LDI1My45MDggWiBNMTgyLjY0MzQsMjc4LjI5NCBMMTgyLjY0MzQsMjQ4Ljc4MiBMMTkxLjA1NDQsMjQ4Ljc4MiBMMTkxLjA1NDQsMjc4LjI5NCBMMTgyLjY0MzQsMjc4LjI5NCBaIE0xODIuNjQzNCwyNDIuOTYgTDE4Mi42NDM0LDIyNi4wNjggTDE5MS4wNTQ0LDIyNi4wNjggTDE5MS4wNTQ0LDI0Mi45NiBMMTgyLjY0MzQsMjQyLjk2IFogTTExMy45NTc0LDI1Ni42MDkgTDExMy45NTc0LDIxNi4zNjkgTDEyMi4zNjg0LDIxNi4zNjkgTDEyMi4zNjg0LDI1Ni42MDkgTDExMy45NTc0LDI1Ni42MDkgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjQ0NDQ0NDIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" alt="">
						<span data-v-07f6ffda="">暂无商品兑换记录！</span>
					</div>
				</c:if>
					<div data-v-07f6ffda class="goods-list">
						<c:if test="${not empty goodExchange.records}">
							<div id="mescroll" class="mescroll">
								<div data-v-07f6ffda class="list-wrap">
									<c:forEach items="${goodExchange.records}" var="exchange">
										<div class="wrapper-order-item">
											<div class="wrapper-order-item-content">
												<div class="good-label">商品名称</div>
												<div class="ellipsis">${exchange.name}</div>
											</div>
											<div class="wrapper-order-item-content">
												<div class="good-label">价格</div>
												<div class="ellipsis">${exchange.price}</div>
											</div>
											<c:if test="${not empty exchange.expressNo}">
												<div class="wrapper-order-item-content" >
													<div class="good-label">快递单号</div>
<%--													<textarea cols="30" rows="10"></textarea>--%>
													<div class="ellipsis expressNo" onclick="copyText(this)">${exchange.expressNo}</div>
												</div>
											</c:if>
											<div class="wrapper-order-item-content" >
												<div class="good-label">支付状态</div>
												<div class="ellipsis">
													<c:choose>
														<c:when test="${exchange.status eq 1}">
															<span style="color: green">已支付</span>
														</c:when>
														<c:otherwise>
															<span style="color: red">待支付</span>
														</c:otherwise>
													</c:choose>
												</div>
											</div>
											<div class="wrapper-order-item-content" >
												<div class="good-label">发货状态</div>
												<div class="ellipsis">
													<c:choose>
														<c:when test="${exchange.deliveryStatus eq 1}">
															<span style="color: green">已发货</span>
														</c:when>
														<c:otherwise>
															<span style="color: #ec4406">待发货</span>
														</c:otherwise>
													</c:choose>
												</div>
											</div>
											<div class="wrapper-order-item-content">
												<div class="good-label">兑换时间</div>
												<div class="ellipsis">&nbsp;<fmt:formatDate value='${exchange.createTime}' pattern='yyyy-MM-dd HH:mm:ss'/></div>
											</div>
										</div>
									</c:forEach>
								</div>
							</div>
						</c:if>
					</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		/* === 判断支持版本 start === */
		(function () {
			var viewportTag = null;
			var metaTags = document.getElementsByTagName('meta');
			for (var i = 0; i < metaTags.length; i++) {
				if (metaTags[i].getAttribute('name') === "viewport") {
					viewportTag = metaTags[i];
					break;
				}
			}
			if (!viewportTag) {
				viewportTag = document.createElement("meta");
				viewportTag.setAttribute('name', 'viewport');
			}

			var viewportTagContent =
					'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no';

			// Detect if iOS device
			if (/(iPhone|iPod|iPad)/i.test(window.navigator.userAgent)) {
				// Get iOS major version
				var iosVersion = parseInt((window.navigator.userAgent).match(/OS (\d+)_(\d+)_?(\d+)? like Mac OS X/i)[1]);
				// Detect if device is running >iOS 11
				// iOS 11's UIWebView and WKWebView changes the viewport behaviour to render viewport without the status bar. Need to override with "viewport-fit: cover" to include the status bar.
				if (iosVersion >= 11) {
					viewportTagContent += ', viewport-fit=cover';
				}
			}

			// Update viewport tag attribute
			viewportTag.setAttribute('content', viewportTagContent);
		})();
		/* === 判断支持版本 end === */

		// refs http://www.html-js.com/article/3041 移动端高清、多屏适配方案
		!function (a, b) {
			function c() {
				var b = f.getBoundingClientRect().width;
				b / i > 540 && (b = 540 * i);
				var c = b / 10;
				f.style.fontSize = c + "px", k.rem = a.rem = c
			}
			var d, e = a.document,
					f = e.documentElement,
					g = e.querySelector('meta[name="viewport"]'),
					h = e.querySelector('meta[name="flexible"]'),
					i = 0,
					j = 0,
					k = b.flexible || (b.flexible = {});
			if (g) {
				var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
				l && (j = parseFloat(l[1]), i = parseInt(1 / j))
			} else if (h) {
				var m = h.getAttribute("content");
				if (m) {
					var n = m.match(/initial\-dpr=([\d\.]+)/),
							o = m.match(/maximum\-dpr=([\d\.]+)/);
					n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((
							1 / i).toFixed(2)))
				}
			}
			if (!i && !j) {
				var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)),
						q = a.devicePixelRatio;
				i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
			}
			if (f.setAttribute("data-dpr", i), !g)
				if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content",
						"initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f
						.firstElementChild) f.firstElementChild.appendChild(g);
				else {
					var r = e.createElement("div");
					r.appendChild(g), e.write(r.innerHTML)
				}
			a.addEventListener("resize", function () {
				clearTimeout(d), d = setTimeout(c, 300)
			}, !1), a.addEventListener("pageshow", function (a) {
				a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
			}, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener(
					"DOMContentLoaded",
					function () {
						e.body.style.fontSize = 12 * i + "px"
					}, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) {
				var b = parseFloat(a) * this.rem;
				return "string" == typeof a && a.match(/rem$/) && (b += "px"), b
			}, k.px2rem = function (a) {
				var b = parseFloat(a) / this.rem;
				return "string" == typeof a && a.match(/px$/) && (b += "rem"), b
			}
		}(window, window.lib || (window.lib = {}));
	</script>
	<script>
		$(".money-record").on('click',function () {
			window.location.href= ctx + '/activity/exchange/view?token=${token}';
		})
	</script>

	<script type="text/javascript" charset="utf-8">
		$(function(){
			//创建MeScroll对象
			var mescroll = new MeScroll("mescroll", {
				down: {
					auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
					callback: downCallback, //下拉刷新的回调
				},
				up: {
					auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
					callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
					htmlNodata: "没有更多了",
				}
			});
			/*下拉刷新的回调 */
			function downCallback(){
				//联网加载数据
				getListDataFromNet(0, 10, function(data){
					//联网成功的回调,隐藏下拉刷新的状态
					mescroll.endSuccess();
					//设置列表数据
					setListData(data,false);
				}, function(){
					//联网失败的回调,隐藏下拉刷新的状态
					mescroll.endErr();
				});
			}
			var page = {num:1, size:10};
			function upCallback(page){
				//联网加载数据
				page.num = 2;
				getListDataFromNet(page.num, page.size, function(data){
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					mescroll.endSuccess(data.length);//传参:数据的总数; mescroll会自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					//设置列表数据
					setListData(data, true);
				}, function(){
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
					mescroll.endErr();
				});
			}

			/*设置列表数据*/
			function setListData(data, isAppend) {
				var str = "";
				for (var i = 0; i <data.length; i++) {
					var newObj=data[i];
					str += '<div class="wrapper-order-item">' +
							'<div class="wrapper-order-item-content">' +
							'<div class="good-label">商品名称</div>' +
							'<div class="ellipsis">'+newObj.name+'</div></div>' +
							'<div class="wrapper-order-item-content">' +
							'<div class="good-label">价格</div>' +
							'<div class="ellipsis">'+(parseFloat(newObj.price).toFixed(2))+'</div></div>';
							if(newObj.expressNo){
								str += '<div class="wrapper-order-item-content">'+
								'<div class="good-label">快递单号</div>'+
								'<textarea style="display: none" cols="30" rows="10"></textarea>' +
								'<div class="ellipsis expressNo" onclick="copyText(this)">'+newObj.expressNo+'</div></div>'
							}
					str += '<div class="wrapper-order-item-content">'+
							'<div class="good-label">支付状态</div>'+
							'<div class="ellipsis" style="color: green">';
							if(newObj.status == 1){
								str +='<span style="color: green">已支付</span>';
							}else{
								str +='<span style="color: red">待支付</span>';
							}
					str +=	'</div></div>';
					str += '<div class="wrapper-order-item-content">'+
							'<div class="good-label">发货状态</div>'+
							'<div class="ellipsis" style="color: green">';
							if(newObj.deliveryStatus == 1){
								str +='<span style="color: green">已发货</span>';
							}else{
								str +='<span style="color: #ec4406">待发货</span>';
							}
					 str +=	'</div></div>'+
							'<div class="wrapper-order-item-content">'+
							'<div class="good-label">兑换时间</div>'+
							'<div class="ellipsis">&nbsp;'+renderTime(newObj.createTime)+'</div></div></div>';

				}
				if(!isAppend){
					$(".list-wrap").empty();
				}
				$(".list-wrap").append(str);
			}
			function renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
			}
			/*联网加载列表数据*/
			var downIndex=0;
			function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
				//延时一秒,模拟联网
				setTimeout(function () {
					try{
						$.ajax({
							url : ctx + '/activity/goods/exchange/page',
							dataType : 'json',
							type : "post",
							data : {
								'token': '${token}',
								'pageNum': pageNum,
								'pageSize': pageSize,
							},
							success : function(res) {
								if(res.code == 200){
									var list = res.data.records;
									successCallback&&successCallback(list);
								}else {
									errorCallback&&errorCallback();
								}
							},
						})
					}catch(e){
						//联网失败的回调
						errorCallback&&errorCallback();
					}
				},1000)
			}

			//禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码
			document.ondragstart=function() {return false;}
		});

		function copyText(o){
			let text = $(o).html();
			let textArea = $(o).prev("textarea");
			textArea.val(text);
			$(o).prev("textarea")[0].select();						//选择文本框中内容
			document.execCommand('copy');
			// $.toast("复制成功","text");
			// document.execCommand("copy");
		}
	</script>
</body>
</html>