Apicloud_(项目)网上书城03_拓展模块实现
Apicloud_(项目)网上书城01_前端页面开发 传送门
Apicloud_(项目)网上书城02_后端数据获取 传送门
Apicloud_(项目)网上书城03_拓展模块实现 传送门
实现商品详情页轮播图
添加商品详情页的静态页面
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>商品详情Window</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} body {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
} header {
position: relative;
width: 100%;
height: 50px;
background-color: #e3007f;
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
} header .right {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 15px;
text-align: center;
} section {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow: auto;
} footer {
width: 100%;
height: 50px;
background-color: black;
} .buy-button {
width: 112px;
height: 40px;
float: right;
margin-top: 5px
} .control {
position: absolute;
top: 12px;
left: 16px;
width: 110px;
height: 25px;
} .minus {
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
} .count {
position: relative;
top: 0;
margin-left: 31px;
margin-right: 31px;
width: auto;
height: 25px;
text-align: center;
line-height: 25px;
color: #444;
font-size: 14px;
background-image: url(../image/count.png);
background-repeat: no-repeat;
background-size: 48px 25px;
background-position: center center;
} .add {
position: absolute;
top: 0;
right: 0;
width: 25px;
height: 25px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>商品详情</h1>
<div class="right" tapmode onclick="fnOpenShareFrame();">分享</div>
</header>
<section></section>
<footer id="footer">
<div class="control">
<img id="minus" src="../image/minus.png" class="minus" onclick="fnMinus();">
<div id="count" class="count">0</div>
<img id="add" src="../image/add.png" class="add" onclick="fnAdd();">
</div>
<img src="../image/buynow.png" class="buy-button">
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { }; </script>
</html>
ware.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>商品详情Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
min-height: 100%;
} section {
height: 100%;
} .info-name {
box-sizing: border-box;
width: 100%;
height: 61px;
padding-top: 8px;
padding-left: 8px;
border-bottom: 1px solid #ddd;
} .info-name .name {
width: 100%;
height: 24px;
line-height: 24px;
color: #444;
font-size: 18px;
} .info-name .description {
width: 100% height: 20px;
line-height: 20px;
color: #888;
font-size: 14px;
} .info-price {
box-sizing: border-box;
width: 100%;
height: 61px;
padding-top: 8px;
padding-left: 8px;
border-bottom: 1px solid #ddd;
} .info-price .price {
width: 100%;
height: 24px;
line-height: 24px;
color: #e3007f;
font-size: 24px;
font-weight: bolder;
} .info-price .other {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
height: 20px;
} .info-price .other div {
width: 100%;
height: 20px;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
line-height: 20px;
font-size: 14px;
color: #888;
} .info-price .other .origin-price {
box-sizing: border-box;
padding-left: 8px;
text-align: left;
} .info-price .other .unit {
box-sizing: border-box;
text-align: center;
} .info-price .other .place {
box-sizing: border-box;
padding-right: 16px;
text-align: right;
} .info-discount {
box-sizing: border-box;
width: 100%;
height: 34px;
border-bottom: 1px solid #ddd;
} .info-discount .name {
display: inline-block;
width: auto;
height: 15px;
margin-top: 8px;
margin-left: 8px;
color: #444;
} .info-discount .value {
display: inline-block;
width: auto;
height: 15px;
line-height: 15px;
margin-top: 3px;
padding: 4px;
border-radius: 15px;
box-shadow: 0 1px 1px 1px #eee;
color: #fff;
background-color: #e3007f;
} .push {
position: relative;
box-sizing: border-box;
padding-top: 8px;
width: 100%;
height: 60px;
text-align: center;
color: #888;
font-size: 12px;
} .push .top {
height: 24px;
line-height: 24px;
} .push .bottom {
height: 20px;
line-height: 20px;
}
</style>
</head> <body>
<section>
<div id="picture" class="picture"></div>
<div class="info-name">
<div id="wareName" class="name">鹿鼎记</div>
<div id="description" class="description">描写了一个出身社会最底层的少年</div>
</div>
<div class="info-price">
<div id="price" class="price">¥18.9</div>
<div class="other">
<div class="origin-price">
<del id="originPrice">原价：¥99.8</del>
</div>
<div id="unit" class="unit">规格：4本</div>
<div id="detail" class="place">产地：中国</div>
</div>
</div>
<div class="info-discount">
<div class="name">优惠活动：</div>
<div class="value">全场满49元包邮</div>
</div>
<div class="push">
<div class="top">“亚当和夏娃都无法抵挡的禁果诱惑”</div>
<div class="bottom">下滑查看商品详情</div>
</div>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript"> </script>
</html>
ware_frame.html
在商品列表模块中添加点击事件：
<div class="ware" tapmode onclick=fnOpenWare('{{=ware.id}}')>
在ware_frame.html中的script标签下添加函数
在ware.html中打开时将商品ID参数传入到frame中，这样就可以在商品详情frame中使用api.PageParam.wareID来获取当前书本ID了
function fnOpenWare(wareId_){
api.openWin({
name: 'ware',
url: './ware.html',
pageParam: {
wareId: 'wareId_'
}
});
}
在ware_frame.html中的script标签下插入如下代码：
apiready = function() {
getWareInfo(api.pageParam.wareId);
};
function getWareInfo(wareId_){
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
var params={
fields:{},
where:{
id:wareId_
},
skip:0,
limit:1,
include:['wareInfoPointer']
}
params=$api.jsonToStr(params);
api.ajax({
url: 'http://d.apicloud.com/mcm/api/ware?filter='+params,
method: 'get',
headers: {
"X-APICloud-AppId":"A6099255481782",
"X-APICloud-AppKey":appKey,
}
},function(ret, err){
if (ret) {
fnUpdateWareInfo( ret[0] ) ;
} else {
alert( JSON.stringify( err ) );
}
});
}
// 更新书本详情展示
function fnUpdateWareInfo(ware_) {
// 书本名称
var wareName = $api.byId('wareName');
wareName.innerHTML = ware_.name;
// 书本描述
var description = $api.byId('description');
description.innerHTML = ware_.description;
// 书本价格
var price = $api.byId('price');
price.innerHTML = '￥' + ware_.price;
// 书本原价
var originPrice = $api.byId('originPrice');
originPrice.innerHTML = '原价：￥' + ware_.originPrice;
// 书本规格
var unit = $api.byId('unit');
unit.innerHTML = '产地：' + ware_.unit;
// 书本产地
var detail = $api.byId('detail');
detail.innerHTML = '产地：' + ware_.wareInfo.detail;
这里首先通过api.ajax()来获取商品信息，然后执行fnUpdateWareInfo()来显示信息
在显示轮播图的位置插入占位元素：
<div id="picture" class="picture"></div>
修改apiready事件函数内容
apiready = function(){
var picture = $api.byId('picture');
picture.style.width = api.winWidth + 'px';
picture.style.height = api.winWidth + 'px';
var rect = $api.offset(picture);
// 引入UIScrollPicture模块，并指定位置和宽高
UIScrollPicture = api.require('UIScrollPicture');
UIScrollPicture.open({
rect: {
x: rect.l,
y: rect.t,
w: rect.w,
h: rect.h
},
data: {
paths: [
'widget://image/default_rect.png',
'widget://image/default_rect.png'
]
},
styles: {
caption: {
height: 35,
color: '#E0FFFF',
size: 13,
bgColor: '#696969',
position: 'bottom'
},
indicator: {
align: 'center',
color: '#FFFFFF',
activeColor: '#DA70D6'
}
},
placeholderImg: 'widget://image/default_rect.png',
contentMode: 'scaleToFill',
interval: 5,
fixedOn: api.frameName,
loop: true,
fixed: false
}, function(ret, err) {
if (ret) {
//alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
getWareInfo(api.pageParam.wareId);
};
var UIScrollPicture;
function getWareInfo(wareId_){
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
var params={
fields:{},
where:{
id:wareId_
},
skip:0,
limit:1,
include:['wareInfoPointer']
}
params=$api.jsonToStr(params);
api.ajax({
url: 'http://d.apicloud.com/mcm/api/ware?filter='+ params,
method: 'get',
headers: {
"X-APICloud-AppId":"A6099255481782",
"X-APICloud-AppKey":appKey
}
},function(ret, err){
if (ret) {
fnUpdateWareInfo( ret[0] ) ;
alert("成功！");
console.log("成功");
} else {
}
});
}
//
function fnUpdateWareInfo(ware_) {
// 书本名称
var wareName = $api.byId('wareName');
wareName.innerHTML = ware_.name;
// 书本描述
var description = $api.byId('description');
description.innerHTML = ware_.description;
// 书本价格
var price = $api.byId('price');
price.innerHTML = '￥' + ware_.price;
// 书本原价
var originPrice = $api.byId('originPrice');
originPrice.innerHTML = '原价：￥' + ware_.originPrice;
// 书本规格
var unit = $api.byId('unit');
unit.innerHTML = '产地：' + ware_.unit;
// 书本产地
var detail = $api.byId('detail');
detail.innerHTML = '产地：' + ware_.wareInfo.detail;
// 更新轮播图中的图片
var paths = [];
for (var i = 0; i < 6; i++) {
var key = "picture"+i;
if (ware_.wareInfo[key]) {
paths.push(ware_.wareInfo[key].url);
}
}
UIScrollPicture.reloadData({
data: {
paths:paths
}
});
}
发现有错的时候使用alert("xxx")和console.log("xxx")能解决很多方法！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
header {
width: 100%;
height: 130px;
box-sizing: border-box;
padding: 4px 10px;
} header .banner {
width: 100%;
height: 100%;
} section {
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 8px;
} .content {
width: 100%;
height: 100%;
} .ware {
position: relative;
width: 100%;
height: 145px;
box-sizing: border-box;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #d1d1d1;
} .ware .thumbnail {
position: absolute;
top: 20px;
left: 0px;
height: 100px;
width: 100px;
} .ware .info {
width: 100%;
height: 114px;
box-sizing: border-box;
padding-left: 112px;
padding-right: 28px;
} .ware .info .name {
width: 100%;
height: 15px;
color: #555555;
margin-top: 14px;
font-size: 15px;
} .ware .info .description {
margin-top: 10px;
width: 100%;
height: 13px;
font-size: 13px;
color: #9d9d9d;
} .ware .info .price-tag {
margin-top: 10px;
width: 100%;
height: 12px;
font-size: 12px;
vertical-align: top;
} .ware .info .price-tag .price {
color: #ffaf49;
} .ware .info .price-tag .unit {
font-size: 8px;
color: #ffaf49;
} .ware .info .origin-price {
margin-top: 5px;
width: 100%;
height: 10px;
font-size: 10px;
color: #d3d3d3;
} .ware .control {
position: absolute;
width: 110px;
height: 23px;
right: 8px;
top:90px;
} .ware .control .add {
position: absolute;
top: 0;
right: 0;
width: 23px;
height: 23px;
z-index: 2;
} .push-status {
width: 100%;
height: 40px;
font-size: 16px;
color: #888;
line-height: 40px;
text-align: center;
background-color: #fff;
padding-top: 420px; } .active {
opacity: 0.7;
}
</style>
</head>
<body>
<header id="header">
<img id="banner" class="banner" src="../image/adver2.jpg">
</header>
<section id="list">
<div class="ware" tapmode onclick="fnOpenWare('{{=ware.id}}')">
<div class="content">
<img class="thumbnail" src="../image/book1.png">
<div class="info">
<div class="name">安迪生童话</div>
<div class="description">描述：这是一本很浪漫的童话故事</div>
<div class="price-tag">
<span class="prive">Y100</span>
<span class="unit">/本</span>
</div>
<div class="origin-price">图书价:
<del>Y110</del>
</div>
</div>
<div class="control">
<img class="add" src="../image/add.png">
</div>
</div>
</div>
</section>
<script type="text/template" id="wareTemplate">
{{~it:ware:index}}
<div class="ware" tapmode onclick="fnOpenWare('{{=ware.id}}')">
<div class="content">
<img onload="fnLoadImage(this)" data-url="{{=ware.thumbnail.url}}" class="thumbnail" src="../image/default_rect.png">
<div class="info">
<div class="name">{{=ware.name}}</div>
<div class="description">{{=ware.description}}</div>
<div class="price-tag">
<span class="price">￥{{=ware.price}}</span>
<span class="unit">/{{=ware.unit}}</span>
<div>
<div class="origin-price">书店：
<del>￥{{=ware.originPrice}}</del>
</div>
</div>
<div class="control">
<img class="add" src="../image/add.png">
</div>
</div>
</div>
{{~}}
</script>
<div class="push-status" id="pushStatus">上拉加载更多</div> </body> <script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/APICloud-rest.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript">
apiready = function(){
fnLoadWares(); api.setRefreshHeaderInfo({
loadingImg: 'widget://image/refresh.png',
bgColor: '#fff',
textColor: '#e1017e',
showTime: true
}, function(ret, err) {
// 刷新商品列表
fnLoadWares();
}); api.addEventListener({
name:'scrolltobottom',
extra:{
threshold:300//距离底部患有多少触发scrolltobottom事件
},function(ret,err){
//获取更多的商品
fnLoadWares(true);
}
}); } // 实现商品列表的图片缓存
function fnLoadImage(ele_) {
var dataUrl = $api.attr(ele_, 'data-url');
// 缓存data-url所指定的图片
if (dataUrl) {
api.imageCache({
url: dataUrl
}, function(ret, err) {
if (ret) {
ele_.src = ret.url;
}
});
}
} function fnOpenWare(wareId_){
api.openWin({
name: 'ware',
url: './ware.html',
pageParam: {
wareId: wareId_
}
});
} var skip = 0;
var limit = 5;
function fnLoadWares(more){
if(more){
skip+=limit;
}else{
skip=0;
}
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
var params = {
fields: {},
where: {
supportAreaId: "56c80e0c789b068408ab5a6f",
wareTypeId: api.pageParam.wareTypeId
},
skip: 0,
limit: 5
};
api.ajax({
url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr(params),
method: 'get',
headers: {
"X-APICloud-AppId": "A6099255481782",
"X-APICloud-AppKey":appKey
}
}, function(ret, err) {
if(ret){
var strTemplate = $api.html
(
$api.byId('wareTemplate')
);
var fnTemplate = doT.template(strTemplate);
strTemplate = fnTemplate(ret);
var list = $api.byId('list');
if(more){
$api.append(list, strTemplate);
}else{
$api.html(list, strTemplate);
}
api.refreshHeaderLoadDone();
}
else{
//alert(JSON.stringify(err));
}
}
);
} </script> </html>
main_frame.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>商品详情Window</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} body {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
} header {
position: relative;
width: 100%;
height: 50px;
background-color: #ffaf49;
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
} header .right {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 15px;
text-align: center;
} section {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow: auto;
} footer {
width: 100%;
height: 50px;
background-color: black;
} .buy-button {
width: 112px;
height: 40px;
float: right;
margin-top: 5px
} .control {
position: absolute;
top: 12px;
left: 16px;
width: 110px;
height: 25px;
} .minus {
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
} .count {
position: relative;
top: 0;
margin-left: 31px;
margin-right: 31px;
width: auto;
height: 25px;
text-align: center;
line-height: 25px;
color: #ffaf49;
font-size: 14px;
background-image: url(../image/count.png);
background-repeat: no-repeat;
background-size: 48px 25px;
background-position: center center;
} .add {
position: absolute;
top: 0;
right: 0;
width: 25px;
height: 25px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>商品详情</h1>
<div class="right" tapmode onclick="fnOpenShareFrame();">分享</div>
</header>
<section></section>
<footer id="footer">
<div class="control">
<img id="minus" src="../image/minus.png" class="minus" onclick="fnMinus();">
<div id="count" class="count">0</div>
<img id="add" src="../image/add.png" class="add" onclick="fnAdd();">
</div>
<img src="../image/buynow.png" class="buy-button">
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
// 处理沉浸式效果，计算header和footer的高度
var header = $api.byId('header');
var footer = $api.byId('footer'); var headerH = $api.fixStatusBar(header);
var footerH = $api.fixTabBar(footer); // 更新商品数量
count = $api.byId('count');
count.innerHTML = api.pageParam.wareCount; // 打开商品详情Frame
api.openFrame({
name: 'ware_frame',
url: './ware_frame.html',
rect: {
marginTop: headerH,
marginBottom: footerH,
w: 'auto'
},
pageParam: {
wareId: api.pageParam.wareId
},
bounces: true
}); // 打开mini购物车Frame
api.openFrame({
name: 'minicart_frame',
url: './minicart_frame.html',
rect: {
x: 0,
y: api.winHeight - 55 - footerH,
w: 150,
h: 34
},
bounces: false // 关闭弹动
}); // 将mini购物车Frame放置在首页Window所有Frame的最上层
api.bringFrameToFront({
from: 'minicart_frame'
});
}; </script> </html>
ware.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>商品详情Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
min-height: 100%;
} section {
height: 100%;
} .info-name {
box-sizing: border-box;
width: 100%;
height: 61px;
padding-top: 8px;
padding-left: 8px;
border-bottom: 1px solid #ddd;
} .info-name .name {
width: 100%;
height: 24px;
line-height: 24px;
color: #444;
font-size: 18px;
} .info-name .description {
width: 100% height: 20px;
line-height: 20px;
color: #888;
font-size: 14px;
} .info-price {
box-sizing: border-box;
width: 100%;
height: 61px;
padding-top: 8px;
padding-left: 8px;
border-bottom: 1px solid #ddd;
} .info-price .price {
width: 100%;
height: 24px;
line-height: 24px;
color: #ffaf49;
font-size: 24px;
font-weight: bolder;
} .info-price .other {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
height: 20px;
} .info-price .other div {
width: 100%;
height: 20px;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
line-height: 20px;
font-size: 14px;
color: #ffaf49;
} .info-price .other .origin-price {
box-sizing: border-box;
padding-left: 8px;
text-align: left;
} .info-price .other .unit {
box-sizing: border-box;
text-align: center;
} .info-price .other .place {
box-sizing: border-box;
padding-right: 16px;
text-align: right;
} .info-discount {
box-sizing: border-box;
width: 100%;
height: 34px;
border-bottom: 1px solid #ddd;
} .info-discount .name {
display: inline-block;
width: auto;
height: 15px;
margin-top: 8px;
margin-left: 8px;
color: #ffaf49;
} .info-discount .value {
display: inline-block;
width: auto;
height: 15px;
line-height: 15px;
margin-top: 3px;
padding: 4px;
border-radius: 15px;
box-shadow: 0 1px 1px 1px #eee;
color: #fff;
background-color: #ffaf49;
} .push {
position: relative;
box-sizing: border-box;
padding-top: 8px;
width: 100%;
height: 60px;
text-align: center;
color: #ffaf49;
font-size: 12px;
} .push .top {
height: 24px;
line-height: 24px;
} .push .bottom {
height: 20px;
line-height: 20px;
}
</style>
</head> <body>
<section>
<div id="picture" class="picture"></div>
<div class="info-name">
<div id="wareName" class="name">鹿鼎记</div>
<div id="description" class="description">描写了一个出身社会最底层的少年</div>
</div>
<div class="info-price">
<div id="price" class="price">¥18.9</div>
<div class="other">
<div class="origin-price">
<del id="originPrice">原价：¥99.8</del>
</div>
<div id="unit" class="unit">规格：4本</div>
<div id="detail" class="place">产地：中国</div>
</div>
</div>
<div class="info-discount">
<div class="name">优惠活动：</div>
<div class="value">全场满49元包邮</div>
</div>
<div class="push">
<div class="top">“亚当和夏娃都无法抵挡的禁果诱惑”</div>
<div class="bottom">下滑查看商品详情</div>
</div>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript"> apiready = function(){
var picture = $api.byId('picture');
picture.style.width = api.winWidth + 'px';
picture.style.height = api.winWidth + 'px';
var rect = $api.offset(picture); // 引入UIScrollPicture模块，并指定位置和宽高 UIScrollPicture = api.require('UIScrollPicture');
UIScrollPicture.open({
rect: {
x: rect.l,
y: rect.t,
w: rect.w,
h: rect.h
},
data: {
paths: [
'widget://image/default_rect.png',
'widget://image/default_rect.png'
]
},
styles: {
caption: {
height: 35,
color: '#E0FFFF',
size: 13,
bgColor: '#696969',
position: 'bottom'
},
indicator: {
align: 'center',
color: '#FFFFFF',
activeColor: '#DA70D6'
}
},
placeholderImg: 'widget://image/default_rect.png',
contentMode: 'scaleToFill',
interval: 5,
fixedOn: api.frameName,
loop: true,
fixed: false
}, function(ret, err) {
if (ret) {
//alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
}); getWareInfo(api.pageParam.wareId); }; var UIScrollPicture; function getWareInfo(wareId_){
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
var params={
fields:{},
where:{
id:wareId_
},
skip:0,
limit:1,
include:['wareInfoPointer']
}
params=$api.jsonToStr(params);
api.ajax({
url: 'http://d.apicloud.com/mcm/api/ware?filter='+ params,
method: 'get',
headers: {
"X-APICloud-AppId":"A6099255481782",
"X-APICloud-AppKey":appKey
}
},function(ret, err){
if (ret) {
fnUpdateWareInfo( ret[0] ) ;
alert("成功！");
console.log("成功");
} else { }
}); } //
function fnUpdateWareInfo(ware_) { // 书本名称
var wareName = $api.byId('wareName');
wareName.innerHTML = ware_.name; // 书本描述
var description = $api.byId('description');
description.innerHTML = ware_.description; // 书本价格
var price = $api.byId('price');
price.innerHTML = '￥' + ware_.price; // 书本原价
var originPrice = $api.byId('originPrice');
originPrice.innerHTML = '原价：￥' + ware_.originPrice; // 书本规格
var unit = $api.byId('unit');
unit.innerHTML = '产地：' + ware_.unit; // 书本产地
var detail = $api.byId('detail');
detail.innerHTML = '产地：' + ware_.wareInfo.detail; // 更新轮播图中的图片
var paths = [];
for (var i = 0; i < 6; i++) {
var key = "picture"+i;
if (ware_.wareInfo[key]) {
paths.push(ware_.wareInfo[key].url);
}
}
UIScrollPicture.reloadData({
data: {
paths:paths
}
}); } </script>
</html>
ware_frame.html
使用UIInput实现原生输入框
打开login_frame.html，将HTML的用户名输入框替换为占位</div><div>标签，这个标签的位置就是之后放置UIInput的位置，它的id是“username”
修改apiready事件函数内容
var username;
apiready = function() {
// 用户名输入框模块
var usernameInput = $api.byId('username');
var usernameOffset = $api.offset(usernameInput);
var UIInput = api.require('UIInput');
UIInput.open({
rect: {
x: usernameOffset.l,
y: usernameOffset.t,
w: usernameOffset.w,
h: usernameOffset.h
},
styles: {
bgColor: '#fff',
size: 16,
color: '#000',
placeholder: {
color: '#ccc'
}
},
autoFocus: true,
maxRows: 1,
placeholder: '用户名',
keyboardType: 'default',
fixedOn: api.frameName
}, function(ret, err) {
if(ret.eventType==="change"){
UIInput.value(ret.id,function(ret){
username=ret.msg;
});
}
});
};
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>登录Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {
text-align: center;
} .row {
width: auto;
height: 70px;
box-sizing: border-box;
margin-left: 32px;
margin-right: 32px;
padding-top: 40px;
border-bottom: 1px solid #888;
} .input {
width: 100%;
height: 20px;
border: none;
outline: none;
font-size: 16px;
line-height: 20px;
} .btn {
width: auto;
height: 50px;
margin-left: 32px;
margin-right: 32px;
margin-top: 32px;
background-color: #ffaf45;
line-height: 50px;
color: #fff;
font-size: 24px;
text-align: center;
border-radius: 8px;
} .btn-third-party {
display: inline-block;
width: auto;
height: 50px;
box-sizing: border-box;
margin-top: 32px;
margin-left: auto;
margin-right: auto;
padding: 8px 8px 8px 36px;
font-size: 20px;
color: #888;
line-height: 32px;
text-align: left;
border: 1px solid #aaa;
background-image: url(../image/share_friend.png);
background-repeat: no-repeat;
background-size: auto 20px;
background-position: 8px center;
border-radius: 8px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<div class="row">
<input id="username" class="input" type="text" placeholder="用户名">
</div>
<div class="row">
<input id="password" class="input" type="password" placeholder="密码">
</div>
<div class="btn" tapmode="highlight" onclick="fnLogin();">登录</div>
<div class="btn-third-party">使用微信登录</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/APICloud-rest.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">
apiready = function() { }; function fnLogin(){
var username = $api.byId("username");
var password = $api.byId("password");
var vusername = $api.val(username);
var vpassword = $api.val(password);
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now api.ajax({
url: 'https://d.apicloud.com/mcm/api/user/login',
method: 'post',
headers: {
"X-APICloud-AppId": "A6099255481782",
"X-APICloud-AppKey":appKey,
},
data: {
values: {
username:vusername,
password:vpassword
}
}},
function (ret,err){
if(ret&&ret.userId){
$api.setStorage('userInfo', ret);
api.closeToWin({
name: 'main'
});
}else{
alert("登陆失败！");
}
}
);
} </script> </html>
login_frame.html
实现三级联动的城市选择器
将地址列表的静态页面address.html和addreee_frame.html静态页面和city.json加载到项目中
将地址选择器setaddress.html和setaddress_frame.html一起加载到项目中
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>收货地址</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #e3007f
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
} header .right {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 15px;
text-align: center;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>收货地址</h1>
<div class="right" tapmode onclick="fnOpenSetAddressWin();">添加</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { }; </script> </html>
address.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>收货地址Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html {
height: 100%;
} body {
min-height: 100%;
background-color: #f0f0f0;
} .list {
display: block;
width: 100%;
height: auto;
} .list .address {
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
margin-bottom: 1px;
padding: 8px 16px;
background-color: #fff;
} .list .address .icon {
position: absolute;
top: 21px;
left: 16px;
width: 19px;
height: 24px;
background-image: url(../image/icon_address.png);
background-repeat: no-repeat;
background-size: auto 20px;
background-position: center center;
} .list .address .sign {
display: none;
position: absolute;
top: 45px;
left: 8px;
width: 35px;
height: 14px;
line-height: 14px;
font-size: 12px;
color: #444;
text-align: center;
} .list .address .sign-1 {
display: block;
} .list .address .info {
position: relative;
box-sizing: border-box;
padding-left: 36px;
padding-right: 28px;
width: 100%;
height: auto;
} .list .address .info .top {
position: relative;
box-sizing: border-box;
width: 100%;
height: 32px;
color: #444;
line-height: 32px;
font-size: 14px;
} .list .address .info .top .consignee {
display: inline;
width: auto;
} .list .address .info .top .mobile {
display: inline;
width: auto;
margin-left: 16px;
} .list .address .info .bottom {
position: relative;
width: 100%;
min-height: 32px;
line-height: 32px;
color: #888;
font-size: 14px;
} .list .address .info .bottom .type {
display: inline;
width: auto;
color: #e3007f;
font-weight: bolder;
} .list .address .info .bottom .text {
display: inline;
width: auto;
} .list .address .arrow {
position: absolute;
right: 16px;
top: 32px;
width: 8px;
height: 16px;
background-image: url(../image/item_user_address_right.png);
background-repeat: no-repeat;
background-size: 8px 16px;
background-position: right center;
} .empty {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
background-image: url(../image/address_empty.png);
background-repeat: no-repeat;
background-size: auto 93px;
background-position: center 50px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<section id="list" class="list">
<!-- <div class="address">
<div class="icon"></div>
<div class="sign">[默认]</div>
<div class="info">
<div class="top">
<div class="consignee">收货人：李小潞</div>
<div class="mobile">13888888888</div>
</div>
<div class="bottom">
<div class="type">[家庭]</div>
<div class="text">北京市海淀区</div>
</div>
</div>
<div class="arrow"></div>
</div> -->
</section>
<section id="empty" class="empty"></section>
</body>
<script type="text/template" id="template">
{{~it:value:index}}
<div class="address" tapmode onclick="fnOpenSetAddressWin('{{=index}}');">
<div class="icon"></div>
{{?value.isDefault == true}}
<div class="sign sign-1">[默认]</div>
{{??}}
<div class="sign">[默认]</div>
{{?}}
<div class="info">
<div class="top">
<div class="consignee">收货人：{{=value.name}}</div>
<div class="mobile">{{=value.mobile}}</div>
</div>
<div class="bottom">
<div class="type">[{{=types[parseInt(value.type)]}}]</div>
<div class="text">{{=value.address}}</div>
</div>
</div>
<div class="arrow"></div>
</div>
{{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript">
apiready = function() { }; </script> </html>
address_frame.html
[{
"name": "福建省",
"sub": [{
"name": "泉州市"
}, {
"name": "厦门市"
}]
}, {
"name": "河南省",
"sub": [{
"name": "郑州市",
"sub": [{
"name": "中原区"
}, {
"name": "金水区"
}]
}, {
"name": "驻马市",
"sub": [{
"name": "西平县"
}, {
"name": "泌阳县"
}]
}]
}]
city.json
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>添加收货地址</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
position: relative;
width: 100%;
height: 50px;
background-color: #e3007f
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
} header .right {
display: none;
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 15px;
text-align: center;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>收货地址</h1>
<div id="right" class="right" tapmode onclick="fnDelete();">删除</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { }; </script>
</html>
setaddress.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>添加收货地址Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} body {
background-color: #eee;
} header {
width: 100%;
height: 60px;
margin-bottom: 1px;
background-color: #fff;
} header .select {
position: absolute;
width: 16px;
height: 16px;
top: 22px;
left: 16px;
background-image: url(../image/select_off.png);
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
} header .select-on {
background-image: url(../image/select_on.png);
} header .text {
box-sizing: border-box;
width: 100%;
height: 60px;
padding-left: 40px;
line-height: 60px;
font-size: 20px;
color: #444;
text-align: left;
} section {
height: auto;
width: 100%;
} section .option {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
box-sizing: border-box;
width: 100%;
height: 60px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 1px;
background-color: #fff;
} section .option .name {
width: auto;
line-height: 60px;
} section .option .input {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 60px;
box-sizing: border-box;
padding-top: 22px;
} section .option .input input {
font-size: 14px;
width: 100%;
height: 20px;
line-height: 14px;
vertical-align: top;
border: none;
outline: none;
} section .option .select {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 60px;
line-height: 60px;
} section .option .arrow-right-highlight {
position: absolute;
right: 16px;
top: 22px;
width: 8px;
height: 16px;
line-height: 60px;
background-image: url(../image/item_user_address_right.png);
background-repeat: no-repeat;
background-size: 8px 16px;
background-position: right center;
} section .option .multi-select {
box-sizing: border-box;
padding-top: 11px;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 60px;
} section .option .multi-select .item {
display: inline-block;
width: auto;
height: 30px;
padding: 4px 8px;
color: #888;
font-size: 18px;
text-align: center;
line-height: 30px;
border-radius: 19px;
border: 1px solid #888;
} section .option .multi-select .selected {
color: #e3007f;
border: 1px solid #e3007f;
} footer {
margin-top: 16px;
width: 100%;
height: 50px;
} footer .btn {
margin-left: 100px;
margin-right: 100px;
height: 44px;
background-color: #e3007f;
border-radius: 22px;
text-align: center;
font-size: 18px;
color: #fff;
line-height: 44px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<header>
<div id="isDefault" class="select select-on" topmode onclick="fnSetDefault(true);"></div>
<div class="text">设为默认地址</div>
</header>
<section>
<div class="option">
<div class="name">收货人：</div>
<div class="input">
<input id="consignee" type="text" placeholder="点击输入收货人姓名">
</div>
</div>
<div class="option">
<div class="name">手机号码：</div>
<div class="input">
<input id="mobile" type="text" placeholder="点击输入收货人手机号码">
</div>
</div>
<div class="option" tapmode onclick="fnOpenActionSelector();">
<div class="name">所在区域：</div>
<div id="area" class="select">点击选择收货所在的区域</div>
<div class="arrow-right-highlight"></div>
</div>
<div class="option" tapmode onclick="fnOpenSetAddressDetailWin();">
<div class="name">具体地址：</div>
<div id="focus" class="select">点击选择具体的小区或写字楼</div>
<div class="arrow-right-highlight"></div>
</div>
<div class="option">
<div class="name">楼号门牌：</div>
<div class="input">
<input id="house" type="text" placeholder="点击输入楼号门牌（例A座3单元1201">
</div>
</div>
<div class="option">
<div class="name">地址类型：</div>
<div id="type" class="multi-select">
<div class="item selected" tapmode onclick="fnSelectAddressType(0)">公司</div>
<div class="item" tapmode onclick="fnSelectAddressType(1)">住宅</div>
<div class="item" tapmode onclick="fnSelectAddressType(2)">学校</div>
<div class="item" tapmode onclick="fnSelectAddressType(3)">其它</div>
</div>
</div>
</section>
<footer>
<div class="btn" tapmode onclick="fnSave();">保存</div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { }; </script>
</html>
setaddress_frame.html
在setaddress_frame中为点击选择收货所在区域比分注册点击事件
<div class="option" tapmode onclick="fnOpenActionSelector();">
<div class="name">所在区域：</div>
<div id="area" class="select">点击选择收货所在的区域</div>
<div class="arrow-right-highlight"></div>
</div>
在<script>标签中添加fnOpenActionSelector()函数事件
function fnOpenActionSelector() {
mobile.blur();
consignee.blur();
var UIActionSelector = api.require('UIActionSelector');
UIActionSelector.open({
datas: 'widget://res/city.json',
layout: {
row: 5,
col: 3,
height: 30,
size: 12,
sizeActive: 14,
rowSpacing: 5,
colSpacing: 10,
maskBg: 'rgba(0,0,0,0.2)',
bg: '#fff',
color: '#888',
colorActive: '#f00',
colorSelected: '#f00'
},
animation: true,
cancel: {
text: '取消',
size: 12,
w: 90,
h: 35,
bg: '#fff',
bgActive: '#ccc',
color: '#888',
colorActive: '#fff'
},
ok: {
text: '确定',
size: 12,
w: 90,
h: 35,
bg: '#fff',
bgActive: '#ccc',
color: '#888',
colorActive: '#fff'
},
title: {
text: '请选择',
size: 12,
h: 44,
bg: '#eee',
color: '#888'
},
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
var area = $api.byId('area');
area.innerHTML = ret.level1 + ret.level2 + (ret.level3 ? ret.level3 : '');
} else {
alert(JSON.stringify(err));
}
});
}
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>收货地址</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
} header .right {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 15px;
text-align: center;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>收货地址</h1>
<div class="right" tapmode onclick="fnOpenSetAddressWin();">添加</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header'); var headerH = $api.fixStatusBar(header); // 打开收货地址Frame
api.openFrame({
name: 'address_frame',
url: './address_frame.html',
rect: {
marginTop: headerH,
w: 'auto',
h: 'auto'
},
bounces: true
});
}; // 打开添加收货地址Window
function fnOpenSetAddressWin () {
api.openWin({
name: 'setaddress',
url: './setaddress.html'
});
}
</script> </html>
address.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>收货地址Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html {
height: 100%;
} body {
min-height: 100%;
background-color: #f0f0f0;
} .list {
display: block;
width: 100%;
height: auto;
} .list .address {
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
margin-bottom: 1px;
padding: 8px 16px;
background-color: #fff;
} .list .address .icon {
position: absolute;
top: 21px;
left: 16px;
width: 19px;
height: 24px;
background-image: url(../image/icon_address.png);
background-repeat: no-repeat;
background-size: auto 20px;
background-position: center center;
} .list .address .sign {
display: none;
position: absolute;
top: 45px;
left: 8px;
width: 35px;
height: 14px;
line-height: 14px;
font-size: 12px;
color: #444;
text-align: center;
} .list .address .sign-1 {
display: block;
} .list .address .info {
position: relative;
box-sizing: border-box;
padding-left: 36px;
padding-right: 28px;
width: 100%;
height: auto;
} .list .address .info .top {
position: relative;
box-sizing: border-box;
width: 100%;
height: 32px;
color: #444;
line-height: 32px;
font-size: 14px;
} .list .address .info .top .consignee {
display: inline;
width: auto;
} .list .address .info .top .mobile {
display: inline;
width: auto;
margin-left: 16px;
} .list .address .info .bottom {
position: relative;
width: 100%;
min-height: 32px;
line-height: 32px;
color: #888;
font-size: 14px;
} .list .address .info .bottom .type {
display: inline;
width: auto;
color: #e3007f;
font-weight: bolder;
} .list .address .info .bottom .text {
display: inline;
width: auto;
} .list .address .arrow {
position: absolute;
right: 16px;
top: 32px;
width: 8px;
height: 16px;
background-image: url(../image/item_user_address_right.png);
background-repeat: no-repeat;
background-size: 8px 16px;
background-position: right center;
} .empty {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
background-image: url(../image/address_empty.png);
background-repeat: no-repeat;
background-size: auto 93px;
background-position: center 50px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<section id="list" class="list">
<!-- <div class="address">
<div class="icon"></div>
<div class="sign">[默认]</div>
<div class="info">
<div class="top">
<div class="consignee">收货人：李小潞</div>
<div class="mobile">13888888888</div>
</div>
<div class="bottom">
<div class="type">[家庭]</div>
<div class="text">北京市海淀区</div>
</div>
</div>
<div class="arrow"></div>
</div> -->
</section>
<section id="empty" class="empty"></section>
</body>
<script type="text/template" id="template">
{{~it:value:index}}
<div class="address" tapmode onclick="fnOpenSetAddressWin('{{=index}}');">
<div class="icon"></div>
{{?value.isDefault == true}}
<div class="sign sign-1">[默认]</div>
{{??}}
<div class="sign">[默认]</div>
{{?}}
<div class="info">
<div class="top">
<div class="consignee">收货人：{{=value.name}}</div>
<div class="mobile">{{=value.mobile}}</div>
</div>
<div class="bottom">
<div class="type">[{{=types[parseInt(value.type)]}}]</div>
<div class="text">{{=value.address}}</div>
</div>
</div>
<div class="arrow"></div>
</div>
{{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript">
apiready = function() {
initEventListener();
getAddressList();
}; var types = ['公司', '住宅', '学校', '其它'];
var data; function getAddressList() {
var userInfo = $api.getStorage('userInfo');
api.showProgress({
style: 'default',
animationType: 'fade',
title: '努力加载中...',
text: '请稍后...',
modal: false
});
var params = {
fields: {},
where: {
user: userInfo.userId
},
skip: 0,
limit: 20
}
params = $api.jsonToStr(params);
api.ajax({
url: 'http://d.apicloud.com/mcm/api/address?filter=' + params,
method: 'get',
headers: {
"X-APICloud-AppId": api.appId,
"X-APICloud-AppKey": 'ea748d4ba21a3c5f861dbade4b98adacf7fa5b6c.1524848071825',
"Authorization": userInfo.id
}
}, function(ret, err) {
if (ret && ret.length > 0) {
data = ret;
// 在界面中更新收货地址列表显示
fnUpdateAddressList(ret);
fnShowAddressList(true);
} else {
fnShowAddressList(false);
} // 隐藏加载状态对话框
api.hideProgress();
});
} function initEventListener() {
api.addEventListener({
name: 'updateAddress'
}, function(ret, err) {
getAddressList();
});
} function fnUpdateAddressList(data_) {
var list = $api.byId('list'); // 编译模板函数
var tempFn = doT.template($api.byId('template').innerHTML); // 使用模板函数生成HTML文本
var resultHTML = tempFn(data_);
$api.html(list, resultHTML);
api.parseTapmode();
} // 显示商品列表
function fnShowAddressList(show_) {
var empty = $api.byId('empty');
var list = $api.byId('list');
if (show_) {
empty.style.display = 'none';
list.style.display = 'block';
} else {
empty.style.display = 'block';
list.style.display = 'none';
}
} function fnOpenSetAddressWin(index_) {
api.openWin({
name: 'setaddress',
url: './setaddress.html',
pageParam: data[index_]
});
}
</script> </html>
address_frame.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>添加收货地址</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
position: relative;
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} header h1 {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
} header .right {
display: none;
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 15px;
text-align: center;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
<h1>收货地址</h1>
<div id="right" class="right" tapmode onclick="fnDelete();">删除</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
if (api.pageParam.id) {
var right = $api.byId('right');
right.style.display = 'block';
} var header = $api.byId('header');
var headerH = $api.fixStatusBar(header);
api.openFrame({
name: 'setaddress_frame',
url: './setaddress_frame.html',
rect: {
marginTop: headerH,
w: 'auto',
h: 'auto'
},
pageParam: api.pageParam,
bounces: false
});
}; function fnDelete() {
var userInfo = $api.getStorage('userInfo');
api.confirm({
title: '提示',
msg: '删除收货地址',
buttons: ['确定', '取消']
}, function(ret, err) {
if (ret) {
if (1 == ret.buttonIndex) {
api.ajax({
url: 'https://d.apicloud.com/mcm/api/address/' + api.pageParam.id,
method: 'delete',
headers: {
"X-APICloud-AppId": api.appId,
"X-APICloud-AppKey": 'ea748d4ba21a3c5f861dbade4b98adacf7fa5b6c.1524848071825',
"Authorization": userInfo.id
}
}, function(ret, err) {
if (ret) {
api.sendEvent({
name: 'updateAddress'
});
api.closeWin();
} else {
alert(JSON.stringify(err));
}
});
}
}
});
}
</script> </html>
setaddress.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>添加收货地址Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} body {
background-color: #eee;
} header {
width: 100%;
height: 60px;
margin-bottom: 1px;
background-color: #fff;
} header .select {
position: absolute;
width: 16px;
height: 16px;
top: 22px;
left: 16px;
background-image: url(../image/select_off.png);
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
} header .select-on {
background-image: url(../image/select_on.png);
} header .text {
box-sizing: border-box;
width: 100%;
height: 60px;
padding-left: 40px;
line-height: 60px;
font-size: 20px;
color: #444;
text-align: left;
} section {
height: auto;
width: 100%;
} section .option {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
box-sizing: border-box;
width: 100%;
height: 60px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 1px;
background-color: #fff;
} section .option .name {
width: auto;
line-height: 60px;
} section .option .input {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 60px;
box-sizing: border-box;
padding-top: 22px;
} section .option .input input {
font-size: 14px;
width: 100%;
height: 20px;
line-height: 14px;
vertical-align: top;
border: none;
outline: none;
} section .option .select {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 60px;
line-height: 60px;
} section .option .arrow-right-highlight {
position: absolute;
right: 16px;
top: 22px;
width: 8px;
height: 16px;
line-height: 60px;
background-image: url(../image/item_user_address_right.png);
background-repeat: no-repeat;
background-size: 8px 16px;
background-position: right center;
} section .option .multi-select {
box-sizing: border-box;
padding-top: 11px;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 60px;
} section .option .multi-select .item {
display: inline-block;
width: auto;
height: 30px;
padding: 4px 8px;
color: #888;
font-size: 18px;
text-align: center;
line-height: 30px;
border-radius: 19px;
border: 1px solid #888;
} section .option .multi-select .selected {
color: #ffaf45;
border: 1px solid #ffaf45;
} footer {
margin-top: 16px;
width: 100%;
height: 50px;
} footer .btn {
margin-left: 100px;
margin-right: 100px;
height: 44px;
background-color: #ffaf45;
border-radius: 22px;
text-align: center;
font-size: 18px;
color: #fff;
line-height: 44px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<header>
<div id="isDefault" class="select select-on" topmode onclick="fnSetDefault(true);"></div>
<div class="text">设为默认地址</div>
</header>
<section>
<div class="option">
<div class="name">收货人：</div>
<div class="input">
<input id="consignee" type="text" placeholder="点击输入收货人姓名">
</div>
</div>
<div class="option">
<div class="name">手机号码：</div>
<div class="input">
<input id="mobile" type="text" placeholder="点击输入收货人手机号码">
</div>
</div>
<div class="option" tapmode onclick="fnOpenActionSelector();">
<div class="name">所在区域：</div>
<div id="area" class="select">点击选择收货所在的区域</div>
<div class="arrow-right-highlight"></div>
</div>
<div class="option" tapmode onclick="fnOpenSetAddressDetailWin();">
<div class="name">具体地址：</div>
<div id="focus" class="select">点击选择具体的小区或写字楼</div>
<div class="arrow-right-highlight"></div>
</div>
<div class="option">
<div class="name">楼号门牌：</div>
<div class="input">
<input id="house" type="text" placeholder="点击输入楼号门牌（例A座3单元1201">
</div>
</div>
<div class="option">
<div class="name">地址类型：</div>
<div id="type" class="multi-select">
<div class="item selected" tapmode onclick="fnSelectAddressType(0)">公司</div>
<div class="item" tapmode onclick="fnSelectAddressType(1)">住宅</div>
<div class="item" tapmode onclick="fnSelectAddressType(2)">学校</div>
<div class="item" tapmode onclick="fnSelectAddressType(3)">其它</div>
</div>
</div>
</section>
<footer>
<div class="btn" tapmode onclick="fnSave();">保存</div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
init();
}; var addressInfo = {
isDefault: true,
type: 0
};
var consignee, mobile, area, focus, house; function init() {
consignee = $api.byId('consignee');
mobile = $api.byId('mobile');
area = $api.byId('area');
focus = $api.byId('focus');
house = $api.byId('house'); if (api.pageParam.id) {
addressInfo.isDefault = api.pageParam.isDefault;
fnSetDefault(false);
addressInfo.type = api.pageParam.type;
fnSelectAddressType(addressInfo.type);
consignee.value = api.pageParam.name;
mobile.value = api.pageParam.mobile;
area.innerHTML = api.pageParam.region;
focus.innerHTML = api.pageParam.address;
house.value = api.pageParam.house;
}
} function fnOpenActionSelector() {
mobile.blur();
consignee.blur();
var UIActionSelector = api.require('UIActionSelector');
UIActionSelector.open({
datas: 'widget://res/city.json',
layout: {
row: 5,
col: 3,
height: 30,
size: 12,
sizeActive: 14,
rowSpacing: 5,
colSpacing: 10,
maskBg: 'rgba(0,0,0,0.2)',
bg: '#fff',
color: '#888',
colorActive: '#f00',
colorSelected: '#f00'
},
animation: true,
cancel: {
text: '取消',
size: 12,
w: 90,
h: 35,
bg: '#fff',
bgActive: '#ccc',
color: '#888',
colorActive: '#fff'
},
ok: {
text: '确定',
size: 12,
w: 90,
h: 35,
bg: '#fff',
bgActive: '#ccc',
color: '#888',
colorActive: '#fff'
},
title: {
text: '请选择',
size: 12,
h: 44,
bg: '#eee',
color: '#888'
},
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
var area = $api.byId('area');
area.innerHTML = ret.level1 + ret.level2 + (ret.level3 ? ret.level3 : '');
} else {
alert(JSON.stringify(err));
}
});
} function fnOpenSetAddressDetailWin() {
api.openWin({
name: 'setaddressdetail',
url: './setaddressdetail.html'
});
} // 被setaddressdetail_frame中调用
function setAddressDetail(address_) {
var focus = $api.byId('focus');
$api.html(focus, address_);
} function fnSelectAddressType(index_) {
var type = $api.byId('type');
var typeItems = $api.domAll(type, '.item');
addressInfo.type = index_;
for (var i = 0; i < typeItems.length; i++) {
if (i == index_) {
$api.addCls(typeItems[i], 'selected');
} else {
$api.removeCls(typeItems[i], 'selected');
}
}
} function fnSetDefault(reverse_) {
if (reverse_) {
addressInfo.isDefault = !addressInfo.isDefault;
}
if (addressInfo.isDefault) {
$api.addCls(isDefault, 'select-on');
} else {
$api.removeCls(isDefault, 'select-on');
}
} function fnSave() {
var userInfo = $api.getStorage('userInfo'); addressInfo.name = consignee.value;
addressInfo.mobile = mobile.value;
addressInfo.region = area.innerHTML;
addressInfo.address = focus.innerHTML;
addressInfo.house = house.value;
addressInfo.user = userInfo.userId; if (api.pageParam.id) {
api.ajax({
url: 'https://d.apicloud.com/mcm/api/address/' + api.pageParam.id,
method: 'put',
headers: {
"X-APICloud-AppId": api.appId,
"X-APICloud-AppKey": 'ea748d4ba21a3c5f861dbade4b98adacf7fa5b6c.1524848071825',
"Authorization": userInfo.id
},
data: {
values: addressInfo
},
timeout: 30
}, function(ret, err) {
if (ret) {
api.sendEvent({
name: 'updateAddress'
});
api.closeWin();
} else {
alert(JSON.stringify(err));
}
});
} else {
api.ajax({
url: 'https://d.apicloud.com/mcm/api/address',
method: 'post',
headers: {
"X-APICloud-AppId": api.appId,
"X-APICloud-AppKey": 'ea748d4ba21a3c5f861dbade4b98adacf7fa5b6c.1524848071825',
"Authorization": userInfo.id
},
data: {
values: addressInfo
},
timeout: 30
}, function(ret, err) {
if (ret) {
api.sendEvent({
name: 'updateAddress'
});
api.closeWin();
} else {
alert(JSON.stringify(err));
}
});
}
}
</script> </html>
setaddress_frame.html
实现头像上传
在personalcenter_frame.html中为头像区域注册点击事件
<div class="icon-panel" tapmode onclick="fnSetAvatar()">
<div id="icon" class="icon"></div>
</div>
在script标签中实现fnSelectAvatar()方法
function fnSetAvatar() {
api.actionSheet({
title: '选择',
cancelTitle: '取消',
buttons: ['拍照', '相册']
}, function(ret, err) {
if (ret) {
var sourceTypes = [
'camera',
'album'
];
if (ret.buttonIndex == (sourceTypes.length + 1)) {
return;
}
api.getPicture({
sourceType: sourceTypes[ret.buttonIndex - 1],
allowEdit: true,
quality: 50, // 指定图片质量
targetWidth: 100, // 指定图片宽度
targetHeight: 100 // 指定图片宽度
}, function(ret, err) {
if (ret) {
fnUploadAtavar(ret.data);
}
});
}
});
}
实现将选择的图片通过api.ajax()发送到服务器
头像上传过后会返回一个服务器上的url，使用这个url可以更新用户信息。“authorization”字段就是userInfo.id
// 获取个人信息
function getUserInfo() {
var userInfo = $api.getStorage('userInfo');
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now api.ajax({
url: 'https://d.apicloud.com/mcm/api/user/' + userInfo.userId,
method: 'get',
headers: {
"X-APICloud-AppId": "A6099255481782",
"X-APICloud-AppKey": appKey,
"Authorization": userInfo.id
}
}, function(ret, err) {
if (ret) {
fnUpdateLocalAvatar(ret);
} else {
alert(JSON.stringify(err));
}
});
} // 更新头像显示
function fnUpdateLocalAvatar(data_) {
if (!data_.avatar) {
return;
} // 缓存头像
var icon = $api.byId('icon');
api.imageCache({
url: data_.avatar.url
}, function(ret, err) {
if (ret) {
icon.style.backgroundImage = 'url(' + ret.url + ')';
} else {
api.toast({
msg: '获取头像失败',
duration: 2000,
location: 'bottom'
});
}
});
} // 选择头像
function fnSetAvatar() {
api.actionSheet({
title: '选择',
cancelTitle: '取消',
buttons: ['拍照', '相册']
}, function(ret, err) {
if (ret) {
var sourceTypes = [
'camera',
'album'
];
if (ret.buttonIndex == (sourceTypes.length + 1)) {
return;
}
api.getPicture({
sourceType: sourceTypes[ret.buttonIndex - 1],
allowEdit: true,
quality: 50, // 指定图片质量
targetWidth: 100, // 指定图片宽度
targetHeight: 100 // 指定图片宽度
}, function(ret, err) {
if (ret) {
fnUploadAtavar(ret.data);
}
});
}
});
} // 上传头像文件
function fnUploadAtavar(avatarUrl_) {
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
api.ajax({
url: 'https://d.apicloud.com/mcm/api/file',
method: 'post',
headers: {
"X-APICloud-AppId": "A6099255481782",
"X-APICloud-AppKey": appKey,
},
data: {
values: {
filename: 'icon'
},
files: {
file: avatarUrl_
}
}
}, function(ret, err) {
if (ret) {
fnUpdateUserAtavar(ret);
} else {
alert(JSON.stringify(err));
}
});
} // 更新用户头像
function fnUpdateUserAtavar(avatar_) {
var userInfo = $api.getStorage('userInfo');
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
api.ajax({
url: 'https://d.apicloud.com/mcm/api/user/' + userInfo.userId,
method: 'put',
headers: {
"X-APICloud-AppId": "A6099255481782",
"X-APICloud-AppKey": appKey,
"Authorization": userInfo.id
},
data: {
values: {
avatar: avatar_
}
}
}, function(ret, err) {
if (ret) {
fnUpdateLocalAvatar(ret);
} else {
alert(JSON.stringify(err));
}
});
}
由于一离开AppLoader，WIFI调试就已断开
显示头像时需对图片进行缓存
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>个人中心Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
height: 150px;
padding-top: 8px;
background-color: #ffaf45;
} header .icon-panel {
width: 100%;
height: 86px;
text-align: center;
} header .icon-panel .icon {
display: inline-block;
box-sizing: border-box;
width: 86px;
height: 86px;
border: 3px solid #ffaf45;
border-radius: 86px; background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
} header .username {
height: 30px;
line-height: 30px;
font-size: 14px;
color: #fff;
text-align: center;
} header .account-info {
height: 30px;
line-height: 30px;
font-size: 12px;
color: #fff;
text-align: center;
} .separator {
margin: auto 10px;
} .option {
position: relative;
box-sizing: border-box;
width: 100%;
height: 61px;
border-bottom: 1px solid #ddd;
} .option .icon {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 60px;
background-repeat: no-repeat;
background-position: 12px center;
background-size: auto 20px;
} .option .icon-myorder {
background-image: url(../image/img_item_myorder.png);
} .option .icon-account {
background-image: url(../image/icon_user_info_accounts.png);
} .option .icon-coupon {
background-image: url(../image/icon_user_coupon.png);
background-position: 8px center;
} .option .icon-address {
background-image: url(../image/item_user_address.png);
} .option .title {
position: relative;
box-sizing: border-box;
width: 100%;
height: 60px;
padding-left: 40px;
font-size: 14px;
color: #444;
text-align: left;
line-height: 60px;
} .option .arrow-panel {
position: absolute;
top: 0;
right: 12px;
width: auto;
height: 60px;
background-image: url(../image/arrow_right.png);
background-repeat: no-repeat;
background-size: 16px 24px;
background-position: right center;
} .option .arrow-panel .text {
box-sizing: border-box;
padding-right: 20px;
width: auto;
height: 60px;
line-height: 60px;
font-size: 13px;
color: #888;
text-align: left;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<header>
<div class="icon-panel" tapmode onclick="fnSetAvatar()">
<div id="icon" class="icon"></div>
</div>
<div id="username" class="username">Gary</div>
<div class="account-info">积分：0 <span class="separator">|</span>余额：￥0</div>
</header>
<section>
<div class="option" tapmode onclick="fnOpenMyOrderWin();">
<div class="icon icon-myorder"></div>
<div class="title">我的订单</div>
<div class="arrow-panel">
<div class="text">查看所有订单详情</div>
</div>
</div>
<div class="option" tapmode onclick="fnOpenAccountWin();">
<div class="icon icon-account"></div>
<div class="title">我的账户</div>
<div class="arrow-panel">
<div class="text">充值有礼</div>
</div>
</div>
<div class="option" tapmode onclick="fnOpenCouponWin();">
<div class="icon icon-coupon"></div>
<div class="title">优惠卷</div>
<div class="arrow-panel">
<div class="text">查看我的优惠卷</div>
</div>
</div>
<div class="option" tapmode onclick="fnOpenAddressWin();">
<div class="icon icon-address"></div>
<div class="title">收货地址</div>
<div class="arrow-panel">
<div class="text">管理我的收货地址</div>
</div>
</div>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">
apiready = function() {
getUserInfo();
}; // 获取个人信息
function getUserInfo() {
var userInfo = $api.getStorage('userInfo');
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now api.ajax({
url: 'https://d.apicloud.com/mcm/api/user/' + userInfo.userId,
method: 'get',
headers: {
"X-APICloud-AppId": "A6099255481782",
"X-APICloud-AppKey": appKey,
"Authorization": userInfo.id
}
}, function(ret, err) {
if (ret) {
fnUpdateLocalAvatar(ret);
} else {
alert(JSON.stringify(err));
}
});
} // 更新头像显示
function fnUpdateLocalAvatar(data_) {
if (!data_.avatar) {
return;
} // 缓存头像
var icon = $api.byId('icon');
api.imageCache({
url: data_.avatar.url
}, function(ret, err) {
if (ret) {
icon.style.backgroundImage = 'url(' + ret.url + ')';
} else {
api.toast({
msg: '获取头像失败',
duration: 2000,
location: 'bottom'
});
}
});
} // 选择头像
function fnSetAvatar() {
api.actionSheet({
title: '选择',
cancelTitle: '取消',
buttons: ['拍照', '相册']
}, function(ret, err) {
if (ret) {
var sourceTypes = [
'camera',
'album'
];
if (ret.buttonIndex == (sourceTypes.length + 1)) {
return;
}
api.getPicture({
sourceType: sourceTypes[ret.buttonIndex - 1],
allowEdit: true,
quality: 50, // 指定图片质量
targetWidth: 100, // 指定图片宽度
targetHeight: 100 // 指定图片宽度
}, function(ret, err) {
if (ret) {
fnUploadAtavar(ret.data);
}
});
}
});
} // 上传头像文件
function fnUploadAtavar(avatarUrl_) {
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
api.ajax({
url: 'https://d.apicloud.com/mcm/api/file',
method: 'post',
headers: {
"X-APICloud-AppId": "A6099255481782",
"X-APICloud-AppKey": appKey,
},
data: {
values: {
filename: 'icon'
},
files: {
file: avatarUrl_
}
}
}, function(ret, err) {
if (ret) {
fnUpdateUserAtavar(ret);
} else {
alert(JSON.stringify(err));
}
});
} // 更新用户头像
function fnUpdateUserAtavar(avatar_) {
var userInfo = $api.getStorage('userInfo');
var now = Date.now();
var appKey = SHA1("A6099255481782"+"UZ"+"6FAE7BB1-8CFA-5087-1914-CCFB04C5EB85"+"UZ"+now)+"."+now
api.ajax({
url: 'https://d.apicloud.com/mcm/api/user/' + userInfo.userId,
method: 'put',
headers: {
"X-APICloud-AppId": "A6099255481782",
"X-APICloud-AppKey": appKey,
"Authorization": userInfo.id
},
data: {
values: {
avatar: avatar_
}
}
}, function(ret, err) {
if (ret) {
fnUpdateLocalAvatar(ret);
} else {
alert(JSON.stringify(err));
}
});
} // 打开我的订单Window
function fnOpenMyOrderWin() {
api.openWin({
name: 'myorder',
url: './myorder.html'
});
} // 打开我的账户Window
function fnOpenAccountWin() {
api.openWin({
name: 'account',
url: './account.html'
});
} // 打开我的优惠券Window
function fnOpenCouponWin() {
api.openWin({
name: 'coupon',
url: './coupon.html'
});
} // 打开收货地址Window
function fnOpenAddressWin() {
api.openWin({
name: 'address',
url: './address.html'
});
}
</script> </html>
personalcenter_frame.html
使用第三方开放服务模块，完善App功能和业务逻辑
获得当前城市
在APICloud控制台实力项目中添加“bMap”模块、在百度地图开放平台上
配置项目的"config.xml"文件
<feature name="bMap">
<param name="android_api_key" value="8GWxpaYT9ZdZYPDGk9jOGsGu6HijyQP5" />
</feature>
更具输入内容检索地址列表
添加setaddressdetail.html和setaddressdetail_frame.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>设置详细地址</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #e3007f;
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { }; </script> </html>
setaddressdetail.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>设置详细地址Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} body {
background-color: #eee;
} header {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
padding: 16px;
height: 60px;
margin-bottom: 2px;
background-color: #fff;
} header .input {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
box-sizing: border-box;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
height: 28px;
background-color: #eee;
border-radius: 14px;
} header .input input {
width: 100%;
height: 20px;
vertical-align: top;
font-size: 14px;
} header .button {
box-sizing: border-box;
width: 80px;
height: 28px;
margin-left: 8px;
line-height: 26px;
text-align: center;
font-size: 16px;
color: #444;
border-radius: 14px;
border: 1px solid #aaa;
} section {
width: 100%;
height: auto;
} .option {
width: 100%;
height: 60px;
margin-bottom: 2px;
background-color: #fff;
} .option .icon {
position: absolute;
top: 20px;
left: 16px;
width: 16px;
height: 20px;
background-image: url(../image/icon_address_none.png);
background-size: 16px 20px;
background-repeat: no-repeat;
background-position: center center;
} .option .info {
box-sizing: border-box;
width: 100%;
height: 60px;
padding-left: 40px;
padding-right: 16px;
} .option .info .top {
box-sizing: border-box;
width: 100%;
height: 35px;
padding-top: 15px;
padding-bottom: 4px;
font-size: 16px;
text-align: left;
color: #444;
} .option .info .bottom {
box-sizing: border-box;
width: 100%;
height: 25px;
padding-bottom: 11px;
font-size: 12px;
text-align: left;
color: #888;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<header>
<div class="input">
<input id="searchText" type="search" placeholder="小区/写字楼">
</div>
<div class="button">清空</div>
</header>
<section id="list">
<!-- <div class="option">
<div class="icon"></div>
<div class="info">
<div class="top">门头沟</div>
<div class="bottom">正在获取...</div>
</div>
</div> -->
</section>
</body>
<script type="text/template" id="template">
{{~it.results:value}}
<div class="option" tapmode onclick="fnSelectAddress('{{=value.address}}')">
<div class="icon"></div>
<div class="info">
<div class="top">{{=value.name}}</div>
<div class="bottom">{{=value.address}}</div>
</div>
</div>
{{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript">
apiready = function() { }; </script> </html>
setaddressdetail_frame
打开setaddressdetail_frame.html页面，在body标签中插入代码
定义显示检索到的地址列表的doT模板
<script type="text/template" id="template">
{{~it.results:value}}
<div class="option" tapmode onclick="fnSelectAddress('{{=value.address}}')">
<div class="icon"></div>
<div class="info">
<div class="top">{{=value.name}}</div>
<div class="bottom">{{=value.address}}</div>
</div>
</div>
{{~}}
</script>
随后创建一个输入框，在输入变化时候执行fnSearchInCity()方法
function fnSearchInCity(msg_) {
if(!msg_) {
$api.html(eList, '');
return;
}
var currentCity = $api.getStorage('currentCity');
var bMap = api.require('bMap');
bMap.searchInCity({
city: currentCity.name,
keyword: msg_,
pageIndex: 0,
pageCapacity: 20
}, function(ret) {
if (ret.status) {
fnUpdateSearchList(ret);
}
});
}
在fnSearchInCity()函数首先引入了“bMap”模板，调用bMap.searchInCity()方法检索当前城市内的关键字地点，最后将返回的结果通过doT模板实时显示到页面上
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>设置详细地址</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #ffaf45;
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} .input-container {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
padding: 16px;
height: 60px;
margin-bottom: 2px;
background-color: #fff;
} .input-container .input {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
box-sizing: border-box;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
height: 28px;
background-color: #eee;
border-radius: 14px;
} .input-container .input input {
width: 100%;
height: 20px;
vertical-align: top;
font-size: 14px;
} .input-container .button {
box-sizing: border-box;
width: 80px;
height: 28px;
margin-left: 8px;
line-height: 26px;
text-align: center;
font-size: 16px;
color: #444;
border-radius: 14px;
border: 1px solid #aaa;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();"></div>
</header>
<div class="input-container">
<div class="input">
<input id="searchText" type="search" placeholder="" readonly="true">
</div>
<div class="button" tapmode onclick="fnClearContent();">清空</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var UIInput;
var uiInputId;
apiready = function() {
var header = $api.byId('header'); var headerH = $api.fixStatusBar(header);
api.openFrame({
name: 'setaddressdetail_frame',
url: './setaddressdetail_frame.html',
rect: {
marginTop: headerH+62,
w: 'auto',
h: 'auto'
},
bounces: false
});
fnInitUIInput();
}; function fnInitUIInput() {
var searchText = $api.byId('searchText');
var rect = $api.offset(searchText);
UIInput = api.require('UIInput');
UIInput.open({
rect: {
x: rect.l,
y: rect.t,
w: rect.w,
h: rect.h
},
styles: {
bgColor: '#eee',
size: 14,
color: '#000',
placeholder: {
color: '#ccc'
}
},
autoFocus: false,
maxRows: 1,
placeholder: '请输入地址',
keyboardType: 'default',
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
if (ret && ret.eventType == "show") {
uiInputId = ret.id;
setTimeout(function() {
UIInput.popupKeyboard({id: uiInputId});
}, 300)
} else if (ret.eventType == "change") {
UIInput.value({
id: uiInputId
}, function(ret, err) {
if (ret) {
if (ret.status) {
// console.log(ret.msg);
api.execScript({
frameName: 'setaddressdetail_frame',
script: 'fnSearchInCity("'+ret.msg+'");'
});
}
} else {
alert(JSON.stringify(err));
}
});
}
} else {
alert(JSON.stringify(err));
}
});
} function fnClearContent() { // 清除搜索内容
UIInput.value({
id: uiInputId,
msg: ''
});
} </script> </html>
setaddressdetail.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>设置详细地址Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} body {
background-color: #eee;
} section {
width: 100%;
height: auto;
} .option {
width: 100%;
height: 60px;
margin-bottom: 2px;
background-color: #fff;
} .option .icon {
position: absolute;
top: 20px;
left: 16px;
width: 16px;
height: 20px;
background-image: url(../image/icon_address_none.png);
background-size: 16px 20px;
background-repeat: no-repeat;
background-position: center center;
} .option .info {
box-sizing: border-box;
width: 100%;
height: 60px;
padding-left: 40px;
padding-right: 16px;
} .option .info .top {
box-sizing: border-box;
width: 100%;
height: 35px;
padding-top: 15px;
padding-bottom: 4px;
font-size: 16px;
text-align: left;
color: #444;
} .option .info .bottom {
box-sizing: border-box;
width: 100%;
height: 25px;
padding-bottom: 11px;
font-size: 12px;
text-align: left;
color: #888;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<section id="list">
<!-- <div class="option">
<div class="icon"></div>
<div class="info">
<div class="top">门头沟</div>
<div class="bottom">正在获取...</div>
</div>
</div> -->
</section>
</body>
<script type="text/template" id="template">
{{~it.results:value}}
<div class="option" tapmode onclick="fnSelectAddress('{{=value.address}}')">
<div class="icon"></div>
<div class="info">
<div class="top">{{=value.name}}</div>
<div class="bottom">{{=value.address}}</div>
</div>
</div>
{{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript"> var eList; // 列表容器对象
var tempFn; // 获取doT的模版对象
apiready = function() {
eList = $api.byId('list');
var template = $api.byId('template');
tempFn = doT.template(template.innerHTML);
}; function fnSearchInCity(msg_) {
if(!msg_) {
$api.html(eList, '');
return;
}
var currentCity = $api.getStorage('currentCity');
var bMap = api.require('bMap');
bMap.searchInCity({
city: currentCity.name,
keyword: msg_,
pageIndex: 0,
pageCapacity: 20
}, function(ret) {
if (ret.status) {
fnUpdateSearchList(ret);
}
});
} function fnUpdateSearchList(data_) { var html = tempFn(data_);
$api.html(eList, html);
} function fnSelectAddress(address_) {
api.execScript({
name: 'setaddress',
frameName: 'setaddress_frame',
script: 'setAddressDetail(\'' + address_ + '\');'
});
api.closeWin();
}
</script> </html>
setaddressdetail_frame.html
附加页说明
购物车界面
shoppingcart.html
shoppingcart_frame.html
当点击minicart_frame.html页面数字时跳转到shoppingcart.html
<span id="amount" class="amount" onclick="fnOpenShoppingCartWin()";>100</span>
function fnOpenShoppingCartWin() {
api.openWin({
name: 'shoppingcart',
url: './shoppingcart.html',
delay: 150
});
}
购物车页眉shoppingcart_frame，届时需要动态获取用户购买书籍数量需要修改这
<div class="ware">
<div class="content">
<div class="select" ></div>
<img class="thumbnail" src="../image/book1.png">
<div class="info">
<div class="name">安迪生童话</div>
<div class="price-tag">
<span class="price">Y100</span>
<span class="unit">/本</span>
</div>
</div>
</div>
<div class="control">
<img class="minus" src="../image/minus.png">
<div class="count">1</div>
<img class="add" src="../image/add.png">
</div>
</div>
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} body {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
} header {
width: 100%;
height: 50px;
background-color: #ffaf45;
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
background: url(../image/back.png);
background-position: 12px 16px;
background-size: 11px 18px;
background-repeat: no-repeat;
} header h1 {
width: 100%;
height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
} section {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow: auto;
} footer {
width: 100%;
height: 50px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
background-color: #fff;
border-top: 1px solid #d1d1d1;
} .control {
position: relative;
width: 100px;
height: 50px;
} .control .select {
position: absolute;
top: 17px;
left: 8px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-image: url(../image/select_on.png);
background-size: 100% 100%;
background-position: center center;
} .control .select-off {
background-image: url(../image/select_off.png);
} .control .info {
box-sizing: border-box;
width: 100%;
height: 50px;
padding-left: 32px;
padding-top: 8px;
padding-bottom: 8px;
} .control .info .top {
height: 20px;
font-size: 14px;
color: #444;
text-align: left;
line-height: 20px;
} .control .info .bottom {
height: 14px;
font-size: 10px;
color: #888;
text-align: left;
line-height: 14px;
} .panel {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 50px;
} .panel .info {
box-sizing: border-box;
width: 100%;
height: 50px;
padding-top: 8px;
padding-right: 8px;
} .panel .info .top {
position: relative;
width: 100%;
height: 20px;
text-align: right;
font-size: 16px;
color: #444;
line-height: 20px;
} .panel .info .top .amount {
font-weight: bold;
color: #ffaf45;
} .panel .info .bottom {
position: relative;
height: 14px;
font-size: 10px;
color: #888;
text-align: right;
line-height: 14px;
} .buy {
width: 112px;
height: 50px;
} .buy .buy-button {
width: 112px;
height: 40px;
margin-top: 5px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode="highlight" onclick="api.closeWin();"></div>
<h1>购物车</h1>
</header>
<section > </section>
<footer id="footer">
<div class="control">
<div id="select" class="select"></div>
<div class="info">
<div class="top">全选</div>
<div class="bottom">已选<span id="count" class="count">1</span>件</div>
</div>
</div>
<div class="panel">
<div class="info">
<div class="top">总金额:<span id="amount" class="amount">￥100</span></div>
<div class="bottom">不含运费</div>
</div>
</div>
<div class="buy" tapmode onclick="fnOpenOrderWin();">
<img class="buy-button" src="../image/buy.png">
</div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/db.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
var footer = $api.byId('footer'); var headerH = $api.fixStatusBar(header);
var footerH = $api.fixTabBar(footer);
// 打开购物车Frame
api.openFrame({
name: 'shoppingcart_frame',
url: './shoppingcart_frame.html',
rect: {
marginTop: headerH,
marginBottom: footerH,
w: 'auto'
},
pageParam: {
wareId: api.pageParam.wareId
},
bounces: true
});
}; function fnOpenOrderWin () {
api.openWin({
name: 'order',
url: './order.html'
});
} </script> </html>
shoppingcart.html
<!doctype html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>购物车Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style type="text/css">
html,
body {
height: 100%;
background-color: #eee;
} .list {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
} .ware {
position: relative;
width: 100%;
height: 128px;
margin-bottom: 8px;
background-color: #fff;
} .ware .content {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%px;
padding-top: 8px;
padding-bottom: 8px;
} .ware .select {
position: absolute;
width: 16px;
height: 16px;
top: 56px;
left: 8px;
background-repeat: no-repeat;
background-image: url(../image/select_on.png);
background-size: 100% 100%;
background-position: center center;
z-index: 2;
} .ware .select-off {
background-image: url(../image/select_off.png);
} .ware .thumbnail {
position: absolute;
top: 14px;
left: 32px;
height: 100px;
width: 100px;
} .ware .info {
position: relative;
box-sizing: border-box;
padding-left: 144px;
width: 100%;
height: 114px;
padding-right: 28px;
} .ware .info .name {
width: 100%;
height: 15px;
color: #555555;
margin-top: 14px;
font-size: 15px;
} .ware .info .price-tag {
margin-top: 10px;
width: 100%;
height: 12px;
font-size: 12px;
vertical-align: top;
} .ware .info .price-tag .price {
color: #ffaf45;
} .ware .info .price-tag .unit {
font-size: 8px;
color: #cbcbcb;
} .ware .control {
position: absolute;
width: 110px;
height: 23px;
top: 53px;
right: 8px;
} .ware .control .minus {
position: absolute;
top: 0;
left: 0;
width: 23px;
height: 23px;
z-index: 2;
} .ware .control .count {
position: relative;
top: 0;
margin-left: 31px;
margin-right: 31px;
width: auto;
height: 23px;
text-align: center;
line-height: 23px;
color: #444;
font-size: 12px;
background-image: url(../image/count.png);
background-repeat: no-repeat;
background-size: 48px 23px;
} .ware .control .add {
position: absolute;
top: 0;
right: 0;
width: 23px;
height: 23px;
z-index: 2;
} .empty {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
background-image: url(../image/shoppingcart_empty.png);
background-repeat: no-repeat;
background-size: 115px 190px;
background-position: center 50px;
} .active {
opacity: 0.7;
}
</style>
</head> <body>
<section id="list" class="list"></section>
<section id="empty" class="empty"></section> <div class="ware">
<div class="content">
<div class="select" ></div>
<img class="thumbnail" src="../image/book1.png">
<div class="info">
<div class="name">安迪生童话</div>
<div class="price-tag">
<span class="price">Y100</span>
<span class="unit">/本</span>
</div>
</div>
</div>
<div class="control">
<img class="minus" src="../image/minus.png">
<div class="count">1</div>
<img class="add" src="../image/add.png">
</div>
</div> </body>
<script type="text/template" id="template"> </script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/db.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript">
apiready = function() { }; </script>
</html>
shoppingcart_frame.html
结算页面
order.html
order_frame.html
当在购物车页面点击购买时，跳转到order.html
<div class="buy" tapmode onclick="fnOpenOrderWin();">
<img class="buy-button" src="../image/buy.png">
</div> function fnOpenOrderWin () {
api.openWin({
name: 'order',
url: './order.html'
});
}
计算界面显示信息
<body>
<section class="address">
<div class="icon"></div>
<div class="info">
<div class="top">
<div class="consignee">收货人：Gary</div>
<div class="mobile">161304034</div>
</div>
<div class="bottom">
<div class="type">【学生】</div>
<div class="text">16计算机1班xxx</div>
</div>
</div>
<div class="arrow"></div>
</section>
<section class="order">
<div class="title">订单信息</div>
<div class="icon-panel">
<div class="icon"></div>
<div class="info">
<div class="top">安迪生童话</div>
<div class="bottom">￥100/1本</div>
</div>
<div class="right">1</div>
</div>
<div class="row">
<div class="text">数量：</div>
<div class="value">1件</div>
</div>
<div class="row">
<div class="text">优惠卷：
<div class="tag">0张可用</div>
</div>
<div class="value value-1">未使用</div>
</div>
<div class="row">
<div class="text">商品金额：</div>
<div class="value value-2">+ ￥100</div>
</div>
<div class="row">
<div class="text">运费：</div>
<div class="value value-2">+ ￥34</div>
</div>
<div class="row">
<div class="text">优惠金额：</div>
<div class="value value-2">- ￥0.0</div>
</div>
<div class="row-1">
<div class="value value-2">实付款： <span class="color">￥134</span></div>
</div>
</section>
<section class="pay">
<div class="title">付款方式</div>
<div class="row row-balance-pay row-disable">
<div class="text text-recommend">余额支付</div>
<div class="text">（余额不足：￥0.0）</div>
<div class="select"></div>
</div>
<div class="row row-wxpay">
<div class="text text-recommend">微信支付</div>
<div class="select selected"></div>
</div>
<div class="row row-alipay">
<div class="text">支付宝</div>
<div class="select"></div>
</div>
</section>
</body>
点击结算页面下确定按钮时触发的函数在order.html下定义
<div class="buy" tapmode onclick="fnBuy();">
<img class="buy-button" src="../image/confirm.png">
</div> function fnBuy () {
api.toast({
msg: '温馨提示:未开通结算功能',
duration: 2000,
location: 'bottom'
});
}
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>下单</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
height: 100%;
} header {
position: relative;
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
z-index: 2;
} header .back img {
margin-top: 16px;
margin-left: 12px;
width: 11px;
height: 18px;
} header .title {
position: relative;
width: 100%;
height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
} section {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
} footer {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
height: 50px;
background-color: #000;
border-top: 1px solid #d1d1d1;
} footer .panel {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
height: 50px;
box-sizing: border-box;
padding-left: 16px;
line-height: 50px;
color: #fff;
font-size: 18px;
text-align: left;
} footer .buy {
width: 112px;
height: 50px;
} footer .buy .buy-button {
width: 112px;
height: 40px;
margin-top: 5px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();">
<img src="../image/back.png">
</div>
<div class="title">
确认订单
</div>
</header>
<section></section>
<footer id="footer">
<div class="panel">总金额:￥100</div>
<div class="buy" tapmode onclick="fnBuy();">
<img class="buy-button" src="../image/confirm.png">
</div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
var footer = $api.byId('footer'); var headerH = $api.fixStatusBar(header);
var footerH = $api.fixTabBar(footer); // 打开购物车Frame
api.openFrame({
name: 'order_frame',
url: './order_frame.html',
rect: {
marginTop: headerH,
marginBottom: footerH,
w: 'auto',
},
bounces: false
});
}; function fnBuy () {
api.toast({
msg: '温馨提示:未开通结算功能',
duration: 2000,
location: 'bottom'
});
}
</script>
</html>
order.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>下单Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
background-color: #f0f0f0;
} .address {
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
margin-bottom: 8px;
padding: 8px 16px;
background-color: #fff;
} .address .icon {
position: absolute;
top: 21px;
left: 16px;
width: 19px;
height: 24px;
background-image: url(../image/icon_address.png);
background-repeat: no-repeat;
background-size: auto 20px;
background-position: center center;
} .address .sign {
display: none;
position: absolute;
top: 45px;
left: 8px;
width: 35px;
height: 14px;
line-height: 14px;
font-size: 12px;
color: #444;
text-align: center;
} .address .sign-1 {
display: block;
} .address .info {
position: relative;
box-sizing: border-box;
padding-left: 36px;
padding-right: 28px;
width: 100%;
height: auto;
} .address .info .top {
position: relative;
box-sizing: border-box;
width: 100%;
height: 32px;
color: #444;
line-height: 32px;
font-size: 14px;
} .address .info .top .consignee {
display: inline;
width: auto;
} .address .info .top .mobile {
display: inline;
width: auto;
margin-left: 16px;
} .address .info .bottom {
position: relative;
width: 100%;
min-height: 32px;
line-height: 32px;
color: #888;
font-size: 14px;
} .address .info .bottom .type {
display: inline;
width: auto;
color: #ffaf45;
font-weight: bolder;
} .address .info .bottom .text {
display: inline;
width: auto;
} .address .arrow {
position: absolute;
right: 16px;
top: 32px;
width: 8px;
height: 16px;
background-image: url(../image/item_user_address_right.png);
background-repeat: no-repeat;
background-size: 8px 16px;
background-position: right center;
} .order {
position: relative;
width: 100%;
height: auto;
margin-bottom: 16px;
} .order .title {
position: relative;
box-sizing: border-box;
padding-left: 40px;
width: 100%;
height: 44px;
line-height: 44px;
font-size: 16px;
text-align: left;
color: #444;
background-color: #fff;
background-image: url(../image/icon_order.png);
background-repeat: no-repeat;
background-size: auto 20px;
background-position: 16px center;
} .order .icon-panel {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
box-sizing: border-box;
padding: 8px 16px;
width: 100%;
height: 80px;
background-color: #f1f5f8;
} .order .icon-panel .icon {
width: 64px;
height: 64px;
border-radius: 8px;
background-image: url(../image/book1.png);
background-repeat: no-repeat;
background-size: 64px 64px;
background-position: center center;
} .order .icon-panel .info {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
box-sizing: border-box;
padding-left: 16px;
} .order .icon-panel .info .top {
position: relative;
box-sizing: border-box;
padding-bottom: 16px;
width: 100%;
height: 32px;
font-size: 16px;
color: #444;
text-align: left;
} .order .icon-panel .info .bottom {
position: relative;
box-sizing: border-box;
padding-top: 16px;
width: 100%;
height: 32px;
font-size: 16px;
color: #444;
text-align: left;
} .order .icon-panel .right {
box-sizing: border-box;
width: 40px;
height: 64px;
padding-top: 50px;
font-size: 14px;
text-align: right;
} .order .row {
position: relative;
box-sizing: border-box;
padding-left: 16px;
padding-right: 16px;
width: 100%;
height: 44px;
line-height: 44px;
font-size: 16px;
margin-bottom: 1px;
background-color: #fff;
} .order .row .text {
position: relative;
width: 100%;
height: 44px;
text-align: left;
color: #444;
} .order .row .value {
position: absolute;
box-sizing: border-box;
top: 0;
right: 16px;
width: 100%;
height: 44px;
text-align: right;
color: #444;
} .order .row .value-1 {
padding-right: 20px;
background-image: url(../image/arrow_right.png);
background-repeat: no-repeat;
background-size: 12px 20px;
background-position: right center;
color: #888;
} .order .row .value-2 {
color: #ffaf45;
} .order .row-1 {
position: relative;
box-sizing: border-box;
padding-left: 16px;
padding-right: 16px;
width: 100%;
height: 44px;
line-height: 44px;
text-align: right;
font-size: 16px;
background-color: #fff;
} .color {
color: #ffaf45;
} .pay {
position: relative;
width: 100%;
height: auto;
} .pay .title {
position: relative;
box-sizing: border-box;
padding-left: 40px;
width: 100%;
height: 44px;
line-height: 44px;
font-size: 16px;
text-align: left;
color: #444;
background-color: #fff;
background-image: url(../image/order_pay.png);
background-repeat: no-repeat;
background-size: auto 16px;
background-position: 12px center;
} .pay .row {
position: relative;
box-sizing: border-box;
width: 100%;
height: 50px;
margin-bottom: 1px;
padding-left: 96px;
text-align: left;
font-size: 16px;
color: #444;
line-height: 50px;
background-color: #fff;
background-repeat: no-repeat;
background-size: auto 36px;
background-position: 12px center;
} .pay .row-balance-pay {
background-image: url(../image/icon_balance_pay.png);
} .pay .row-wxpay {
background-image: url(../image/icon_wxpay.png);
} .pay .row-alipay {
background-image: url(../image/icon_alipay.png);
} .pay .row-disable {
opacity: 0.5;
} .pay .row .text {
display: inline-block;
width: auto;
height: 50px;
} .pay .row .text-recommend {
box-sizing: border-box;
padding-right: 28px;
display: inline-block;
width: auto;
height: 50px;
background-image: url(../image/recommend.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right center;
border-radius: 10px;
} .pay .row .select {
position: absolute;
top: 0;
right: 16px;
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-position: right center;
background-size: auto 20px;
background-image: url(../image/order_off.png);
} .pay .row .selected {
background-image: url(../image/order_on.png);
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<section class="address">
<div class="icon"></div>
<div class="info">
<div class="top">
<div class="consignee">收货人：Gary</div>
<div class="mobile">161304034</div>
</div>
<div class="bottom">
<div class="type">【学生】</div>
<div class="text">16计算机1班xxx</div>
</div>
</div>
<div class="arrow"></div>
</section>
<section class="order">
<div class="title">订单信息</div>
<div class="icon-panel">
<div class="icon"></div>
<div class="info">
<div class="top">安迪生童话</div>
<div class="bottom">￥100/1本</div>
</div>
<div class="right">1</div>
</div>
<div class="row">
<div class="text">数量：</div>
<div class="value">1件</div>
</div>
<div class="row">
<div class="text">优惠卷：
<div class="tag">0张可用</div>
</div>
<div class="value value-1">未使用</div>
</div>
<div class="row">
<div class="text">商品金额：</div>
<div class="value value-2">+ ￥100</div>
</div>
<div class="row">
<div class="text">运费：</div>
<div class="value value-2">+ ￥34</div>
</div>
<div class="row">
<div class="text">优惠金额：</div>
<div class="value value-2">- ￥0.0</div>
</div>
<div class="row-1">
<div class="value value-2">实付款： <span class="color">￥134</span></div>
</div>
</section>
<section class="pay">
<div class="title">付款方式</div>
<div class="row row-balance-pay row-disable">
<div class="text text-recommend">余额支付</div>
<div class="text">（余额不足：￥0.0）</div>
<div class="select"></div>
</div>
<div class="row row-wxpay">
<div class="text text-recommend">微信支付</div>
<div class="select selected"></div>
</div>
<div class="row row-alipay">
<div class="text">支付宝</div>
<div class="select"></div>
</div>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { };
</script> </html>
order_frame.html
我的订单
myorder.html
myorder_frame.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>我的订单</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header {
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
z-index: 2;
} header .back img {
margin-top: 16px;
margin-left: 12px;
width: 11px;
height: 18px;
} header .title {
position: relative;
width: 100%;
height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
} nav {
position: relative;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
height: 40px;
padding-left: 16px;
padding-right: 16px;
background-color: #f0f0f0;
} nav .menu {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
box-sizing: border-box;
padding-left: 30px;
height: 40px;
color: #444;
font-size: 14px;
text-align: center;
line-height: 40px;
border-bottom: 2px solid #f0f0f0;
background-repeat: no-repeat;
background-size: auto 14px;
background-position: 8px 13px;
} nav .menu:nth-child(1) {
background-image: url(../image/myorder_0.png);
} nav .menu:nth-child(1).selected {
background-image: url(../image/myorder_0_select.png);
} nav .menu:nth-child(2) {
background-image: url(../image/myorder_1.png);
} nav .menu:nth-child(2).selected {
background-image: url(../image/myorder_1_select.png);
} nav .menu:nth-child(3) {
background-image: url(../image/myorder_2.png);
} nav .menu:nth-child(3).selected {
background-image: url(../image/myorder_2_select.png);
} nav .menu:nth-child(4) {
background-image: url(../image/myorder_3.png);
} nav .menu:nth-child(4).selected {
background-image: url(../image/myorder_3_select.png);
} nav .selected {
font-weight: bolder;
color: #ffaf45;
border-bottom: 2px solid #ffaf45;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();">
<img src="../image/back.png">
</div>
<div class="title">
我的订单
</div>
</header>
<nav id="nav">
<div class="menu selected" tapmode onclick="fnSetFrameGroupIndex(0);">待付款</div>
<div class="menu" tapmode onclick="fnSetFrameGroupIndex(1);">待收款</div>
<div class="menu" tapmode onclick="fnSetFrameGroupIndex(2);">已完成</div>
</nav>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
var headerH = $api.fixStatusBar(header);
var nav = $api.byId('nav'); var navH = $api.offset(nav).h; menus = $api.domAll(nav, '.menu'); // 打开FrameGroup
var frames = [];
for (var i=0; i<menus.length; i++) {
frames.push({
name: 'myorder_frame_' + i,
url: 'myorder_frame.html',
});
}
api.openFrameGroup({
name: 'myOrderFrameGroup',
scrollEnabled: true,
rect: {
marginTop: headerH + navH,
w: 'auto',
h: 'auto'
},
index: 0,
frames: frames,
preload: frames.length
}, function(ret, err) {
if (ret) {
fnSetNavMenuSelected(ret.index);
} else {
alert(JSON.stringify(err));
}
});
}; var menus; function fnSetFrameGroupIndex(index_) {
fnSetNavMenuSelected(index_);
api.setFrameGroupIndex({
name: 'myOrderFrameGroup',
index: index_,
scroll: true
});
} function fnSetNavMenuSelected(index_) {
for (var i = 0; i < menus.length; i++) {
if (index_ == i) {
$api.addCls(menus[i], 'selected');
} else {
$api.removeCls(menus[i], 'selected');
}
}
}
</script> </html>
myorder.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>我的订单Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html {
height: 100%;
} body {
min-height: 100%;
background-color: #f0f0f0;
} .list {
display: none;
position: relative;
width: 100%;
height: auto;
} .list .address {
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
margin-bottom: 1px;
padding: 8px 16px;
background-color: #fff;
} .list .address .icon {
position: absolute;
top: 21px;
left: 16px;
width: 19px;
height: 24px;
background-image: url(../image/icon_address.png);
background-repeat: no-repeat;
background-size: auto 20px;
background-position: center center;
} .list .address .sign {
display: none;
position: absolute;
top: 45px;
left: 8px;
width: 35px;
height: 14px;
line-height: 14px;
font-size: 12px;
color: #444;
text-align: center;
} .list .address .sign-1 {
display: block;
} .list .address .info {
position: relative;
box-sizing: border-box;
padding-left: 36px;
padding-right: 28px;
width: 100%;
height: auto;
} .list .address .info .top {
position: relative;
box-sizing: border-box;
width: 100%;
height: 32px;
color: #444;
line-height: 32px;
font-size: 14px;
} .list .address .info .top .consignee {
display: inline;
width: auto;
} .list .address .info .top .mobile {
display: inline;
width: auto;
margin-left: 16px;
} .list .address .info .bottom {
position: relative;
width: 100%;
min-height: 32px;
line-height: 32px;
color: #888;
font-size: 14px;
} .list .address .info .bottom .type {
display: inline;
width: auto;
color: #ffaf45;
font-weight: bolder;
} .list .address .info .bottom .text {
display: inline;
width: auto;
} .list .address .arrow {
position: absolute;
right: 16px;
top: 32px;
width: 8px;
height: 16px;
background-image: url(../image/item_user_address_right.png);
background-repeat: no-repeat;
background-size: 8px 16px;
background-position: right center;
} .empty {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
background-image: url(../image/myorder_empty.png);
background-repeat: no-repeat;
background-size: auto 93px;
background-position: center 50px;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<section id="list" class="list"></section>
<section id="empty" class="empty"></section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { };
</script> </html>
order_frame.html
我的账户及帮助说明
account.html
balancehelp.html
balancehelp_frame.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>我的账户</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
background-color: #f0f0f0;
} header {
position: relative;
width: 100%;
height: 150px;
background-color: #ffaf45;
} header .back {
position: absolute;
bottom: 100px;
left: 0;
width: 80px;
height: 50px;
z-index: 2;
} header .back img {
margin-top: 16px;
margin-left: 12px;
width: 11px;
height: 18px;
} header .right {
position: absolute;
right: 12px;
bottom: 100px;
width: 50px;
height: 50px;
} header .right .accounthelp {
position: absolute;
top: 13px;
right: 0;
width: 24px;
height: 24px;
background-image: url(../image/accounthelp.png);
background-size: auto 24px;
background-position: center center;
} header .top {
position: relative;
top: 50px;
width: 100%;
height: 40px;
color: #fff;
line-height: 40px;
font-size: 14px;
text-align: center;
} header .bottom {
position: relative;
top: 50px;
width: 100%;
height: 40px;
color: #fff;
line-height: 40px;
font-size: 24px;
font-weight: bolder;
text-align: center;
} nav {
position: relative;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
height: 40px;
padding-left: 16px;
padding-right: 16px;
background-color: #f0f0f0;
} nav .menu {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
box-sizing: border-box;
padding-left: 30px;
height: 40px;
color: #444;
font-size: 14px;
text-align: center;
line-height: 40px;
border-bottom: 2px solid #f0f0f0;
background-repeat: no-repeat;
background-size: auto 14px;
background-position: 16px 13px;
} nav .menu:nth-child(1) {
background-image: url(../image/account_0.png);
} nav .menu:nth-child(1).selected {
background-image: url(../image/account_0_select.png);
} nav .menu:nth-child(2) {
background-image: url(../image/account_1.png);
} nav .menu:nth-child(2).selected {
background-image: url(../image/account_1_select.png);
} nav .menu:nth-child(3) {
background-image: url(../image/account_2.png);
} nav .menu:nth-child(3).selected {
background-image: url(../image/account_2_select.png);
} nav .menu:nth-child(4) {
background-image: url(../image/account_3.png);
} nav .menu:nth-child(4).selected {
background-image: url(../image/account_3_select.png);
} nav .selected {
font-weight: bolder;
color: #ffaf45;
border-bottom: 2px solid #ffaf45;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();">
<img src="../image/back.png">
</div>
<div class="right" tapmode onclick="fnOpenBalanceHelpWin();">
<div class="accounthelp"></div>
</div>
<div class="top">我的余额</div>
<div class="bottom">￥49</div>
</header>
<nav id="nav">
<div class="menu selected" tapmode onclick="fnSetFrameGroupIndex(0)">充值有礼</div>
<div class="menu" tapmode onclick="fnSetFrameGroupIndex(1)">卡卷兑换</div>
<div class="menu" tapmode onclick="fnSetFrameGroupIndex(2)">账单记录</div>
</nav>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { var header = $api.byId('header');
var headerH = $api.fixStatusBar(header);
var nav = $api.byId('nav'); var navH = $api.offset(nav).h; menus = $api.domAll(nav, '.menu'); // 打开FrameGroup Layout
var frames = [{
name: 'recharge_frame',
url: './recharge_frame.html'
}, {
name: 'exchange_frame',
url: './exchange_frame.html'
}, {
name: 'billhistory_frame',
url: './billhistory_frame.html'
}, ];
api.openFrameGroup({
name: 'accountFrameGroup',
scrollEnabled: true,
rect: {
marginTop: headerH + navH,
w: 'auto',
h: 'auto'
},
index: 0,
frames: frames,
preload: frames.length
}, function(ret, err) {
if (ret) {
fnSetNavMenuSelected(ret.index);
} else {
alert(JSON.stringify(err));
}
});
}; var menus; function fnSetFrameGroupIndex(index_) {
fnSetNavMenuSelected(index_);
api.setFrameGroupIndex({
name: 'accountFrameGroup',
index: index_,
scroll: true
});
} function fnSetNavMenuSelected(index_) {
for (var i = 0; i < menus.length; i++) {
if (index_ == i) {
$api.addCls(menus[i], 'selected');
} else {
$api.removeCls(menus[i], 'selected');
}
}
} function fnOpenBalanceHelpWin() {
api.openWin({
name: 'balancehelp',
url: './balancehelp.html'
});
}
</script> </html>
account.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>余额帮助</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
background-color: #fff;
} header {
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
z-index: 2;
} header .back img {
margin-top: 16px;
margin-left: 12px;
width: 11px;
height: 18px;
} header .title {
position: relative;
width: 100%;
height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();">
<img src="../image/back.png">
</div>
<div class="title">
余额帮助
</div>
</header>
</body> <script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header'); var headerH = $api.fixStatusBar(header); // 打开余额帮助Frame
api.openFrame({
name: 'balancehelp_frame',
url: './balancehelp_frame.html',
rect: {
marginTop: headerH,
w: 'auto',
h: 'auto'
},
bounces: true
});
}; </script>
</html>
balancehelp.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>余额帮助Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
background-color: #fff;
}
section {
position: relative;
box-sizing: border-box;
padding: 16px;
font-size: 14px;
color: #444;
line-height: 20px;
}
</style>
</head> <body>
<section>
关于余额
<br/> 1）xxxxxxxxx
<br/>2）xxxxxxxxx
<br/>3）xxxxxxxxx
<br/>4）xxxxxxxxx
<br/>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { };
</script> </html>
balancehelp_frame.html
优惠卷
coupon.html
coupon_frame.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>优惠券</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} header {
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
z-index: 2;
} header .back img {
margin-top: 16px;
margin-left: 12px;
width: 11px;
height: 18px;
} header .title {
position: relative;
width: 100%;
height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
} section {
position: relative;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
padding: 16px;
height: 60px;
margin-bottom: 2px;
background-color: #fff;
} section .input {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
box-sizing: border-box;
padding: 6px;
height: 28px;
background-color: #eee;
border-radius: 14px;
} section .input input {
width: 100%;
height: 16px;
line-height: 16px;
} section .button {
box-sizing: border-box;
padding: 4px 16px;
margin-left: 8px;
width: 80px;
height: 28px;
text-align: center;
font-size: 16px;
color: #444;
line-height: 18px;
border-radius: 14px;
border: 1px solid #aaa;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();">
<img src="../image/back.png">
</div>
<div class="title">
我的优惠卷
</div>
</header>
<section id="search">
<div class="input">
<input id="searchText" type="search" placeholder="请输入优惠码">
</div>
<div class="button">兑换</div>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
var headerH = $api.fixStatusBar(header);
var search = $api.byId('search'); var searchH = $api.offset(search).h; // 打开优惠券Frame
api.openFrame({
name: 'coupon_frame',
url: './coupon_frame.html',
rect: {
marginTop: headerH + searchH,
w: 'auto',
h: 'auto'
},
bounces: true
});
};
</script> </html>
coupon.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>优惠券Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html {
height: 100%;
} body {
min-height: 100%;
background-color: #f0f0f0;
} section {
position: relative;
box-sizing: border-box;
padding: 8px 16px;
width: 722px;
height: auto;
transform-origin: left top;
-webkit-transform-origin: left top;
} section .coupon {
position: relative;
margin-top: 16px;
margin-bottom: 16px;
width: 690px;
height: 190px;
background-color: #ffaf45;
background-repeat: no-repeat;
background-position: center center;
background-size: 690px 190px;
} section .coupon .title {
position: absolute;
width: 80px;
height: 20px;
top: 55px;
left: 32px;
font-size: 24px;
text-align: center;
color: #ffaf45;
line-height: 20px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform-origin: left top;
-webkit-transform-origin: left top;
} section .coupon .price {
position: absolute;
box-sizing: border-box;
width: 226px;
height: 190px;
left: 44px;
padding-top: 55px;
font-size: 80px;
color: #fff;
font-weight: bolder;
text-align: center;
} section .coupon .price sup {
display: inline;
font-size: 40px;
} section .coupon .info {
position: absolute;
box-sizing: border-box;
padding-left: 16px;
width: 396px;
height: 190px;
right: 0;
color: #fff;
} section .coupon .info .top {
position: relative;
margin-top: 30px;
height: 40px;
line-height: 40px;
font-size: 32px;
font-weight: bolder;
} section .coupon .info .middle {
position: relative;
margin-top: 4px;
height: 40px;
line-height: 40px;
font-size: 30px;
} section .coupon .info .bottom {
position: relative;
margin-top: 16px;
height: 40px;
line-height: 40px;
font-size: 24px;
}
</style>
</head> <body>
<section id="list">
<div class="coupon">
<div class="title">优惠卷</div>
<div class="price">50.0<sup>￥</sup></div>
<div class="info">
<div class="top">APP新客户50元体验卷</div>
<div class="middle">满99元使用（含运费）</div>
<div class="bottom">有效期至2016年10月1日</div>
</div>
</div>
<div class="coupon">
<div class="title">优惠卷</div>
<div class="price">30.0<sup>￥</sup></div>
<div class="info">
<div class="top">APP新客户30元体验卷</div>
<div class="middle">满99元使用（含运费）</div>
<div class="bottom">有效期至2016年10月1日</div>
</div>
</div>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
init();
}; function init() {
list = $api.byId('list');
list.style.WebkitTransform = 'scale(' + api.winWidth / 722 + ')';
};
</script> </html>
coupon_frame.html
消息
message.html
message_frame.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>消息</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} header {
width: 100%;
height: 50px;
background-color: #ffaf45
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
z-index: 2;
} header .back img {
margin-top: 16px;
margin-left: 12px;
width: 11px;
height: 18px;
} header .title {
position: relative;
width: 100%;
height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();">
<img src="../image/back.png">
</div>
<div class="title">
消息
</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
var headerH = $api.fixStatusBar(header);
api.openFrame({
name: 'message_frame',
url: './message_frame.html',
rect: {
marginTop: headerH,
w: 'auto',
h: 'auto'
},
bounces: true
});
};
</script> </html>
message.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>消息Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
background-color: #eee;
} .list {
position: relative;
height: auto;
} .list .message {
position: relative;
box-sizing: border-box;
height: auto;
margin-bottom: 8px;
background-color: #fff;
} .list .message .type {
position: relative;
box-sizing: border-box;
height: 30px;
padding-left: 40px;
color: #888;
font-size: 12px;
line-height: 30px;
background-repeat: no-repeat;
background-size: auto 16px;
background-image: url(../image/icon_user_coupon.png);
background-position: 8px center;
} .list .message .content {
position: relative;
box-sizing: border-box;
height: auto;
word-wrap: normal;
min-height: 24px;
padding-left: 12px;
color: #444;
font-size: 14px;
line-height: 24px;
} .list .message .tag {
position: relative;
height: 30px;
color: #888;
} .list .message .tag .time {
position: absolute;
box-sizing: border-box;
padding-left: 12px;
height: 30px;
text-align: left;
font-size: 10px;
line-height: 30px;
} .list .message .tag .arrow {
position: absolute;
box-sizing: border-box;
padding-right: 16px;
right: 0;
height: 30px;
margin-right: 12px;
text-align: right;
font-size: 10px;
line-height: 30px;
background-image: url(../image/arrow_right.png);
background-repeat: no-repeat;
background-size: 10px 16px;
background-position: right center;
} .highlight {
opacity: 0.7;
}
</style>
</head> <body>
<section id="list" class="list">
<div class="message" tapmode="highlight">
<div class="type">优惠提醒</div>
<div class="content">【天天水果】尊敬的客户，您领到一张新的优惠卷。快去看看吧~！</div>
<div class="tag">
<div class="time">2016-02-26 12:02:08</div>
<div class="arrow">查看详情</div>
</div>
</div>
<div class="message" tapmode="highlight">
<div class="type">优惠提醒</div>
<div class="content">【天天水果】尊敬的客户，您领到一张新的优惠卷。快去看看吧~！</div>
<div class="tag">
<div class="time">2016-02-25 11:30:33</div>
<div class="arrow">查看详情</div>
</div>
</div>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() { };
</script> </html>
message_frame.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>客服</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
height: 100%;
} header {
width: 100%;
height: 50px;
background-color: #ffaf45;
} header .back {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 50px;
z-index: 2;
} header .back img {
margin-top: 16px;
margin-left: 12px;
width: 11px;
height: 18px;
} header .title {
position: relative;
width: 100%;
height: 50px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
}
</style>
</head> <body>
<header id="header">
<div class="back" tapmode onclick="api.closeWin();">
<img src="../image/back.png">
</div>
<div class="title">
客服
</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.byId('header');
var headerH = $api.fixStatusBar(header);
api.openFrame({
name: 'customerservice_frame',
url: './customerservice_frame.html',
rect: {
marginTop: headerH,
w: 'auto',
h: 'auto'
},
bounces: false
});
};
</script> </html>
customerservice.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>客服Frame</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,
body {
background-color: #fdf3cf;
} section {
position: relative;
height: auto;
} section .item {
position: relative;
width: auto;
height: auto;
margin: 16px;
} section .item .icon {
position: absolute;
top: 0;
width: 40px;
min-height: 40px;
height: 100%;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center center;
border-radius: 20px;
} section .question .icon {
left: 0;
background-image: url(../image/user.png);
} section .answer .icon {
right: 0;
background-image: url(../image/Gary.jpg);
} section .item .content {
position: relative;
box-sizing: border-box;
width: 100%;
height: auto;
padding-left: 60px;
padding-right: 60px;
} section .item .arrow {
position: absolute;
top: 50%;
margin-top: -5px;
width: 0;
height: 0px;
} section .question .arrow {
left: 48px;
border-top: 5px solid;
border-bottom: 5px solid;
border-right: 20px solid;
border-color: transparent #fff transparent transparent;
} section .answer .arrow {
right: 48px;
border-top: 5px solid;
border-bottom: 5px solid;
border-left: 20px solid;
border-color: transparent transparent transparent #ffa5d8;
} section .item .text {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 8px;
height: auto;
min-height: 40px;
font-size: 14px;
text-align: left;
line-height: 24px;
border-radius: 8px;
} section .question .text {
background-color: #fff;
} section .answer .text {
background-color: #ffa5d8;
} footer {
position: relative;
width: 100%;
height: 50px;
text-align: center;
background-color: #ffaf45;
} footer .row {
position: relative;
top: 11px;
width: 220px;
height: 28px;
margin: 0 auto;
background-color: #fdf3cf;
background-image: url(../image/service_footer.png);
background-repeat: no-repeat;
background-size: auto 22px;
background-position: center center;
border-radius: 14px;
}
</style>
</head> <body>
<section>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item question">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
<div class="item answer">
<div class="icon"></div>
<div class="content">
<div class="arrow"></div>
<div class="text">XXXXXXXX</div>
</div>
</div>
</section>
<footer>
<div class="row"></div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script> <script type="text/javascript">
apiready = function() {
var footer = $api.dom('footer'); $api.fixTabBar(footer); }
</script>
</html>
customerservice_frame.html
Apicloud_(项目)网上书城03_拓展模块实现的更多相关文章
- Apicloud_(项目)网上书城02_后端数据获取
Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud_(项目)网上书城02_后端数据获取 传送门 Apicloud_(项目)网上书城03_拓展模块实现 传送门 ApiClou ...
- Apicloud_(项目)网上书城01_前端搭建
[本文皆在记录自己开发Apicloud项目过程,不具备教学水平性文章] 参考书籍<30天App开发从0到1> Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud ...
- 网上书城分类Category模块
2 分类模块 2.1 创建分类模块相关类 在每个模块开始时,都要创建如下基本类:实体类.DAO类.Service类.Servlet类: l cn.itcast.goods.category.domai ...
- 大项目之网上书城（九）——订单Demo
目录 大项目之网上书城(九)--订单Demo 主要改动 1.OrderServiceImpl 代码 2.OrderDaoImpl 代码 3.OrderitemDaoImpl 代码 4.orderite ...
- 大项目之网上书城（八）——数据库大改&添加图书
目录 大项目之网上书城(八)--数据库大改&添加图书 主要改动 1.数据库新增表 代码 2.数据库新增触发器 3.其他对BookService和BookDao的修改 代码 4.addBook. ...
- 大项目之网上书城（七）——书页面以及加入购物车Servlet
目录 大项目之网上书城(七)--书页面以及加入购物车Servlet 主要改动 1.shu.jsp 代码 效果图 2.shu.js 代码 3.index.jsp 代码 效果图 4.FindBookByC ...
- 大项目之网上书城（六）——个人页面和书页面Demo
目录 大项目之网上书城(六)--个人页面和书页面Demo 主要改动 1.user.jsp 代码 效果图 user.js 代码 3.shu.jsp 代码 效果图 4.其他小改动 LoginServlet ...
- 大项目之网上书城（五）——主页（End）
目录 大项目之网上书城(五)--主页(End) 主要改动 1.主页(终于完成啦) 完整代码 效果图 2.head.jsp的小改动 代码 3.login.jsp ###代码 效果图 4.login.js ...
- Orchard详解--第九篇 拓展模块及引用的处理
在分析Orchard的模块加载之前,先简要说一下因为Orchard中的模块并不是都被根(启动)项目所引用的,所以当Orchard需要加载一个模块时首先需要保证该模块所依赖的其它程序集能够被找到,那么才 ...
随机推荐
- python_线程读写操作<一>
线程读写操作 import threading,random,queue q = queue.Queue() alist=[] def shengchan(): for i in range(10): ...
- C# 面向对象1(类和对象的概念)
1.面向过程-->面向对象 面向过程:面向的是完成这件事儿的过程,强调的是完成这件事儿的动作. 2.面向过程的思想: 以上的,需求一更改,会导致不同的方法,一一去更改. 3.面向对象的思想:找个 ...
- Css几个兼容性问题
1.BUG_fireFox!!!一个容器内的子容器如果要左右浮动的话,需要在这个容器设置上样式:"overflow:hidden". 注:内部元素浮动就会导致外面的容器的高度在fi ...
- ELK电子书籍
Elasticsearch in Action(英文版).pdfElasticsearch实战 in action(中文版).pdfElasticsearch技术解析与实战.pdfElasticsea ...
- FTP服务器上传，下载文件
public class FtpUtil { /** * * @param host FTP服务器地址 * @param port FTP服务器端口 * @param username FTP登录账号 ...
- 01 初识HTML
HTML是什么? 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言. 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们 ...
- Delphi 键盘的编程
- requests：用于发送http请求，专为人类设计
介绍 requests模块是一个专门用来发送http请求的模块 如何发送请求 import requests """ 使用requests模块发送请求非常简单 首先请求有 ...
- deepin下挂载的的Windows系统（NTFC）目录怎么是只读的？？？
关键命令: df-h sudo ntfsfix /dev/sda4 重启 参考博客:深度官网问题之大神回复
- Linux中的Mariadb数据库的主备
对于一个mysql服务器, 一般有两个线程来负责复制和被复制.当开启复制之后. MySQL 复制的基本过程如下: 1. Slave 上面的IO线程连接上 Master,并请求从指定日志文件的指定位置( ...