提交 73818823 authored 作者: 王鹏飞's avatar 王鹏飞

feat: 添加Apple支付图标,优化订单列表视图,更新类型声明文件

上级 088eacea
{
"compilerOptions": {
"target": "ES6",
"jsx": "react",
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules", "dist", "build"]
}
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#1F2937"/>
<path transform="translate(1.25 0.75)" fill="#fff" d="M31.4 17.2c-1.1-1.3-2.8-2-4.5-1.9-2.2.2-3.5 1.5-4.8 1.5-1.3 0-2.9-1.5-4.8-1.4-2.5 0-4.8 1.5-6 3.7-2.6 4.5-.7 11.2 1.8 14.9 1.2 1.8 2.7 3.8 4.7 3.7 1.9-.1 2.7-1.2 5.1-1.2 2.4 0 3.1 1.2 5.1 1.2 2.1 0 3.4-1.8 4.6-3.6 1.4-2 2-4 2.1-4.1-.1 0-4-1.5-4-5.8 0-3.6 2.9-5.4 3-5.5-.9-1.3-2.3-1.9-3.4-2.5-.9-.4-2.2-.8-3.8-.9-.6-1.2-.4-2.8.3-4.1-1.5.1-3 .9-4 1.9-.8.9-1.5 2.4-1.3 3.8 1.3.1 2.7-.7 3.5-1.7.1-.1.2-.2.3-.4 1.4-.1 2.9.3 4.1.9Z"/>
</svg>
import { Button, DatePicker, Input, Rate, Select } from 'antd'
import { Button, DatePicker, Input, Rate, Select, Tooltip } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useState } from 'react'
import wechatIcon from '@/assets/images/vx.png'
import alipayIcon from '@/assets/images/zhifu.png'
import coinIcon from '@/assets/images/money.png'
import appleIcon from '@/assets/images/apple.svg'
import { AppList, type AppListFilterItem } from '@/components/AppList'
import { usePermission } from '@/hooks/usePermission'
......@@ -11,10 +15,6 @@ import type { OrdersFilters } from '../query'
import { useOrdersList } from '../useOrdersList'
const { RangePicker } = DatePicker
const wechatIcon = new URL('../../../../assets/images/vx.png', import.meta.url).href
const alipayIcon = new URL('../../../../assets/images/zhifu.png', import.meta.url).href
const coinIcon = new URL('../../../../assets/images/money.png', import.meta.url).href
export default function OrdersListView() {
const list = useOrdersList()
const checkPermission = usePermission()
......@@ -64,16 +64,11 @@ export default function OrdersListView() {
align: 'center',
width: 100,
render: (_, record) => {
const source =
record.pay_type_name === '微信'
? wechatIcon
: record.pay_type_name === '支付宝'
? alipayIcon
: record.pay_type_name === '紫荆币'
? coinIcon
: null
const source = [null, wechatIcon, alipayIcon, coinIcon, appleIcon][Number(record.pay_type)]
return source ? (
<img src={source} width={30} alt={record.pay_type_name ?? '支付方式'} />
<Tooltip title={record.pay_type_name ?? '支付方式'}>
<img src={source} width={30} alt={record.pay_type_name ?? '支付方式'} />
</Tooltip>
) : (
record.pay_type_name || '—'
)
......@@ -85,9 +80,7 @@ export default function OrdersListView() {
dataIndex: 'rating',
align: 'center',
width: 135,
render: (_, record) => (
<Rate disabled allowHalf style={{ width: 135 }} value={record.rating} />
),
render: (_, record) => <Rate disabled allowHalf style={{ width: 135 }} value={record.rating} />,
},
{
title: '操作',
......@@ -108,9 +101,9 @@ export default function OrdersListView() {
render: (field) => (
<Input
allowClear
autoComplete='off'
placeholder='请输入书籍名称'
id='name'
autoComplete="off"
placeholder="请输入书籍名称"
id="name"
value={field.value ?? ''}
onChange={(event) => field.onChange(event.target.value)}
/>
......@@ -122,7 +115,7 @@ export default function OrdersListView() {
render: (field) => (
<Select
allowClear
placeholder='请选择支付状态'
placeholder="请选择支付状态"
value={field.value}
onChange={(value) => field.onChange(value)}
style={{ width: 160 }}
......@@ -141,7 +134,7 @@ export default function OrdersListView() {
render: (field) => (
<Select
allowClear
placeholder='请选择支付方式'
placeholder="请选择支付方式"
value={field.value}
onChange={(value) => field.onChange(value)}
style={{ width: 160 }}
......@@ -159,9 +152,9 @@ export default function OrdersListView() {
label: '支付时间',
render: (field) => (
<RangePicker
id='createTime'
id="createTime"
allowClear
autoComplete='off'
autoComplete="off"
value={field.value}
onChange={(value) => field.onChange(value)}
/>
......@@ -172,7 +165,7 @@ export default function OrdersListView() {
return (
<>
<AppList<OrderRow, OrdersFilters>
rowKey='id'
rowKey="id"
columns={columns}
data={{ rows: list.rows, total: list.total, loading: list.loading, error: list.error }}
filters={{
......@@ -192,11 +185,7 @@ export default function OrdersListView() {
}}
onRetry={list.retry}
/>
<RefundDrawer
open={refundId !== null}
onClose={() => setRefundId(null)}
onSubmit={submitRefund}
/>
<RefundDrawer open={refundId !== null} onClose={() => setRefundId(null)} onSubmit={submitRefund} />
</>
)
}
declare module '*.png' {
const source: string
export default source
}
declare module '*.svg' {
const source: string
export default source
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论