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"; |
|||
$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 { 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() { |
|||
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; |
|||
@ -1,5 +1,319 @@ |
|||
@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