Skip to content

A
Aqbits Trace Code
Commit 5d26dac1 authored by Trần Ngọc Nam Anh's avatar Trần Ngọc Nam Anh
Browse files
Options

Change Profile Detail UI

parent 0dccaeb8
Show whitespace changes
Inline Side-by-side
Showing with 193 additions and 83 deletions
src/components/Profile/DetailProfile.js
View file @ 5d26dac1
import React, { useState } from "react"; import React, { useState } from "react";
// reactstrap components // reactstrap components
import { Card, CardImg, Container, Row, Col } from "reactstrap"; import { Card, CardImg, Container, Row, Col, CardHeader, CardBody, CardText, CardFooter, CardTitle } from "reactstrap";
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import QRCode from 'react-qr-code'; import QRCode from 'react-qr-code';
...@@ -13,6 +13,7 @@ import DemoNavbar from "components/Navbars/DemoNavbar.js"; ...@@ -13,6 +13,7 @@ import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js"; import SimpleFooter from "components/Footers/SimpleFooter.js";
import dummyData from "data/index.json"; import dummyData from "data/index.json";
import './detail-profile.css';
const DetailProfile = () => { const DetailProfile = () => {
const history = useHistory(); const history = useHistory();
...@@ -31,20 +32,17 @@ const DetailProfile = () => { ...@@ -31,20 +32,17 @@ const DetailProfile = () => {
return ( return (
<Container> <Container>
<Row className="row-grid align-items-center"> <Row className="row-grid align-items-center">
<Col md="6"> <Col md={6} >
<Card className="bg-default shadow border-0"> <div className="d-flex justify-content-center">
<CardImg <img
className="px-auto shadow"
alt="..." alt="..."
src={window.location.origin + data.logo} src={window.location.origin + data.logo}
top top
/> />
</Card> </div>
</Col> </Col>
<Col md="6"> <Col md={6}>
<div className="pl-md-5">
{/* <div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
<i className="ni ni-settings" />
</div> */}
<div className="h2 mb-3">{data.name}</div> <div className="h2 mb-3">{data.name}</div>
<div className="mb-3"> <div className="mb-3">
<div className="h5 font-weight-bold">Số điện thoại</div> <div className="h5 font-weight-bold">Số điện thoại</div>
...@@ -54,9 +52,18 @@ const DetailProfile = () => { ...@@ -54,9 +52,18 @@ const DetailProfile = () => {
<div className="h5 font-weight-bold">Địa chỉ</div> <div className="h5 font-weight-bold">Địa chỉ</div>
<div className="h5">{data.address}</div> <div className="h5">{data.address}</div>
</div> </div>
<div className="mb-3"> </Col>
<div className="h5 font-weight-bold">Sản phẩm</div> </Row>
<div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => { <Row>
<Col md={12}>
<div className="h5 font-weight-bold mt-5">Danh sách sản phẩm</div>
</Col>
</Row>
<Row className="row-grid">
{/* <div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
<i className="ni ni-settings" />
</div> */}
{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
const onHandleTraceCode = () => { const onHandleTraceCode = () => {
console.log("product", product); console.log("product", product);
console.log("click"); console.log("click");
...@@ -66,28 +73,21 @@ const DetailProfile = () => { ...@@ -66,28 +73,21 @@ const DetailProfile = () => {
}); });
} }
return ( return (
<> <Col lg={6} md={12} className="my-3">
<div className="h5 mb-3">{product.name}</div> <Card className="w-100 hover-shadow" onClick={onHandleTraceCode}>
<div className="mb-3"> <CardHeader className="h5 mb-3">{product.name}</CardHeader>
<Row> <CardBody>
<Col> <div className="d-flex justify-content-around">
<img className="mb-3" src={window.location.origin + product.image} alt="product" onClick={onHandleTraceCode} /> <img className="mb-3" src={window.location.origin + product.image} alt="product"/>
</Col>
<Col>
<QRCode value={`http://trace.aqbits.net/trace-code/${product.trace_code}`} size={160} /> <QRCode value={`http://trace.aqbits.net/trace-code/${product.trace_code}`} size={160} />
</Col>
</Row>
</div>
<div>
<div className="h5 font-weight-bold">Mô tả</div>
<div className="h5">{product.description}</div>
</div>
</>
);
}) : null}</div>
</div>
</div> </div>
<h5>Mô tả</h5>
<CardText>{product.description}</CardText>
</CardBody>
</Card>
</Col> </Col>
);
}) : null}
</Row> </Row>
</Container> </Container>
); );
...@@ -99,7 +99,6 @@ const DetailProfile = () => { ...@@ -99,7 +99,6 @@ const DetailProfile = () => {
<SimpleFooter /> <SimpleFooter />
</> </>
); );
//}
} }
export default DetailProfile; export default DetailProfile;
......
src/components/Profile/detail-profile.css 0 → 100644
View file @ 5d26dac1
.hover-shadow {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s ease-in-out;
}
.hover-shadow:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
cursor: pointer;
}
\ No newline at end of file
src/data/index.json
View file @ 5d26dac1
...@@ -60,6 +60,108 @@ ...@@ -60,6 +60,108 @@
"date": 1624870109921 "date": 1624870109921
} }
] ]
},
{
"trace_code": "VNC12345678",
"product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
"name": "Tôm càng xanh loại 2",
"cost": "Liên hệ",
"origin": "Việt Nam",
"image": "/image/product/tom-su.jpg",
"qr_code": "/image/qrcode/qr-code.png",
"description": "Tôm càng xanh là loại thủy sản sống được cả ở vùng nước lợ và nước ngọt",
"growing_conditions": "Nuôi trồng tại vùng nguyên liệu tôm, cơ sở chế biến: Tỉnh Trà Vinh",
"created_at": 1624870109921,
"product_chain_diary": [
{
"company": "Công ty Vinashin",
"description": "Bắt đầu nuôi trồng",
"date": 1616300741111
},
{
"company": "Công ty Vinashin",
"description": "Thu hoạch",
"date": 1626841541222
},
{
"company": "Công ty Coopmart",
"description": "Thu mua, nhập kho đông lạnh Cần Thơ",
"date": 1626841541222
},
{
"company": "Công ty Coopmart",
"description": "Trưng bày siêu thị",
"date": 1627014341333
},
{
"company": "Công ty Coopmart",
"description": "Bán cho người tiêu dùng",
"date": 1627619141213
}
],
"product_certification": [
{
"certification_information": "Chứng nhận certificate 1",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
},
{
"certification_information": "Chứng nhận certificate 2",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
}
]
},
{
"trace_code": "VNC12345678",
"product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
"name": "Tôm càng xanh loại 3",
"cost": "Liên hệ",
"origin": "Việt Nam",
"image": "/image/product/tom-su.jpg",
"qr_code": "/image/qrcode/qr-code.png",
"description": "Tôm càng xanh là loại thủy sản sống được cả ở vùng nước lợ và nước ngọt",
"growing_conditions": "Nuôi trồng tại vùng nguyên liệu tôm, cơ sở chế biến: Tỉnh Trà Vinh",
"created_at": 1624870109921,
"product_chain_diary": [
{
"company": "Công ty Vinashin",
"description": "Bắt đầu nuôi trồng",
"date": 1616300741111
},
{
"company": "Công ty Vinashin",
"description": "Thu hoạch",
"date": 1626841541222
},
{
"company": "Công ty Coopmart",
"description": "Thu mua, nhập kho đông lạnh Cần Thơ",
"date": 1626841541222
},
{
"company": "Công ty Coopmart",
"description": "Trưng bày siêu thị",
"date": 1627014341333
},
{
"company": "Công ty Coopmart",
"description": "Bán cho người tiêu dùng",
"date": 1627619141213
}
],
"product_certification": [
{
"certification_information": "Chứng nhận certificate 1",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
},
{
"certification_information": "Chứng nhận certificate 2",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
}
]
} }
] ]
}, },
......
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