订单详情

src/assets/styles/index.scss

@@ -124,6 +124,10 @@ aside {
   padding: 20px;
 }
 
+.app-container .box-card:nth-child(n + 2) {
+  margin-top: 1em;
+}
+
 .components-container {
   margin: 30px 50px;
   position: relative;

src/components/Business/Transaction/RechargeLink.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-link :type="type" @click="$router.push(url)">{{text}}</el-link>
+</template>
+
+<script>
+export default {
+  name: "RechargeLink",
+  props: {
+    billId: {
+      type: String,
+      default: null,
+    },
+    text: {
+      type: String,
+      default: null
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  computed: {
+    url() {
+      return `/transaction/recharge/${this.billId}`
+    }
+  }
+}
+</script>

src/views/ss/refund/index.vue

@@ -75,7 +75,11 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="退款ID" align="center" prop="refundId" width="80"/>
       <el-table-column label="退款订单编号" align="center" prop="refundNo" />
-      <el-table-column label="原订单编号" align="center" prop="billNo" />
+      <el-table-column label="原订单编号" align="center" prop="billNo" >
+        <template slot-scope="d">
+          <recharge-link :bill-id="d.row.billId" :text="d.row.billNo"/>
+        </template>
+      </el-table-column>
       <el-table-column label="退款金额" align="center" prop="amount" >
         <template slot-scope="d">
           {{d.row.amount | money}} 元
@@ -148,10 +152,20 @@
 
 <script>
 import { listRefund, getRefund, delRefund, addRefund, updateRefund } from "@/api/ss/refund";
+import RechargeLink from '@/components/Business/Transaction/RechargeLink.vue'
 
 export default {
   name: "Refund",
+  components: { RechargeLink },
   dicts: ['refund_status'],
+  props: {
+    query: {
+      type: Object,
+      default: () =>{
+        return {}
+      }
+    }
+  },
   data() {
     return {
       // 遮罩层
@@ -195,6 +209,10 @@ export default {
     };
   },
   created() {
+    this.queryParams = {
+      ...this.queryParams,
+      ...this.query
+    }
     this.getList();
   },
   methods: {

src/views/system/device/detail.vue

@@ -276,7 +276,4 @@ export default {
   color: #ccc;
   margin-left: 1em;
 }
-.app-container .box-card:nth-child(n + 1) {
-  margin-top: 1em;
-}
 </style>

src/views/system/recharge/detail.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="app-container" v-loading="loading">
+    <el-card class="box-card">
+      <el-descriptions title="基本信息">
+        <el-descriptions-item label="订单编号">{{detail.billNo | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="交易状态" :span="2">
+          <dict-tag :value="detail.status" :options="dict.type.sm_transaction_bill_status" size="small"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="交易金额">{{detail.money | money | defaultValue}} 元</el-descriptions-item>
+        <el-descriptions-item label="收款人到账金额">{{detail.arrivalAmount | money | defaultValue}} 元</el-descriptions-item>
+        <el-descriptions-item label="手续费">{{detail.serviceCharge | money | defaultValue}} 元</el-descriptions-item>
+        <el-descriptions-item label="平台渠道成本">{{detail.channelCost | money | defaultValue}} 元</el-descriptions-item>
+        <el-descriptions-item label="平台利润">{{detail.serviceCharge - detail.channelCost | money | defaultValue}} 元</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card class="box-card">
+      <el-descriptions title="设备套餐信息">
+        <el-descriptions-item label="设备编号">{{detail.deviceNo | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="设备名称">{{detail.deviceName | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="设备充值状态">
+          <dict-tag :value="detail.deviceRechargeStatus" :options="dict.type.sm_transaction_bill_device_recharge_status" size="small"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="套餐名称">{{detail.suitName | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="套餐开始时间">{{detail.suitStartTime | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="套餐结束时间">{{detail.suitEndTime | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="套餐失效时间">{{detail.suitExpireTime | defaultValue}}</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <el-card class="box-card">
+      <el-descriptions title="支付方信息">
+        <el-descriptions-item label="用户名称">{{detail.userName | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="支付方式">
+          <dict-tag :value="detail.channelId" :options="dict.type.sm_transaction_bill_pay_type" size="small"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="支付时间">{{detail.payTime | defaultValue}}</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <el-card class="box-card">
+      <el-descriptions title="收款方信息">
+        <el-descriptions-item label="收款人">{{detail.mchName | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="收款人手机号">{{detail.mchMobile | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="店铺名称">{{detail.storeName | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="店铺地址">{{detail.storeAddress | defaultValue}}</el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+
+    <el-card class="box-card">
+      <el-tabs>
+        <el-tab-pane label="退款信息" lazy>
+          <div style="padding: 16px 20px 0;">
+            <el-descriptions>
+              <el-descriptions-item label="总计退款金额">{{detail.refundAmount | money | defaultValue}} 元</el-descriptions-item>
+              <el-descriptions-item label="商户总计退款金额">{{detail.refundMchAmount | money | defaultValue}} 元</el-descriptions-item>
+              <el-descriptions-item label="服务费总计退款金额">{{detail.refundServiceAmount | money | defaultValue}} 元</el-descriptions-item>
+            </el-descriptions>
+          </div>
+          <refund v-if="detail.billId != null" :query="{billId: detail.billId}"/>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getBill } from '@/api/system/recharge'
+import Refund from '@/views/ss/refund/index.vue'
+
+export default {
+  name: 'RechargeDetail',
+  components: { Refund },
+  dicts: ['sm_transaction_bill_pay_type','sm_transaction_bill_status', 'sm_transaction_bill_device_recharge_status'],
+  data() {
+    return {
+      loading: false,
+      detail: {},
+      id: null,
+    }
+  },
+  created() {
+    this.id = this.$route.params.billId;
+    this.getDetail();
+  },
+  methods: {
+    getDetail() {
+      getBill(this.id).then(res => {
+        this.detail = res.data;
+      })
+    }
+  }
+}
+</script>

src/views/system/recharge/index.vue

@@ -17,10 +17,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="商户(到账用户)" label-width="120" prop="mchName">
+      <el-form-item label="收款用户" label-width="120" prop="mchName">
         <el-input
           v-model="queryParams.mchName"
-          placeholder="请输入商户"
+          placeholder="请输入收款用户名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -47,33 +47,33 @@
 
     <el-table v-loading="loading" :data="billList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="billId" />
+      <el-table-column label="订单ID" align="center" prop="billId" width="80"/>
       <el-table-column label="充值用户" align="center" prop="userName" />
       <el-table-column label="设备" align="center" prop="deviceName" />
-      <el-table-column label="商户" align="center" prop="mchName" />
+      <el-table-column label="收款用户" align="center" prop="mchName" />
       <el-table-column label="交易金额" align="center">
         <template slot-scope="d">
-          {{d.row.money | money}}
+          {{d.row.money | money}} 元
         </template>
       </el-table-column>
-      <el-table-column label="商户到账金额" align="center">
+      <el-table-column label="收款人到账金额" align="center">
         <template slot-scope="d">
-          {{d.row.arrivalAmount | money}}
+          {{d.row.arrivalAmount | money}} 元
         </template>
       </el-table-column>
       <el-table-column label="手续费" align="center">
         <template slot-scope="d">
-          {{d.row.serviceCharge | money}}
+          {{d.row.serviceCharge | money}} 元
         </template>
       </el-table-column>
       <el-table-column label="成本" align="center">
         <template slot-scope="d">
-          {{d.row.channelCost | money}}
+          {{d.row.channelCost | money}} 元
         </template>
       </el-table-column>
       <el-table-column label="利润" align="center">
         <template slot-scope="d">
-          {{d.row.serviceCharge - d.row.channelCost | money}}
+          {{d.row.serviceCharge - d.row.channelCost | money}} 元
         </template>
       </el-table-column>
       <el-table-column label="支付方式" align="center">
@@ -95,18 +95,28 @@
       <el-table-column label="操作" align="center" fixed="right">
         <template slot-scope="d">
           <el-button
+            size="small"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(d.row)"
+            v-has-permi="['system:bill:query']"
+          >详情</el-button>
+          <el-button
+            size="small"
             type="text"
             icon="el-icon-refresh"
             @click="refreshPayResult([d.row.billId])"
             v-if="canRefresh(d.row)"
           >刷新支付结果</el-button>
           <el-button
+            size="small"
             type="text"
             icon="el-icon-refresh"
             @click="rechargeDevice(d.row.billId)"
             v-if="canRechargeDevice(d.row)"
           >手动设备充值</el-button>
           <el-button
+            size="small"
             type="text"
             icon="el-icon-refresh"
             @click="handleRefund(d.row)"
@@ -244,6 +254,9 @@ export default {
         this.refundLoading = false;
       })
     },
+    handleView(row) {
+      this.$router.push(`/transaction/recharge/${row.billId}`)
+    },
     handleRefund(row) {
       this.refundForm = {
         billId: row.billId,