18 changed files with 2623 additions and 250 deletions
-
25src/components/TableModule/index.jsx
-
22src/components/TableModule/index.scss
-
6src/pages/FinancialMgm/OrderInquiry/OrderChangeInquiry/index.scss
-
1164src/pages/FinancialMgm/OrderInquiry/ParkingOrderInquiry/index.jsx
-
323src/pages/FinancialMgm/OrderInquiry/ParkingOrderInquiry/index.scss
-
496src/pages/FinancialMgm/OrderInquiry/ReturnOrderInquiry/index.jsx
-
322src/pages/FinancialMgm/OrderInquiry/ReturnOrderInquiry/index.scss
-
158src/pages/InRoadMgm/PersonMgm/MesNotification/loadable.jsx
-
46src/pages/InRoadMgm/RecordInquiry/DisabledCarParkRecordTotal/index.scss
-
56src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/index.scss
-
7src/pages/OperationCenter/CarMgm/CarAuth/loadable.jsx
-
38src/pages/OperationCenter/CarMgm/CarInfo/index.scss
-
42src/pages/OperationCenter/CarMgm/CarInfo/loadable.jsx
-
38src/pages/OperationCenter/UserMgm/UserInfo/index.scss
-
114src/pages/OperationCenter/UserMgm/UserInfo/loadable.jsx
-
12src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/AddParking.jsx
-
3src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/MSPages.jsx
-
1src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/loadable.jsx
1164
src/pages/FinancialMgm/OrderInquiry/ParkingOrderInquiry/index.jsx
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,5 +1,320 @@ |
|||||
@import "@/assets/css/mixin.scss"; |
@import "@/assets/css/mixin.scss"; |
||||
$color-container-bg : var(--color-container-bg); |
|
||||
$color-user-list-bg : var(--color-user-list-bg); |
|
||||
$color-text : var(--color-text); |
|
||||
$color-primary : var(--color-primary); |
|
||||
|
$color-container-bg: var(--color-container-bg); |
||||
|
$color-user-list-bg: var(--color-user-list-bg); |
||||
|
$color-text: var(--color-text); |
||||
|
$color-primary: var(--color-primary); |
||||
|
.ant-tabs-tabpane-hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
.ant-tabs { |
||||
|
margin-bottom: 16px; |
||||
|
.ant-tabs-nav { |
||||
|
margin-bottom: 0 !important; |
||||
|
&::before { |
||||
|
border-bottom: 1px solid var(--color-card-line) !important; |
||||
|
} |
||||
|
} |
||||
|
.ant-tabs-nav-wrap { |
||||
|
width: 100%; |
||||
|
box-sizing: content-box; |
||||
|
.ant-tabs-nav-list { |
||||
|
width: 340px; |
||||
|
.ant-tabs-ink-bar { |
||||
|
height: 3px; |
||||
|
background-color: #00ccff; |
||||
|
} |
||||
|
.ant-tabs-tab { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding-bottom: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px !important; |
||||
|
font-family: MicrosoftYaHei; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.7px; |
||||
|
} |
||||
|
.ant-tabs-tab-active { |
||||
|
div { |
||||
|
color: #00ccff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ant-input::-webkit-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-input::-moz-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-input:-ms-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-input::placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-select-selection-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) |
||||
|
.ant-select-selector { |
||||
|
background: var(--color-input-disabled-bg); |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-select-disabled .ant-select-arrow { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-select-disabled.ant-select:not(.ant-select-customize-input) |
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-input-disabled-bg); |
||||
|
color: var(--color-input-disabled-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
.ant-select-multiple { |
||||
|
.ant-select-selector { |
||||
|
.ant-select-selection-item { |
||||
|
background-color: var(--color-bg-body); |
||||
|
border-color: var(--color-border); |
||||
|
.ant-select-selection-item-remove { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ant-select-arrow { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
.ant-select-clear { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.ant-select-dropdown-menu { |
||||
|
background-color: var(--color-input-bg); |
||||
|
.ant-select-dropdown-menu-item { |
||||
|
color: var(--color-text); |
||||
|
&.ant-select-dropdown-menu-item-active { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
&.ant-select-dropdown-menu-item-selected { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-search-list-item-bg) !important; |
||||
|
box-shadow: none !important; |
||||
|
border-radius: 4px; |
||||
|
color: var(--color-search-list-item-value); |
||||
|
border-color: var(--color-search-list-item-bd) !important; |
||||
|
} |
||||
|
.ant-select-selection { |
||||
|
background-color: var(--color-input-bg); |
||||
|
box-shadow: none; |
||||
|
color: var(--color-text); |
||||
|
// border-color:var(--checkable-tag-border); |
||||
|
} |
||||
|
|
||||
|
.ant-form-horizontal .ant-form-item-label { |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
.ant-picker { |
||||
|
width: 100%; |
||||
|
background-color: var(--color-search-list-item-bg); |
||||
|
border-color: var(--color-border); |
||||
|
} |
||||
|
.yisa-table { |
||||
|
width: 100%; |
||||
|
|
||||
|
.ant-table-thead { |
||||
|
th { |
||||
|
background: var(--color-table-header-bg) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-table-tbody { |
||||
|
td { |
||||
|
background: var(--color-table-body-bg) !important; |
||||
|
border-bottom-color: var(--color-table-border-bottom-color); |
||||
|
} |
||||
|
tr:nth-child(even) { |
||||
|
td { |
||||
|
background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.base-ltc { |
||||
|
display: flex; |
||||
|
|
||||
|
} |
||||
|
.ltc-img { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.ltc-box { |
||||
|
width: 100%; |
||||
|
.ltc-box-title { |
||||
|
font-size: 18px; |
||||
|
font-weight: bolder; |
||||
|
width: 100%; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
.text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.line { |
||||
|
display: inline-block; |
||||
|
border: 1px dotted #607092; |
||||
|
width: inherit; |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
.ltc-icon { |
||||
|
width: 5px; |
||||
|
background: #0080db; |
||||
|
height: 19px; |
||||
|
display: inline-block; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.ltc-btn { |
||||
|
display: inline-block; |
||||
|
border: 1px solid; |
||||
|
border-radius: 5px; |
||||
|
margin: 0 10px; |
||||
|
width: 60px; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
text-align: center; |
||||
|
background: #409eff; |
||||
|
color: #fff; |
||||
|
font-weight: 100; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.ltc-cancel { |
||||
|
background: #fff; |
||||
|
color: #000; |
||||
|
} |
||||
|
} |
||||
|
.ltc-box-line { |
||||
|
border: 1px solid #e7e7e7; |
||||
|
margin: 8px 0; |
||||
|
} |
||||
|
.ltc-box-in { |
||||
|
margin-left: 20px; |
||||
|
.ant-descriptions { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
.ltc-title { |
||||
|
margin: auto; |
||||
|
width: 50%; |
||||
|
text-align: center; |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.ltc-content { |
||||
|
margin: auto; |
||||
|
padding: 20px; |
||||
|
.ltc-item { |
||||
|
font-size: 18px; |
||||
|
margin: 6px 0; |
||||
|
display: inline-block; |
||||
|
width: 470px; |
||||
|
.new-item { |
||||
|
display: inline-block; |
||||
|
width: 120px; |
||||
|
height: 32px; |
||||
|
background: rgba(150,161,192,0.24); |
||||
|
text-align: center; |
||||
|
} |
||||
|
.new-value { |
||||
|
display: inline-block; |
||||
|
width: 320px; |
||||
|
height: 32px; |
||||
|
text-align: center; |
||||
|
background: #3E4557; |
||||
|
box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.12); |
||||
|
} |
||||
|
.ltc-item-input { |
||||
|
display: inline-block; |
||||
|
width: 200px; |
||||
|
} |
||||
|
div { |
||||
|
width: 150px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ltc-liuc { |
||||
|
display: flex; |
||||
|
margin-left: 200px; |
||||
|
.ltc-item { |
||||
|
display: flex; |
||||
|
.ltc-item-name { |
||||
|
margin: 6px 10px 0 10px; |
||||
|
color: #3f94df; |
||||
|
} |
||||
|
} |
||||
|
.ltc-work{ |
||||
|
text-align: center; |
||||
|
.ltc-tips { |
||||
|
border: 3px solid #000; |
||||
|
text-align: center; |
||||
|
line-height: 27px; |
||||
|
height: 35px; |
||||
|
width: 35px; |
||||
|
border-radius: 28px; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.distable { |
||||
|
.ant-pagination { |
||||
|
justify-self: center; |
||||
|
} |
||||
|
} |
||||
|
.eae-modal { |
||||
|
.eae-modal-title { |
||||
|
font-size: 18px; |
||||
|
font-weight: bolder; |
||||
|
.ltc-icon { |
||||
|
width: 5px; |
||||
|
background: #0080db; |
||||
|
height: 19px; |
||||
|
display: inline-block; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
.eae-modal-item { |
||||
|
display: inline-block; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
.cc-container { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
right: 50px; |
||||
|
border: 1px solid #bdbdbd; |
||||
|
border-radius: 5px; |
||||
|
width: 60px; |
||||
|
height: 35px; |
||||
|
line-height: 30px; |
||||
|
text-align: center; |
||||
|
background: #ffffff; |
||||
|
color: #000; |
||||
|
cursor: pointer; |
||||
|
z-index: 9999; |
||||
|
} |
||||
@ -1,15 +1,491 @@ |
|||||
import React, { useState, useRef, useEffect } from "react"; |
import React, { useState, useRef, useEffect } from "react"; |
||||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|
||||
// import { dictionary, utils } from "@/config/common"; |
|
||||
// import moment from 'moment' |
|
||||
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|
||||
// import ajax from "@/services" |
|
||||
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" |
|
||||
// import "./index.scss"; |
|
||||
// import errorImg from "@/assets/images/layout/error.png" |
|
||||
// import { useLocation } from "react-router-dom"; |
|
||||
|
import { |
||||
|
message, |
||||
|
Pagination, |
||||
|
Table, |
||||
|
Input, |
||||
|
Space, |
||||
|
Modal, |
||||
|
Button, |
||||
|
Select, |
||||
|
Tabs, |
||||
|
Descriptions, |
||||
|
Timeline |
||||
|
} from "antd"; |
||||
|
import moment from "moment"; |
||||
|
import ajax from '@/config/ajax.js' |
||||
|
import { TableModule } from "@/components"; |
||||
|
import { dictionary } from "@/config/common.js"; |
||||
|
import "./index.scss"; |
||||
function ReturnOrderInquiry() { |
function ReturnOrderInquiry() { |
||||
return <div>ReturnOrderInquiry</div> |
|
||||
|
const [memberId, setMemberId] = useState() |
||||
|
//构建表头 |
||||
|
const createCol = (label, name, type) => { |
||||
|
label.length == name.length ? null : console.log('参数缺失', name, label.length, name.length) |
||||
|
var arr = [] |
||||
|
label?.map((item, index) => { |
||||
|
let cm = { |
||||
|
title: item, |
||||
|
dataIndex: name[index], |
||||
|
key: name[index], |
||||
|
align: "center", |
||||
|
} |
||||
|
switch (item) { |
||||
|
case "序号": |
||||
|
cm.render = (text, record, index) => index + 1 |
||||
|
break |
||||
|
case "退款订单ID": |
||||
|
case "业务订单ID": |
||||
|
case "支付订单ID": |
||||
|
cm.render = (text) => ( |
||||
|
<> |
||||
|
<a onClick={() => { |
||||
|
navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") }); |
||||
|
}}>{text}</a> |
||||
|
</> |
||||
|
) |
||||
|
break |
||||
|
default: break |
||||
|
} |
||||
|
arr.push(cm) |
||||
|
}) |
||||
|
var obj = { |
||||
|
title: "操作", |
||||
|
dataIndex: "operation", |
||||
|
key: "operation", |
||||
|
fixed: "right", |
||||
|
align: "center", |
||||
|
} |
||||
|
switch (type) { |
||||
|
case 2: |
||||
|
obj.render = (text, record) => (<> |
||||
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => { |
||||
|
setYcddData(record) |
||||
|
setDetailVisible(true) |
||||
|
}}> |
||||
|
<a>详情</a> |
||||
|
</span> |
||||
|
</>) |
||||
|
arr.push(obj) |
||||
|
break |
||||
|
case 6: |
||||
|
obj.render = (text, record) => (<> |
||||
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => { |
||||
|
setTkddVisible(true) |
||||
|
}}> |
||||
|
<a>详情</a> |
||||
|
</span> |
||||
|
</>) |
||||
|
arr.push(obj) |
||||
|
break |
||||
|
case 7: |
||||
|
obj.render = (text, record) => (<> |
||||
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => { |
||||
|
setTkddVisible(true) |
||||
|
}}> |
||||
|
<a>详情</a> |
||||
|
</span> |
||||
|
</>) |
||||
|
arr.push(obj) |
||||
|
break |
||||
|
case 8: |
||||
|
obj.render = (text, record) => (<> |
||||
|
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => { |
||||
|
refundSearch(record) |
||||
|
setTkddVisible(true) |
||||
|
}}> |
||||
|
<a>详情</a> |
||||
|
</span> |
||||
|
</>) |
||||
|
arr.push(obj) |
||||
|
break |
||||
|
default: break |
||||
|
} |
||||
|
return arr |
||||
|
} |
||||
|
//退费记录检索条件 |
||||
|
const formRefundSearch = [ |
||||
|
{ |
||||
|
name: "refund_id", |
||||
|
type: "Input", |
||||
|
label: "退款订单号", |
||||
|
placeholder: "请输入退款订单号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "type", |
||||
|
type: "Select", |
||||
|
label: "业务订单类型", |
||||
|
options: dictionary.BusinessOrderType, |
||||
|
}, |
||||
|
{ |
||||
|
name: "park_id", |
||||
|
type: "Input", |
||||
|
label: "业务订单ID", |
||||
|
placeholder: "请输入业务订单ID", |
||||
|
}, |
||||
|
{ |
||||
|
name: "order_id", |
||||
|
type: "Input", |
||||
|
label: "支付订单ID", |
||||
|
placeholder: "请输入支付订单ID", |
||||
|
}, |
||||
|
{ |
||||
|
name: "state", |
||||
|
type: "Select", |
||||
|
label: "退款状态", |
||||
|
options: [ |
||||
|
{ |
||||
|
label: "全部", |
||||
|
value: 0, |
||||
|
}, |
||||
|
{ |
||||
|
label: "待确认", |
||||
|
value: 1, |
||||
|
}, |
||||
|
{ |
||||
|
label: "退款中", |
||||
|
value: 2, |
||||
|
}, |
||||
|
{ |
||||
|
label: "已完成", |
||||
|
value: 3, |
||||
|
}, |
||||
|
{ |
||||
|
label: "退款失败", |
||||
|
value: 4, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
name: "reason", |
||||
|
type: "Select", |
||||
|
label: "退款原因", |
||||
|
options: [ |
||||
|
{ |
||||
|
label: "全部", |
||||
|
value: 0, |
||||
|
}, |
||||
|
{ |
||||
|
label: "异常订单处理", |
||||
|
value: 1, |
||||
|
}, |
||||
|
{ |
||||
|
label: "自动平单退款", |
||||
|
value: 2, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
name: "flow_id", |
||||
|
type: "Input", |
||||
|
label: "渠道流水号", |
||||
|
placeholder: "请输入渠道流水号", |
||||
|
}, |
||||
|
{ |
||||
|
name: "timePeriod", |
||||
|
type: "RangePicker", |
||||
|
label: "时间段", |
||||
|
defaultTitle: ['退款时间', '至'], |
||||
|
defaultValue: [moment().subtract(1, "month"), moment()], |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const [tag, setTag] = useState('1'); |
||||
|
const [resultData, setResultData] = useState([]) |
||||
|
const [baseData, setBaseData] = useState({ |
||||
|
//car_type:2 |
||||
|
img: '' |
||||
|
}) |
||||
|
const [ycddData, setYcddData] = useState([])//异常订单数据 |
||||
|
const [detailVisible, setDetailVisible] = useState(false); |
||||
|
const [timesVisible, setTimesVisible] = useState(false); //退款尝试次数展开 |
||||
|
const [tkddVisible, setTkddVisible] = useState(false); |
||||
|
const [eaeVisible, setEaeVisible] = useState(false);//出入场图片 |
||||
|
const [bigpicVisible, setBigpicVisible] = useState(false);//大图展示 |
||||
|
const [bqVisible, setBqVisible] = useState(false);//流程查看 |
||||
|
const [bigPic, setBigPic] = useState(); |
||||
|
const [total, setTotal] = useState(0); |
||||
|
const [tabKey, setTabKey] = useState("1"); |
||||
|
function openModal(params) { |
||||
|
setDetailVisible(true); |
||||
|
} |
||||
|
|
||||
|
//基本信息详情 |
||||
|
function searchDetail(e) { |
||||
|
ajax({ |
||||
|
url: "/api/ope/user/get_base_info", |
||||
|
type: "get", |
||||
|
data: { memberId: e.memberId }, |
||||
|
}).then((res) => { |
||||
|
let { status, data, total } = res |
||||
|
if (status == 20000) { |
||||
|
setBaseData(data) |
||||
|
setTag('2') |
||||
|
} else { |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
//详情其他模块查询 |
||||
|
function searchOther(e) { |
||||
|
var url = '' |
||||
|
switch (tabKey) { |
||||
|
case "1": |
||||
|
url = "" |
||||
|
break |
||||
|
case "2": |
||||
|
url = "/api/bpm/record/get_record_list"//停车记录 |
||||
|
break |
||||
|
case "3": |
||||
|
url = "/api/bpm/record/get_payment_list"//支付记录 |
||||
|
break |
||||
|
case "4": |
||||
|
url = "/api/ope/record/get_recharge_list"//充值記錄 |
||||
|
break |
||||
|
case "5": |
||||
|
url = "/api/bpm/record/get_parking_arrears_list"//欠费记录 |
||||
|
break |
||||
|
case "6": |
||||
|
url = "" |
||||
|
break |
||||
|
case "7": |
||||
|
url = "" |
||||
|
break |
||||
|
case "8": |
||||
|
url = "/api/ope/record/get_refund_list"//退费订单 |
||||
|
break |
||||
|
default: break |
||||
|
} |
||||
|
if (tabKey == '5' && e && !e?.type) { |
||||
|
e.type = 1 |
||||
|
} |
||||
|
ajax({ |
||||
|
url: url, |
||||
|
type: "post", |
||||
|
data: { ...e, memberId: memberId, startTime: e?.start_time, endTime: e?.end_time }, |
||||
|
}).then((res) => { |
||||
|
let { status, data, total } = res |
||||
|
if (status == 20000) { |
||||
|
if (data.list) { |
||||
|
setResultData(data.list) |
||||
|
setTotal(data.total) |
||||
|
} else { |
||||
|
setResultData(data) |
||||
|
setTotal(total) |
||||
|
} |
||||
|
} else { |
||||
|
setResultData([]) |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
//退款订单详情 |
||||
|
function refundSearch(e) { |
||||
|
ajax({ |
||||
|
url: "/api/ope/record/get_refund_info", |
||||
|
type: "get", |
||||
|
data: { id: e.refund_id }, |
||||
|
}).then((res) => { |
||||
|
let { status, data } = res |
||||
|
if (status == 20000) { |
||||
|
//setResultData(data) |
||||
|
setYcddData(data) |
||||
|
} else { |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//其他页面渲染 |
||||
|
function renderTable(columns, arr, dataSource, exportUrl) { |
||||
|
return ( |
||||
|
<TableModule |
||||
|
columns={columns} |
||||
|
tableData={dataSource} |
||||
|
formSearch={arr} |
||||
|
total={total} |
||||
|
search={searchOther} |
||||
|
exportUrl={exportUrl} |
||||
|
rowKey={'id'} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
//退款订单详情 |
||||
|
const tkddModal = <div className="ltc-box"> |
||||
|
<div className="ltc-box-title"><div className="text">退款订单:{ycddData?.refund_id}</div><div className="line"></div></div> |
||||
|
<div className="ltc-content"> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">生成时间</div><div className="new-value">{ycddData?.refund_time || "--"}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">退款状态</div><div className="new-value">{ycddData.refund_state || "--"}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">支付渠道</div><div className="new-value">{ycddData.payment_channels || "--"}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">退款方式</div><div className="new-value">{ycddData.refund_type || "--"}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">应退实付金额</div><div className="new-value">{ycddData.refund_actual_amount || "--"}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">已退实付金额</div><div className="new-value">{ycddData.has_refund_actual_amount || "--"}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">应退优惠金额</div><div className="new-value">{ycddData.refund_discount_amount || "--"}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">已退优惠金额</div><div className="new-value">{ycddData.has_refund_discount_amount || "--"}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">退款尝试次数</div><div className="new-value">{ycddData.try_count || "--"} |
||||
|
{timesVisible ? |
||||
|
<a onClick={() => { setTimesVisible(false) }}>收起</a> : |
||||
|
<a onClick={() => { setTimesVisible(true) }}>查看</a>} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">最近尝试时间</div><div className="new-value">{ycddData.latest_try_time || "--"}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
{timesVisible ? <> |
||||
|
<div className="ltc-box-title"><div className="text">退款尝试详情</div><div className="line"></div></div> |
||||
|
{/* <Table |
||||
|
columns={formRefundColumns} |
||||
|
dataSource={ycddData.try_list} |
||||
|
scroll={{ x: 1000 }} |
||||
|
className="yisa-table" |
||||
|
pagination={false} |
||||
|
rowKey={(record) => record.id} |
||||
|
/> */} |
||||
|
</> : |
||||
|
<> |
||||
|
<div className="ltc-box-title"><div className="text">支付订单:{ycddData.order_id}</div><div className="line"></div></div> |
||||
|
<div className="ltc-content"> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">平台商户</div><div className="new-value">{ycddData.payment_operator_name}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">生成时间</div><div className="new-value">{ycddData.payment_create_time}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">支付时间</div><div className="new-value">{ycddData.pay_time}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">支付渠道</div><div className="new-value">{ycddData.payment_equipment}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">优惠金额</div><div className="new-value">{ycddData.discount_amount}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">支付应用</div><div className="new-value">{ycddData.payment_equipment}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">实付金额</div><div className="new-value">{ycddData.paid_in_money}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="ltc-box-title"><div className="text">停车订单:{ycddData.park_record_id}</div><div className="line"></div></div> |
||||
|
<div className="ltc-box-title"><div className="text">车厂详情</div></div> |
||||
|
<div className="ltc-content"> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">平台商户</div><div className="new-value">{ycddData.payment_operator_name}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">停车场名称</div><div className="new-value">{ycddData?.road_name}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">区域</div><div className="new-value">{ycddData.area_name}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">商户名称</div><div className="new-value">{ycddData.park_operator_name}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">泊位号</div><div className="new-value">{ycddData.berth_code}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">车场类型</div><div className="new-value">{ycddData.road_type}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="ltc-box-title"><div className="text">车辆详情</div></div> |
||||
|
<div className="ltc-content"> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">车牌号</div><div className="new-value">{ycddData.plate_number}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">停车时长</div><div className="new-value">{ycddData.parking_duration}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">入场时间</div><div className="new-value">{ycddData.in_time}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">出场时间</div><div className="new-value">{ycddData.out_time}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">入场记录来源</div><div className="new-value">{ycddData.inSource}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">出场记录来源</div><div className="new-value">{ycddData.outSource}</div> |
||||
|
</div> |
||||
|
<div className="ltc-item"> |
||||
|
<div className="new-item">证据图像</div><div className="new-value"><a onClick={() => { setEaeVisible(true) }}>查看</a></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</>} |
||||
|
</div> |
||||
|
|
||||
|
useEffect(() => { |
||||
|
searchOther() |
||||
|
}, [tabKey]) |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
|
||||
|
{renderTable( |
||||
|
createCol(['序号', '最近尝试时间', '支付渠道', '应退实付（元）', '应退优惠（元）', '退款原因', '退款申请时间', '退款订单ID', '业务订单类型', '业务订单ID', '支付订单类型', '支付订单ID', '渠道流水号', '状态'], |
||||
|
['index', 'latest_try_time', 'payment_channels_name', 'refund_actual_amount', 'refund_discount_amount', 'reason', 'refund_time', 'payment_order_id', 'parking_type_name', 'park_record_id', 'payment_type_name', 'payment_order_id', 'flow_id', 'state_name'], 8), |
||||
|
formRefundSearch, |
||||
|
resultData |
||||
|
)} |
||||
|
<Modal |
||||
|
open={bigpicVisible} |
||||
|
width={1600} |
||||
|
title={'图片展示'} |
||||
|
className="eae-modal" |
||||
|
onCancel={() => { |
||||
|
setBigpicVisible(false); |
||||
|
}} |
||||
|
footer={false} |
||||
|
> |
||||
|
<div> |
||||
|
<div className="eae-modal-item"> |
||||
|
<img src={bigPic} width={1500} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Modal> |
||||
|
<Modal |
||||
|
open={tkddVisible} |
||||
|
width={1500} |
||||
|
title={'订单详情'} |
||||
|
onCancel={() => { |
||||
|
setTkddVisible(false); |
||||
|
}} |
||||
|
footer={[ |
||||
|
<Button key="back" onClick={() => { |
||||
|
setTkddVisible(false); |
||||
|
}}> |
||||
|
关闭窗口 |
||||
|
</Button>]} |
||||
|
> |
||||
|
{tkddModal} |
||||
|
{/* {tabKey == '8' ? tkddModal : tabKey == '6' ? tckModal : tabKey == '7' ? cfkModal : null} */} |
||||
|
|
||||
|
</Modal> |
||||
|
</> |
||||
|
); |
||||
} |
} |
||||
|
|
||||
export default ReturnOrderInquiry; |
export default ReturnOrderInquiry; |
||||
@ -1,5 +1,319 @@ |
|||||
@import "@/assets/css/mixin.scss"; |
@import "@/assets/css/mixin.scss"; |
||||
$color-container-bg : var(--color-container-bg); |
|
||||
$color-user-list-bg : var(--color-user-list-bg); |
|
||||
$color-text : var(--color-text); |
|
||||
$color-primary : var(--color-primary); |
|
||||
|
$color-container-bg: var(--color-container-bg); |
||||
|
$color-user-list-bg: var(--color-user-list-bg); |
||||
|
$color-text: var(--color-text); |
||||
|
$color-primary: var(--color-primary); |
||||
|
.ant-tabs-tabpane-hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
.ant-tabs { |
||||
|
margin-bottom: 16px; |
||||
|
.ant-tabs-nav { |
||||
|
margin-bottom: 0 !important; |
||||
|
&::before { |
||||
|
border-bottom: 1px solid var(--color-card-line) !important; |
||||
|
} |
||||
|
} |
||||
|
.ant-tabs-nav-wrap { |
||||
|
width: 100%; |
||||
|
box-sizing: content-box; |
||||
|
.ant-tabs-nav-list { |
||||
|
width: 340px; |
||||
|
.ant-tabs-ink-bar { |
||||
|
height: 3px; |
||||
|
background-color: #00ccff; |
||||
|
} |
||||
|
.ant-tabs-tab { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding-bottom: 10px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px !important; |
||||
|
font-family: MicrosoftYaHei; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.7px; |
||||
|
} |
||||
|
.ant-tabs-tab-active { |
||||
|
div { |
||||
|
color: #00ccff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ant-input::-webkit-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-input::-moz-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-input:-ms-input-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-input::placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-select-selection-placeholder { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) |
||||
|
.ant-select-selector { |
||||
|
background: var(--color-input-disabled-bg); |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-select-disabled .ant-select-arrow { |
||||
|
color: var(--color-placeholder); |
||||
|
} |
||||
|
.ant-select-disabled.ant-select:not(.ant-select-customize-input) |
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-input-disabled-bg); |
||||
|
color: var(--color-input-disabled-color); |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
.ant-select-multiple { |
||||
|
.ant-select-selector { |
||||
|
.ant-select-selection-item { |
||||
|
background-color: var(--color-bg-body); |
||||
|
border-color: var(--color-border); |
||||
|
.ant-select-selection-item-remove { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ant-select-arrow { |
||||
|
color: var(--color-text); |
||||
|
} |
||||
|
.ant-select-clear { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.ant-select-dropdown-menu { |
||||
|
background-color: var(--color-input-bg); |
||||
|
.ant-select-dropdown-menu-item { |
||||
|
color: var(--color-text); |
||||
|
&.ant-select-dropdown-menu-item-active { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
&.ant-select-dropdown-menu-item-selected { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
// background-color: var(--radio-button-bg-checked); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ant-select-selector { |
||||
|
background-color: var(--color-search-list-item-bg) !important; |
||||
|
box-shadow: none !important; |
||||
|
border-radius: 4px; |
||||
|
color: var(--color-search-list-item-value); |
||||
|
border-color: var(--color-search-list-item-bd) !important; |
||||
|
} |
||||
|
.ant-select-selection { |
||||
|
background-color: var(--color-input-bg); |
||||
|
box-shadow: none; |
||||
|
color: var(--color-text); |
||||
|
// border-color:var(--checkable-tag-border); |
||||
|
} |
||||
|
|
||||
|
.ant-form-horizontal .ant-form-item-label { |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
.ant-picker { |
||||
|
width: 100%; |
||||
|
background-color: var(--color-search-list-item-bg); |
||||
|
border-color: var(--color-border); |
||||
|
} |
||||
|
.yisa-table { |
||||
|
width: 100%; |
||||
|
|
||||
|
.ant-table-thead { |
||||
|
th { |
||||
|
background: var(--color-table-header-bg) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-table-tbody { |
||||
|
td { |
||||
|
background: var(--color-table-body-bg) !important; |
||||
|
border-bottom-color: var(--color-table-border-bottom-color); |
||||
|
} |
||||
|
tr:nth-child(even) { |
||||
|
td { |
||||
|
background: var(--color-table-body-bg-nth-child-even) !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.base-ltc { |
||||
|
display: flex; |
||||
|
} |
||||
|
.ltc-img { |
||||
|
margin: 38px 20px; |
||||
|
.ltc-item { |
||||
|
width: 140px; |
||||
|
height: 32px; |
||||
|
background: rgba(150, 161, 192, 0.24); |
||||
|
text-align: center; |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
} |
||||
|
.ltc-box { |
||||
|
width: 100%; |
||||
|
.ltc-box-title { |
||||
|
font-size: 18px; |
||||
|
font-weight: bolder; |
||||
|
width: 100%; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
.text { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.line { |
||||
|
display: inline-block; |
||||
|
border: 1px dotted #607092; |
||||
|
width: inherit; |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
.ltc-icon { |
||||
|
width: 5px; |
||||
|
background: #0080db; |
||||
|
height: 19px; |
||||
|
display: inline-block; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.ltc-btn { |
||||
|
display: inline-block; |
||||
|
border: 1px solid; |
||||
|
border-radius: 5px; |
||||
|
margin: 0 10px; |
||||
|
width: 60px; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
text-align: center; |
||||
|
background: #409eff; |
||||
|
color: #fff; |
||||
|
font-weight: 100; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.ltc-cancel { |
||||
|
background: #fff; |
||||
|
color: #000; |
||||
|
} |
||||
|
} |
||||
|
.ltc-box-line { |
||||
|
border: 1px solid #e7e7e7; |
||||
|
margin: 8px 0; |
||||
|
} |
||||
|
.ltc-box-in { |
||||
|
margin-left: 20px; |
||||
|
.ant-descriptions { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
.ltc-title { |
||||
|
margin: auto; |
||||
|
width: 50%; |
||||
|
text-align: center; |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.ltc-content { |
||||
|
margin: auto; |
||||
|
padding: 20px; |
||||
|
.ltc-item { |
||||
|
font-size: 18px; |
||||
|
margin: 6px 0; |
||||
|
display: inline-block; |
||||
|
width: 470px; |
||||
|
.new-item { |
||||
|
display: inline-block; |
||||
|
width: 120px; |
||||
|
height: 32px; |
||||
|
background: rgba(150,161,192,0.24); |
||||
|
text-align: center; |
||||
|
} |
||||
|
.new-value { |
||||
|
display: inline-block; |
||||
|
width: 320px; |
||||
|
height: 32px; |
||||
|
text-align: center; |
||||
|
background: #3E4557; |
||||
|
box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.12); |
||||
|
} |
||||
|
.ltc-item-input { |
||||
|
display: inline-block; |
||||
|
width: 200px; |
||||
|
} |
||||
|
div { |
||||
|
width: 150px; |
||||
|
} |
||||
|
} |
||||
|
.ltc-item-bind { |
||||
|
font-size: 18px; |
||||
|
margin: 10px 0; |
||||
|
display: block; |
||||
|
width: 900px; |
||||
|
.new-item-bind { |
||||
|
display: inline-block; |
||||
|
width: 400px; |
||||
|
} |
||||
|
.ltc-item-input { |
||||
|
display: inline-block; |
||||
|
width: 200px; |
||||
|
} |
||||
|
a { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.distable { |
||||
|
.ant-pagination { |
||||
|
justify-self: center; |
||||
|
} |
||||
|
} |
||||
|
.eae-modal { |
||||
|
.eae-modal-title { |
||||
|
font-size: 18px; |
||||
|
font-weight: bolder; |
||||
|
.ltc-icon { |
||||
|
width: 5px; |
||||
|
background: #0080db; |
||||
|
height: 19px; |
||||
|
display: inline-block; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
.eae-modal-item { |
||||
|
display: inline-block; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
.cc-container { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
right: 50px; |
||||
|
border: 1px solid #bdbdbd; |
||||
|
border-radius: 5px; |
||||
|
width: 60px; |
||||
|
height: 35px; |
||||
|
line-height: 30px; |
||||
|
text-align: center; |
||||
|
background: #ffffff; |
||||
|
color: #000; |
||||
|
cursor: pointer; |
||||
|
z-index: 9999; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue