基于手机端web开发----“个人中心”列表及“我喜爱的商品”flowView的实现

最新推荐文章于 2023-04-24 22:12:11 发布

cuifangfang1177

最新推荐文章于 2023-04-24 22:12:11 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/cuifangfang1177/article/details/18364537

版权

memberCenter.js文件：

$(function() {
	$member.initSessionMember();
	if ($app.getCookie(flag) == "true"||$member.entity.bindInfo!='') {
		$("#QQBind_brg").hide();
		$("#QQBind_alert").hide();
	}
	var cardnum = $member.entity.account;
	$longtu.post("d?m=get.userscore&uid=" + $member.entity.uid
			+ "&md=String&s=1", {}, function(text) {
		var obj = JSON.parse(text);
		if (obj.success == "false") {
			$app.showMessage("获取积分失败");
		} else {
			obj.data = obj.data.replace("<response>", "").replace(
					"</response>", "");
			$("#membercenter_score").html("旺币：" + obj.data);
		}
	});
	var length = cardnum.length;
	var num = cardnum.split("");
	for ( var i = 0; i < length; i++) {
		$(".member_card >div").append("<div class='num" + num[i] + "'></div>");
	}
	$("#membercenter_wrapper").height($(window).height() - 268);
	$app.touchScroll($("#membercenter_wrapper"));
	var flag;
	$(".QQBind_tip_cancle").click(function() {
		if ($("#tip_yesOrNo").is(':checked')) {
			$app.setCookie(flag, true);
		} else {
			$app.setCookie(flag, false);
		}
		$("#QQBind_brg").hide();
		$("#QQBind_alert").hide();
	});
	$(".QQBind_tip_OK").click(function() {
		if ($("#tip_yesOrNo").is(':checked')) {
			$app.setCookie(flag, true);
		} else {
			$app.setCookie(flag, false);
		}
		$("#QQBind_brg").hide();
		$("#QQBind_alert").hide();
		$app.showPage(Application.PAGE_QQBIND);
	});
	$("#userinfo").click(function() {
		$app.showPage(Application.PAGE_USERINFO);
	});

	$("#mylove").click(function() {
		$app.showPage(Application.PAGE_ILIKE, null, true);
	});

	$("#feedback").click(function() {
		$app.showPage(Application.PAGE_FEEDBACK,null,true);
	});

	$("#gift").click(function() {
		$app.showPage(Application.PAGE_GIFT, null, true);
	});
	$("#gift_record").click(function() {
		$app.showPage(Application.PAGE_GIFTRECORD, null, true);
	});
	$("#gift_rule").click(function() {
		$app.showPage(Application.PAGE_GIFTRULE);
	});

	$("#talent_show").click(function() {
		$app.showPage(Application.PAGE_MYCELEBRITY, null, true);
	});

	$("#mymessage").click(function() {
		$app.showPage(Application.PAGE_MESSAGE);
	});
	$("#mycoupon").click(function() {
		$app.showPage(Application.PAGE_COUPON_MINE, null, true);
	});
});

memberCenter.html文件：

