alex
/
PNSPS-frontend-MaterialUI
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

payment method btn css

master
Anna Ho 1年前
父节点
84ee9ae2d1
当前提交
c8e5cda4c0
共有 2 个文件被更改，包括 69 次插入 和 47 次删除
分列视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +18
    -1
      src/assets/style/styles.css
  2. +51
    -46
      src/pages/Payment/index.js

+ 18
- 1
src/assets/style/styles.css 查看文件

@@ -29,4 +29,21 @@ input[type=number] {
} */
/* main{
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 查看文件

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

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

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

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

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

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

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

return (
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
<Grid item xs={12} width="100%">
@@ -381,9 +385,9 @@ const Index = () => {
</div>
</Grid>
{/*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 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' }} >
<DataGrid
recordList={itemList}
@@ -400,7 +404,7 @@ const Index = () => {
交易參考號: {transactionData.transactionid}
</Typography>

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

@@ -415,86 +419,87 @@ const Index = () => {
</Grid>
<Grid item xs={12} md={12}>
<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>
{availableMethods.length > 0?

{availableMethods.length > 0 ?
!onReady ?
<LoadingComponent />:
<LoadingComponent /> :
<Grid item xs={12} md={12}>
<Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
請選擇付款方式:
<Typography variant="h5" sx={{ textAlign: "left" }}>
請選擇付款方式:
</Typography>
</Grid>
<Grid item>
<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>
</Grid>
<Grid item>
<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>
</Grid>
<Grid item>
<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>
</Grid>
<Grid item>
<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>
</Grid>
<Grid item>
<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>
</Grid>
<Grid item>
<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>
</Grid>
</Grid>
{selectedPaymentMethod !=""?
{selectedPaymentMethod != "" ?
<Grid item xs={12} md={12}>
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
已選擇付款方式:
<Typography variant="h5" sx={{ textAlign: "left" }}>
已選擇付款方式:
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" sx={{ textAlign: "left" }}>
<Typography variant="h5" sx={{ textAlign: "left" }}>
{selectedPaymentMethod}
</Typography>
</Grid>
</Grid>
</Grid>
: null}
: null}
<Button variant="contained" size="large" color="success" onClick={confirmPaymentHandle()} disabled={selectedPaymentMethod === ""}>
確認
</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>
</Grid>
{/* <MultiPaymentWindow open={open}


撰写 预览
正在加载...
取消
保存