页面UI

电商O2O无疑是目前最受用户欢迎的APP类型，而在这类APP中必不可少的就是在线支付功能了。在AppCan平台开发这类应用时，官方封装了微信支付、支付宝、银联等多种支付SDK，更接入了beecloud、ping++等聚合支付平台，本文将以支付宝和微信支付为例，为大家介绍如何在项目中实现这两种支付功能。

页面效果图：

页面UI - 图1

编写UI界面布局

新建一个AppCan页面，命名为waitpay.html，同时IDE会自动根据waitpay.html页面生成一个浮动窗口waitpay_content.html页面。

1、waitpay.html主窗口头部header部分布局代码：

  1. <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
  2.     <!--header开始-->
  3.     <div id="header" class="uh ub bc-head-m">
  4.         <div class="nav-btn blue" id="nav-left">
  5.             <div class="fa fa-angle-left fa-2x"></div>
  6.         </div>
  7.         <h1 class="ut  bc-text ub-f1 ulev-3 ut-s tx-c" tabindex="0">待付款</h1>
  8.         <div class="nav-btn blue" id="nav-right"></div>
  9.     </div>
  10.     <!--header结束--><!--content开始-->
  11.     <div id="content" class="ub-f1 tx-l " style="background-color: #F2F2F2">
  12.     </div>        
  13.     <!--content结束-->
  14. </div>

效果如下：

页面UI - 图2

2、在waitpay_content.html浮动窗口编写UI布局代码：

<div class="ub ub-f1 ub-ver" style="background-color: #FFFFFF;line-height: 3em;margin-bottom: .5em;">
<div class="ub" style="height:3em;border-bottom: 1px solid #DBDBDB;padding:0 1em;color: #7A7A7A">
订单号：<span id="orderNo"></span>
</div>
<div class="ub" style="height:3em;padding:0 1em;color: #FF3B77">
等待买家付款
</div>
</div>
<div class="ub ub-f1" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: .5em;">
<div class="ub ub-ver ub-f1" >
<div class="" style="color:#3D3D3D;line-height: 2em;margin:0 1em;">
    收货人：<span id="contact"></span>
    <div style="float: right" id="tel"></div>
</div>
<div class="ub ulev-1" style="color:#808080;line-height: 1.4em;margin-top: .5em;padding: 0 1em;">
    <img class="" src="../image/Pin-Assistor.png" style="width:1.2em"/>
    <div style="width:85%;margin: 0 1em;">
        收货地址：<span id="address"></span>
    </div>
</div>
</div>
</div>
<div class="ub ub-ver" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: .5em;">
<ul id="List">

</ul>
</div>
<div class="ub ub-f1" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: 1px;">
<div class="ub ub-f1" style="line-height: 2em;">
<div class="" style="color:#3D3D3D;margin: 0 .5em;">
    配送
</div>
<img class="" src="../image/Question2.png" style="width:1.5em;margin-top: .2em;" id="peisong"/>
<div style="color:#808080;margin-left: 30%;">
    卖家回国后发货，到付
</div>
</div>
</div>
<div class="ub ub-f1 isover" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: 1px;">
<div class="ub ub-f1" style="line-height: 2em;" id="couponlist">
<div class="ub ub-f1" style="color:#3D3D3D;margin: 0 .5em;">
    优惠券
</div>
<div style="color:#808080;margin-right: 1em;" id="coupon">
    满99元可以使用10元优惠券
</div>
<div class="fa fa-angle-right fa-2x" style="font-size: 1.5em;margin-right: 0.5em;color:#808080"></div>

</div>
</div>
<div class="ub ub-f1 isover" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom:1px;">
<div class="ub ub-f1" style="line-height: 2em;">
<div class="ub ub-f1" style="color:#3D3D3D;margin: 0 .5em;">
    积分
</div>
<div style="color:#808080;margin-right: 1em;" id="points"></div>
<div class="ub ub-ac ub-pc" style="margin-right: .5em;">
    <div id="choose1" class="ub ub-ac false" style="width: 2em;height: 1.2em;border-radius: 1em;">
        <div class="cbgb" style="width: 1.1em;height: 1.2em;border-radius: 1em;"></div>
    </div>
</div>
</div>
</div>
<div class="ub ub-f1 isover" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: 1px;">
<div class="ub ub-f1" style="line-height: 2em;">
<div class="ub ub-f1" style="color:#3D3D3D;margin: 0 .5em;">
    余额
</div>
<div style="color:#808080;margin-right: 1em;" id="balance"></div>
<div class="ub ub-ac ub-pc" style="margin-right: .5em;">
    <div id="choose2" class="ub ub-ac false" style="width: 2em;height: 1.2em;border-radius: 1em;">
        <div class="cbgb" style="width: 1.1em;height: 1.2em;border-radius: 1em;"></div>
    </div>
</div>
</div>
</div>
<div class="ub ub-f1 ub-pc ub-ac ub-ver isover" id="pricepart" style="margin:1em;">
<div class="ub ub-ac ub-pc" style="width: 15em" id="test">
<div id="mustpay">
    应付
</div>
<div style="color:#FF0D57;" id="totalPrice">
    ￥0
</div>
&nbsp;&nbsp;&nbsp;&nbsp;
<div style="font-size: .8em;width:9em">
    已优惠<span style="color:#FF0D57;" id="cheap">￥0</span>
</div>
</div>
</div>
<div class="ub ub-f1 ub-ver isover" id="paymode" style="background: #FFFFFF;">
<div class="ub ub-ac ub-pc" style="width: 100%;line-height: 3em;color: #999999">
支付方式
</div>
<div class="ub ub-f1" style="padding: .5em;">
<ul style="width:100%;padding-bottom: .5em;">
    <li style='width:31%;display: inline-block;margin-left: 1.5%;text-align: center'  onclick="Alipay();">
        <img src="../image/alipay.png" style="height:2.2em"/>
        <div class="ub ub-ac ub-pc" style="width:100%;line-height: 2.4em;">
            支付宝
        </div>
    </li>
    <li style='width:31%;display: inline-block;margin-left: 1.5%;text-align: center' onclick="weixinpay();">
        <img src="../image/weixin.png" style="height:2.8em"/>
        <div class="ub ub-ac ub-pc" style="width:100%;line-height: 2.4em;">
            微信支付
        </div>
    </li>
   </ul>
</div>
</div>
<div class="ub ub-ac ub-pc uhide" id="cancleorder" style="height: 4em;padding:.5em;background-color: #F2F2F2">
<div class="ub ub-ac ub-pc ulev-3" id="cancle" style="width:9em;height: 2.2em;border-radius:.2em;color:#00C1F9;background-color:#FFFFFF;border: 1px solid #00C1F9;">
取消定单
</div>
</div>

效果如下：

页面UI - 图3