黑马程序员技术交流社区

标题: 【郑州校区】Java之品优购课程讲义_day18（5） [打印本页]
作者: 谷粒姐姐    时间: 2018-10-29 13:51
标题: 【郑州校区】Java之品优购课程讲义_day18（5）
前端代码实现
3.3.1 服务层
在 pinyougou-cart-web 创建 payService.js
[AppleScript] 纯文本查看 复制代码
app.service('payService',function($http){ 

 //本地支付 

 this.createNative=function(){ 

  return $http.get('pay/createNative.do'); 

 }  

});

控制层
在 pinyougou-cart-web 创建 payController.js
[AppleScript] 纯文本查看 复制代码
app.controller('payController' ,function($scope ,payService){  

 //本地生成二维码 

 $scope.createNative=function(){ 

  payService.createNative().success( 

   function(response){ 

    $scope.money=  (response.total_fee/100).toFixed(2) ; //金额 

    $scope.out_trade_no= response.out_trade_no;//订单号 

    //二维码 

       var qr = new QRious({ 

        element:document.getElementById('qrious'), 

        size:250, 

        level:'H', 

        value:response.code_url 

     });     

   } 

  );   

 }   

});

页面
修改 pay.html ,引入 js
[AppleScript] 纯文本查看 复制代码
  <script type="text/javascript" src="plugins/angularjs/angular.min.js">  </script> 

    <script type="text/javascript" src="js/base.js">  </script> 

    <script type="text/javascript" src="js/service/payService.js">  </script> 

    <script type="text/javascript" src="js/controller/payController.js">  </script> 

    <script type="text/javascript" src="plugins/qrious.min.js"></script>

指令
[AppleScript] 纯文本查看 复制代码
<body ng-app="pinyougou" ng-controller="payController" ng-init="createNative()">

设置二维码图片的 ID
[AppleScript] 纯文本查看 复制代码
<p class="red"></p>                       

         <div class="fl code"> 

              <img id="qrious"> 

              <div class="saosao"> 

                  <p>请使用微信扫一扫</p> 

                  <p>扫描二维码支付</p> 

         </div> 

</div>

显示订单号
[AppleScript] 纯文本查看 复制代码
订单号：{{out_trade_no}}

显示金额
[AppleScript] 纯文本查看 复制代码
<em  class="orange money">￥{{money}}</em>元







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2