<html xmlns="http://www.w3.org/1999/xhtml">
	<body>
		<div class="wave"></div>
		<div class="large_text grey_text membercenter_div"
			style="background: #ECDEFF;">
			<div id="membercenter_card" align="center" style="margin-top: 5px;">
				<div class="member_card">
					<div></div>
					<div style="clear: both;"></div>
				</div>
			</div>
			<div id="membercenter_wangbi" style="margin: 5px; font-size: 20px;">
				<span id="membercenter_score"></span>
			</div>
			<div id="membercenter_wrapper" style="position: relative;">
				<div id="membercenter_scroller">
					<div id="membercenter_list" class="menu_box" >
						<div style="margin-left: 15px; margin-right: 15px;">
							<div id="userinfo" style="background-image: url(images/member_center.png); background-size: 25px 25px;">
								会员信息
							</div>
						</div>

						<div style="margin-left: 15px; margin-right: 15px;">
							<div id="mylove" style="background-image: url(images/member_follow_icon.png);">
								我喜欢的
							</div>
						</div>

						<div style="margin-left: 15px; margin-right: 15px;">
							<div id="mycoupon" style="background-image: url(images/cupon_package.png);">
								我的券包
							</div>
						</div>

						<div style="margin-left: 15px; margin-right: 15px;">
							<div id="mymessage" style="background-image: url(images/message.png);">
								我的消息
							</div>
						</div>
						<div style="margin-left: 15px; margin-right: 15px;">
							<div id="feedback" style="background-image: url(images/feedback.png);">
								意见反馈
							</div>
						</div>

						<div style="margin-left: 15px; margin-right: 15px;">
							<div id="gift" style="background-image: url(images/gift.png);">
								旺币兑换
							</div>
						</div>
						<div style="margin-left: 15px; margin-right: 15px;">
							<div id="gift_record" style="background-image: url(images/redeem_points.png);">
								旺币兑换记录
							</div>
						</div>
						<div style="margin-left: 15px; margin-right: 15px;">
							<div id="gift_rule" style="background-image: url(images/gift_rule.png);">
								旺币奖励规则
							</div>
						</div>
						<div style="margin-left: 15px; margin-right: 15px;">
							<div id="talent_show" style="background-image: url(images/talent_show.png);">
								我关注的达人
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--QQBind弹出层-->
			<div id="QQBind_brg"
				style="width: 100%; height: 100%; background: #333; position: absolute; top: 0; left: 0; filter: alpha(opacity =         60); -moz-opacity: 0.6; opacity: 0.6; position: absolute; top: 0; left: 0; display: block;"></div>
			<div id="QQBind_alert"
				style="width: 100%; height: auto; position: absolute; left: 0; top: 0; z-index: 20; display: block;">
				<div
					style="width: 280px; height: auto; margin: 100px auto; border: 3px solid #4d4d4d;">
					<div style="padding: 10px; background-color: #CCCCCC;">
						温馨提示
					</div>
					<div style="background-color: #ECDEFF; padding-top: 10px;">
						<div style="margin-left: 20px;">
							<div>
								1.绑定QQ号码送积分
							</div>
							<div>
								2.绑定QQ号码后能找回会员卡
							</div>
							<div>
								3.绑定QQ号码后能多部手机使用同一会员卡
							</div>
							<input id="tip_yesOrNo" type="checkbox" style="margin: 10px 5px;"
								value="1" />
							不再提示绑定QQ
						</div>

						<div style="text-align: center;">
							<input type="button" value="QQ绑定"
								class="large_text QQBind_tip_OK"
								style="background:url('images/top_bg.png') repeat-x;background-size:4px 40px; border:0px;width: 45%; height: 40px; margin-bottom: 10px;" />
							<input type="button" value="取消"
								class="large_text QQBind_tip_cancle"
								style="background:url('images/top_bg.png') repeat-x;background-size:4px 40px; border:0px;width: 45%; height: 40px; margin-bottom: 10px;" />
						</div>
					</div>
				</div>
			</div>
			<script src="scripts/memberCenter.js" type="text/javascript">
</script>
			<link href="styles/tianwang.css" rel="stylesheet" />
		</div>
	</body>
</html>

ilike.js文件：

