alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

payment method btn css

master
Anna Ho 1 year ago
parent
84ee9ae2d1
commit
c8e5cda4c0
2 changed files with 69 additions and 47 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +18
    -1
      src/assets/style/styles.css
  2. +51
    -46
      src/pages/Payment/index.js

+ 18
- 1
src/assets/style/styles.css View File

@@ -29,4 +29,21 @@ input[type=number] {
} */ } */
/* main{ /* main{
padding-top: 43px; padding-top: 43px;
} */
} */

img
{
-webkit-transition: all 0.2s
}
/*Filter styles*/
.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%) brightness(1.5);}
.contrast {-webkit-filter: contrast(10%);}
.brightness {-webkit-filter: brightness(1.2);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%);}

img:hover{-webkit-filter:none;}

+ 51
- 46
src/pages/Payment/index.js View File

@@ -69,13 +69,13 @@ const Index = () => {
setTotalAmount(location.state?.amount ?? 2000) setTotalAmount(location.state?.amount ?? 2000)
getAvailablePayment() getAvailablePayment()
getTransactionId() getTransactionId()
}, []); }, []);


useEffect(()=>{
if(appIds!=[] && appIds.length>0)
useEffect(() => {
if (appIds != [] && appIds.length > 0)
getAppList(); getAppList();
},[appIds]);
}, [appIds]);


// const handleClose = () => { // const handleClose = () => {
// // handleReset() // // handleReset()
@@ -346,16 +346,16 @@ const Index = () => {
} }


useEffect(() => { useEffect(() => {
if(availableMethods.length > 0 && Object.keys(transactionData).length > 0){
if (availableMethods.length > 0 && Object.keys(transactionData).length > 0) {
setOnReady(true) setOnReady(true)
} }
}, [transactionData,availableMethods]);
}, [transactionData, availableMethods]);


const getAppList = () => { const getAppList = () => {
HttpUtils.post({ HttpUtils.post({
url: UrlUtils.PAYMENT_APP_LIST, url: UrlUtils.PAYMENT_APP_LIST,
params:{
appIds:appIds
params: {
appIds: appIds
}, },
onSuccess: (responseData) => { onSuccess: (responseData) => {
setItemList(responseData) setItemList(responseData)
@@ -363,14 +363,18 @@ const Index = () => {
}); });
} }


const selectedPaymentMethodHandle = (method) => () =>{
const selectedPaymentMethodHandle = (method) => () => {
setSelectedPaymentMethod(method); setSelectedPaymentMethod(method);
}; };
const confirmPaymentHandle = () => () =>{
setConfirmPayment(true);
const confirmPaymentHandle = () => () => {
setConfirmPayment(true);
}; };


const getMethodImgClass = (method) => {
return selectedPaymentMethod == method || selectedPaymentMethod == "" ? "" : "grayscale";
}

return ( return (
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" > <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
<Grid item xs={12} width="100%"> <Grid item xs={12} width="100%">
@@ -381,9 +385,9 @@ const Index = () => {
</div> </div>
</Grid> </Grid>
{/*row 1*/} {/*row 1*/}
<Grid item xs={12} md={12} width="100%">
<Grid item xs={12} md={12} width="100%">
<Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" > <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
<Grid item xs={12} md={5} style={{ height: '100%' }}>
<Grid item xs={12} md={5} style={{ height: '100%' }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} > <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<DataGrid <DataGrid
recordList={itemList} recordList={itemList}
@@ -400,7 +404,7 @@ const Index = () => {
交易參考號: {transactionData.transactionid} 交易參考號: {transactionData.transactionid}
</Typography> </Typography>


<Typography variant="h5" sx={{ textAlign: "left" }}>
<Typography variant="h5" sx={{ textAlign: "left" }}>
支付金額: HK$ {FormatUtils.currencyFormat(totalAmount)} 支付金額: HK$ {FormatUtils.currencyFormat(totalAmount)}
</Typography> </Typography>


@@ -415,86 +419,87 @@ const Index = () => {
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Grid container > <Grid container >
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
付款金額:
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
{"HK$ "+FormatUtils.currencyFormat(totalAmount)}
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
付款金額:
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
{"HK$ " + FormatUtils.currencyFormat(totalAmount)}
</Typography>
</Grid>
</Grid> </Grid>
</Grid> </Grid>
{availableMethods.length > 0?

{availableMethods.length > 0 ?
!onReady ? !onReady ?
<LoadingComponent />:
<LoadingComponent /> :
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center"> <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item> <Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
請選擇付款方式:
<Typography variant="h5" sx={{ textAlign: "left" }}>
請選擇付款方式:
</Typography> </Typography>
</Grid> </Grid>
<Grid item> <Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={fpsStatus.active === "N"}> <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={fpsStatus.active === "N"}>
<img src={FpsIcon} width="80" height="80" alt="FPS"></img>
<img className={getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
</Button> </Button>
</Grid> </Grid>
<Grid item> <Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={creditCardStatus.active === "N"}> <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={creditCardStatus.active === "N"}>
<img src={VisaIcon} width="80" height="80" alt="Visa"></img>
<img className={getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
</Button> </Button>
</Grid> </Grid>
<Grid item> <Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={creditCardStatus.active === "N"}> <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={creditCardStatus.active === "N"}>
<img src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
<img className={getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
</Button> </Button>
</Grid> </Grid>
<Grid item> <Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={unionPayStatus.active === "N"}> <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={unionPayStatus.active === "N"}>
<img src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
<img className={getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
</Button> </Button>
</Grid> </Grid>
<Grid item> <Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={unionPayStatus.active === "N"}> <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={unionPayStatus.active === "N"}>
<img src={JcbIcon} width="80" height="80" alt="JCB"></img>
<img className={getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
</Button> </Button>
</Grid> </Grid>
<Grid item> <Grid item>
<Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={ppsStatus.active === "N"}> <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={ppsStatus.active === "N"}>
<img src={PpsIcon} width="80" height="80" alt="PPS"></img>
<img className={getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>
{selectedPaymentMethod !=""?
{selectedPaymentMethod != "" ?
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center"> <Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid item> <Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
已選擇付款方式:
<Typography variant="h5" sx={{ textAlign: "left" }}>
已選擇付款方式:
</Typography> </Typography>
</Grid> </Grid>
<Grid item> <Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
<Typography variant="h5" sx={{ textAlign: "left" }}>
{selectedPaymentMethod} {selectedPaymentMethod}
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
: null}
: null}
<Button variant="contained" size="large" color="success" onClick={confirmPaymentHandle()} disabled={selectedPaymentMethod === ""}> <Button variant="contained" size="large" color="success" onClick={confirmPaymentHandle()} disabled={selectedPaymentMethod === ""}>
確認 確認
</Button> </Button>
</Grid>:
<Grid container direction="row" justifyContent="center" alignItems="center">
<Typography sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
</Grid> :
<Grid container direction="row" justifyContent="center" alignItems="center">
<Typography sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
付款功能現在不可用。 付款功能現在不可用。
</Typography>
</Grid>
</Typography>
</Grid>
} }
</center> </center>
</Grid> </Grid>
{/* <MultiPaymentWindow open={open} {/* <MultiPaymentWindow open={open}


Write Preview
Loading…
Cancel
Save