基于手机端web开发----“个人中心”列表及“我喜爱的商品”flowView的实现
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("", "").replace(
" ", "");
$("#membercenter_score").html("旺币：" + obj.data);
}
});
var length = cardnum.length;
var num = cardnum.split("");
for ( var i = 0; i < length; i++) {
$(".member_card >div").append("");
}
$("#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文件：
温馨提示
1.绑定QQ号码送积分
2.绑定QQ号码后能找回会员卡
3.绑定QQ号码后能多部手机使用同一会员卡
不再提示绑定QQ
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文件：
商品
店铺
控件布局文件t_iLikeProduct.html：
我喜欢的 商品
![]()
￥
￥
t_iLikeBrand文件：
我喜欢的 店铺
![]()
效果展示：
