基于手机端web开发----“个人中心”列表及“我喜爱的商品”flowView的实现
来源：互联网 发布：淘宝法国灰太太正品吗 编辑：程序博客网 时间：2024/05/01 10:20
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;"><divstyle="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;// 获得图片所在的DIVvar 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);// 获得文本内容所在的DIVvar textDiv = root.children("div").eq(1);// brand namevar $name = textDiv.children("div").eq(0).children("div").eq(0).children("span").eq(1);$name.html(dataObj.name);// brand categoryvar $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 namevar $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_Orgvar $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_Discountvar $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);// TabControlvar 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._tabsfor ( var i = 0; i < pageObj.tabCtrl._tabs.length; i++) {pageObj.tabCtrl._tabs[i].contentElement.css("top", $("#ilike_tabNavigator").height() + 13 + "px");}// Brand FlowViewvar 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 FlowViewvar 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;"><divstyle="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;"><divstyle="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>
效果展示：
0 0
- 基于手机端web开发----“个人中心”列表及“我喜爱的商品”flowView的实现
- 基于手机端的web开发-----商场中人气商品flowView的实现
- ecshop用户中心我的订单列表中显示商品的名称
- 我喜爱的音乐
- 我最喜爱的英文歌曲列表(没有整理，比较混乱)
- 基于ecshop的移动端 etouch实现动态获取分类商品列表
- ECSHOP用户中心我的订单显示收货人及商品缩略图
- 用户中心的收藏列表里显示商品缩略图
- Ecshop用户中心的收藏列表里显示商品缩略图
- iOS开发：通讯录之个人中心页面的实现
- 基于vue的个人文档中心
- 我的 或 个人中心 布局文件
- 我最喜爱的十大开发工具
- 我最喜爱的十大开发工具
- 我喜爱的学习网站
- 哲理 我喜爱的文章
- 我喜爱的几个网站
- 我喜爱的计算机书籍
- 开发板如何开启telnet服务
- Uva103 Stacking Boxes 贪心 深搜 +DP思想
- SQL删除部分字段重复
- Thrift交流（二）thrift服务端和客户端实现 Nifty
- Genesis-3D学习手册——20.地形高度
- 基于手机端web开发----“个人中心”列表及“我喜爱的商品”flowView的实现
- 【物联网智能网关-17】.NET Micro Framework之MDK C++二次开发
- 未能找到任何适合于指定的区域性或非特定区域性的资源 - 终极解决方案
- Insert Interval
- linux中GFP_KERNEL
- 2014 工作感悟
- JsonMappingException: failed to lazily initialize及could not initialize异常
- js学习事件-----js模仿手机下拉刷新（1）
- Genesis-3D学习手册——21.地形植被
