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">+&nbsp;￥100</div>
        </div>
        <div class="row">
            <div class="text">运费：</div>
            <div class="value value-2">+&nbsp;￥34</div>
        </div>
        <div class="row">
            <div class="text">优惠金额：</div>
            <div class="value value-2">-&nbsp;￥0.0</div>
        </div>
        <div class="row-1">
            <div class="value value-2">实付款：&nbsp;<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">+&nbsp;￥100</div>
        </div>
        <div class="row">
            <div class="text">运费：</div>
            <div class="value value-2">+&nbsp;￥34</div>
        </div>
        <div class="row">
            <div class="text">优惠金额：</div>
            <div class="value value-2">-&nbsp;￥0.0</div>
        </div>
        <div class="row-1">
            <div class="value value-2">实付款：&nbsp;<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

posted @ 2018-12-25 00:47 Cynical丶Gary 阅读(278) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Cynical丶Gary

木叶飞舞之处，火亦生生不息~

Apicloud_(项目)网上书城03_拓展模块实现

公告