modify confirm

src/i18n/translations/en.json

@@ -1,5 +1,6 @@
 {
   "base": {
+    "add": "Add",
     "bill_number": "Bill Number",
     "btn_search_submit": "Search",
     "cancel": "Cancel",
@@ -12,6 +13,7 @@
     "please_select": "Please Select",
     "qr-code": "QRCode",
     "query_bill": "Failed to query bill:",
+    "remove": "Remove",
     "student_number": "Student Number"
   },
   "bill": {

src/i18n/translations/sc.json

@@ -1,5 +1,6 @@
 {
   "base": {
+    "add": "增加",
     "bill_number": "账单编号",
     "btn_search_submit": "搜索",
     "cancel": "取消",
@@ -12,6 +13,7 @@
     "please_select": "请选择",
     "qr-code": "二维码",
     "query_bill": "查询账单失败:",
+    "remove": "删除",
     "student_number": "学号"
   },
   "bill": {

src/i18n/translations/tc.json

@@ -1,5 +1,6 @@
 {
   "base": {
+    "add": "增加",
     "bill_number": "帳單編號",
     "btn_search_submit": "搜尋",
     "cancel": "取消",
@@ -12,6 +13,7 @@
     "please_select": "請選擇",
     "qr-code": "QRCode",
     "query_bill": "查詢帳單失敗:",
+    "remove": "刪除",
     "student_number": "學號"
   },
   "bill": {

src/pages/bill/components/bill_type_confirm.tsx

@@ -1,4 +1,4 @@
-import {Button, Select, Popconfirm, Space, Tag} from "@douyinfe/semi-ui";
+import {Button, Select, Popconfirm, Space, Tag, Divider, Input} from "@douyinfe/semi-ui";
 import React, {useState} from "react";
 import {useSetState} from "ahooks";
 import MoneyFormat from "@/components/money-format.tsx";
@@ -13,45 +13,61 @@ type BillTypeConfirmProps = {
 export const BillTypeConfirm: React.FC<BillTypeConfirmProps> = (props) => {
 	const [it, setItem] = useState(props.data)
 	const {t} = useTranslation()
-	const [state,setState] = useSetState({
+	const [state, setState] = useSetState<{
+		billTypeList: BillTypeConfirm[];
+		loading?: boolean,
+		confirmed?: boolean,
+	}>({
 		loading: false,
-		bill_type: props.data.bill_type
+		billTypeList: [
+			{bill_type:props.data.bill_type,amount:props.data.amount}
+		]
 	})
 	const onConfirmBill = () => {
 		setState({loading: true})
-		confirmBillType({id:it.id,type:state.bill_type}).then(() => {
+		// confirmBillType({id: it.id, type: state.bill_type}).then(() => {
-            setState({loading:false})
+		// 	setState({loading: false})
-            setItem({...it,confirm_status:'CONFIRMED'})
+		// 	setItem({...it, confirm_status: 'CONFIRMED'})
-        }).catch(() => {
+		// }).catch(() => {
-            setState({loading:false})
+		// 	setState({loading: false})
-        })
+		// })
 	}
-	return <div  className="confirm-item align-center space-between"
+	const onChange = (value:string,index:number,type:'type'|'amount')=>{
-		style={{marginBottom: 20}}>
+
-		<div style={{lineHeight:1.1}}>
+	}
+	const onRemove = (index:number) =>{
+		if(state.billTypeList.length <= 1) return;
+	}
+	return (<>
+		<div className="confirm-item" style={{margin: '20px 0'}}>
+			<div style={{lineHeight: 1.1}} className={'align-center'}>
 				<div>{it.bill_type}</div>
-			<div style={{fontSize:12}}>
+				<span style={{marginLeft: 100}}>Total Amount:</span>
 				<MoneyFormat money={it.amount}/>
 			</div>
-		</div>
+			{state.billTypeList.map((item, index) => {
-		<div className="confirm-item-btn">
+				return (<div key={index} className="confirm-item-btn align-center space-between" style={{marginTop: 10}}>
-			<Space spacing={15}>
+					<Select
-				{it.confirm_status != 'CONFIRMED' && <Select onChange={v=>setState({bill_type:String(v)})} defaultValue={it.bill_type} style={{width:180}} placeholder={t('manual.bill_type')}>
+						value={item.bill_type || it.bill_type}
+						style={{width: 200}}
+						onChange={v=>onChange(String(v),index,'type')}
+						placeholder={t('manual.bill_type')}>
 						{
 							BillTypes.map((it, idx) => (
 								<Select.Option key={idx} value={it.label}>{it.label}</Select.Option>))
 						}
-                </Select>}
+					</Select>
-				{
+
-					it.confirm_status == 'CONFIRMED' ? <Tag size={'large'} color='light-blue'>{state.bill_type}</Tag> : <>
+					<Space spacing={10}>
-						<Popconfirm
+						<Input value={item.amount} type={'number'} onChange={v=>onChange(v,index,'amount')} style={{width: 120}}/>
-							title={'Notice'} onConfirm={() => onConfirmBill()}
+						<Button disabled={state.billTypeList.length <= 1} onClick={()=>onRemove(index)} theme={'solid'} type={'secondary'}>{t('base.remove')}</Button>
-							position={'topRight'}
-							content={`${t('bill.confirm_bill_type')}?`}
-						><Button style={{width:80}} loading={state.loading} theme={'solid'}>{t('base.confirm')}</Button></Popconfirm>
-					</>
-				}
 					</Space>
+				</div>)
+			})}
+			<div style={{marginTop:10}}>
+				<Button theme={'solid'}>{t('base.add')}</Button>
 			</div>
 		</div>
+		<Divider margin='12px'/>
+	</>)
 }

src/pages/bill/query.tsx

@@ -193,11 +193,9 @@ const BillQuery = () => {
 						!state.confirmBill.application_number_confirm &&
                         <NumberConfirm bill={state.confirmBill} type={'application_number'}/>
 					}
+					<Divider>Bill Type Confirm</Divider>
 					{
-						state.confirmBill.details.map((it, idx) => (<div key={idx}>
+						state.confirmBill.details.map((it, idx) => (<BillTypeConfirm data={it} key={idx}/>))
-							<Divider margin='12px'/>
-							<BillTypeConfirm data={it}/>
-						</div>))
 					}
                 </div>
             </>}

src/types/bill.d.ts

@@ -110,3 +110,8 @@ type BillUpdateParams = {
     merchant_ref?: string;
     payment_amount?: number | string;
 }
+
+type BillTypeConfirm = {
+    bill_type: string;
+    amount: number;
+}