前端 + 后端：支付界面~

mobile-web/src/api/pay.js

@@ -0,0 +1,24 @@
+import request from "../config/request";
+
+export function getTransaction(appId, orderId) {
+  return request({
+    url: '/pay-api/users/transaction/get',
+    method: 'get',
+    params: {
+      appId,
+      orderId
+    }
+  });
+}
+
+export function submitTransaction(appId, orderId, payChannel) {
+  return request({
+    url: '/pay-api/users/transaction/submit',
+    method: 'post',
+    params: {
+      appId,
+      orderId,
+      payChannel
+    }
+  });
+}

mobile-web/src/config/request.js

@@ -21,11 +21,11 @@ const serviceRouter = function(requestUrl) {
       },
       '/promotion-api': {
         prefix: '/promotion-api',
-        target: 'http://127.0.0.1:18085//promotion-api',
+        target: 'http://127.0.0.1:18085/promotion-api',
       },
       '/pay-api': {
         prefix: '/pay-api',
-        target: 'http://127.0.0.1:18084//promotion-api',
+        target: 'http://127.0.0.1:18084/pay-api',
       },
     };
 
@@ -48,7 +48,7 @@ const serviceRouter = function(requestUrl) {
       },
       '/pay-api': {
         prefix: '/pay-api',
-        target: 'http://api.shop.iocoder.cn:18099/promotion-api',
+        target: 'http://api.shop.iocoder.cn:18099/pay-api',
       },
     };
 

mobile-web/src/config/router.js

@@ -203,6 +203,13 @@ const routes = [
     meta: {
       title: '优惠劵领取'
     }
+  },
+  {
+    path: '/pay',
+    component: () => import('../page/pay/index'),
+    meta: {
+      title: '收银台'
+    }
   }
 ];
 

mobile-web/src/page/pay/index.vue

@@ -1,50 +1,46 @@
 <template>
     <div>
+        <headerNav title="收银台"/>
         <van-cell-group>
-            <van-cell title="优惠劵编号" :value="couponTemplate.id" />
-            <van-cell title="优惠劵名" :value="couponTemplate.title"/>
+            <van-cell title="订单商品名" :value="transaction.orderSubject" />
+            <van-cell title="价格" :value="transaction.price / 100.0" />
         </van-cell-group>
-        <van-button slot="button" size="small" type="primary" @click="onFetchClick">领取优惠劵</van-button>
+        <van-button slot="button" size="small" type="primary" @click="submit(9999)">模拟支付</van-button>
     </div>
 </template>
 
 <script>
-  import { getCouponTemplate, doAddCouponCard } from '../../api/promotion';
+  import { getTransaction, submitTransaction } from '../../api/pay';
+  import pingpp from 'pingpp-js';
   import { Dialog } from 'vant';
-  import { setLoginToken } from '../../utils/cache';
 
   export default {
 
     data() {
       return {
-        couponTemplate: {
-        }
+        appId: this.$route.query.appId,
+        orderId: this.$route.query.orderId,
+        transaction: {},
       }
     },
 
     mounted() {
-      let id = this.$route.query.id;
-      let response = getCouponTemplate(id);
+      let response = getTransaction(this.appId, this.orderId);
       response.then(data => {
-        this.couponTemplate = data;
+        this.transaction = data;
       });
     },
 
     methods: {
-      onFetchClick: function () {
+      submit(payChannel) {
         let that = this;
-        let id = this.$route.query.id;
-        let response = doAddCouponCard(id);
-        response.then(data => {
-          Dialog.alert({
-            title: '系统提示',
-            message: '领取成功',
-            beforeClose: function (action, done) {
-              // 关闭弹窗
-              done();
-              // 跳转到我的优惠劵
-              that.$router.push('/user/coupon');
-            }
+        debugger;
+        submitTransaction(this.appId, this.orderId, payChannel).then(data => {
+          pingpp.createPayment(data.invokeResponse, function(result, err) {
+            debugger;
+            console.log(result);
+            console.log(err.msg);
+            console.log(err.extra);
           });
         });
       }

mobile-web/src/page/user/order/list.vue

@@ -38,7 +38,9 @@
               <van-button v-if="[3,4,5].indexOf(item.status) != -1" size="small">查看物流</van-button>
             </router-link>
             <van-button v-if="item.status === 3 " size="small" v-on:click="clickConfirmReceiving(item)">确认收货</van-button>
-            <van-button v-if="item.status === 1 " size="small" type="danger">支付</van-button>
+            <van-button v-if="item.status === 1 " size="small" type="danger" @click="goPay(item.orderid)">
+                    支付
+            </van-button>
           </div>
         </van-panel>
       </van-cell-group>
@@ -60,6 +62,10 @@
       }
     },
     methods: {
+      goPay(itemId) {
+        this.$router.push('/pay?appId=POd4RC6a&orderId=' + itemId);
+      },
+
       onTabChange(index) {
         // status 和 tab index 对应的关系
         const statusArray = [null, 1, 3, 4, 5];