function ILikeBrandAdapter() {
	var adapter = new BaseFlowAdapter();
	adapter.applyData = function(flowView, uiItem) {
		var root = uiItem.element;
		var dataObj = uiItem.data;

		// 获得图片所在的DIV
		var imgDiv = root.children("div").eq(0);

		var imgWidth = uiItem.column.width - 6;
		var imgHeight = imgWidth * dataObj.picHeight / dataObj.picWidth;
		// 图片
		var $img = imgDiv.children("img");
		$img.css("width", imgWidth + "px");
		$img.css("height", imgHeight + "px");
		var picUrl = $app.getImage(dataObj.pic, imgWidth);
		$img.attr("src", picUrl);

		// 获得文本内容所在的DIV
		var textDiv = root.children("div").eq(1);

		// brand name
		var $name = textDiv.children("div").eq(0).children("div").eq(0).children("span").eq(1);
		$name.html(dataObj.name);

		// brand category
		var $category = textDiv.children("div").eq(0).children("div").eq(1).children("span").eq(1);
		$category.html(dataObj.category);

		var $cancelILikeImg = textDiv.children("div").eq(1).children("img").eq(0);
		$cancelILikeImg.bind("click", function(event) {
			event.stopPropagation();
			cancelILikeBrand(uiItem);
		});

		uiItem.element.bind("click", function() {
			$app.showPage(Application.PAGE_BRAND_DETAIL, {
				id : uiItem.data.id
			}, true);
		});
	};

	return adapter;
}
function cancelILikeBrand(uiItem) {
	$("#iLike_conform_bg").show();
	$("#iLike_conform").show();
	$(".iLike_conform_OK_brand").show();
	$(".iLike_conform_OK_product").hide();
	$(".iLike_conform_OK_brand").click(function() {
		$longtu.post("d?m=delete.userfollowbrand&brandid=" + uiItem.data.id + "&md=String", {}, function(text) {
			var obj = JSON.parse(text);
			if (obj.success == "true") {
				var pageObj = $app.getPage(Application.PAGE_ILIKE);
				pageObj.fvBrand.removeItem(uiItem);
				$("#iLike_conform_bg").hide();
				$("#iLike_conform").hide();
			} else {
				$("#iLike_conform_bg").hide();
				$("#iLike_conform").hide();
				$app.showMessage("删除失败");
			}
		});
	});
};

function ILikeProductAdapter() {
	var adapter = new BaseFlowAdapter();
	adapter.applyData = function(flowView, uiItem) {
		var root = uiItem.element;
		var dataObj = uiItem.data;

		var tbody = root.children("table").children("tbody");

		// 图片
		var $img = tbody.children("tr").eq(0).children("td").eq(0).children("img");
		$img.css("width", "100px");
		$img.css("height", "100px");
		var picUrl = $app.getImage(dataObj.pic, 100);
		$img.attr("src", picUrl);

		var tdWidth = uiItem.column.width - 6 - 150;
		var nameTd = tbody.children("tr").eq(0).children("td").eq(1);
		nameTd.css("width", tdWidth + "px");
		// product name
		var $name = nameTd.children("span").eq(0);
		$name.html(dataObj.name);

		var priceOrgTd = tbody.children("tr").eq(1).children("td").eq(0);
		priceOrgTd.css("width", tdWidth + "px");
		// product price_Org
		var $price_Org = priceOrgTd.children("span").eq(1);
		$price_Org.html(dataObj.price_Org);

		var priceDiscountTd = tbody.children("tr").eq(2).children("td").eq(0);
		priceDiscountTd.css("width", tdWidth + "px");
		// product price_Discount
		var $price_Discount = priceDiscountTd.children("span").eq(1);
		$price_Discount.html(dataObj.price_Discount);

		var $cancelILikeImg = tbody.children("tr").eq(0).children("td").eq(2).children("img").eq(0);
		$cancelILikeImg.bind("click", function(event) {
			event.stopPropagation();
			cancelILikeProduct(uiItem);
		});

		uiItem.element.bind("click", function(event) {
			$app.showPage(Application.PAGE_PRODUCT_DETAIL, {
				id : uiItem.data.id
			}, true);
		});
	};

	return adapter;
}

