缴费，案件详情问题处理
This commit is contained in:
Your Name
@@ -35,8 +35,16 @@ export function getFileList(data) {
|
||||
/** 批量上传证据 */
|
||||
export function batchUpload(data) {
|
||||
return request({
|
||||
url: "/caseApplication/batchUpdateAttach",
|
||||
url: "/caseApplication/batchUpload",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
// 提交
|
||||
export function submitCaseApply(data) {
|
||||
return request({
|
||||
url: '/caseApplication/submit',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
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
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,539 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
<!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"></span>
|
||||
<div class="name">支付宝</div>
|
||||
<div class="code-name">&#xe68a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">银联</div>
|
||||
<div class="code-name">&#xe68b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">微信支付</div>
|
||||
<div class="code-name">&#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"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</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"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||
</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"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</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>
|
||||
@@ -0,0 +1,27 @@
|
||||
@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";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
+2
-2
@@ -4,7 +4,7 @@ import Cookies from 'js-cookie'
|
||||
|
||||
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'
|
||||
@@ -14,7 +14,7 @@ import directive from './directive' // directive
|
||||
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";
|
||||
|
||||
@@ -56,16 +56,15 @@ export function checkRole(value) {
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function statusRole(value) {
|
||||
let caseStatus = sessionStorage.getItem('caseStatus');
|
||||
caseStatus = JSON.parse(caseStatus);
|
||||
let caseStatusStr = sessionStorage.getItem('caseStatus');
|
||||
let caseStatus = [];
|
||||
caseStatus = JSON.parse(caseStatusStr);
|
||||
if (caseStatus.length == 0) {
|
||||
return false
|
||||
}
|
||||
caseStatus.forEach(item => {
|
||||
if(item == value){
|
||||
if (caseStatus.includes(value)) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -59,17 +59,24 @@
|
||||
<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>
|
||||
@@ -77,23 +84,27 @@
|
||||
@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'
|
||||
@@ -101,6 +112,7 @@ import evidenceDialog from './components/evidenceDialog.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"],
|
||||
@@ -109,7 +121,8 @@ export default {
|
||||
caseCompressionPackage,
|
||||
mediationCaseDetails,
|
||||
mediationCaseLog,
|
||||
evidenceDialog
|
||||
evidenceDialog,
|
||||
payDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -131,11 +144,17 @@ export default {
|
||||
processVisable: false,//案件详情
|
||||
showcaseLog: false,//案件日志
|
||||
evidenceVisable: false,//证据修改弹窗
|
||||
openPay: false, //缴费弹框
|
||||
formPayDetail: {},
|
||||
payId: null,
|
||||
payForm: {},
|
||||
caseData: {},
|
||||
evidenceData: {},
|
||||
caseDisabled: false,
|
||||
caseTime: '',
|
||||
deptList: []
|
||||
deptList: [],
|
||||
payTitle: '',
|
||||
tabFlag: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -148,6 +167,7 @@ export default {
|
||||
this.addVisable = true;
|
||||
this.caseData = {};
|
||||
this.caseDisabled = false;
|
||||
this.tabFlag = false;
|
||||
},
|
||||
/** 查看详情 */
|
||||
checkDetail(val) {
|
||||
@@ -155,17 +175,46 @@ export default {
|
||||
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) {
|
||||
@@ -204,6 +253,10 @@ export default {
|
||||
cancelCompreess() {
|
||||
this.openCompressedPackages = false;
|
||||
},
|
||||
/**取消缴费*/
|
||||
paycancelRow(row) {
|
||||
this.openPay = false;
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
|
||||
@@ -3,8 +3,14 @@
|
||||
<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-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>
|
||||
@@ -77,8 +83,7 @@
|
||||
<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">
|
||||
: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文件
|
||||
@@ -241,8 +246,7 @@
|
||||
trigger: 'blur',
|
||||
},
|
||||
]">
|
||||
<el-input v-model="formData.affiliate.respondentIdentityNum"
|
||||
placeholder="请输入被申请人身份证号" />
|
||||
<el-input v-model="formData.affiliate.respondentIdentityNum" placeholder="请输入被申请人身份证号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
@@ -312,8 +316,8 @@
|
||||
<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-form>
|
||||
<div v-if="activeName == 'second'">
|
||||
<el-card class="box-card" style="margin-bottom: 30px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>申请人证据清单</span>
|
||||
@@ -332,9 +336,7 @@
|
||||
{{ item.annexName }}
|
||||
</div>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</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>
|
||||
@@ -352,7 +354,7 @@ import {
|
||||
} 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 {
|
||||
@@ -377,7 +379,6 @@ export default {
|
||||
},
|
||||
applicantEvidence: [],//申请人证据
|
||||
respondentEvidence: [],//被申请人证据
|
||||
evidenceFlag: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -390,7 +391,6 @@ export default {
|
||||
this.title = '修改案件';
|
||||
this.caseApplicationSelectByIdFn(val.id)
|
||||
} else if (!val.id && !val.flag) {
|
||||
this.evidenceFlag = false;
|
||||
this.modelFlag = false;
|
||||
this.title = '新增案件';
|
||||
this.formData = {
|
||||
@@ -403,11 +403,15 @@ export default {
|
||||
} 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() {
|
||||
|
||||
|
||||
@@ -0,0 +1,252 @@
|
||||
<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>
|
||||
+1
-1
@@ -15,7 +15,7 @@ const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user