【郑州校区】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>元

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】Java之品优购课程讲义_day18（5）

0 个回复