function cancelILikeProduct(uiItem) {
	$("#iLike_conform_bg").show();
	$("#iLike_conform").show();
	$(".iLike_conform_OK_brand").hide();
	$(".iLike_conform_OK_product").show();
	$(".iLike_conform_OK_product").click(function() {
		$longtu.post("d?m=delete.userfollowproduct&productid=" + uiItem.data.id + "&md=String", {}, function(text) {
			var obj = JSON.parse(text);
			if (obj.success == "true") {
				var pageObj = $app.getPage(Application.PAGE_ILIKE);
				pageObj.fvProduct.removeItem(uiItem);
				$("#iLike_conform_bg").hide();
				$("#iLike_conform").hide();
			} else {
				$("#iLike_conform_bg").hide();
				$("#iLike_conform").hide();
				$app.showMessage("删除失败");
			}
		});
	});
};

function ilike_loaded() {
	$app.getPage(Application.PAGE_ILIKE).topBar.setTitle("我喜欢的");
	$member.initSessionMember();
	var tabContainer = $("#iLikeContent");
	var pageObj = $app.getPage(Application.PAGE_ILIKE);
	var tabHeight = $app.getContentHeight(Application.PAGE_ILIKE) - $("#ilike_tabNavigator").height() - 15;
	tabContainer.height(tabHeight);
	// TabControl
	var main_tabs = [ {
		id : "likeProduct",
		selected : true,
		mode : TabControl.M_CONTENT,
		contentElement : $("#iLikeProduct_container")
	}, {
		id : "likeShop",
		selected : false,
		mode : TabControl.M_CONTENT,
		contentElement : $("#iLikeBrand_container")
	} ];
	pageObj.tabCtrl = new TabControl(pageObj, tabContainer, main_tabs);
	pageObj.tabCtrl._tabs
	for ( var i = 0; i < pageObj.tabCtrl._tabs.length; i++) {
		pageObj.tabCtrl._tabs[i].contentElement.css("top", $("#ilike_tabNavigator").height() + 13 + "px");
	}
	// Brand FlowView
	var iLikeBrand_query = {
		m : 'get.followbrand',
		md : 'Brand'
	};

	var opts = {
		pageObj : pageObj,
		container : $("#iLikeBrand_fv_container"),
		templateUrl : "b?f=t_iLikeBrand",
		columnCount : 1,
		autoInit : true,
		nodataImg : "images/no_data_thematic.png",
		nodataMsg : "对不起，没有数据",
		adapter : ILikeBrandAdapter
	};
	pageObj.fvBrand = new FlowView(opts, iLikeBrand_query);

	// Product FlowView
	var iLikeProduct_query = {
		m : 'get.followproduct',
		md : 'Product'
	};

	var opts = {
		pageObj : pageObj,
		container : $("#iLikeProduct_fv_container"),
		templateUrl : "b?f=t_iLikeProduct",
		columnCount : 1,
		autoInit : true,
		nodataImg : "images/no_data_product.png",
		nodataMsg : "对不起，没有数据",
		adapter : ILikeProductAdapter
	};
	pageObj.fvProduct = new FlowView(opts, iLikeProduct_query);
	//

	$(".iLike_conform_cancle").click(function() {
		$("#iLike_conform_bg").hide();
		$("#iLike_conform").hide();
	});
}
//
ilike_loaded();

ilike.html文件：

