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~ ...@@ -21,7 +21,7 @@ final exam of web programming with ~~PHP~~ **JavaScript** and using ~~Framework~
- ใส่ข้อมูลการเชื่อมต่อที่ `.env` - ใส่ข้อมูลการเชื่อมต่อที่ `.env`
- migration - migration
- `npx prisma migrate dev` เพื่อทำการ migrate ฐานข้อมูล - `npx prisma migrate dev` เพื่อทำการ migrate ฐานข้อมูล
- * หาก error อาจจะต้องทำการ upgrade mysql โดย - *หาก error อาจจะต้องทำการ upgrade mysql โดย
- รันไฟล์ชื่อ `mysql_upgrade` ที่โฟลเดอร์ `xampp/bin` - รันไฟล์ชื่อ `mysql_upgrade` ที่โฟลเดอร์ `xampp/bin`
- กำหนดสิทธิ์ admin - กำหนดสิทธิ์ admin
- หลังจากสมัครสมาชิก เข้าไปยังฐานข้อมูลและเปลี่ยน `rank` ของ user เป็น 1 - หลังจากสมัครสมาชิก เข้าไปยังฐานข้อมูลและเปลี่ยน `rank` ของ user เป็น 1
......
...@@ -12,7 +12,7 @@ const OrderController = { ...@@ -12,7 +12,7 @@ const OrderController = {
const order = await db.order.findMany({ const order = await db.order.findMany({
where: { user_id: Number(req.user.id) }, where: { user_id: Number(req.user.id) },
}); });
res.json(order) res.json(order);
} catch (err) { } catch (err) {
res.json({ status: 100, message: "server found some error" }); res.json({ status: 100, message: "server found some error" });
} }
...@@ -82,6 +82,23 @@ const OrderController = { ...@@ -82,6 +82,23 @@ const OrderController = {
res.json({ status: 200, message: "server error with some error" }); 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; export default OrderController;
...@@ -15,6 +15,7 @@ UserRouter.delete("/cart", CartController.delete); ...@@ -15,6 +15,7 @@ UserRouter.delete("/cart", CartController.delete);
UserRouter.get("/order", OrderController.index); UserRouter.get("/order", OrderController.index);
UserRouter.post("/order", OrderController.create); UserRouter.post("/order", OrderController.create);
UserRouter.put("/order/check", OrderController.check);
UserRouter.get("/order/detail", OrderDetailController.index); 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"; ...@@ -15,6 +15,7 @@ import axios from "axios";
import PopupAlert from "@/components/PopupAlert"; import PopupAlert from "@/components/PopupAlert";
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import ConfirmPayment from "@/components/order/ConfirmPayment";
export default function Order() { export default function Order() {
const user = useContext(UserContext); const user = useContext(UserContext);
...@@ -23,6 +24,7 @@ export default function Order() { ...@@ -23,6 +24,7 @@ export default function Order() {
const [message, setMessage] = useState({ error: false, message: "" }); const [message, setMessage] = useState({ error: false, message: "" });
const [orderList, setOrderList] = useState([]); const [orderList, setOrderList] = useState([]);
const [CartProduct, setCartProduct] = useState([]); const [CartProduct, setCartProduct] = useState([]);
const [payment, setPayment] = useState({ open: false, id: -1, price: -1 });
const fetchOrder = async () => { const fetchOrder = async () => {
if (!user.value?.token) return; if (!user.value?.token) return;
...@@ -46,7 +48,7 @@ export default function Order() { ...@@ -46,7 +48,7 @@ export default function Order() {
useEffect(() => { useEffect(() => {
fetchOrder(); fetchOrder();
}, [user]); }, [user, payment]);
useEffect(() => { useEffect(() => {
setCartProduct( setCartProduct(
...@@ -61,6 +63,14 @@ export default function Order() { ...@@ -61,6 +63,14 @@ export default function Order() {
<Head> <Head>
<title>คำสั่งซื้อ | OpenShop</title> <title>คำสั่งซื้อ | OpenShop</title>
</Head> </Head>
{payment.open && (
<ConfirmPayment
open={payment.open}
handleClose={() => setPayment({ open: false, id: -1 })}
id={payment.id}
price={payment.price}
/>
)}
<Box> <Box>
<PopupAlert <PopupAlert
open={!!message.message.length} open={!!message.message.length}
...@@ -106,9 +116,21 @@ export default function Order() { ...@@ -106,9 +116,21 @@ export default function Order() {
<TableCell>{order.shipping_price}</TableCell> <TableCell>{order.shipping_price}</TableCell>
<TableCell> <TableCell>
<Box color={order.pay_status ? "green" : "red"}> <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> </Box>
</TableCell> </TableCell>
<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