master

分支 (1)

管理

管理

master

jywhweixin_web
/
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<div class="mui-row">
				<div class="mui-col-xs-3">
					<!--<a id="btn-left" class="mui-icon mui-action-menu mui-icon-contact mui-pull-left" href="user-center.html"></a>-->
					<img src="img/index_logo.png" style="height: 44px;padding: 4px 4px 4px 8px;" />
				</div>
				<div class="mui-col-xs-7" style="padding:0;">
					<form action="" onkeydown="if(event.keyCode==13){return false;}">
						<div class="mui-input-row mui-search">
							<input onkeydown="return doSearch(event)" id="hmx-input-search" type="search" class="mui-input-clear" placeholder="">
						</div>
					</form>
				</div>
				<div class="mui-col-xs-2 mui-text-center">
					<!--<span class="mui-icon icon-home"></span>-->
					<img src="img/index_more.png" style="height: 44px;padding:10px 0;display: none;" />
				</div>
			</div>
		</header>

		<nav id="footer" class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar1">
				<span class="mui-icon icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar2">
				<span class="mui-icon icon-rss"></span>
				<span class="mui-tab-label">订阅</span>
			</a>
			<a class="mui-tab-item" href="#tabbar3">
				<span class="mui-icon icon-user"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<div class="mui-content">

			<!-- 测试图片 -->
			<!--<img id="testImg" src="" />-->

			<div id="tabbar1" class="mui-control-content mui-active">
				<div id="slider" class="mui-slider mui-fullscreen" style="height: 38px;position: fixed;top: 44px;z-index: 9999;">
					<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<a class="mui-control-item mui-active" href="#item1mobile">推荐</a>
							<a class="mui-control-item" href="#item2mobile">最新上架</a>
							<a class="mui-control-item" href="#item3mobile">最受欢迎</a>
							<a class="mui-control-item" href="#item4mobile">更多</a>
						</div>
					</div>
				</div>

				<div class="mui-slider-group hmx-index-tab">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div class="mui-slider">
							<div class="mui-slider-group mui-slider-loop">
								<!--支持循环，需要重复图片节点-->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="javascript:window.location.href = $.getContextPath()+'vipPay.html'"><img src="img/index_gallery.png" /></a>
								</div>
								<div class="mui-slider-item">
									<a href="#"><img src="img/index_gallery.png" /></a>
								</div>
								<div class="mui-slider-item">
									<a href="#"><img src="img/index_gallery.png" /></a>
								</div>
								<div class="mui-slider-item">
									<a href="#"><img src="img/index_gallery.png" /></a>
								</div>
								<div class="mui-slider-item">
									<a href="#"><img src="img/index_gallery.png" /></a>
								</div>
								<!--支持循环，需要重复图片节点-->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#"><img src="img/index_gallery.png" /></a>
								</div>
							</div>
						</div>

						<!-- 主页 >推荐>列表视图 -->
						<div id="indexRecommendList">
							<div class="mui-card" style="padding: 8px 8px 0 0;">
								<!--页眉，放置标题-->
								<!--<div class="mui-card-header">页眉</div>-->
								<!--内容区-->
								<div class="mui-card-content">
									<div class="mui-row">
										<div class="mui-col-xs-4 mui-text-center">
											<img class="hmx-list-img-small" src="img/list_image.png" />
											<button type="button" class="mui-btn hmx-btn-orange hmx-btn-orange-left-bottom">订阅</button>
											<span class="hmx-text-md hmx-color-white hmx-text-left-bottom">￥2.00元</span>
										</div>
										<div class="mui-col-xs-4">
											<img class="hmx-list-img-small" src="img/list_image.png" />
											<button type="button" class="mui-btn hmx-btn-orange hmx-btn-orange-left-bottom">订阅</button>
											<span class="hmx-text-md hmx-color-white hmx-text-left-bottom">￥2.00元</span>
										</div>
										<div class="mui-col-xs-4">
											<img class="hmx-list-img-small" src="img/list_image.png" />
											<button type="button" class="mui-btn hmx-btn-orange hmx-btn-orange-left-bottom">订阅</button>
											<span class="hmx-text-md hmx-color-white hmx-text-left-bottom">￥2.00元</span>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-slider">
							<div class="mui-slider-group mui-slider-loop">
								<!--支持循环，需要重复图片节点-->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#"><img src="img/index_new.png" /></a>
								</div>
								<div class="mui-slider-item">
									<a href="#"><img src="img/index_new.png" /></a>
								</div>
								<div class="mui-slider-item">
									<a href="#"><img src="img/index_new.png" /></a>
								</div>
								<!--支持循环，需要重复图片节点-->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#"><img src="img/index_new.png" /></a>
								</div>
							</div>
						</div>

						<div class="mui-card">
							<div class="mui-row" style="line-height: 21px;">
								<div class="mui-col-xs-6">
									<span class="hmx-text-orange icon-caret-right"></span>
									<span class="hmx-test-xs" style="font-weight: 600;margin-left: 4px;">最新上架</span>
								</div>
								<div class="mui-col-xs-6 mui-text-right" onclick="go2LatestMore()">
									<span class="hmx-test-xs" style="">更多</span>
									<span class="hmx-test-xs icon-angle-right"></span>
								</div>
							</div>
						</div>
						<!-- 主页>最新上架>列表视图 -->
						<div id="indexNewestList" class="index-list">

						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-slider">
							<div class="mui-slider-group mui-slider-loop">
								<!--支持循环，需要重复图片节点-->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#"><img src="img/index_new.png" /></a>
								</div>
								<div class="mui-slider-item">
									<a href="#"><img src="img/index_new.png" /></a>
								</div>
								<div class="mui-slider-item">
									<a href="#"><img src="img/index_new.png" /></a>
								</div>
								<!--支持循环，需要重复图片节点-->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#"><img src="img/index_new.png" /></a>
								</div>
							</div>
						</div>

						<div class="mui-card">
							<div class="mui-row" style="line-height: 21px;">
								<div class="mui-col-xs-6">
									<span class="hmx-text-orange icon-caret-right"></span>
									<span class="hmx-test-xs" style="font-weight: 600;margin-left: 4px;">最受欢迎</span>
								</div>
								<div class="mui-col-xs-6 mui-text-right" onclick="go2PopularMore()">
									<span class="hmx-test-xs" style="">更多</span>
									<span class="hmx-test-xs icon-angle-right"></span>
								</div>
							</div>
						</div>
						<!-- 主页>最受欢迎>列表视图 -->
						<div id="indexPopularList" class="index-list">

						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div class="mui-row">
							<ul id="moreSegmentedControl" class="hmx-test-xs hmx-nav">
								<li class="hmx-li-active">专辑</li>
								<!--<li>单曲</li>-->
								<li>收费</li>
								<li>免费</li>
								<li>上架时间</li>
							</ul>
						</div>
						<div class="mui-card">
							<div class="mui-row" style="line-height: 21px;">
								<div class="mui-col-xs-6">
									<span class="hmx-text-orange icon-caret-right"></span>
									<span id="labelMore" class="hmx-test-xs" style="font-weight: 600;margin-left: 4px;">专辑</span>
								</div>
								<div class="mui-col-xs-6 mui-text-right mui-hidden">
									<span class="hmx-test-xs" style="">更多</span>
									<span class="hmx-test-xs icon-angle-right"></span>
								</div>
							</div>
						</div>
						<div id="indexMoreList" class="index-list">

						</div>
					</div>
				</div>
			</div>

			<div id="tabbar2" class="mui-control-content">
				<div id="slider" class="mui-slider mui-fullscreen" style="height: 38px;position: fixed;top: 44px;z-index: 9999;">
					<div id="sliderSegmentedControl2" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<a class="mui-control-item mui-active" href="#listSubscribedAlbum">已订阅专辑</a>
							<!--<a class="mui-control-item" href="#listSubscribedSingle">已订阅单曲</a>-->
						</div>
					</div>
				</div>

				<div class="mui-slider-group hmx-index-tab">
					<div id="listSubscribedAlbum" class="mui-slider-item mui-control-content mui-active index-list" style="margin-top: 4px;">

					</div>
					<div id="listSubscribedSingle" class="mui-slider-item mui-control-content index-list" style="margin-top: 4px;">

					</div>
				</div>
			</div>

			<div id="tabbar3" class="mui-control-content">
				<div class="mui-row">
					<img src="img/mine_bg.png" style="width: 100%;" />
					<img id="wxImageUrl" src="img/mine_avatar.png" style="width: 80px;height: 80px;position: absolute;top: -webkit-calc(50% - 120px);left: -webkit-calc(50% - 40px);border-radius: 40px;" />
					<div style="padding: 0;position: absolute;top: 150px;left: 0;right: 0;">
						<div class="mui-row mui-text-center">
							<img id="iconVip" src="img/vip_account_icon_pressed.png" style="height: 28px;vertical-align:bottom;" />
							<span id="WXNAME" class=" hmx-text-md hmx-color-white">张某某</span>
						</div>
					</div>
				</div>
				<div class="mui-card" style="font-size: 140%;">
					<div onclick="go2Personal()" class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:0 0 8px 0;">
						<div class="mui-col-xs-1">
							<span class="hmx-text-orange icon-user"></span>
						</div>
						<div class="mui-col-xs-9">
							<span class="hmx-test-xs" style="font-weight: 600;margin-left: 4px;color: darkgray;">个人信息</span>
						</div>
						<div class="mui-col-xs-2 mui-text-right">
							<span class="hmx-test-xs icon-angle-right"></span>
						</div>
					</div>
					<div onclick="go2Order()" class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:8px 0;">
						<div class="mui-col-xs-1">
							<span class="hmx-text-orange icon-shopping-cart"></span>
						</div>
						<div class="mui-col-xs-9">
							<span class="hmx-test-xs" style="font-weight: 600;margin-left: 4px;color: darkgray;">我的订单</span>
						</div>
						<div class="mui-col-xs-2 mui-text-right">
							<span class="hmx-test-xs icon-angle-right"></span>
						</div>
					</div>
					<div onclick="go2Vip()" class="mui-row" style="line-height: 21px;border-bottom: 1px solid lightgray;padding:8px 0;">
						<div class="mui-col-xs-1">
							<span class="hmx-text-orange icon-coffee"></span>
						</div>
						<div class="mui-col-xs-9">
							<span class="hmx-test-xs" style="font-weight: 600;margin-left: 4px;color: darkgray;">我的会员</span>
						</div>
						<div class="mui-col-xs-2 mui-text-right">
							<span class="hmx-test-xs icon-angle-right"></span>
						</div>
					</div>
					<div onclick="go2Feedback()" class="mui-row" style="line-height: 21px;padding:8px 0 0 0;">
						<div class="mui-col-xs-1">
							<span class="hmx-text-orange icon-comments"></span>
						</div>
						<div class="mui-col-xs-9">
							<span class="hmx-test-xs" style="font-weight: 600;margin-left: 4px;color: darkgray;">反馈</span>
						</div>
						<div class="mui-col-xs-2 mui-text-right">
							<span class="hmx-test-xs icon-angle-right"></span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>-->
		<script src='js/jquery-2.1.4.min.js'></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function go2detail($row) {
				window.sessionStorage.setItem('$row', JSON.stringify($row));
				window.location.href = 'detail.html';
			};

			function go2Player($row) {
				window.sessionStorage.setItem('$row', JSON.stringify($row));
				window.location.href = 'player.html';
			};

			function go2Feedback() {
				window.location.href = 'feedback.html';
			};

			function go2Order() {
				window.location.href = 'order.html';
			};

			function go2Vip() {
				window.location.href = 'mineVip.html';
			};

			function go2Personal() {
				window.location.href = 'personal.html';
			};

			function go2LatestMore() {
				window.location.href = 'more.html?tag=最新上架';
			};

			function go2PopularMore() {
				window.location.href = 'more.html?tag=最受欢迎';
			};

			function initEvent() {
				$("#hmx-input-search").on('keypress', doSearch);
				$('#footer').on('tap', 'a', function() {
					var current;
					switch($(this).attr('href')) {
						case '#tabbar1':
							current = $('#sliderSegmentedControl').find('a').eq(0);
							break;
						case '#tabbar2':
							current = $('#sliderSegmentedControl2').find('a').eq(0);
							break;
						default:
							break;
					};
					if(current) {
						current.trigger("tap");
						current.siblings().each(function() {
							$(this).removeClass('mui-active');
							$($(this).attr('href')).removeClass('mui-active');
						});
						current.addClass('mui-active');
						$(current.attr('href')).addClass('mui-active');
					}
				});
				$('#sliderSegmentedControl').on('tap', 'a', function() {
					switch($(this).html()) {
						case '推荐':
							getHomePageReommended();
							break;
						case '最新上架':
							getHomePageLatest();
							break;
						case '最受欢迎':
							getHomePageMostPopular();
							break;
						case '更多':
							//事件通知，通知更多页，专辑页签点击事件执行
							$('#moreSegmentedControl').find('li').eq(0).trigger("tap");
							break;
						default:
							break;
					}
				});
				$('#sliderSegmentedControl2').on('tap', 'a', function() {
					switch($(this).html()) {
						case '已订阅专辑':
							getSubscribeAlbum();
							break;
						case '已订阅单曲':
							getSubscribeSong();
							break;
						default:
							break;
					}
				});
				$('#moreSegmentedControl').on('tap', 'li', function() {
					$(this).addClass('hmx-li-active').siblings().removeClass('hmx-li-active');
					$('#labelMore').html($(this).html());
					switch($(this).html()) {
						case '专辑':
							getMoreAlbums();
							break;
						case '单曲':
							getMoreSingleSongs();
							break;
						case '收费':
							getMoreCharge();
							break;
						case '免费':
							getMoreFree();
							break;
						case '上架时间':
							getMoreUpTime();
							break;
						default:
							break;
					}
				});

			};

			function doSearch(event) {
				if(event.keyCode == "13") {
					var KEYW = event.currentTarget.value.trim();
					//需要处理的事情
					if(KEYW.length > 0) {
						alert("搜索关键字：" + KEYW);
						//执行搜索
						window.location.href = 'more.html?tag=search&KEYW=' + KEYW;
					}
				}
			};

			$(function() {
				initEvent();
				initPersonal();
				getHomePageReommended();
				//获得slider插件对象
				var gallery = mui('.mui-slider');
				gallery.slider({
					interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
				});
			});

			function initPersonal() {
				$.ajax({
					type: "get",
					url: $.getContextPath() + "/weixin/getClientUser",
					async: true,
					success: function(r) {
						r = eval('(' + r + ')');
						//						alert(JSON.stringify(r));
						$('#wxImageUrl').attr('src', r.data['WXIMAGEURL']);
						$('#WXNAME').html(r.data['WXNAME']);
					}
				});
				//20161029判断是否为会员且在有效期内
				checkIsVip();
			};

			/**
			 * 首页-推荐(默认查询3条记录)
			 */
			function getHomePageReommended() {
				$('#indexRecommendList').UIListView({
					//					dataUrl: "http://jwangkun.vicp.net/jywhweixin/weixin/front_index/reommended",
					//					ajaxType: "POST",
					dataUrl: "data/front_index/reommended.json",
					itemTplUrl: "tpl/indexRecommendListItem.tpl",
					queryData: {

					},
				});
			};

			/**
			 * 首页-最新上架(默认查询3条记录)
			 */
			function getHomePageLatest() {
				$('#indexNewestList').UIListView({
					//					dataUrl 'http://jwangkun.vicp.net/jywhweixin/weixin/front_index/latest',
					dataUrl: "data/front_index/latest.json",
					itemTplUrl: "tpl/indexNewestListItem.tpl",
				});
			};

			/**
			 * 首页-最受欢迎-专辑(默认查询3条记录)
			 */
			function getHomePageMostPopular() {
				$('#indexPopularList').UIListView({
					//					dataUrl 'http://jwangkun.vicp.net/jywhweixin/weixin/front_index/latest',
					dataUrl: "data/front_index/latest.json",
					itemTplUrl: "tpl/indexNewestListItem.tpl",
				});
			};

			/**
			 * 更多-专辑
			 */
			function getMoreAlbums() {
				$('#indexMoreList').UIListView({
					dataUrl: "data/front_index/latestMore.json",
					itemTplUrl: "tpl/indexNewestListItem.tpl",
				});
			};

			/**
			 * 更多-单曲
			 */
			function getMoreSingleSongs() {
				$('#indexMoreList').UIListView({
					dataUrl: "data/front_index/moreSingleSongs.json",
					itemTplUrl: "tpl/moreSingleSongsListItem.tpl",
				});
			};

			/**
			 * 更多-收费
			 */
			function getMoreCharge() {
				$('#indexMoreList').UIListView({
					dataUrl: "data/front_index/latestMore.json",
					itemTplUrl: "tpl/indexNewestListItem.tpl",
				});
			}

			/**
			 * 更多-免费
			 */
			function getMoreFree() {
				$('#indexMoreList').UIListView({
					dataUrl: "data/front_index/latestMore.json",
					itemTplUrl: "tpl/indexNewestListItem.tpl",
				});
			};

			/**
			 *  更多-上架时间
			 */
			function getMoreUpTime() {
				$('#indexMoreList').UIListView({
					dataUrl: "data/front_index/latestMore.json",
					itemTplUrl: "tpl/indexNewestListItem.tpl",
				});
			};

			/**
			 * 已订阅专辑
			 */
			function getSubscribeAlbum() {
				console.log("^^^^start:加载已订阅专辑……");
				$('#listSubscribedAlbum').UIListView({
					dataUrl: "data/front_subscribed/album.json",
					itemTplUrl: "tpl/listSubscribedAlbumItem.tpl",
				});
			};

			/**
			 * 已订阅单曲
			 */
			function getSubscribeSong() {
				console.log("^^^^start:加载已订阅单曲……");
				$('#listSubscribedSingle').UIListView({
					dataUrl: "data/front_subscribed/audio.json",
					itemTplUrl: "tpl/listSubscribedAudioItem.tpl",
				});
			};

			/**
			 * 20161029判断是否为会员且在有效期内
			 */
			function checkIsVip() {
				$.ajax({
					type: "get",
					url: $.getContextPath() + "/weixin/front_vip/deadline",
					async: true,
					success: function(r) {
						r = eval("(" + r + ")");
						if(r.data[0].status == 1) {
							$('#iconVip').attr('src', 'img/vip_account_icon.png');
						}
					}
				});
			}
		</script>
	</body>

</html>