pay：前端收银台的信息接入

Author: YunaiV

src/api/pay/order.js

@@ -34,6 +34,14 @@ export function getOrder(id) {
   })
 }
 
+// 获得支付订单的明细
+export function getOrderDetail(id) {
+  return request({
+    url: '/pay/order/get-detail?id=' + id,
+    method: 'get'
+  })
+}
+
 // 获得支付订单分页
 export function getOrderPage(query) {
   return request({

src/router/index.js

@@ -228,9 +228,12 @@ export const constantRoutes = [
     hidden: true,
     children: [{
       path: 'order/submit',
-      name: '收银台',
+      name: 'PayOrderSubmit',
       hidden: true,
-      meta: { title: '收银台' },
+      meta: {
+        title: '收银台',
+        noCache: true
+      },
       component: (resolve) => require(['@/views/pay/order/submit'], resolve)
     }]
   }

src/utils/constants.js

@@ -172,7 +172,7 @@ export const PayOrderStatusEnum = {
   },
   CLOSED: {
     status: 20,
-    name: '未支付'
+    name: '支付关闭'
   }
 }
 

src/views/pay/demo/index.vue

@@ -47,7 +47,7 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handlePay(scope.row)"
-                     v-if="!scope.row.payed">支付</el-button>
+                     v-if="!scope.row.payed">前往支付</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -187,15 +187,14 @@ export default {
         });
       });
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const id = row.id;
-      this.$modal.confirm('是否确认删除示例订单编号为"' + id + '"的数据项?').then(function() {
-        return deleteDemoOrder(id);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+    /** 支付按钮操作 */
+    handlePay(row) {
+      this.$router.push({
+          name: 'PayOrderSubmit',
+          query:{
+            id: row.payOrderId
+          }
+      })
     }
   }
 };

src/views/pay/order/index.vue

@@ -215,7 +215,7 @@
 </template>
 
 <script>
-import {getOrder, getOrderPage, exportOrderExcel} from "@/api/pay/order";
+import { getOrderDetail, getOrderPage, exportOrderExcel} from "@/api/pay/order";
 import {getMerchantListByName} from "@/api/pay/merchant";
 import {getAppListByMerchantId} from "@/api/pay/app";
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
@@ -250,7 +250,7 @@ const defaultOrderDetail = {
 };
 
 export default {
-  name: "Order",
+  name: "PayOrder",
   components: {},
   data() {
     return {
@@ -364,7 +364,7 @@ export default {
      */
     handleQueryDetails(row) {
       this.orderDetail = JSON.parse(JSON.stringify(defaultOrderDetail));
-      getOrder(row.id).then(response => {
+      getOrderDetail(row.id).then(response => {
         this.orderDetail = response.data;
         if (response.data.payOrderExtension === null) {
           this.orderDetail.payOrderExtension = Object.assign(defaultOrderDetail.payOrderExtension, {});

src/views/pay/order/submit.vue

@@ -3,12 +3,12 @@
     <!-- 支付信息 -->
     <el-card v-loading="loading">
       <el-descriptions title="支付信息" :column="3" border>
-        <el-descriptions-item label="支付单号">kooriookami</el-descriptions-item>
-        <el-descriptions-item label="商品标题">苏州市</el-descriptions-item>
-        <el-descriptions-item label="商品内容">苏州市</el-descriptions-item>
-        <el-descriptions-item label="支付金额">18100000000</el-descriptions-item>
-        <el-descriptions-item label="创建时间">苏州市</el-descriptions-item>
-        <el-descriptions-item label="过期时间">苏州市</el-descriptions-item>
+        <el-descriptions-item label="支付单号">{{ payOrder.id }}</el-descriptions-item>
+        <el-descriptions-item label="商品标题">{{ payOrder.subject }}</el-descriptions-item>
+        <el-descriptions-item label="商品内容">{{ payOrder.body }}</el-descriptions-item>
+        <el-descriptions-item label="支付金额">￥{{ (payOrder.amount / 100.0).toFixed(2) }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ parseTime(payOrder.createTime) }}</el-descriptions-item>
+        <el-descriptions-item label="过期时间">{{ parseTime(payOrder.expireTime) }}</el-descriptions-item>
       </el-descriptions>
     </el-card>
 
@@ -43,7 +43,9 @@
   </div>
 </template>
 <script>
-import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import { DICT_TYPE, getDictDatas } from "@/utils/dict";
+import { getOrder } from '@/api/pay/order';
+import { PayOrderStatusEnum } from "@/utils/constants";
 
 export default {
   name: "PayOrderSubmit",
@@ -71,11 +73,7 @@ export default {
   },
   created() {
     this.id = this.$route.query.id;
-    // if (!this.id) {
-    //   this.$message.error('未传递 id 参数，无法查看 OA 请假信息');
-    //   return;
-    // }
-    // this.getDetail();
+    this.getDetail();
     this.initPayChannels();
   },
   methods: {
@@ -98,8 +96,28 @@ export default {
     },
     /** 获得请假信息 */
     getDetail() {
-      getLeave(this.id).then(response => {
-        this.form = response.data;
+      // 1.1 未传递订单编号
+      if (!this.id) {
+        this.$message.error('未传递支付单号，无法查看对应的支付信息');
+        this.$router.go(-1);
+        return;
+      }
+      getOrder(this.id).then(response => {
+        // 1.2 无法查询到支付信息
+        if (!response.data) {
+          this.$message.error('支付订单不存在，请检查！');
+          this.$router.go(-1);
+          return;
+        }
+        // 1.3 订单已支付
+        if (response.data.status !== PayOrderStatusEnum.WAITING.status) {
+          this.$message.error('支付订单不处于待支付状态，请检查！');
+          this.$router.go(-1);
+          return;
+        }
+
+        // 2. 可以展示
+        this.payOrder = response.data;
       });
     },
   }