下载文档

页面UI
更新时间:2016-05-24

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

页面效果图:

编写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>

效果如下:

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

  1. <div class="ub ub-f1 ub-ver" style="background-color: #FFFFFF;line-height: 3em;margin-bottom: .5em;">
  2. <div class="ub" style="height:3em;border-bottom: 1px solid #DBDBDB;padding:0 1em;color: #7A7A7A">
  3. 订单号:<span id="orderNo"></span>
  4. </div>
  5. <div class="ub" style="height:3em;padding:0 1em;color: #FF3B77">
  6. 等待买家付款
  7. </div>
  8. </div>
  9. <div class="ub ub-f1" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: .5em;">
  10. <div class="ub ub-ver ub-f1" >
  11. <div class="" style="color:#3D3D3D;line-height: 2em;margin:0 1em;">
  12. 收货人:<span id="contact"></span>
  13. <div style="float: right" id="tel"></div>
  14. </div>
  15. <div class="ub ulev-1" style="color:#808080;line-height: 1.4em;margin-top: .5em;padding: 0 1em;">
  16. <img class="" src="../image/Pin-Assistor.png" style="width:1.2em"/>
  17. <div style="width:85%;margin: 0 1em;">
  18. 收货地址:<span id="address"></span>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="ub ub-ver" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: .5em;">
  24. <ul id="List">
  25. </ul>
  26. </div>
  27. <div class="ub ub-f1" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: 1px;">
  28. <div class="ub ub-f1" style="line-height: 2em;">
  29. <div class="" style="color:#3D3D3D;margin: 0 .5em;">
  30. 配送
  31. </div>
  32. <img class="" src="../image/Question2.png" style="width:1.5em;margin-top: .2em;" id="peisong"/>
  33. <div style="color:#808080;margin-left: 30%;">
  34. 卖家回国后发货,到付
  35. </div>
  36. </div>
  37. </div>
  38. <div class="ub ub-f1 isover" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: 1px;">
  39. <div class="ub ub-f1" style="line-height: 2em;" id="couponlist">
  40. <div class="ub ub-f1" style="color:#3D3D3D;margin: 0 .5em;">
  41. 优惠券
  42. </div>
  43. <div style="color:#808080;margin-right: 1em;" id="coupon">
  44. 满99元可以使用10元优惠券
  45. </div>
  46. <div class="fa fa-angle-right fa-2x" style="font-size: 1.5em;margin-right: 0.5em;color:#808080"></div>
  47. </div>
  48. </div>
  49. <div class="ub ub-f1 isover" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom:1px;">
  50. <div class="ub ub-f1" style="line-height: 2em;">
  51. <div class="ub ub-f1" style="color:#3D3D3D;margin: 0 .5em;">
  52. 积分
  53. </div>
  54. <div style="color:#808080;margin-right: 1em;" id="points"></div>
  55. <div class="ub ub-ac ub-pc" style="margin-right: .5em;">
  56. <div id="choose1" class="ub ub-ac false" style="width: 2em;height: 1.2em;border-radius: 1em;">
  57. <div class="cbgb" style="width: 1.1em;height: 1.2em;border-radius: 1em;"></div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="ub ub-f1 isover" style="padding: 0.8em;background-color: #FFFFFF;margin-bottom: 1px;">
  63. <div class="ub ub-f1" style="line-height: 2em;">
  64. <div class="ub ub-f1" style="color:#3D3D3D;margin: 0 .5em;">
  65. 余额
  66. </div>
  67. <div style="color:#808080;margin-right: 1em;" id="balance"></div>
  68. <div class="ub ub-ac ub-pc" style="margin-right: .5em;">
  69. <div id="choose2" class="ub ub-ac false" style="width: 2em;height: 1.2em;border-radius: 1em;">
  70. <div class="cbgb" style="width: 1.1em;height: 1.2em;border-radius: 1em;"></div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. <div class="ub ub-f1 ub-pc ub-ac ub-ver isover" id="pricepart" style="margin:1em;">
  76. <div class="ub ub-ac ub-pc" style="width: 15em" id="test">
  77. <div id="mustpay">
  78. 应付
  79. </div>
  80. <div style="color:#FF0D57;" id="totalPrice">
  81. ¥0
  82. </div>
  83. &nbsp;&nbsp;&nbsp;&nbsp;
  84. <div style="font-size: .8em;width:9em">
  85. 已优惠<span style="color:#FF0D57;" id="cheap">¥0</span>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="ub ub-f1 ub-ver isover" id="paymode" style="background: #FFFFFF;">
  90. <div class="ub ub-ac ub-pc" style="width: 100%;line-height: 3em;color: #999999">
  91. 支付方式
  92. </div>
  93. <div class="ub ub-f1" style="padding: .5em;">
  94. <ul style="width:100%;padding-bottom: .5em;">
  95. <li style='width:31%;display: inline-block;margin-left: 1.5%;text-align: center' onclick="Alipay();">
  96. <img src="../image/alipay.png" style="height:2.2em"/>
  97. <div class="ub ub-ac ub-pc" style="width:100%;line-height: 2.4em;">
  98. 支付宝
  99. </div>
  100. </li>
  101. <li style='width:31%;display: inline-block;margin-left: 1.5%;text-align: center' onclick="weixinpay();">
  102. <img src="../image/weixin.png" style="height:2.8em"/>
  103. <div class="ub ub-ac ub-pc" style="width:100%;line-height: 2.4em;">
  104. 微信支付
  105. </div>
  106. </li>
  107. </ul>
  108. </div>
  109. </div>
  110. <div class="ub ub-ac ub-pc uhide" id="cancleorder" style="height: 4em;padding:.5em;background-color: #F2F2F2">
  111. <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;">
  112. 取消定单
  113. </div>
  114. </div>

效果如下: