缴费，案件详情问题处理

src/api/caseManagement/caseManagement.js

 /** 批量上传证据 */
 export function batchUpload(data) {
     return request({
-      url: "/caseApplication/batchUpdateAttach",
-      method: "post",
-      data: data,
+        url: "/caseApplication/batchUpload",
+        method: "post",
+        data: data,
     });
+}
+// 提交 
+export function submitCaseApply(data) {
+    return request({
+      url: '/caseApplication/submit',
+      method: 'post',
+      data: data
+    })
   }

src/api/pay/pay.js

+import request from '@/utils/request'
+// 查看详情
+export function caseApplicationDetail(data) {
+    return request({
+        url: '/caseApplication/selectCaseApplication',
+        // headers: {
+        //   isToken: false
+        // },
+        method: 'post',
+        data: data
+    })
+}
+// 支付
+export function casePay(data) {
+    return request({
+      url: '/pay/casePay',
+      // headers: {
+      //   isToken: false
+      // },
+      method: 'post',
+      data: data
+    })
+  }
+// 确认缴费
+export function confirmPay(data) {
+    return request({
+      url: '/pay/confirm',
+      // headers: {
+      //   isToken: false
+      // },
+      method: 'put',
+      data: data
+    })
+  }
+//确认缴费查看案件详情接口（新修改显示案件缴费状态）
+export function selectCaseApplicationConfirm(data) {
+  return request({
+    url: '/caseApplication/selectCaseApplicationConfirm',
+    // headers: {
+    //   isToken: false
+    // },
+    method: 'post',
+    data: data
+  })
+} 
+
+// 缴费页面缴费确认
+export function confirmPayDig(data) {
+  return request({
+    url: '/pay/confirmPayment',
+    // headers: {
+    //   isToken: false
+    // },
+    method: 'post',
+    data: data
+  })
+}
+// 查询批量缴费信息
+// 缴费页面缴费确认
+export function getPayDetail(params) {
+  return request({
+    url: '/pay/list',
+    method: 'get',
+    params: params
+  })
+}

src/assets/icon/demo.css

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/icon/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4246508" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68a;</span>
+                <div class="name">支付宝</div>
+                <div class="code-name">&amp;#xe68a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68b;</span>
+                <div class="name">银联</div>
+                <div class="code-name">&amp;#xe68b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe689;</span>
+                <div class="name">微信支付</div>
+                <div class="code-name">&amp;#xe689;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1694418644261') format('woff2'),
+       url('iconfont.woff?t=1694418644261') format('woff'),
+       url('iconfont.ttf?t=1694418644261') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhifubao"></span>
+            <div class="name">
+              支付宝
+            </div>
+            <div class="code-name">.icon-zhifubao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yinlian"></span>
+            <div class="name">
+              银联
+            </div>
+            <div class="code-name">.icon-yinlian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-weixinzhifu"></span>
+            <div class="name">
+              微信支付
+            </div>
+            <div class="code-name">.icon-weixinzhifu
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhifubao"></use>
+                </svg>
+                <div class="name">支付宝</div>
+                <div class="code-name">#icon-zhifubao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yinlian"></use>
+                </svg>
+                <div class="name">银联</div>
+                <div class="code-name">#icon-yinlian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-weixinzhifu"></use>
+                </svg>
+                <div class="name">微信支付</div>
+                <div class="code-name">#icon-weixinzhifu</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/icon/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 4246508 */
+  src: url('iconfont.woff2?t=1694418644261') format('woff2'),
+       url('iconfont.woff?t=1694418644261') format('woff'),
+       url('iconfont.ttf?t=1694418644261') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-zhifubao:before {
+  content: "\e68a";
+}
+
+.icon-yinlian:before {
+  content: "\e68b";
+}
+
+.icon-weixinzhifu:before {
+  content: "\e689";
+}
+

src/assets/icon/iconfont.json

+{
+  "id": "4246508",
+  "name": "法务",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "9306312",
+      "name": "支付宝",
+      "font_class": "zhifubao",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "9306315",
+      "name": "银联",
+      "font_class": "yinlian",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
+      "icon_id": "9306311",
+      "name": "微信支付",
+      "font_class": "weixinzhifu",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    }
+  ]
+}

src/main.js

 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
-
+import './assets/icons' // icon
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
 import App from './App'
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
 
-import './assets/icons' // icon
+import './assets/icon/iconfont.css'
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";

src/utils/permission.js

  * @returns {Boolean}
  */
 export function statusRole(value) {
-  let caseStatus = sessionStorage.getItem('caseStatus');
-  caseStatus = JSON.parse(caseStatus);
-  if(caseStatus.length == 0){
+  let caseStatusStr = sessionStorage.getItem('caseStatus');
+  let caseStatus = [];
+  caseStatus = JSON.parse(caseStatusStr);
+  if (caseStatus.length == 0) {
+    return false
+  }
+  if (caseStatus.includes(value)) {
+    return true
+  } else {
     return false
   }
-  caseStatus.forEach(item => {
-    if(item == value){
-      return true
-    }else{
-      return false
-    }
-  });
 }

src/views/caseManagement/caseList.vue

             <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
+                    <el-button size="mini" type="text" icon="el-icon-check" @click="onsubmitRow(scope.row)">提交</el-button>
                     <el-button size="mini" @click="eidtNodeprocess(scope.row)" type="text"
                         icon="el-icon-edit">修改</el-button>
                     <el-button size="mini" @click="checkDetail(scope.row)" type="text" icon="el-icon-view">查看详情</el-button>
-                    <el-button size="mini" @click="consultantApplica(scope.row)" type="text" icon="el-icon-tickets">法律顾问用印申请</el-button>
-                    <el-button size="mini" @click="departmentApplica(scope.row)" type="text" icon="el-icon-edit-outline">部门长用印申请</el-button>
+                    <el-button size="mini" @click="consultantApplica(scope.row)" type="text"
+                        icon="el-icon-tickets">法律顾问用印申请</el-button>
+                    <el-button size="mini" @click="departmentApplica(scope.row)" type="text"
+                        icon="el-icon-edit-outline">部门长用印申请</el-button>
                     <el-button size="mini" @click="caseFlow(scope.row)" type="text" icon="el-icon-zoom-in">查看流程</el-button>
-                    <el-button size="mini" @click="caseLog(scope.row)" type="text" icon="el-icon-edit-outline">案件日志</el-button>
-                    <el-button size="mini" @click="caseFiling(scope.row)" type="text" icon="el-icon-tickets">案件归档</el-button>
-                    <el-button size="mini" @click="signMediation(scope.row)" type="text" icon="el-icon-edit-outline">签收调解书</el-button>                 
+                    <el-button size="mini" @click="caseLog(scope.row)" type="text"
+                        icon="el-icon-edit-outline">案件日志</el-button>
+                    <el-button size="mini" @click="caseFiling(scope.row)" type="text"
+                        icon="el-icon-tickets">案件归档</el-button>
+                    <el-button size="mini" @click="signMediation(scope.row)" type="text"
+                        icon="el-icon-edit-outline">签收调解书</el-button>
                     <el-button size="mini" type="text" icon="el-icon-edit"
                         @click="evidenceUpload(scope.row)">证据修改</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-tickets" @click="payStatus(scope.row)">缴费</el-button>
                 </template>
             </el-table-column>
         </el-table>
             @pagination="getList(queryParams)" />
         <!-- 新增编辑详情 -->
         <addCase :addVisable="addVisable" :queryParams="queryParams" @cancelCaseAdd="cancelCaseAdd" @getList="getList"
-            :caseData="caseData" :caseDisabled="caseDisabled"></addCase>
+            :caseData="caseData" :caseDisabled="caseDisabled" :tabFlag="tabFlag"></addCase>
         <!-- 压缩包导入     -->
         <caseCompressionPackage :openCompressedPackages="openCompressedPackages" :queryParams="queryParams"
             @cancelCompreess="cancelCompreess" :getList="getList">
         </caseCompressionPackage>
         <!-- 案件详情 -->
-        <mediationCaseDetails :processVisable="processVisable" @cancelViewProcess="cancelViewProcess"></mediationCaseDetails>
+        <mediationCaseDetails :processVisable="processVisable" @cancelViewProcess="cancelViewProcess">
+        </mediationCaseDetails>
         <!-- 案件日志 -->
         <mediationCaseLog :showcaseLog="showcaseLog" @cancelcaseLog="cancelcaseLog"></mediationCaseLog>
         <!-- 证据修改 -->
         <evidenceDialog :evidenceVisable="evidenceVisable" @cancelEvidence="cancelEvidence" :evidenceData="evidenceData">
         </evidenceDialog>
+        <!-- 缴费 -->
+        <payDialog :openPay="openPay" :payTitle="payTitle" :formPayDetail="formPayDetail" :payId="payId" :payForm="payForm"
+            :queryParams="queryParams" @getList="getList" @paycancelRow="paycancelRow"></payDialog>
     </div>
 </template>
 
 <script>
-import { caseApplicationList } from '@/api/caseManagement/caseManagement.js'
+import { caseApplicationList, caseApplicationSelectById,submitCaseApply } from '@/api/caseManagement/caseManagement.js'
 import { listDept } from '@/api/system/dept.js'
 import moment from "moment";
 import addCase from './components/addCase.vue'
 import caseCompressionPackage from './components/caseCompressionPackage.vue';
 import mediationCaseDetails from './components/mediationCaseDetails.vue'
 import mediationCaseLog from './components/mediationCaseLog.vue'
+import payDialog from "./components/payDialog.vue";
 export default {
     name: "caseList",
     dicts: ["case_flow_node"],
         caseCompressionPackage,
         mediationCaseDetails,
         mediationCaseLog,
-        evidenceDialog
+        evidenceDialog,
+        payDialog,
     },
     data() {
         return {
             rules: {},
             dataList: [],
             addVisable: false,//新增弹窗
-            openCompressedPackages:false,//压缩包导入弹窗
-            processVisable:false,//案件详情
-            showcaseLog:false,//案件日志
+            openCompressedPackages: false,//压缩包导入弹窗
+            processVisable: false,//案件详情
+            showcaseLog: false,//案件日志
             evidenceVisable: false,//证据修改弹窗
+            openPay: false, //缴费弹框
+            formPayDetail: {},
+            payId: null,
+            payForm: {},
             caseData: {},
             evidenceData: {},
             caseDisabled: false,
             caseTime: '',
-            deptList: []
+            deptList: [],
+            payTitle: '',
+            tabFlag: false
         };
     },
     created() {
             this.addVisable = true;
             this.caseData = {};
             this.caseDisabled = false;
+            this.tabFlag = false;
         },
         /** 查看详情 */
         checkDetail(val) {
             this.caseData = val;
             this.caseData.flag = 1;
             this.caseDisabled = true;
+            this.tabFlag = true;
         },
         /** 修改案件 */
         eidtNodeprocess(row) {
             this.addVisable = true;
             this.caseData = row;
             this.caseDisabled = false;
+            this.tabFlag = false;
         },
         /** 案件导入压缩包 */
         compressedPackages() {
             this.openCompressedPackages = true;
         },
+        /** 缴费 */
+        payStatus(val) {
+            this.getDetail({ id: val.id });
+            this.payTitle = "缴费";
+            this.payId = val.id;
+            this.openPay = true;
+        },
+        /** 列表提交立案 */
+        onsubmitRow(row) {
+            this.$modal
+                .confirm("是否提交立案申请？")
+                .then(function () {
+                    return submitCaseApply({ id: row.id,caseFlowId:row.caseFlowId });
+                })
+                .then(() => {
+                    this.getList(this.queryParams);
+                    this.$modal.msgSuccess("立案申请成功");
+                })
+                .catch(() => { });
+        },
+        getDetail(parms) {
+            caseApplicationSelectById(parms).then((res) => {
+                this.formPayDetail = res.data;
+                this.payForm.feePayable = res.data.feePayable;
+                this.payForm.caseId = res.data.id;
+            });
+        },
         /** 时间改变处理 */
         caseTimeChange() {
             if (this.caseTime) {
         cancelCompreess() {
             this.openCompressedPackages = false;
         },
+        /**取消缴费*/
+        paycancelRow(row) {
+            this.openPay = false;
+        },
         /** 搜索按钮操作 */
         handleQuery() {
             this.queryParams.pageNum = 1;
             })
         },
         // 部门长用印申请
-        departmentApplica(){
-            
+        departmentApplica() {
+
         },
         //案件流程
-        caseFlow(row){
-           this.processVisable = true 
+        caseFlow(row) {
+            this.processVisable = true
         },
-        cancelViewProcess(){
+        cancelViewProcess() {
             this.processVisable = false
         },
         //案件日志
-        caseLog(){
-           this.showcaseLog = true 
+        caseLog() {
+            this.showcaseLog = true
         },
-        cancelcaseLog(){
+        cancelcaseLog() {
             this.showcaseLog = false
         },
         // 案件归档
-        caseFiling(){
-           this.$modal.confirm("你确定要案件归档吗？").then((res) => {
-                     
-                }).catch(() =>{
-                    
-            }) 
+        caseFiling() {
+            this.$modal.confirm("你确定要案件归档吗？").then((res) => {
+
+            }).catch(() => {
+
+            })
         },
         //签收调解书
-        signMediation(){
+        signMediation() {
             this.$modal.confirm("你确定要签收调解书吗？").then((res) => {
-                     
-                }).catch(() =>{
-                    
-            }) 
+
+            }).catch(() => {
+
+            })
         },
         departmentApplica() {
 

src/views/caseManagement/components/addCase.vue

         <el-dialog :title="title" :visible="addVisable" v-if="addVisable" @close="cancel" width="1000px" center
             :distroy-on-close="true">
             <el-tabs v-model="activeName">
-                <el-tab-pane label="案件信息" name="first"><el-form :model="formData" ref="ruleForm" label-width="130px"
-                        class="demo-ruleForm" :disabled="caseDisabled">
-                        <el-row>
-                            <div style="display: inline-flex">
-                                <div class="infoIcon"></div>
-                                <div class="caseInfo">案件信息：</div>
-                            </div>
-                            <el-divider></el-divider>
-                            <el-col :span="24">
-                                <el-form-item label="申请人仲裁请求" prop="arbitratClaims" :rules="[
-                                    {
-                                        required: true,
-                                        message: '申请人仲裁请求不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.arbitratClaims" placeholder="请输入申请人仲裁诉求" type="textarea"
-                                        :autosize="{ minRows: 4, maxRows: 8 }" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="24">
-                                <el-form-item label="事实和理由" prop="facts" :rules="[
-                                    {
-                                        required: true,
-                                        message: '事实和理由不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.facts" placeholder="请输入事实和理由" type="textarea"
-                                        :autosize="{ minRows: 4, maxRows: 8 }" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="24">
-                                <el-form-item label="申请人请求仲裁庭裁决" prop="requestRule">
-                                    <el-input v-model="formData.requestRule" placeholder="请输入申请人请求仲裁庭裁决" type="textarea"
-                                        :autosize="{ minRows: 4, maxRows: 8 }" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="24">
-                                <el-form-item label="案件描述" prop="caseDescribe">
-                                    <el-input v-model="formData.caseDescribe" placeholder="请输入案件描述" type="textarea"
-                                        :autosize="{ minRows: 4, maxRows: 8 }" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="案件标的" prop="caseSubjectAmount" :rules="[
-                                    {
-                                        required: true,
-                                        message: '案件标的不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.caseSubjectAmount" placeholder="请输入案件标的" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="24">
-                                <el-form-item label="裁决书模板" prop="templateId" :rules="[
-                                    {
-                                        required: true,
-                                        message: '裁决书模板',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-select placeholder="请选择裁决书模板" v-model="formData.templateId">
-                                        <el-option v-for="item in templateList" :label="item.temName" :key="item.id"
-                                            :value="item.id"></el-option>
-                                    </el-select>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="申请人案件证据资料上传：" prop="applicantEvidence">
-                                    <el-upload class="upload-demo" ref="fileupload" accept=".png,.jpg,.doc,.docx,.txt,.pdf"
-                                        :action="UploadUrl()" :on-success="handlSuccess" :on-remove="handleRemove"
-                                        :on-preview="handlePreview" :before-remove="beforeRemove" :data="filedata"
-                                        :headers="headers" multiple :limit="50" :on-exceed="handleExceed"
-                                        :file-list="fileList">
-                                        <el-button size="small" type="primary">点击上传</el-button>
-                                        <div slot="tip" class="el-upload__tip">
-                                            文件支持上传.jpg，png，.doc，docx，.txt，.pdf文件
-                                        </div>
-                                    </el-upload>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="24" v-if="modelFlag">
-                                <el-form-item label="证据">
-                                    <div v-for="(item, index) in formData.caseAttachList" :key="index">
-                                        <div style="color: blue;cursor: pointer;" @click="fileDetil(item.annexPath)">{{
-                                            item.annexName }}</div>
-                                    </div>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="24">
-                                <div style="display: inline-flex">
-                                    <div class="infoIcon"></div>
-                                    <div class="caseInfo">双方信息：</div>
+                <el-tab-pane label="案件信息" name="first">
+
+                </el-tab-pane>
+                <el-tab-pane label="证据清单" name="second" v-if="tabFlag">
+                    
+                </el-tab-pane>
+            </el-tabs>
+            <el-form v-if="activeName == 'first'" :disabled="caseDisabled" :model="formData" ref="ruleForm" label-width="130px" class="demo-ruleForm">
+                <el-row>
+                    <div style="display: inline-flex">
+                        <div class="infoIcon"></div>
+                        <div class="caseInfo">案件信息：</div>
+                    </div>
+                    <el-divider></el-divider>
+                    <el-col :span="24">
+                        <el-form-item label="申请人仲裁请求" prop="arbitratClaims" :rules="[
+                            {
+                                required: true,
+                                message: '申请人仲裁请求不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.arbitratClaims" placeholder="请输入申请人仲裁诉求" type="textarea"
+                                :autosize="{ minRows: 4, maxRows: 8 }" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="事实和理由" prop="facts" :rules="[
+                            {
+                                required: true,
+                                message: '事实和理由不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.facts" placeholder="请输入事实和理由" type="textarea"
+                                :autosize="{ minRows: 4, maxRows: 8 }" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="申请人请求仲裁庭裁决" prop="requestRule">
+                            <el-input v-model="formData.requestRule" placeholder="请输入申请人请求仲裁庭裁决" type="textarea"
+                                :autosize="{ minRows: 4, maxRows: 8 }" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="案件描述" prop="caseDescribe">
+                            <el-input v-model="formData.caseDescribe" placeholder="请输入案件描述" type="textarea"
+                                :autosize="{ minRows: 4, maxRows: 8 }" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="案件标的" prop="caseSubjectAmount" :rules="[
+                            {
+                                required: true,
+                                message: '案件标的不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.caseSubjectAmount" placeholder="请输入案件标的" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="裁决书模板" prop="templateId" :rules="[
+                            {
+                                required: true,
+                                message: '裁决书模板',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-select placeholder="请选择裁决书模板" v-model="formData.templateId">
+                                <el-option v-for="item in templateList" :label="item.temName" :key="item.id"
+                                    :value="item.id"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="申请人案件证据资料上传：" prop="applicantEvidence">
+                            <el-upload class="upload-demo" ref="fileupload" accept=".png,.jpg,.doc,.docx,.txt,.pdf"
+                                :action="UploadUrl()" :on-success="handlSuccess" :on-remove="handleRemove"
+                                :on-preview="handlePreview" :before-remove="beforeRemove" :data="filedata"
+                                :headers="headers" multiple :limit="50" :on-exceed="handleExceed" :file-list="fileList">
+                                <el-button size="small" type="primary">点击上传</el-button>
+                                <div slot="tip" class="el-upload__tip">
+                                    文件支持上传.jpg，png，.doc，docx，.txt，.pdf文件
                                 </div>
-                                <el-divider></el-divider>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="申请机构名称" prop="affiliate.applicationOrganName" :rules="[
-                                    {
-                                        required: true,
-                                        message: '申请机构名称不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.applicationOrganName" placeholder="请输入申请机构名称" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="统一社会信用代码" prop="affiliate.creditCode" :rules="[
-                                    {
-                                        required: true,
-                                        message: '统一社会信用代码不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.creditCode" placeholder="请输入统一社会信用代码" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="法定代表人" prop="affiliate.compLegalPerson" :rules="[
-                                    {
-                                        required: true,
-                                        message: '法定代表人不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.compLegalPerson" placeholder="请输入法定代表人" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="申请人住所" prop="affiliate.applicantHome" :rules="[
-                                    {
-                                        required: true,
-                                        message: '申请人住所不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.applicantHome" placeholder="请输入申请人住所" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="申请人联系地址" prop="affiliate.applicantAddress" :rules="[
-                                    {
-                                        required: true,
-                                        message: '申请人联系地址不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.applicantAddress" placeholder="请输入申请人联系地址" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="代理人联系电话" prop="affiliate.contactTelphoneAgent" :rules="[
-                                    {
-                                        required: true,
-                                        message: '代理人联系电话不能为空',
-                                        trigger: 'blur',
-                                    },
-                                    {
-                                        pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
-                                        message: '请输入正确的手机号码',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.contactTelphoneAgent" placeholder="请输入代理人联系电话" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="委托代理人姓名" prop="affiliate.nameAgent" :rules="[
-                                    {
-                                        required: true,
-                                        message: '委托代理人姓名不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.nameAgent" placeholder="请输入委托代理人姓名" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="代理人邮箱" prop="affiliate.agentEmail" :rules="[
-                                    {
-                                        required: true,
-                                        message: '代理人邮箱不能为空',
-                                        trigger: 'blur',
-                                    },
-                                    {
-                                        pattern:
-                                            /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
-                                        message: '请输入正确的邮箱地址',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.agentEmail" placeholder="请输入代理人邮箱" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="被申请人姓名" prop="affiliate.respondentName" :rules="[
-                                    {
-                                        required: true,
-                                        message: '被申请人姓名不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.respondentName" placeholder="请输入被申请人姓名" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="被申请人联系电话" prop="affiliate.respondentPhone" :rules="[
-                                    {
-                                        required: true,
-                                        message: '被申请人联系电话不能为空',
-                                        trigger: 'blur',
-                                    },
-                                    {
-                                        pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
-                                        message: '请输入正确的手机号码',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.respondentPhone" placeholder="请输入被申请人联系电话" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="被申请人身份证号" prop="affiliate.respondentIdentityNum" :rules="[
-                                    {
-                                        required: true,
-                                        message: '被申请人身份证号不能为空',
-                                        trigger: 'blur',
-                                    },
-                                    {
-                                        pattern:
-                                            /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
-                                        message: '请输入正确的身份证号码',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.respondentIdentityNum"
-                                        placeholder="请输入被申请人身份证号" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="被申请人性别：" prop="affiliate.respondentSex" :rules="[
-                                    {
-                                        required: true,
-                                        message: '请选择性别'
-                                    },
-                                ]">
-                                    <el-radio-group v-model="formData.affiliate.respondentSex">
-                                        <el-radio label="0">男</el-radio>
-                                        <el-radio label="1">女</el-radio>
-                                    </el-radio-group>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="被申请人出生年月日：" prop="affiliate.respondentBirth" :rules="[
-                                    {
-                                        required: true,
-                                        message: '被申请人出生年月日不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-date-picker v-model="formData.affiliate.respondentBirth" type="date"
-                                        placeholder="被申请人出生年月日">
-                                    </el-date-picker>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="被申请人申请人住所" prop="affiliate.respondentHome" :rules="[
-                                    {
-                                        required: true,
-                                        message: '被申请人申请人住所不能为空',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.respondentHome" placeholder="请输入被申请人申请人住所" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="被申请人邮箱" prop="affiliate.respondentEmail" :rules="[
-                                    {
-                                        required: true,
-                                        message: '代理人邮箱不能为空',
-                                        trigger: 'blur',
-                                    },
-                                    {
-                                        pattern:
-                                            /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
-                                        message: '请输入正确的邮箱地址',
-                                        trigger: 'blur',
-                                    },
-                                ]">
-                                    <el-input v-model="formData.affiliate.respondentEmail" placeholder="请输入被申请人邮箱" />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-col :span="24" v-if="modelFlag">
-                            <div style="display: inline-flex">
-                                <div class="infoIcon"></div>
-                                <div class="caseInfo">抓取规则设置</div>
+                            </el-upload>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24" v-if="modelFlag">
+                        <el-form-item label="证据">
+                            <div v-for="(item, index) in formData.caseAttachList" :key="index">
+                                <div style="color: blue;cursor: pointer;" @click="fileDetil(item.annexPath)">{{
+                                    item.annexName }}</div>
                             </div>
-                            <el-divider></el-divider>
-                        </el-col>
-                        <el-col :span="24" v-if="modelFlag">
-                            <el-form-item v-for="(item) in formData.columnValueList" :label="item.name" :key="item.id">
-                                <el-input type="textarea" v-model="item.value"></el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-form></el-tab-pane>
-                <el-tab-pane label="证据清单" name="second" v-show="evidenceFlag">
-                    <el-card class="box-card" style="margin-bottom: 30px;">
-                        <div slot="header" class="clearfix">
-                            <span>申请人证据清单</span>
-                        </div>
-                        <div v-for="(item, index) in applicantEvidence" :key="index" class="text item"
-                            style="color: blue;cursor: pointer;" @click="toPreview(item.annexPath)">
-                            {{ item.annexName }}
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <div style="display: inline-flex">
+                            <div class="infoIcon"></div>
+                            <div class="caseInfo">双方信息：</div>
                         </div>
-                    </el-card>
-                    <el-card class="box-card">
-                        <div slot="header" class="clearfix">
-                            <span>被申请人证据清单</span>
-                        </div>
-                        <div v-for="(item, index) in respondentEvidence" :key="index" class="text item"
-                            style="color: blue;cursor: pointer;" @click="toPreview(item.annexPath)">
-                            {{ item.annexName }}
-                        </div>
-                    </el-card>
-                </el-tab-pane>
-            </el-tabs>
-
+                        <el-divider></el-divider>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="申请机构名称" prop="affiliate.applicationOrganName" :rules="[
+                            {
+                                required: true,
+                                message: '申请机构名称不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.applicationOrganName" placeholder="请输入申请机构名称" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="统一社会信用代码" prop="affiliate.creditCode" :rules="[
+                            {
+                                required: true,
+                                message: '统一社会信用代码不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.creditCode" placeholder="请输入统一社会信用代码" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="法定代表人" prop="affiliate.compLegalPerson" :rules="[
+                            {
+                                required: true,
+                                message: '法定代表人不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.compLegalPerson" placeholder="请输入法定代表人" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="申请人住所" prop="affiliate.applicantHome" :rules="[
+                            {
+                                required: true,
+                                message: '申请人住所不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.applicantHome" placeholder="请输入申请人住所" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="申请人联系地址" prop="affiliate.applicantAddress" :rules="[
+                            {
+                                required: true,
+                                message: '申请人联系地址不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.applicantAddress" placeholder="请输入申请人联系地址" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="代理人联系电话" prop="affiliate.contactTelphoneAgent" :rules="[
+                            {
+                                required: true,
+                                message: '代理人联系电话不能为空',
+                                trigger: 'blur',
+                            },
+                            {
+                                pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
+                                message: '请输入正确的手机号码',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.contactTelphoneAgent" placeholder="请输入代理人联系电话" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="委托代理人姓名" prop="affiliate.nameAgent" :rules="[
+                            {
+                                required: true,
+                                message: '委托代理人姓名不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.nameAgent" placeholder="请输入委托代理人姓名" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="代理人邮箱" prop="affiliate.agentEmail" :rules="[
+                            {
+                                required: true,
+                                message: '代理人邮箱不能为空',
+                                trigger: 'blur',
+                            },
+                            {
+                                pattern:
+                                    /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
+                                message: '请输入正确的邮箱地址',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.agentEmail" placeholder="请输入代理人邮箱" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="被申请人姓名" prop="affiliate.respondentName" :rules="[
+                            {
+                                required: true,
+                                message: '被申请人姓名不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.respondentName" placeholder="请输入被申请人姓名" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="被申请人联系电话" prop="affiliate.respondentPhone" :rules="[
+                            {
+                                required: true,
+                                message: '被申请人联系电话不能为空',
+                                trigger: 'blur',
+                            },
+                            {
+                                pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
+                                message: '请输入正确的手机号码',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.respondentPhone" placeholder="请输入被申请人联系电话" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="被申请人身份证号" prop="affiliate.respondentIdentityNum" :rules="[
+                            {
+                                required: true,
+                                message: '被申请人身份证号不能为空',
+                                trigger: 'blur',
+                            },
+                            {
+                                pattern:
+                                    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
+                                message: '请输入正确的身份证号码',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.respondentIdentityNum" placeholder="请输入被申请人身份证号" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="被申请人性别：" prop="affiliate.respondentSex" :rules="[
+                            {
+                                required: true,
+                                message: '请选择性别'
+                            },
+                        ]">
+                            <el-radio-group v-model="formData.affiliate.respondentSex">
+                                <el-radio label="0">男</el-radio>
+                                <el-radio label="1">女</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="被申请人出生年月日：" prop="affiliate.respondentBirth" :rules="[
+                            {
+                                required: true,
+                                message: '被申请人出生年月日不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-date-picker v-model="formData.affiliate.respondentBirth" type="date"
+                                placeholder="被申请人出生年月日">
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="被申请人申请人住所" prop="affiliate.respondentHome" :rules="[
+                            {
+                                required: true,
+                                message: '被申请人申请人住所不能为空',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.respondentHome" placeholder="请输入被申请人申请人住所" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="被申请人邮箱" prop="affiliate.respondentEmail" :rules="[
+                            {
+                                required: true,
+                                message: '代理人邮箱不能为空',
+                                trigger: 'blur',
+                            },
+                            {
+                                pattern:
+                                    /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
+                                message: '请输入正确的邮箱地址',
+                                trigger: 'blur',
+                            },
+                        ]">
+                            <el-input v-model="formData.affiliate.respondentEmail" placeholder="请输入被申请人邮箱" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-col :span="24" v-if="modelFlag">
+                    <div style="display: inline-flex">
+                        <div class="infoIcon"></div>
+                        <div class="caseInfo">抓取规则设置</div>
+                    </div>
+                    <el-divider></el-divider>
+                </el-col>
+                <el-col :span="24" v-if="modelFlag">
+                    <el-form-item v-for="(item) in formData.columnValueList" :label="item.name" :key="item.id">
+                        <el-input type="textarea" v-model="item.value"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-form>
+            <div v-if="activeName == 'second'">
+                <el-card class="box-card" style="margin-bottom: 30px;">
+                    <div slot="header" class="clearfix">
+                        <span>申请人证据清单</span>
+                    </div>
+                    <div v-for="(item, index) in applicantEvidence" :key="index" class="text item"
+                        style="color: blue;cursor: pointer;" @click="toPreview(item.annexPath)">
+                        {{ item.annexName }}
+                    </div>
+                </el-card>
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                        <span>被申请人证据清单</span>
+                    </div>
+                    <div v-for="(item, index) in respondentEvidence" :key="index" class="text item"
+                        style="color: blue;cursor: pointer;" @click="toPreview(item.annexPath)">
+                        {{ item.annexName }}
+                    </div>
+                </el-card>
+            </div>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
                 <el-button type="primary" @click="submitForm" class="endbutton"><span>确认</span></el-button>
 } from "@/api/officialSeal/officialSeal.js";
 import { getToken } from "@/utils/auth";
 export default {
-    props: ["addVisable", "queryParams", "caseData", "caseDisabled"],
+    props: ["addVisable", "queryParams", "caseData", "caseDisabled","tabFlag"],
     dicts: ["case_built_type"],
     data() {
         return {
             },
             applicantEvidence: [],//申请人证据
             respondentEvidence: [],//被申请人证据
-            evidenceFlag: false
         };
     },
     watch: {
                     this.title = '修改案件';
                     this.caseApplicationSelectByIdFn(val.id)
                 } else if (!val.id && !val.flag) {
-                    this.evidenceFlag = false;
                     this.modelFlag = false;
                     this.title = '新增案件';
                     this.formData = {
                 } else if (val.id && val.flag == 1) {
                     this.modelFlag = true;
                     this.title = '案件详情';
-                    this.evidenceFlag = true;
                     this.caseApplicationSelectByIdFn(val.id);
                 }
             },
         },
+        addVisable(val){
+            if(val){
+                this.activeName = 'first';
+            }
+        }
     },
     created() {
 

src/views/caseManagement/components/payDialog.vue

+<template>
+  <div>
+    <el-dialog :title="payTitle" v-if="openPay" :visible="openPay" @close="payCancel" width="800px" append-to-body
+      :destroy-on-close="true" center>
+      <el-descriptions title="订单信息">
+        <el-descriptions-item label="案件编号">{{
+          formPayDetail.caseNum
+        }}</el-descriptions-item>
+        <el-descriptions-item label="申请人">{{
+          formPayDetail.affiliate.applicationOrganName || ''
+        }}</el-descriptions-item>
+        <el-descriptions-item label="案件标的">{{
+          formPayDetail.caseSubjectAmount
+        }}</el-descriptions-item>
+        <el-descriptions-item label="案件应缴费用">{{
+          formPayDetail.feePayable
+        }}</el-descriptions-item>
+        <el-descriptions-item label="被申请人">{{
+          formPayDetail.affiliate.respondentName
+        }}</el-descriptions-item>
+        <!-- <el-descriptions-item label="案件状态">
+          <el-tag size="mini" type='danger' effect="dark">
+            {{ formPayDetail.caseStatusName }}
+          </el-tag>
+        </el-descriptions-item> -->
+      </el-descriptions>
+      <div class="paySelectType">
+        <el-radio-group v-model="paySelect" @input="changPayType">
+          <el-radio :label="0">线上支付</el-radio>
+          <el-radio :label="1">线下支付</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="payupload">
+        <span>上传支付凭证：</span>
+        <div class="uploadBtn">
+          <el-upload class="upload-demo" ref="upload" :action="UploadUrl()" :headers="headers" :data="filedata"
+            :on-preview="handlePreview" :on-remove="handleRemove" :on-change="beforeUpload"  :on-success="handlSuccess" :file-list="fileList"
+           >
+            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
+            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+          </el-upload>
+        </div>
+      </div>
+      <div class="payType" v-if="paySelect == 0">
+        <span>请选择支付方式：</span>
+        <i class="iconfont icon-weixinzhifu" @click="pay(0)"></i>
+        <i class="iconfont icon-zhifubao" @click="pay(1)"></i>
+      </div>
+      <div class="payImg">
+        <div id="qrcodeImg"></div>
+      </div>
+      <div class="payTitle">{{ payMain }}</div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="payCancel" class="endbutton"><span>取 消</span></el-button>
+        <el-button @click="submitUpload" class="endbutton"><span>确认缴费</span></el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { casePay, confirmPayDig } from "@/api/pay/pay";
+import QRCode from "qrcodejs2";
+import { getToken } from "@/utils/auth";
+export default {
+  props: ["openPay", "payTitle", "formPayDetail", "payForm", "queryParams","payId"],
+  data() {
+    return {
+      // key: value
+      // 支付文字
+      payMain: "",
+      timer: null,
+      paySelect: 1,//支付线上/线下
+      fileList: [],
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      filedata: {
+        annexType: 8,
+      },
+      submitForm:{
+        payType:1,
+        payOrderList:[],
+        caseId:null
+      }
+    };
+  },
+  methods: {
+    UploadUrl() {
+      return window.location.origin + "/API/common/upload";
+    },
+    //选择支付方式(线上,线下)
+    changPayType(data) {
+      if(data == 1){
+        document.getElementById("qrcodeImg").innerHTML = "";
+        this.payMain = ""
+      }
+      this.submitForm.payType = data;
+    },
+    beforeUpload(flie, fileList) {
+      this.fileList = fileList;
+    },
+    // 文件上传成功
+    handlSuccess(res, file) {
+      this.submitForm.payOrderList.push({
+        annexId: res.annexId,
+        annexName:res.annexName
+      });
+    },
+    submitUpload() {
+      if (this.fileList.length < 1) {
+        this.$modal.msgError("请上传缴费凭证");
+        return
+      }
+      this.submitForm.caseFlowId = this.formPayDetail.caseFlowId;
+      confirmPayDig(this.submitForm).then(res=>{
+        this.$modal.msgSuccess("成功");
+        this.payCancel()
+        this.$emit("getList", this.queryParams);
+      })
+    },
+    handleRemove(file, fileList) {
+      (this.submitForm.payOrderList = []),
+      fileList.forEach((item) => {
+          this.submitForm.payOrderList.push({ annexId:item.response.data.annexId,annexName:item.response.data.annexName });
+        });
+    },
+    handlePreview(file) {
+    },
+    // 生成二维码
+    qrcode(url) {
+      // 前端根据 URL 生成微信支付二维码
+      document.getElementById("qrcodeImg").innerHTML = "";
+      return new QRCode("qrcodeImg", {
+        width: 200,
+        height: 200,
+        text: url,
+        colorDark: "#000",
+        colorLight: "#fff",
+      });
+    },
+    // 支付
+    pay(val) {
+      if (this.payForm.feePayable == 0 || !this.payForm.feePayable) {
+        this.$message({
+          message: "此案件无需缴费",
+          type: "error",
+        });
+        return;
+      }
+      let payType = "";
+      if (val == 0) {
+        payType = "wxpay";
+        this.payMain = "请使用微信扫二维码支付";
+      } else if (val == 1) {
+        payType = "alipay";
+        this.payMain = "请使用支付宝扫二维码支付";
+      }
+      casePay({
+        totalFee: this.payForm.feePayable * 100,
+        caseId: this.payForm.caseId,
+        tradeType: "native",
+        platform: payType,
+      }).then((res) => {
+        this.paySrc = res.data.code_url;
+        this.qrcode(this.paySrc);
+      });
+    },
+    payCancel() {
+      this.$emit("paycancelRow");
+      this.payMain = "";
+    },
+  },
+  watch:{
+    openPay(val){
+      if(val){
+      this.submitForm.payOrderList = []
+      this.paySelect = 1;
+      this.fileList = [];
+      this.filedata.id = this.payId;
+      this.submitForm.caseId = this.payId;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.payType {
+  height: 80px;
+  line-height: 80px;
+  display: flex;
+
+  .icon-weixinzhifu {
+    font-size: 24px;
+    color: #27a56f;
+    margin-right: 15px;
+  }
+
+  .icon-zhifubao {
+    font-size: 24px;
+    color: #1d76cc;
+  }
+}
+
+.paySelectType {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.payupload {
+  display: flex;
+
+  .uploadBtn {}
+}
+
+.payImg {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.payTitle {
+  margin-top: 20px;
+  width: 100%;
+  text-align: center;
+}
+
+::v-deep .el-dialog {
+  width: 800px;
+  background: #ffffff;
+  border-radius: 20px;
+}
+
+.endbutton {
+  width: 154px;
+  height: 37px;
+  background: #ffffff;
+  border: 1px solid #d0d0d0;
+  border-radius: 19px;
+
+  span {
+    width: 31px;
+    height: 13px;
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #959595;
+  }
+}
+</style>

vue.config.js

 const API = 'http://121.40.189.20:6001'  //测试
 // const API = 'http://192.168.3.18:6001'  //B
 // const API = 'http://192.168.3.77:9001' //Q
-
+// const API = 'http://172.16.1.14:6001' //w
 
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions