增加订单数据渲染

Author: bigrocs

resources/mixes/vue-omnipay/index.html

@@ -10,7 +10,7 @@
     window.config = {
       apiUrl: 'http://corecmf.dev/api/omnipay/main',
       csrfToken: '',
-      data:{"wechat":{"appOrder":{"appid":"wxd18b8356c98591dc","partnerid":"10035597","prepayid":"wx201710030850584a3d1680c70690385526","package":"Sign=WXPay","noncestr":"0231301f3a0f1ee32053d023d2b9caee","timestamp":1506991943,"sign":"2E7248955FC91316C3D5AC12EB349701"},"jsOrder":{"appId":"wxd18b8356c98591dc","package":"prepay_id=wx201710030850584a3d1680c70690385526","nonceStr":"f3c611ebd6a885b3b25b18342a0ecffa","timeStamp":"1506991943","signType":"MD5","paySign":"5B404746A5C54FC528DD1FEF66FC3159"},"webOrder":"weixin:\/\/wxpay\/bizpayurl?pr=cortSlD"}},
+      data:{"wechat":{"appOrder":{"appid":"wxd18b8356c98591dc","partnerid":"10035597","prepayid":"wx20171003110733c20650cf6f0915936445","package":"Sign=WXPay","noncestr":"52e7873269ac678ea9f8c56ded7d493d","timestamp":1507000139,"sign":"A09455F6674D6022BBCA7EA74BA0B39E"},"jsOrder":{"appId":"wxd18b8356c98591dc","package":"prepay_id=wx20171003110733c20650cf6f0915936445","nonceStr":"461df0e5157622b2f3ea96d643701139","timeStamp":"1507000139","signType":"MD5","paySign":"7A37FEEB4DC1CF593878CD120E2EF4CC"},"webOrder":"weixin:\/\/wxpay\/bizpayurl?pr=woVPPxd"},"order":{"order_id":"20171003030858637674","uid":0,"name":"\u6d4b\u8bd5\u8ba2\u5355[\u9a71\u52a8:wechat]","fee":16.8,"gateway":"wechat","updated_at":"2017-10-03 03:08:58","created_at":"2017-10-03 03:08:59","id":73}},
     }
   </script>
 </head>

resources/mixes/vue-omnipay/package.json

@@ -23,6 +23,7 @@
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "builder-vue-element": "^1.0.7",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",

resources/mixes/vue-omnipay/src/components/app/app.vue

@@ -3,12 +3,20 @@
     <div class="omnipay-item">
       <div class="left">
         <div class="logo"><img src="/static/assets/wechat.png"></div>
-        <div class="price">应付金额：<strong><i>￥</i>38.00</strong></div>
-        <div class="order"><p>创建时间：2017-10-02 11:41:16</p></div>
+        <div class="price">应付金额：<strong><i>￥</i>{{ price }}</strong></div>
+        <div class="created_at">
+          <p>订单名称：{{ name }}</p>
+          <p>订单编号：{{ order_id }}</p>
+          <p>创建时间：{{ created_at }}</p>
+        </div>
       </div>
       <div class="right">
         <div class="pic">
-          <img src="https://zsstatus.tuanimg.com/pay/weixin/rq?pay=weixin%3A%2F%2Fwxpay%2Fbizpayurl%3Fpr%3DUm2LVjh">
+          <bve-qrcode-item
+            class="qrcode"
+            v-model="wechatQrcode"
+            :config="wechatQrcodeConfig"
+          />
         </div>
         <div class="fb"><i></i>请使用微信扫描<br>二维码以完成支付</div>
       </div>
@@ -21,6 +29,37 @@ export default {
   name: 'app',
   created () {
     console.log(window.config)
+  },
+  data () {
+    return {
+      wechatQrcodeConfig: {
+        size: 260
+      }
+    }
+  },
+  computed: {
+    gateway () {
+      return window.config.data.order.gateway
+    },
+    price () {
+      return window.config.data.order.fee.toFixed(2)
+    },
+    created_at () {
+      return window.config.data.order.created_at
+    },
+    order_id () {
+      return window.config.data.order.order_id
+    },
+    name () {
+      return window.config.data.order.name
+    },
+    /**
+     * [wechatQrcode 微信支付pc二维码]
+     * @return {[type]} [description]
+     */
+    wechatQrcode () {
+      return window.config.data.wechat.webOrder
+    }
   }
 }
 </script>
@@ -62,7 +101,7 @@ body{
         }
       }
     }
-    >.order{
+    >.created_at{
       padding: 10px 0;
       border-top:1px solid #e5e5e5;
       border-bottom:1px solid #e5e5e5;
@@ -75,15 +114,15 @@ body{
   >.right{
     width: 55%;
     padding: 5% 5% 5% 5%;
+    display: flex;
+    display: -webkit-flex; /* Safari */
+    flex-direction: column;
+    align-items: center;
     >.pic{
-      width: 267px;
-      height: 267px;
+      width: 260px;
+      height: 260px;
       background: url("/static/assets/loading.gif") center center no-repeat;
-      >img{
-        width: 267px;
-        height: 267px;
-        border:1px solid #e7e7e7;
-      }
+      border:1px solid #e7e7e7;
     }
     >.fb{
       padding:10px;

resources/mixes/vue-omnipay/src/main.js

@@ -1,5 +1,8 @@
 import Vue from 'vue'
 import App from './components/app'
+
+import BuilderVueElement from 'builder-vue-element'
+Vue.use(BuilderVueElement)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/App/Http/Controllers/OmnipayController.php

@@ -70,21 +70,21 @@ protected function alipay($gateway,$order)
      */
     protected function wechat($gateway,$order)
     {
-        $order = [
+        $wechatOrder = [
           'open_id' => 'oEFAEj2KZxrRp2OijMFccnMrfN3Q',
           'out_trade_no'      => $order->order_id,
           'body'              => $order->name,
           'total_fee'         => $order->fee*100, //=0.01
           'spbill_create_ip'  => '127.0.0.1',
           'fee_type'          => 'CNY',
         ];
-        $response = $gateway->purchase($order)->send();
+        $response = $gateway->purchase($wechatOrder)->send();
         $wechat = [
           'appOrder' => $response->getAppOrderData(),
           'jsOrder' => $response->getJsOrderData(),
           'webOrder' => $response->getCodeUrl(),
         ];
-        return view('core::index',[ 'model' => 'omnipay', 'data' => json_encode(['wechat' => $wechat]) ]);
+        return view('core::index',[ 'model' => 'omnipay', 'data' => json_encode(['wechat' => $wechat, 'order' => $order]) ]);
     }
     /**
      * [unionpay 银联支付购买]