<html xmlns="http://www.w3.org/1999/xhtml">
	<body>
		<table align="center" width="100%" style="background: #EFEFEF;">
			<tr id="ilike_tabNavigator" style="height: 40px">
				<td width="50%" id="likeProduct" align="center">
					<span>商品</span>
				</td>
				<td width="50%" id="likeShop" align="center">
					<span>店铺</span>
				</td>
			</tr>
		</table>
		<div class="wave"></div>
		<div width="100%" id="iLikeContent">
			<div id="iLikeProduct_container">
				<ul id="iLikeProduct_fv_container" class="container" style="padding:0;margin:0;"></ul>
			</div>
			<div id="iLikeBrand_container">
				<ul id="iLikeBrand_fv_container" class="container" style="padding:0;margin:0;"></ul>
			</div>
		</div>
		<!-- 删除提示框 -->
		<div id="iLike_conform_bg"
			style="z-index:2998;width: 100%; height: 100%; background: #333; position: absolute; top: 0; left: 0; filter: alpha(opacity = 60); -moz-opacity: 0.6; opacity: 0.6; display: none;"></div>
		<div id="iLike_conform"
			style="z-index:2999;width: 100%; height: auto; position: absolute; left: 0; top: 0; display: none;">
			<div
				style="width: 310px; height: auto; margin: 100px auto; border: 3px solid #4d4d4d;">
				<div style="padding: 10px; background-color: #CCCCCC;font-size:16px;">
					温馨提示
				</div>
				<div style="background-color: #ECDEFF; padding-top: 10px;">
					<div
						style="margin-left: 20px; margin-right: 20px;margin-bottom:10px; font-size: 16px;">
						确定要删除吗？
					</div>
					<div style="text-align: center;">
						<input type="button" value="是"
							class="large_text iLike_conform_OK_product"
							style="background:url('images/top_bg.png') repeat-x;background-size:4px 40px; border:0px;width: 45%; height: 40px; margin-bottom: 10px;" />
						<input type="button" value="是"
							class="large_text iLike_conform_OK_brand"
							style="background:url('images/top_bg.png') repeat-x;background-size:4px 40px; border:0px;width: 45%; height: 40px; margin-bottom: 10px;" />
						<input type="button" value="否"
							class="large_text iLike_conform_cancle"
							style="background:url('images/top_bg.png') repeat-x;background-size:4px 40px; border:0px;width: 45%; height: 40px; margin-bottom: 10px;" />
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="scripts/ilike.js"></script>
	</body>
</html>

控件布局文件t_iLikeProduct.html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我喜欢的 商品</title>
</head>
<body>
	<div class="boxCont">
		<table class="large_text grey_text" style="border-collapse: collapse;">
			<tbody>
				<tr width="100%">
					<td rowspan="3" >
						<img class="img_item_topbottom_left_radius"/>
					</td>
					<td style="vertical-align: middle; padding: 5px; color: #7F007F; font-size: 12px;">
						<span></span>
					</td>
					<td rowspan="3" align="right" style="vertical-align: middle;">
						<img name="btn_minus_product"
						src="images/me_like_minus.png" class="fv_btn" style="padding-right:5px;" />
					</td>
				</tr>
				<tr>
					<td style="vertical-align: middle; padding: 5px; color: #FF0000;">
						<span>￥</span><span></span>
					</td>
				</tr>
				<tr>
					<td style="vertical-align: middle; padding: 5px; color: #C6C5C6; font-size: 12px; text-decoration: line-through;">
						<span>￥</span><span></span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

t_iLikeBrand文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我喜欢的 店铺</title>
</head>
<body>
	<div class="boxCont">
		<div class="img_item_div">
			<img class="img_item" />
		</div>
		<div class="text_contaner" style="overflow: hidden;">
			<div style="float: left">
				<div class="line" style="max-height: 18px;">
					<span>店名：</span><span></span>
				</div>
				<div class="line">
					<span>主营：</span><span></span>
				</div>
			</div>

			<div style="float:right; margin-right:10px;">
				<img name="btn_minus_brand" src="images/me_like_minus.png"
					class="fv_btn" />
			</div>
		</div></div>
</body>
</html>

效果展示：

cuifangfang1177

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于手机端web开发----“个人中心”列表及“我喜爱的商品”flowView的实现

memberCenter.js文件：$(function() { $member.initSessionMember(); if ($app.getCookie(flag) == "true"||$member.entity.bindInfo!='') { $("#QQBind_brg").hide(); $("#QQBind_alert").hide(); } var car
复制链接

扫一扫