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>
效果展示: