<%@ 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>
    <title>商品列表</title>
	<link rel="stylesheet" href="${resourcePath}/css/h5.css">
	<link rel="stylesheet" href="${resourcePath}/css/h5-common.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;
			margin-top: 1.5rem;
		}
		.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;*/
		/*	padding-top: 2.13333333rem;*/
		/*	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: .3666rem;
		}
		.money-exchange .money-content .goods-list .list-wrap .list-item .item-image[data-v-07f6ffda] {
			width: 100%;
		}
		.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%;
			border-radius: 5px 5px 0 0;
		}
		.money-exchange .money-content .goods-list .list-wrap .list-item .item-amount[data-v-07f6ffda] {
			color: #ff721f;
			font-size: .55rem;
			display: inline-block;
			margin-right: 1.066px;
			margin-right: .06666667rem;
			margin-bottom: 10px;
		}
		.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, .1), 0 1px 1px 0 rgba(0, 0, 0, .1);
			border-radius: 5px;
		}
		.goods-content{
			line-height: .45rem;
			padding: 0 .2rem;
		}
		.item-name{
			margin-top: .1rem;
		}
		.item-amount{
			margin-top: .2rem;
		}
		.postage{
			font-size: .4rem;
		}
		.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>
</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-header-amount">--%>
<%--				<div data-v-07f6ffda="" class="money-amount">--%>
<%--					<div data-v-07f6ffda="" class="title">可用积分</div>--%>
<%--					<div data-v-07f6ffda="" class="money">${useAmt}</div>--%>
<%--				</div>--%>
<%--				<div data-v-07f6ffda="" class="money-record">商品兑换记录</div>--%>
<%--			</div>--%>
			<div data-v-07f6ffda="" class="money-content">
				<c:if test="${empty goodList }">
					<div data-v-07f6ffda="" class="no-goods">
						<img data-v-07f6ffda="" src="${resourcePath}/images/no-goods.png" alt="">
						<span data-v-07f6ffda="">更多好货，敬请期待</span>
					</div>
				</c:if>
<%--				<div data-v-07f6ffda="" class="no-goods">--%>
<%--					<img data-v-07f6ffda="" src="${resourcePath}/images/no-goods.png" alt="">--%>
<%--					<span data-v-07f6ffda="">更多好货，敬请期待</span>--%>
<%--				</div>--%>
				<c:if test="${not empty goodList }">
					<div data-v-07f6ffda class="goods-list">
<%--						<div data-v-07f6ffda class="list-title" style="margin: .222rem 0 .4444rem 0">--%>
<%--							商品列表--%>
<%--						</div>--%>
						<div data-v-07f6ffda class="list-wrap">
							<c:forEach items="${goodList}" var="good">
								<div data-v-07f6ffda data-index="${good.id}" class="list-item polaroid" onclick="detail(this)" >
									<div data-v-07f6ffda class="item-image">
										<img data-v-07f6ffda src="${good.imgUrl}">
									</div>
									<div class="goods-content">
										<div data-v-07f6ffda class="item-name">
											${good.goodName}
										</div>
										<div data-v-07f6ffda class="item-amount">
											${good.goodPrice}
											<span class="postage" style="display: ${good.isPostage eq 1 ? 'black' : 'none'}">
												包邮
											</span>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
					</div>
				</c:if>
			</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>
		function detail(obj) {
			var g = $(obj).attr("data-index");
			window.location.href= ctx + '/activity/good/detail?token=${token}&g='+g;
		}
		$(".money-record").on('click',function () {
			window.location.href= ctx + '/activity/exchange/view?token=${token}';
		})
	</script>
</body>
</html>