import React, { useState, useRef, useEffect } from "react";
import {
message,
Pagination,
Table,
Input,
Space,
Modal,
Button,
Select,
Tabs,
Descriptions,
Timeline
} from "antd";
const { TextArea } = Input;
import moment from "moment";
import ajax from '@/config/ajax.js'
import { TableModule } from "@/components";
import {
bindColumns,
modiColumns,
formRefundColumns
} from "./dataSource";
import { dictionary } from "@/config/common.js";
import "./index.scss";
function CarInfo() {
const [carId, setCarId] = useState()
const columns = [
{
title: "序号",
dataIndex: "index",
key: "index",
align: "center",
fixed: "left",
render: (text, record, index) => index + 1,
width: 100,
},
{
title: "车牌号",
dataIndex: "plate_number",
key: "plate_number",
},
{
title: "会员姓名",
dataIndex: "name",
key: "name",
},
{
title: "会员手机号",
dataIndex: "mobile",
key: "mobile",
},
{
title: "行驶本认证",
dataIndex: "authStateName",
key: "authStateName",
},
{
title: "欠费金额",
dataIndex: "arrears_money",
key: "arrears_money",
},
{
title: "创建时间",
dataIndex: "create_time",
key: "create_time",
},
{
title: "操作",
dataIndex: "operation",
key: "operation",
fixed: "right",
align: "center",
width: 300,
render: (text, record) => (
<>
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
setCarId(record.carId);
searchDetail(record);
}}>
<a>详情</a>
</span>
</>
),
},
];
//构建表头
const createCol = (label, name, type) => {
label.length == name.length ? null : console.log('参数缺失', 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 5:
obj.render = (text, record) => (<>
<span type="primary" style={{ display: 'block', textAlign: 'center' }} onClick={() => {
refundSearch(record)
setTkddVisible(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={() => {
}}>
<a>详情</a>
</span>
</>)
arr.push(obj)
break
default: break
}
return arr
}
//基本信息检索条件
const formSearch = [
{
name: "carId",
type: "Input",
label: "车牌号",
placeholder: "请输入车牌号",
},
{
name: "mobile",
type: "Input",
label: "会员手机号",
placeholder: "请输入会员手机号",
},
{
name: "authState",
type: "Select",
label: "认证状态",
options: [
{
label: "已认证",
value: 0,
},
{
label: "未认证",
value: 1,
},
],
},
{
name: "bingState",
type: "Select",
label: "绑定状态",
options: [
{
label: "已绑定",
value: 0,
},
{
label: "未绑定",
value: 1,
},
],
},
{
name: "timePeriod",
type: "RangePicker",
label: "时间段",
defaultValue: [moment().subtract(1, "month"), moment()],
},
];
//退费记录检索条件
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 ash = [
{//1
name: "region",
type: "TreeSelect",
label: "区域",
},
{//2
name: "operator",
type: "Select",
label: "商户名称",
options: dictionary.MerchantName,
},
{//3
name: "road",
type: "Input",
label: "停车场名称",
placeholder: "请输入停车场名称",
},
{//4
name: "road_type",
type: "Select",
label: "车场类型",
options: [
{
label: "全部",
value: 0,
},
{
label: "路侧平行",
value: 1,
},
{
label: "路侧垂停",
value: 2,
},
{
label: "封闭车场",
value: 3,
},
{
label: "半封闭车场",
value: 4,
},
],
},
{//5
name: "phone",
type: "Input",
label: "手机号",
placeholder: "请输入手机号",
},
{//6
name: "type",
type: "Select",
label: "出入场类型",
placeholder: "请选择出入场类型",
defaultValue: 1,
options: [
{
label: "入场",
value: 1,
},
{
label: "出场",
value: 2,
},
],
},
{//7
name: "b",
type: "Input",
label: "商品名称",
placeholder: "请输入商品名称",
},
{//8
name: "b",
type: "Select",
label: "购买渠道",
placeholder: "请选择购买渠道",
options: [
{
label: "全部",
value: 0,
},
{
label: "线上渠道",
value: 1,
},
{
label: "后台录入",
value: 2,
},
],
},
{//9
name: "b",
type: "Select",
label: "订单状态",
placeholder: "请选择订单状态",
options: [
{
label: "全部",
value: 0,
},
{
label: "未生效",
value: 1,
},
{
label: "生效中",
value: 2,
},
{
label: "已失效",
value: 3,
},
],
},
{//10
name: "PayChannel",
type: "Select",
label: "支付渠道",
placeholder: "请选择支付渠道",
options: dictionary.PayChannel,
},
{//11
name: "payment_equipment",
type: "Select",
label: "支付设备",
placeholder: "请选择支付设备",
options: dictionary.PayDevice
},
{//12
name: "pay_type",
type: "Select",
label: "支付方式",
placeholder: "请选择支付方式",
options: dictionary.PaydMethod,
},
{//13
name: "timePeriod",
type: "RangePicker",
label: "时间段",
defaultValue: [moment().startOf("day"), moment()],
},
{//14
name: "b",
type: "Select",
label: "退款方式",
placeholder: "请选择退款方式",
options: dictionary.PaydMethod,
},
{//15
name: "b",
type: "Input",
label: "第三方流水号",
placeholder: "请输入第三方流水号",
},
{//16
name: "timePeriod",
type: "RangePicker",
label: "时间段",
defaultTitle: ['支付时间', '至']
// defaultValue: [moment().startOf("day"), moment()],
},
{//17
name: "timePeriod",
type: "RangePicker",
label: "时间段",
defaultTitle: ['订购时间', '至']
// defaultValue: [moment().startOf("day"), moment()],
},
{//18
name: "timePeriod",
type: "RangePicker",
label: "时间段",
defaultTitle: ['预约到场时间', '至']
// defaultValue: [moment().startOf("day"), moment()],
},
{//19
name: "plate",
type: "Input",
label: "车牌号",
placeholder: "请输入车牌号",
},
];
const [tag, setTag] = useState('1');
const [edit, setEdit] = useState(true);
const [resultData, setResultData] = useState([])
const [baseData, setBaseData] = useState({
//car_type:2
})
const [bindData, setBindData] = useState([])//绑定
const [modiData, setModiData] = useState([])//修改
const [detailData, setDetailData] = useState([])//
const [ycddData, setYcddData] = useState([])//异常订单数据
const [detailVisible, setDetailVisible] = useState(false);
const [ltcVisible, setLtcVisible] = useState(false);
const [timesVisible, setTimesVisible] = useState(false); //退款尝试次数展开
const [ycddVisible, setYcddVisible] = useState(false);
const [tkddVisible, setTkddVisible] = useState(false);
const [cardVisible, setCardVisible] = useState(false);
const [eaeVisible, setEaeVisible] = useState(false);//出入场图片
const [bigpicVisible, setBigpicVisible] = useState(false);//大图展示
const [bigPic, setBigPic] = useState();
const [total, setTotal] = useState(0);
const [tabKey, setTabKey] = useState("1");
function openModal(params) {
setDetailVisible(true);
}
function changeKey(key) {
setTabKey(key);
}
//基本信息查询
function search(e) {
// if (!e.type) {
// e.type = 1
// }
ajax({
url: "/api/ope/car/list",
type: "post",
data: { ...e },
}).then((res) => {
let { status, data, total } = res
if (status == 20000) {
setResultData(data)
setTotal(total)
} else {
message.error(res.message)
}
})
}
//基本信息详情
function searchDetail(e) {
ajax({
url: "/api/ope/car/get_base_info",
type: "get",
data: { carId: e?.carId || carId },
}).then((res) => {
let { status, data, total } = res
if (status == 20000) {
setBaseData(data)
setTag('2')
} else {
message.error(res.message)
}
})
ajax({//绑定
url: "/api/ope/car/get_bind_records",
type: "get",
data: { carId: e?.carId || carId },
}).then((res) => {
let { status, data, total } = res
if (status == 20000) {
setBindData(data)
} else {
message.error(res.message)
}
})
ajax({//修改数据
url: "/api/ope/car/get_edit_records",
type: "get",
data: { carId: e?.carId || carId },
}).then((res) => {
let { status, data, total } = res
if (status == 20000) {
setModiData(data)
} else {
message.error(res.message)
}
})
}
//编辑车辆外观信息
function editDetail() {
ajax({
url: "/api/ope/car/edit_car",
type: "post",
data: {
carId: baseData.carId,
car_brand: baseData.car_brand,
car_model: baseData.car_model,
car_color: baseData.car_color,
car_type: baseData.car_type,
plate_type: baseData.plate_type,
},
}).then((res) => {
let { status, data } = res
if (status == 20000) {
setEdit(true)
//window.location.reload()
//setTag('2')
searchDetail()
} 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_parking_arrears_list"//欠费记录
break
case "4":
url = "/api/bpm/record/get_payment_list"//支付记录
break
case "5":
url = "/api/ope/record/get_refund_list"//退费订单
break
case "6":
url = ""
break
case "7":
url = ""
break
case "8":
url = ""
break
default: break
}
if (tabKey == '3' && e && !e?.type) {
e.type = 1
}
ajax({
url: url,
type: "post",
data: { ...e, carId: carId, 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 renderParkRecord(params) {
return (
<div className="ltc-box">
<div className="ltc-box-title"><div className="text">停车场信息</div><div className="line"></div></div>
<div className="ltc-content">
<div className="ltc-item">
<div className="new-item">停车场名称</div><div className="new-value">{params?.road || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">泊位号</div><div className="new-value">{params.berth_id || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">区域</div><div className="new-value">{params.region || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">商户</div><div className="new-value">{params.operator || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">车场类型</div><div className="new-value">{params.road_type || "--"}</div>
</div>
</div>
<div className="ltc-box-title"><div className="text">停车信息</div><div className="line"></div></div>
<div className="ltc-content">
<div className="ltc-item">
<div className="new-item">车牌号</div><div className="new-value">{params.plate || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">会员手机号</div><div className="new-value">{params.phone || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">入场时间</div><div className="new-value">{params.in_time || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">出场时间</div><div className="new-value">{params.out_time || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">停车时长</div><div className="new-value">{params.admission_time || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">订单金额</div><div className="new-value">{params.order_amount || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">停车卡折扣</div><div className="new-value">{params.parking_card_discount || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">车场折扣</div><div className="new-value">{params.road_discount || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">应收金额</div><div className="new-value">{params.receivable_amount || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">优惠券</div><div className="new-value">{params.preferential_amount || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">优惠总计</div><div className="new-value">{params.preferential_total || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">实付金额</div><div className="new-value">{params.actual_amount || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">优惠退款</div><div className="new-value">{params.refund_discount || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">实付退款</div><div className="new-value">{params.actual_refund || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">退款总计</div><div className="new-value">{params.refund_total || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">入场收费员</div><div className="new-value">{params.in_person || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">出场收费员</div><div className="new-value">{params.out_person || "--"}</div>
</div>
</div>
<div className="ltc-box-title"><div className="text">入场照片</div><div className="line"></div></div>
<Descriptions title="">
<Descriptions.Item label=""><img width={300} src={params.in_veh_pic} onClick={() => { setBigPic(params.in_veh_pic); setBigpicVisible(true) }} /></Descriptions.Item>
<Descriptions.Item label=""><img width={300} src={params.in_plate_pic} onClick={() => { setBigPic(params.in_plate_pic); setBigpicVisible(true) }} /></Descriptions.Item>
</Descriptions>
</div>
);
}
//基本信息渲染
function renderRecord(params) {
return (
<div style={{ padding: '18px' }}>
<div className="base-ltc">
<div className="ltc-img">
<img src={baseData.car_img} width={600} />
</div>
<div className="ltc-box">
<div className="ltc-box-title"><div className="ltc-icon"></div>车辆归属信息</div>
<div className="ltc-content">
<div className="ltc-item">
<div className="new-item">车牌颜色：</div>
<div className="new-value">{baseData.plate_color || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">车牌号:</div>
<div className="new-value">{baseData.plate_number || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">绑定会员账户:</div>
<div className="new-value">{baseData.mobile || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">认证状态:</div>
<div className="new-value"> {baseData.authStateName || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">车牌归属地:</div>
<div className="new-value"> {baseData.home_location || "--"}</div>
</div>
<div className="ltc-item">
<div className="new-item">创建时间:</div>
<div className="new-value">{baseData.create_time || "--"}</div>
</div>
</div>
<div className="ltc-box-title">
<div className="ltc-icon"></div>车辆外观信息
{
edit ? <div className="ltc-btn" onClick={() => { setEdit(false) }}>编辑</div> :
<>
<div className="ltc-btn" onClick={() => { editDetail(); }}>保存</div>
<div className="ltc-btn ltc-cancel" onClick={() => { setEdit(true) }}>取消</div>
</>
}
</div>
<div className="ltc-content">
<div className="ltc-item">
<div className="new-item">车辆品牌：</div>
<Input className="ltc-item-input" value={baseData.car_brand} onChange={(e) => { console.log(e); setBaseData({ ...baseData, car_brand: e.target.value }) }} placeholder="请输入车辆品牌" disabled={edit}></Input>
</div>
<div className="ltc-item">
<div className="new-item">车辆型号：</div>
<Input className="ltc-item-input" value={baseData.car_model} placeholder="请输入车辆型号" disabled={edit}></Input>
</div>
<div className="ltc-item">
<div className="new-item">车身颜色：</div>
<Input className="ltc-item-input" value={baseData.car_color} placeholder="请输入车身颜色" disabled={edit}></Input>
</div>
<div className="ltc-item">
<div className="new-item"> 车辆类型：</div>
<Select
disabled={edit}
defaultValue={baseData.car_type}
options={[
{
label: "大型车",
value: 1,
},
{
label: "中型车",
value: 2,
},
{
label: "小型车",
value: 3,
},
]}
placeholder={''}
/>
</div>
<div className="ltc-item">
号牌类型：
<Select
disabled={edit}
options={dictionary.PlateType}
fieldNames={{ label: 'text', value: 'value' }}
defaultValue={baseData?.plate_type}
placeholder={''}
/>
</div>
</div>
</div>
</div>
<div className="ltc-box">
<div className="ltc-box-title"><div className="ltc-icon"></div>车辆绑定记录</div>
<div className="table-wrap">
<Table
columns={bindColumns}
dataSource={bindData}
scroll={{ x: 1000 }}
// className="yisa-table"
pagination={false}
rowKey={(record) => record.id}
/>
</div>
<div className="ltc-box-title"><div className="ltc-icon"></div>车辆信息修改记录</div>
<Table
columns={modiColumns}
dataSource={modiData}
scroll={{ x: 1000 }}
// className="yisa-table"
pagination={false}
rowKey={(record) => record.id}
/>
</div>
</div>
);
}
//其他页面渲染
function renderTable(columns, arr, dataSource) {
return (
<TableModule
columns={columns}
tableData={dataSource}
formSearch={arr}
total={total}
search={searchOther}
rowKey={(record) => record.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>
//停车卡详情
const tckModal = <div className="ltc-box">
<div className="ltc-box-title">订单信息:</div>
<div className="ltc-box-line"></div>
<Descriptions title="">
<Descriptions.Item label="订单状态">{ycddData?.t || "--"}</Descriptions.Item>
<Descriptions.Item label="支付时间">{ycddData.r || "--"}</Descriptions.Item>
<Descriptions.Item label="车牌号">{ycddData.o || "--"}</Descriptions.Item>
<Descriptions.Item label="车牌颜色">{ycddData.r || "--"}</Descriptions.Item>
<Descriptions.Item label="手机号">{ycddData.mobile || "--"}</Descriptions.Item>
<Descriptions.Item label="购买渠道">{ycddData.r || "--"}</Descriptions.Item>
<Descriptions.Item label="实付金额">{ycddData.r || "--"}</Descriptions.Item>
<Descriptions.Item label="支付渠道">{ycddData.r || "--"}</Descriptions.Item>
<Descriptions.Item label="支付设备">{ycddData.r || "--"}</Descriptions.Item>
</Descriptions>
<div className="ltc-box-title">商品信息:</div>
<div className="ltc-box-line"></div>
<Descriptions title="">
<Descriptions.Item label="商品名称">{ycddData.plate}</Descriptions.Item>
<Descriptions.Item label="商户名称">{ycddData.admission_time}</Descriptions.Item>
<Descriptions.Item label="适用范围">{ycddData.in_time}</Descriptions.Item>
<Descriptions.Item label="生效开始日期">{ycddData.out_time}</Descriptions.Item>
<Descriptions.Item label="有效天数">{ycddData.in_source}</Descriptions.Item>
<Descriptions.Item label="生效结束日期">{ycddData.out_source}</Descriptions.Item>
<Descriptions.Item label="实付金额"></Descriptions.Item>
</Descriptions>
</div>
//错峰卡详情
const cfkModal = <div className="ltc-box">
<div className="ltc-box-title">订单信息:</div>
<div className="ltc-box-line"></div>
<Descriptions title="">
<Descriptions.Item label="停车场名称">{ycddData?.road || "--"}</Descriptions.Item>
<Descriptions.Item label="手机号">{ycddData.mobile || "--"}</Descriptions.Item>
<Descriptions.Item label="车牌号">{ycddData.plate_number || "--"}</Descriptions.Item>
<Descriptions.Item label="同步MS状态">{ycddData.r || "--"}</Descriptions.Item>
<Descriptions.Item label="订购时间">{ycddData.r || "--"}</Descriptions.Item>
<Descriptions.Item label="支付方式">{ycddData.r || "--"}</Descriptions.Item>
<Descriptions.Item label="订单金额">{ycddData.r || "--"}</Descriptions.Item>
</Descriptions>
<div className="ltc-box-title">商品信息:</div>
<div className="ltc-box-line"></div>
<Descriptions title="">
<Descriptions.Item label="销售金额">{ycddData.plate}</Descriptions.Item>
<Descriptions.Item label="有效时间">{ycddData.admission_time}</Descriptions.Item>
</Descriptions>
</div>
useEffect(() => {
searchOther()
}, [tabKey])
return (
<>
{tag == 1 ?
<TableModule
columns={columns}
tableData={resultData}
formSearch={formSearch}
total={total}
search={search}
rowKey={(record) => record.id}
/> :
<>
<div className="back-btn" onClick={() => { setTag('1') }}>返回</div>
<Tabs activeKey={tabKey} onChange={changeKey}>
<Tabs.TabPane tab="基本信息" key="1">
{renderRecord(detailData)}
</Tabs.TabPane>
<Tabs.TabPane tab="停车记录" key="2">
{renderTable(
createCol(['序号', '区域', '商户名称', '停车场名称', '车场类型', '车牌号', '泊位号', '入场时间', '离场时间', '停车时长', '应收金额', '优惠金额', '实收金额'],
['index', 'region', 'operator', 'road', 'road_type', 'plate', 'berth_id', 'in_time', 'out_time', 'admission_time', 'receivable_amount', 'preferential_amount', 'actual_amount'], 2),
[ash[0], ash[1], ash[2], ash[3], ash[4], ash[5], ash[12]],
resultData
)}
</Tabs.TabPane>
<Tabs.TabPane tab="欠费记录" key="3">
{renderTable(
createCol(['商户名称', '区域', '停车场名称', '车牌号', '入场时间', '出场时间', '欠费金额'],
['merchantName', 'area', 'sectionName', 'licensePlateNumber', 'entryTime', 'exitTime', 'arrearsAmount'], 3),
[ash[0], ash[1], ash[2], ash[3], ash[5], ash[12]],
resultData
)}
</Tabs.TabPane>
<Tabs.TabPane tab="支付记录" key="4">
{renderTable(
createCol(['订单ID', '停车场名称', '车牌号', '泊位号', '入场时间', '计费时间', '停车时长', '应收金额', '优惠金额', '实收金额', '支付渠道', '支付设备', '操作人', '付款车场', '支付时间', '第三方流水ID'],
['order_id', 'road', 'plate', 'berth_id', 'admission_time', 'charging_time', 'parking_duration', 'receivable_amount', 'discount_amount', 'paid_in_money', 'payment_channels', 'payment_equipment', 'dealer', 'pay_road', 'pay_time', 'third_party_flow_id'], 4),
[ash[2], ash[9], ash[10], ash[15]],
resultData
)}
</Tabs.TabPane>
<Tabs.TabPane tab="退费订单" key="5">
{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'], 5),
formRefundSearch,
resultData
)}
</Tabs.TabPane>
<Tabs.TabPane tab="停车卡购买记录" key="6">
{renderTable(
createCol(['车牌号', '车辆颜色', '手机号', '商户名称', '实付金额', '支付渠道', '支付设备', '购买渠道', '支付时间', '订单状态'],
['plate', '', 'phone', 'operator', 'actual_amount', '', '', '', '', ''], 6),
[ash[4], ash[6], ash[7], ash[8], ash[9], ash[10], ash[15]],
resultData
)}
</Tabs.TabPane>
<Tabs.TabPane tab="错峰卡购买记录" key="7">
{renderTable(
createCol(['序号', '停车场名称', '车牌号', '手机号', '订单金额', '支付方式', '同步MS状态', '订购状态'],
['index', 'road', 'plate', 'phone', 'order_amount', '', '', ''], 7),
[ash[2], ash[4], ash[11], ash[16]],
resultData
)}
</Tabs.TabPane>
<Tabs.TabPane tab="预约处理" key="8">
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="预约订单" key="1">
{renderTable(
createCol(['序号', '车牌号', '手机号', '停车场名称', '实付金额', '支付方式', '下单时间', '订单状态', '第三方流水号'],
['index', 'plate', 'phone', 'road', 'actual_amount', '', '', ''], 8),
[ash[4], ash[2], ash[17], ash[11], ash[14], ash[15], ash[8]],
resultData
)}
</Tabs.TabPane>
<Tabs.TabPane tab="预约订单退款" key="2">
{renderTable(
createCol(['序号', '车牌号', '手机号', '停车场名称', '预约到场时间', '实付金额', '退款金额', '退款方式', '退款时间', '第三方流水号'],
['index', 'plate', 'phone', 'road', '', 'actual_amount', 'refund_total', '', '', ''], 9),
[ash[4], ash[2], ash[12], ash[13], ash[12], ash[14]],
resultData
)}
</Tabs.TabPane>
</Tabs>
</Tabs.TabPane>
</Tabs>
</>
}
<Modal
open={detailVisible}
width={1500}
onCancel={() => {
setDetailVisible(false);
}}
footer={null}
>
<Tabs >
<Tabs.TabPane tab="停车记录信息" key="1">
{/* {renderParkRecord(detailData)} */}
{renderParkRecord(ycddData)}
</Tabs.TabPane>
<Tabs.TabPane tab="历史处理" key="2">
{/* {renderModalTable(payRecordColumns, payRecord)} */}
</Tabs.TabPane>
</Tabs>
</Modal>
<Modal
open={bigpicVisible}
width={1600}
title={'图片展示'}
className="eae-modal"
onCancel={() => {
setBigpicVisible(false);
}}
footer={false}
>
<div>
<div className="eae-modal-item">
<img src={bigPic} width={1550} />
</div>
</div>
</Modal>
<Modal
open={tkddVisible}
width={1500}
title={'订单详情'}
onCancel={() => {
setTkddVisible(false);
}}
footer={[
<Button key="back" onClick={() => {
setTkddVisible(false);
}}>
关闭窗口
</Button>]}
>
{/* {tkddModal} */}
{tabKey == '5' ? tkddModal : tabKey == '6' ? tckModal : tabKey == '7' ? cfkModal : null}
</Modal>
<Modal
open={eaeVisible}
width={1600}
title={'证据图像'}
className="eae-modal"
onCancel={() => {
setEaeVisible(false);
}}
footer={false}
>
<div>
<div className="eae-modal-title"><div className="ltc-icon"></div>入场图片</div>
<div className="eae-modal-item">
<div>车辆照片</div>
<img src={ycddData.in_veh_pic} width={750} />
</div>
<div className="eae-modal-item">
<div>车牌照片</div>
<img src={ycddData.in_plate_pic} width={750} />
</div>
</div>
</Modal>
</>
);
}
export default CarInfo;