Commit c4c49ffc authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

user can check bill

parent b7763b36
......@@ -21,7 +21,7 @@ final exam of web programming with ~~PHP~~ **JavaScript** and using ~~Framework~
- ใส่ข้อมูลการเชื่อมต่อที่ `.env`
- migration
- `npx prisma migrate dev` เพื่อทำการ migrate ฐานข้อมูล
- * หาก error อาจจะต้องทำการ upgrade mysql โดย
- *หาก error อาจจะต้องทำการ upgrade mysql โดย
- รันไฟล์ชื่อ `mysql_upgrade` ที่โฟลเดอร์ `xampp/bin`
- กำหนดสิทธิ์ admin
- หลังจากสมัครสมาชิก เข้าไปยังฐานข้อมูลและเปลี่ยน `rank` ของ user เป็น 1
......
......@@ -12,7 +12,7 @@ const OrderController = {
const order = await db.order.findMany({
where: { user_id: Number(req.user.id) },
});
res.json(order)
res.json(order);
} catch (err) {
res.json({ status: 100, message: "server found some error" });
}
......@@ -82,6 +82,23 @@ const OrderController = {
res.json({ status: 200, message: "server error with some error" });
}
},
/**
*
* @param {Request} req
* @param {Response} res
*/
async check(req, res) {
try {
const { id } = req.query;
if (!id) throw 300;
await db.order.update({ where: { id: Number(id) }, data: { pay_status: 1 } });
res.json({
status: 301, message: "check order success"
})
} catch (err) {
res.json({ status: 300, message: "check failed with error" });
}
},
};
export default OrderController;
......@@ -15,6 +15,7 @@ UserRouter.delete("/cart", CartController.delete);
UserRouter.get("/order", OrderController.index);
UserRouter.post("/order", OrderController.create);
UserRouter.put("/order/check", OrderController.check);
UserRouter.get("/order/detail", OrderDetailController.index);
......
import * as React from "react";
import PropTypes from "prop-types";
import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
function CircleLoading(props) {
return (
<Box sx={{ position: "relative", display: "inline-flex" }}>
<CircularProgress variant="determinate" {...props} />
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<Typography variant="caption" component="div" color="text.secondary">
{`${Math.round(props.value)}%`}
</Typography>
</Box>
</Box>
);
}
export default CircleLoading;
import { useState, useEffect, useContext } from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import {
Alert,
Box,
CircularProgress,
Fab,
FormControl,
InputLabel,
MenuItem,
Select,
Snackbar,
} from "@mui/material";
import axios from "axios";
import { CartContext, UserContext } from "@/pages/_app";
import { CurrencyBitcoin } from "@mui/icons-material";
import { Payment } from "@mui/icons-material";
import { AccountBalance } from "@mui/icons-material";
import { Check } from "@mui/icons-material";
import CircleLoading from "../CircleLoading";
export default function ConfirmPayment({ open, handleClose, id, price }) {
const user = useContext(UserContext);
const cart = useContext(CartContext);
const [message, setMessage] = useState({ message: "", error: false });
const [paymentType, setPaymentType] = useState(0);
const [loading, setLoading] = useState(-1);
useEffect(() => {
if (-1 < loading && loading < 100) {
setTimeout(() => {
setLoading(loading + 10);
}, 400);
} else if (loading > 99) {
setTimeout(() => {
handleClose();
}, 2000);
}
}, [loading]);
/**
*
* @param {FormDataEvent} e
*/
async function onOrder(e) {
e.preventDefault();
try {
setLoading(0);
let response = await axios.put(
"/api/u/order/check?id=" + id,
{},
{ headers: { token: user.value.token } }
);
console.log(response.data);
} catch (err) {}
}
return (
<>
<Snackbar
anchorOrigin={{ horizontal: "center", vertical: "top" }}
open={!!message.message.length}
>
<Alert severity={message.error ? "error" : "success"}>
{message.message}
</Alert>
</Snackbar>
<Dialog open={open} onClose={handleClose}>
<form onSubmit={onOrder}>
<DialogTitle>ดำเนินการชำระเงิน</DialogTitle>
{loading !== -1 ? (
<Box sx={{ textAlign: "center" }}>
{loading === 100 ? (
<Fab aria-label="save" color="success">
<Check />
</Fab>
) : (
<CircleLoading value={loading} />
)}
</Box>
) : (
<DialogContent className="text-center">
<div>
ทั้งหมด{" "}
<Box component={"span"} color={"orangered"}>
${Number(price).toLocaleString()}
</Box>
</div>
<FormControl
className="m-1"
variant="standard"
sx={{ minWidth: 170, p: 2 }}
>
<InputLabel>ชำระเงินด้วย</InputLabel>
<Select
value={paymentType}
onChange={(e) => setPaymentType(e.target.value)}
required
>
<MenuItem selected value={0}>
<Box sx={{ display: "flex" }}>
<CurrencyBitcoin /> Bitcoin
</Box>
</MenuItem>
<MenuItem selected value={1}>
<Box sx={{ display: "flex" }}>
<Payment /> บัตรเครดิต/เดบิต
</Box>
</MenuItem>
<MenuItem selected value={2}>
<Box sx={{ display: "flex" }}>
<AccountBalance /> โอนผ่านธนาคาร
</Box>
</MenuItem>
</Select>
</FormControl>
</DialogContent>
)}
<DialogActions>
<Button color="error" onClick={handleClose}>
ยกเลิก
</Button>
<Button type="submit">ชำระเงิน</Button>
</DialogActions>
</form>
</Dialog>
</>
);
}
......@@ -15,6 +15,7 @@ import axios from "axios";
import PopupAlert from "@/components/PopupAlert";
import Head from "next/head";
import Link from "next/link";
import ConfirmPayment from "@/components/order/ConfirmPayment";
export default function Order() {
const user = useContext(UserContext);
......@@ -23,6 +24,7 @@ export default function Order() {
const [message, setMessage] = useState({ error: false, message: "" });
const [orderList, setOrderList] = useState([]);
const [CartProduct, setCartProduct] = useState([]);
const [payment, setPayment] = useState({ open: false, id: -1, price: -1 });
const fetchOrder = async () => {
if (!user.value?.token) return;
......@@ -46,7 +48,7 @@ export default function Order() {
useEffect(() => {
fetchOrder();
}, [user]);
}, [user, payment]);
useEffect(() => {
setCartProduct(
......@@ -61,6 +63,14 @@ export default function Order() {
<Head>
<title>คำสั่งซื้อ | OpenShop</title>
</Head>
{payment.open && (
<ConfirmPayment
open={payment.open}
handleClose={() => setPayment({ open: false, id: -1 })}
id={payment.id}
price={payment.price}
/>
)}
<Box>
<PopupAlert
open={!!message.message.length}
......@@ -106,9 +116,21 @@ export default function Order() {
<TableCell>{order.shipping_price}</TableCell>
<TableCell>
<Box color={order.pay_status ? "green" : "red"}>
{order.pay_status
? "ชำระเงินแล้ว"
: "ยังไม่ชำระเงิน"}
{order.pay_status ? (
"ชำระเงินแล้ว"
) : (
<Button
onClick={() =>
setPayment({
open: true,
id: order.id,
price: order.total_price,
})
}
>
ดำเนินการชำระเงิน
</Button>
)}
</Box>
</TableCell>
<TableCell>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment