update ui
This commit is contained in:
parent
d3c83842f4
commit
3878c2e0f4
@ -1,7 +1,7 @@
|
||||
import React, {useMemo} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
|
||||
import {IconBillType, IconMoney, IconStudentId} from "@/components/icons";
|
||||
import {IconBillType, IconMoney, IconStudentEmail, IconStudentId} from "@/components/icons";
|
||||
import MoneyFormat from "@/components/money-format.tsx";
|
||||
import './bill.less'
|
||||
|
||||
@ -21,6 +21,7 @@ const BillDetailItems = (prop: { bill: BillModel }) => {
|
||||
<BillDetailItem icon={<IconStudentId/>} title={t('manual.student_number')} value={prop.bill.student_number || prop.bill.application_number}/>
|
||||
<BillDetailItem icon={<IconStudentId/>} title={t('bill.title_student_name')}
|
||||
value={`${prop.bill.student_english_name}/${prop.bill.student_chinese_name}`}/>
|
||||
<BillDetailItem icon={<IconStudentEmail/>} title={'Email'} value={prop.bill.student_email}/>
|
||||
<BillDetailItem icon={<IconMoney/>} title={t('manual.amount')} value={<MoneyFormat money={prop.bill.amount}/>}/>
|
||||
</>)
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ import {useTranslation} from "react-i18next";
|
||||
import {BillDetailItems, useBillQRCode} from "@/components/bill/index.ts";
|
||||
|
||||
import './bill.less'
|
||||
import dayjs from "dayjs";
|
||||
|
||||
|
||||
type BillDetailProps = {
|
||||
@ -22,7 +23,7 @@ const BillDetail:BasicComponent<BillDetailProps> = ({bill,onCancel})=>{
|
||||
</div>
|
||||
</div>
|
||||
<div className={'bill-info-detail'}>
|
||||
<div className={'bill-exp-time text-center'}> {t('manual.exp_time')} {'12:00'} </div>
|
||||
<div className={'bill-exp-time text-center'}> {t('manual.exp_time')} {dayjs(bill.expiration_time).format('HH:mm')} </div>
|
||||
<BillDetailItems bill={bill} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -43,16 +43,16 @@ export const IconMoney = ({style}: IconProps) => {
|
||||
<rect x="0" y="0" width="20" height="20" rx="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#master_svg0_1_579925)">
|
||||
<g clipPath="url(#master_svg0_1_579925)">
|
||||
<g>
|
||||
<path
|
||||
d="M8.247756875,7.59451C8.575876875,7.38402,9.096836875000001,7.2191399999999994,9.767556875,7.1875L10.239506875,7.1875C10.910256875,7.2191399999999994,11.431196875000001,7.38402,11.759336874999999,7.59451C12.088336875,7.8055699999999995,12.191036875,8.02607,12.191036875,8.27881C12.191036875,8.31139,12.189336875,8.343440000000001,12.185666874999999,8.375L13.438906875,8.375C13.440336875,8.34324,13.441036875,8.31119,13.441036875,8.27881C13.441036875,6.946149999999999,12.228616875,6.13037,10.628536875,5.9637899999999995L10.628536875,4.375L9.378536875,4.375L9.378536875,5.9637899999999995C7.778456875,6.13037,6.566035275,6.946149999999999,6.566035275,8.27881C6.566035275,9.78029,8.105056875,10.625630000000001,10.003536875,10.625630000000001C10.785876875,10.62645,11.389026874999999,10.80287,11.753826875,11.03688C12.082856875000001,11.24793,12.185546875,11.468440000000001,12.185546875,11.72119C12.185546875,11.97393,12.082856875000001,12.19445,11.753826875,12.40549C11.425706875,12.61598,10.904746875,12.78086,10.234026875,12.8125L9.762066875,12.8125C9.091346875,12.78086,8.570386875,12.61598,8.242266875,12.40549C7.9132468750000005,12.19445,7.810546875,11.97393,7.810546875,11.72119C7.810546875,11.68861,7.812246875,11.656559999999999,7.815936875,11.625L6.562675955,11.625C6.561269283,11.65676,6.560546875,11.68883,6.560546875,11.72119C6.560546875,13.05385,7.772966875,13.86963,9.373046875,14.03621L9.373046875,15.625L10.623046875,15.625L10.623046875,14.03621C12.223126875,13.86963,13.435546875,13.05385,13.435546875,11.72119C13.435546875,10.21971,11.896526875,9.374369999999999,9.998046875,9.374369999999999C9.215706875,9.37355,8.612556875,9.19713,8.247756875,8.96313C7.918726875,8.75207,7.816036875,8.531559999999999,7.816036875,8.27881C7.816036875,8.02607,7.918726875,7.8055699999999995,8.247756875,7.59451Z"
|
||||
fill="#FF8432" fill-opacity="1"/>
|
||||
fill="#FF8432" fillOpacity="1"/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M18.75,10C18.75,14.8325,14.8325,18.75,10,18.75C5.1675,18.75,1.25,14.8325,1.25,10C1.25,5.1675,5.1675,1.25,10,1.25C14.8325,1.25,18.75,5.1675,18.75,10ZM17.5,10C17.5,5.85787,14.1421,2.5,10,2.5C5.85787,2.5,2.5,5.85787,2.5,10C2.5,14.1421,5.85787,17.5,10,17.5C14.1421,17.5,17.5,14.1421,17.5,10Z"
|
||||
fill="#FF8432" fill-opacity="1"/>
|
||||
fill="#FF8432" fillOpacity="1"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
@ -68,26 +68,35 @@ export const IconStudentId = ({style}: IconProps) => {
|
||||
<rect x="0" y="0" width="20" height="20" rx="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#master_svg0_1_310440)">
|
||||
<g clipPath="url(#master_svg0_1_310440)">
|
||||
<g>
|
||||
<path
|
||||
d="M14.6875,5.9375C14.6875,3.34867,12.5888,1.25,10,1.25C7.41117,1.25,5.3125,3.34867,5.3125,5.9375C5.3125,7.47584,6.05354,8.84111,7.19812,9.6958C4.1175999999999995,10.62863,1.875,13.4899,1.875,16.875L1.875,18.125C1.875,18.4702,2.154824,18.75,2.5,18.75L11.25,18.75L11.25,17.5L3.125,17.5L3.125,16.875C3.125,13.4232,5.92322,10.625,9.375,10.625L10.625,10.625C11.60687,10.625,12.5359,10.85141,13.3626,11.2549L15.5914,11.2549C14.7944,10.55002,13.8463,10.01207,12.8019,9.6958C13.9465,8.84111,14.6875,7.47584,14.6875,5.9375ZM10,9.375C8.10152,9.375,6.5625,7.83598,6.5625,5.9375C6.5625,4.03902,8.10152,2.5,10,2.5C11.8985,2.5,13.4375,4.03902,13.4375,5.9375C13.4375,7.83598,11.8985,9.375,10,9.375Z"
|
||||
fill="#00C479" fill-opacity="1"/>
|
||||
fill="#00C479" fillOpacity="1"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M12.5,13.75L18.125,13.75L18.125,12.5L12.5,12.5L12.5,13.75Z" fill="#00C479"
|
||||
fill-opacity="1"/>
|
||||
fillOpacity="1"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M18.125,16.25L12.5,16.25L12.5,15L18.125,15L18.125,16.25Z" fill="#00C479" fill-opacity="1"/>
|
||||
<path d="M18.125,16.25L12.5,16.25L12.5,15L18.125,15L18.125,16.25Z" fill="#00C479" fillOpacity="1"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M12.5,18.75L18.125,18.75L18.125,17.5L12.5,17.5L12.5,18.75Z" fill="#00C479"
|
||||
fill-opacity="1"/>
|
||||
fillOpacity="1"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>)
|
||||
}
|
||||
export const IconStudentEmail = ({style}: IconProps) => {
|
||||
return (
|
||||
<svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em" height="1em" style={style}>
|
||||
<path
|
||||
d="M926.47619 355.644952V780.190476a73.142857 73.142857 0 0 1-73.142857 73.142857H170.666667a73.142857 73.142857 0 0 1-73.142857-73.142857V355.644952l73.142857 62.000762V780.190476h682.666666V417.645714l73.142857-62.000762zM853.333333 170.666667a74.044952 74.044952 0 0 1 26.087619 4.778666 72.704 72.704 0 0 1 30.622477 22.186667 73.508571 73.508571 0 0 1 10.678857 17.67619c3.169524 7.509333 5.12 15.652571 5.607619 24.210286L926.47619 243.809524v24.380952L559.469714 581.241905a73.142857 73.142857 0 0 1-91.306666 2.901333l-3.632762-2.925714L97.52381 268.190476v-24.380952a72.899048 72.899048 0 0 1 40.155428-65.292191A72.97219 72.97219 0 0 1 170.666667 170.666667h682.666666z m-10.971428 73.142857H181.638095L512 525.58019 842.361905 243.809524z"
|
||||
fill="#00C479" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export const IconBillType = ({style}: IconProps) => {
|
||||
return (
|
||||
@ -98,25 +107,25 @@ export const IconBillType = ({style}: IconProps) => {
|
||||
<rect x="0" y="0" width="20" height="20" rx="0"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#master_svg0_1_310428)">
|
||||
<g clipPath="url(#master_svg0_1_310428)">
|
||||
<g>
|
||||
<path
|
||||
d="M11.875,7.499664306640625L5,7.499664306640625L5,6.249664306640625L11.875,6.249664306640625L11.875,7.499664306640625Z"
|
||||
fill="#FFC65F" fill-opacity="1"/>
|
||||
fill="#FFC65F" fillOpacity="1"/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M5,13.749969482421875L10,13.749969482421875L10,12.499969482421875L5,12.499969482421875L5,13.749969482421875Z"
|
||||
fill="#FFC65F" fill-opacity="1"/>
|
||||
fill="#FFC65F" fillOpacity="1"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M11.875,10.625L5,10.625L5,9.375L11.875,9.375L11.875,10.625Z" fill="#FFC65F"
|
||||
fill-opacity="1"/>
|
||||
fillOpacity="1"/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M15,16.875C15,17.5654,14.4404,18.125,13.75,18.125L3.125,18.125C2.434649,18.125,1.875,17.5654,1.875,16.875L1.875,3.125C1.875,2.434649,2.434649,1.875,3.125,1.875L13.75,1.875C14.4404,1.875,15,2.434649,15,3.125L16.875,3.125C17.5654,3.125,18.125,3.68465,18.125,4.375L18.125,15.625C18.125,16.3154,17.5654,16.875,16.875,16.875L15,16.875ZM13.75,3.125L3.125,3.125L3.125,16.875L13.75,16.875L13.75,3.125ZM15,4.375L15,15.625L16.875,15.625L16.875,4.375L15,4.375Z"
|
||||
fill="#FFC65F" fill-opacity="1"/>
|
||||
fill="#FFC65F" fillOpacity="1"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@ -69,7 +69,8 @@
|
||||
},
|
||||
"manual": {
|
||||
"amount": "Amount",
|
||||
"amount_required": "require bill amount",
|
||||
"amount_gt0": "must be greater than 0",
|
||||
"amount_required": "require",
|
||||
"bill_type": "Bill Type",
|
||||
"bill_type_required": "please select bill type",
|
||||
"btn_generate": "Generate Bill",
|
||||
|
||||
@ -69,7 +69,8 @@
|
||||
},
|
||||
"manual": {
|
||||
"amount": "金额",
|
||||
"amount_required": "请填写账单金额",
|
||||
"amount_gt0": "账单金额必须大于0",
|
||||
"amount_required": "请填写",
|
||||
"bill_type": "账单类型",
|
||||
"bill_type_required": "请选择账单类型",
|
||||
"btn_generate": "生成账单",
|
||||
|
||||
@ -69,7 +69,8 @@
|
||||
},
|
||||
"manual": {
|
||||
"amount": "金額",
|
||||
"amount_required": "請填寫帳單金額",
|
||||
"amount_gt0": "帳單金額必須大於0",
|
||||
"amount_required": "請填寫",
|
||||
"bill_type": "帳單類型",
|
||||
"bill_type_required": "請選擇帳單類型",
|
||||
"btn_generate": "產生帳單",
|
||||
|
||||
@ -47,7 +47,7 @@ const BillQuery = () => {
|
||||
</Popconfirm>
|
||||
<Button onClick={() => setShowBill(bill)} size={'small'} theme={'solid'}
|
||||
type={'primary'}>{t('base.qr-code')}</Button>
|
||||
{AppMode == 'development' && <a href={`/pay?bill=${bill.id}`} target={'_blank'}>Payment</a>}
|
||||
{AppMode == 'development' && <a href={`/pay?bill=${bill.id}`} target={'_blank'}>支付</a>}
|
||||
</>}
|
||||
{
|
||||
bill.status == BillStatus.PAID
|
||||
@ -59,6 +59,21 @@ const BillQuery = () => {
|
||||
}
|
||||
return (<div>
|
||||
<SearchForm showApply loading={loading} onSearch={setBillQueryParams}/>
|
||||
<Button onClick={()=>{
|
||||
Sentry.showReportDialog({
|
||||
eventId:'Error: Query bill error',//'QueryBill Report'
|
||||
user:{
|
||||
email:'123123123',
|
||||
name:'test'
|
||||
},
|
||||
lang:'zh-CN',
|
||||
title:'看起来出现问题了',
|
||||
subtitle:'请填写你遇到的问题',
|
||||
subtitle2:'',
|
||||
labelComments:'问题类型',
|
||||
labelName:'问题类型',
|
||||
})
|
||||
}}></Button>
|
||||
<BillList
|
||||
type={'query'} loading={loading}
|
||||
operationRender={operation} source={data}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {Button, Form, Space, Toast} from "@douyinfe/semi-ui";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import { useRef, useState} from "react";
|
||||
import {useEffect, useRef, useState} from "react";
|
||||
|
||||
import {Card} from "@/components/card";
|
||||
import {BillTypes} from "@/service/bill-types.ts";
|
||||
@ -29,11 +29,13 @@ export default function Index() {
|
||||
const handleSubmit = (values: ManualCreateBillParam) => {
|
||||
setState({loading: true,errorMessage:''})
|
||||
createManualBill(values).then((ret) => {
|
||||
console.log(ret)
|
||||
frm.current?.formApi.reset();
|
||||
Toast.info({
|
||||
content: t('manual.success'),
|
||||
})
|
||||
getBillDetail(ret.id).then(setBillInfo);
|
||||
setBillInfo(ret)
|
||||
//getBillDetail(ret.id).then(setBillInfo);
|
||||
}).catch((e: BizError) => {
|
||||
Sentry.captureMessage('Error: create manual bill error',{
|
||||
level: 'error',
|
||||
@ -48,6 +50,9 @@ export default function Index() {
|
||||
setState({loading: false})
|
||||
})
|
||||
}
|
||||
// useEffect(()=>{
|
||||
// getBillDetail(100009).then(setBillInfo);
|
||||
// },[])
|
||||
|
||||
const BillInfo = ({bill}: { bill?: BillModel }) => {
|
||||
if (!bill) return null;
|
||||
@ -77,7 +82,17 @@ export default function Index() {
|
||||
<Form.Input
|
||||
field='amount' label={t('manual.amount')} style={{minWidth: 120}}
|
||||
placeholder={t('manual.amount')}
|
||||
rules={[{required: true, message: t('manual.amount_required')}]}
|
||||
rules={[
|
||||
{required: true, message: t('manual.amount_required')},
|
||||
{
|
||||
type:'number',
|
||||
validator:(_,v)=>{
|
||||
console.log(_,v)
|
||||
return !isNaN(v) && Number(v)>0;
|
||||
},
|
||||
message: t('manual.amount_gt0')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<Form.Input
|
||||
field='student_number' label={t('manual.student_number')} style={{minWidth: 150}}
|
||||
|
||||
@ -30,7 +30,7 @@ export async function billList(params: BillQueryParams) {
|
||||
|
||||
//现场支付创建账单接口
|
||||
export function createManualBill(params: ManualCreateBillParam) {
|
||||
return post<{ id: number }>('/manual_payment', params)
|
||||
return post<BillModel>('/manual_payment', params)
|
||||
}
|
||||
|
||||
// 获取账单详情
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user