支付历史查看;域名备案查询dom优化

src/App.vue

@@ -2,7 +2,6 @@
   <div id="app">
     <router-view />
     <div class="el-login-footer">
-      <a class="text-color" href="https://beian.miit.gov.cn" target="_blank"> <span style="color: #00afff">备案号：冀ICP备2024097706号-1</span></a>
     </div>
   </div>
 </template>

src/api/business/payOrder.js

@@ -68,3 +68,12 @@ export function doRepay(data) {
     data: data
   })
 }
+
+// 查询支付历史
+export function getDetailHistory(query) {
+  return request({
+    url: '/business/payOrder/detail/history',
+    method: 'get',
+    params: query
+  })
+}

src/layout/components/Sidebar/index.vue

@@ -20,6 +20,9 @@
                 />
             </el-menu>
         </el-scrollbar>
+      <div class="el-login-footer">
+        <a class="text-color" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"> <span style="color: #00afff">备案号：冀ICP备2024097706号-1</span></a>
+      </div>
     </div>
 </template>
 
@@ -55,3 +58,21 @@ export default {
     }
 };
 </script>
+
+<style lang="scss">
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 10%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.text-color {
+  width: 200px !important;
+}
+</style>

src/views/business/payDetail/index.vue

@@ -104,29 +104,94 @@
                      icon="el-icon-s-check"
                      @click="failReasonView(scope.row)"
           >失败原因</el-button>
+          <el-button v-if="viewBatchNo && scope.row.batchNo !== viewBatchNo"
+                     size="mini" type="text"
+                     icon="el-icon-c-scale-to-original"
+                     @click="viewHistory(scope.row.id)"
+          >支付历史</el-button>
         </template>
       </el-table-column>
     </el-table>
-
-    <pagination
+    <pagination id="getList"
       v-show="total>0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <el-dialog title="支付历史" :visible.sync="history.panel" width="80%" append-to-body class="dialogIp">
+      <el-table :data="history.rows">
+        <el-table-column label="明细流水号" align="center" prop="bizNo" />
+        <el-table-column label="支付类型" align="center" prop="payTitle" />
+        <el-table-column label="收款账户" align="center">
+          <el-table-column label="户名" align="center" prop="payeeAccName" />
+          <el-table-column label="账户" align="center" prop="payeeAccNo" />
+          <el-table-column label="类型" align="center" prop="payeeAccType" >
+            <template slot-scope="scope">
+              <el-row>
+                <el-col :span="12">
+                  <dict-tag :options="dict.type.payee_acc_type" :value="scope.row.payeeAccType"/>
+                </el-col>
+                <el-col :span="12">
+                  <el-tag v-if="scope.row.isPrivateAcc && scope.row.isPrivateAcc === 1">对私账户</el-tag>
+                  <el-tag v-if="scope.row.isPrivateAcc && scope.row.isPrivateAcc === 2">对公账户</el-tag>
+                </el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="交易金额" align="center" prop="amount" />
+        <el-table-column label="手续费" align="center" prop="transFee" />
+        <el-table-column label="支付状态" align="center" prop="payStatus" >
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.pay_status" :value="scope.row.payStatus" />
+          </template>
+        </el-table-column>
+        <el-table-column label="交易完成时间" align="center" prop="transactionTime" width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.transactionTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="payRemark" />
+      </el-table>
+      <div style="text-align: right; margin-top: 10px">
+        <el-pagination id="viewHistory"
+                       @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       :page-sizes="[10, 20, 30, 40]"
+                       :page-size="history.queryParams.pageSize"
+                       layout="total, sizes, prev, pager, next, jumper"
+                       :total="history.total">
+        </el-pagination>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="history.panel = false">关 闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listPayDetail } from "@/api/business/payDetail";
-import { detailVoucherView } from '@/api/business/payOrder'
+import { detailVoucherView, getDetailHistory } from '@/api/business/payOrder'
+import { background } from 'quill/ui/icons'
 
 export default {
   name: "PayDetail",
   dicts: ['pay_status', 'pay_type_title', 'payee_acc_type'],
   data() {
     return {
+      history: {
+        rows: [],
+        total: 0,
+        panel: false,
+        queryParams: {
+          pageNum: 0,
+          pageSize: 10,
+          payDetailId: 0,
+        }
+      },
       // 根路径
       baseURL: process.env.VUE_APP_BASE_API,
       // 遮罩层
@@ -147,6 +212,7 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      viewBatchNo: '',
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -172,6 +238,9 @@ export default {
   created() {
   },
   mounted() {
+    if (this.$route.query.batchNo) {
+      this.viewBatchNo = this.$route.query.batchNo
+    }
     if (this.$route.query.orderId) {
       this.queryParams.orderId = this.$route.query.orderId
     }
@@ -217,6 +286,26 @@ export default {
       this.$alert(row.failReason, '交易失败原因', {
         confirmButtonText: '确定',
       });
+    },
+    viewHistory(detailId) {
+      if (detailId) {
+        this.history.queryParams.payDetailId = detailId
+      }
+      getDetailHistory(this.history.queryParams).then(resp => {
+        if (200 === resp.code) {
+          this.history.rows = resp.rows
+          this.history.total = resp.total
+          this.history.panel = true
+        }
+      })
+    },
+    handleSizeChange(val) {
+      this.history.queryParams.pageSize = val
+      this.viewHistory()
+    },
+    handleCurrentChange(val) {
+      this.history.queryParams.pageNum = val
+      this.viewHistory()
     }
   }
 };

src/views/business/payOrder/index.vue

@@ -230,7 +230,7 @@ export default {
       }, `payOrder_${new Date().getTime()}.xlsx`)
     },
     viewDetail(row) {
-      this.$router.push({ path: "/business/payDetails", query: {orderId : row.id} });
+      this.$router.push({ path: "/business/payDetails", query: {orderId : row.id, batchNo: row.batchNo} });
     },
     doRepay(row) {
       if (row.id) {

src/views/login.vue

@@ -38,7 +38,7 @@
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <a class="text-color" href="https://beian.miit.gov.cn" target="_blank"> <span style="color: #00afff">备案号：冀ICP备2024097706号-1</span></a>
+      <a class="text-color" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"> <span style="color: #00afff">备案号：冀ICP备2024097706号-1</span></a>
     </div>
   </div>
 </template>