Skip to content

A
Aqbits Trace Code
Commit 75165956 authored by Vinh's avatar Vinh
Browse files
Options

update router

parent 50d0909d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 566 additions and 89 deletions
src/components/Generals/MainBanner.js
View file @ 75165956
......@@ -60,7 +60,7 @@ class MainBanner extends React.Component {
<Container className="py-lg-md d-flex">
<div className="col px-0">
<Row>
<Col lg="6">
<Col lg="10">
<h1 className="display-3 text-white">
Mạng xã hội sản phẩm và tiêu dùng
</h1>
......
src/constans/index.js 0 → 100644
View file @ 75165956
import moment from "moment";
export const formatDateTime = (timeDate) => {
let newDate = moment(new Date(Number(timeDate))).format("DD/MM/YYYY");
return newDate.toString();
}
src/data/index.json 0 → 100644
View file @ 75165956
{
"data": [
{
"id": "d70d1e14-fbb9-4dd3-af84-8247efe74a92",
"code": "KIS",
"name": "Công ty TNHH sáng tạo KIS",
"logo": "/image/logo/kis-academy.jpg",
"address": "Technosoft Số 8 ngõ 15 Duy Tân, Cầu Giấy, Hà Nội",
"phone_number": "0978549632",
"qr_code": "/image/qrcode/qr-code.png",
"created_at": 1624870109921,
"profile_product": [
{
"trace_code": "VNC12345678",
"product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
"name": "Tôm",
"cost": "Liên hệ",
"origin": "Việt Nam",
"image": "/image/product/tom-su.jpg",
"description": "Tôm sú 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",
"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",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
},
{
"certification_information": "Chứng nhận certificate",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
}
]
}
]
}
]
}
src/index.js
View file @ 75165956
......@@ -28,11 +28,17 @@ import Landing from "views/examples/Landing.js";
import Login from "views/examples/Login.js";
import Profile from "views/examples/Profile.js";
import Register from "views/examples/Register.js";
import Tracecode from "views/examples/Tracecode.js"
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/" exact render={props => <Index {...props} />} />
<Route
path="/trace-code"
exact
render={props => <Tracecode {...props} />}
/>
<Route
path="/landing-page"
exact
......
src/views/examples/Landing.js
View file @ 75165956
......@@ -41,6 +41,9 @@ import {
Col
} from "reactstrap";
import { useHistory } from 'react-router-dom';
import dummyData from '../../data/index.json';
import {formatDateTime} from '../../constans/index.js';
// core components
import MainBanner from "components/Generals/MainBanner.js";
......@@ -67,7 +70,39 @@ class Landing extends React.Component {
[state]: index
});
};
renderTabs = () => {
renderProductInfo = (dummyData) => {
let product = dummyData.data[0].profile_product;
product = product[0];
return (
<>
<section className="section bg-secondary">
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={window.location.origin + product.image}
top
/>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
<h3>{product.name}</h3>
<div className="mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
<div className="mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
<div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
</div>
</Col>
</Row>
</Container>
</section>
</>
);
}
renderTabs = (dummyData) => {
let product = dummyData.data[0].profile_product[0];
return (
<>
<Row className="justify-content-center">
......@@ -90,7 +125,7 @@ class Landing extends React.Component {
href="#pablo"
role="tab"
>
Home
Thông tin chung
</NavLink>
</NavItem>
<NavItem>
......@@ -103,7 +138,7 @@ class Landing extends React.Component {
href="#pablo"
role="tab"
>
Profile
Nhật kí chuỗi
</NavLink>
</NavItem>
<NavItem>
......@@ -116,7 +151,7 @@ class Landing extends React.Component {
href="#pablo"
role="tab"
>
Messages
Chứng nhận
</NavLink>
</NavItem>
</Nav>
......@@ -126,11 +161,10 @@ class Landing extends React.Component {
<TabContent activeTab={"plainTabs" + this.state.plainTabs}>
<TabPane tabId="plainTabs1">
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
<div className="h4 font-weight-bold mb-3">{product.name}</div>
<div className="mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
<div className="mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
<div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
</p>
<p className="description">
Raw denim you probably haven't heard of them jean shorts
......@@ -140,19 +174,25 @@ class Landing extends React.Component {
</TabPane>
<TabPane tabId="plainTabs2">
<p className="description">
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher voluptate
nisi qui.
{product.product_chain_diary.map(diary => (
<div>
<div className="h6 mt-3">{diary.company}</div>
<Row className="mb-3">
<Col>{formatDateTime(diary.date)}</Col>
<Col>{diary.description}</Col>
</Row>
</div>
))}
</p>
</TabPane>
<TabPane tabId="plainTabs3">
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
{product.product_certification.map((certificate) => (
<div>
<div className="h6 mt-3 mb-3">{certificate.certification_information}</div>
<img src={window.location.origin + certificate.image} alt="certificate" height="250px" />
</div>
))}
</p>
</TabPane>
</TabContent>
......@@ -169,77 +209,10 @@ class Landing extends React.Component {
<DemoNavbar />
<main ref="main">
<MainBanner/>
<section className="section bg-secondary">
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={require("assets/img/theme/img-1-1200x1000.jpg")}
top
/>
<blockquote className="card-blockquote">
<svg
xmlns="http://www.w3.org/2000/svg"
className="svg-bg"
preserveAspectRatio="none"
viewBox="0 0 583 95"
>
<polygon
className="fill-default"
points="0,52 583,95 0,95"
/>
<polygon
className="fill-default"
opacity=".2"
points="0,42 583,95 683,0 0,95"
/>
</svg>
<h4 className="display-3 font-weight-bold text-white">
Design System
</h4>
<p className="lead text-italic text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever happens.
</p>
</blockquote>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
<h3>Our customers</h3>
<p className="lead">
Don't let your uses guess by attaching tooltips and
popoves to any element. Just make sure you enable them
first via JavaScript.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<a
className="font-weight-bold text-warning mt-5"
href="#pablo"
onClick={e => e.preventDefault()}
>
A beautiful UI Kit for impactful websites
</a>
</div>
</Col>
</Row>
</Container>
</section>
{this.renderProductInfo(dummyData)}
<section className="section pb-0 bg-gradient-warning">
<Container>
{this.renderTabs()}
{this.renderTabs(dummyData)}
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100">
......
src/views/examples/Tracecode.js 0 → 100644
View file @ 75165956
This diff is collapsed.
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