Skip to content

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

update router

parent 50d0909d
Expand all Hide 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 { ...@@ -60,7 +60,7 @@ class MainBanner extends React.Component {
<Container className="py-lg-md d-flex"> <Container className="py-lg-md d-flex">
<div className="col px-0"> <div className="col px-0">
<Row> <Row>
<Col lg="6"> <Col lg="10">
<h1 className="display-3 text-white"> <h1 className="display-3 text-white">
Mạng xã hội sản phẩm và tiêu dùng Mạng xã hội sản phẩm và tiêu dùng
</h1> </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"; ...@@ -28,11 +28,17 @@ import Landing from "views/examples/Landing.js";
import Login from "views/examples/Login.js"; import Login from "views/examples/Login.js";
import Profile from "views/examples/Profile.js"; import Profile from "views/examples/Profile.js";
import Register from "views/examples/Register.js"; import Register from "views/examples/Register.js";
import Tracecode from "views/examples/Tracecode.js"
ReactDOM.render( ReactDOM.render(
<BrowserRouter> <BrowserRouter>
<Switch> <Switch>
<Route path="/" exact render={props => <Index {...props} />} /> <Route path="/" exact render={props => <Index {...props} />} />
<Route
path="/trace-code"
exact
render={props => <Tracecode {...props} />}
/>
<Route <Route
path="/landing-page" path="/landing-page"
exact exact
......
src/views/examples/Landing.js
View file @ 75165956
...@@ -41,6 +41,9 @@ import { ...@@ -41,6 +41,9 @@ import {
Col Col
} from "reactstrap"; } from "reactstrap";
import { useHistory } from 'react-router-dom';
import dummyData from '../../data/index.json';
import {formatDateTime} from '../../constans/index.js';
// core components // core components
import MainBanner from "components/Generals/MainBanner.js"; import MainBanner from "components/Generals/MainBanner.js";
...@@ -67,9 +70,41 @@ class Landing extends React.Component { ...@@ -67,9 +70,41 @@ class Landing extends React.Component {
[state]: index [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 ( return (
<> <>
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col className="mt-5 mt-lg-0" lg="10"> <Col className="mt-5 mt-lg-0" lg="10">
{/* Menu */} {/* Menu */}
...@@ -90,7 +125,7 @@ class Landing extends React.Component { ...@@ -90,7 +125,7 @@ class Landing extends React.Component {
href="#pablo" href="#pablo"
role="tab" role="tab"
> >
Home Thông tin chung
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
...@@ -103,7 +138,7 @@ class Landing extends React.Component { ...@@ -103,7 +138,7 @@ class Landing extends React.Component {
href="#pablo" href="#pablo"
role="tab" role="tab"
> >
Profile Nhật kí chuỗi
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
...@@ -116,7 +151,7 @@ class Landing extends React.Component { ...@@ -116,7 +151,7 @@ class Landing extends React.Component {
href="#pablo" href="#pablo"
role="tab" role="tab"
> >
Messages Chứng nhận
</NavLink> </NavLink>
</NavItem> </NavItem>
</Nav> </Nav>
...@@ -126,11 +161,10 @@ class Landing extends React.Component { ...@@ -126,11 +161,10 @@ class Landing extends React.Component {
<TabContent activeTab={"plainTabs" + this.state.plainTabs}> <TabContent activeTab={"plainTabs" + this.state.plainTabs}>
<TabPane tabId="plainTabs1"> <TabPane tabId="plainTabs1">
<p className="description"> <p className="description">
Raw denim you probably haven't heard of them jean shorts <div className="h4 font-weight-bold mb-3">{product.name}</div>
Austin. Nesciunt tofu stumptown aliqua, retro synth master <div className="mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
cleanse. Mustache cliche tempor, williamsburg carles vegan <div className="mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
helvetica. Reprehenderit butcher retro keffiyeh <div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
dreamcatcher synth.
</p> </p>
<p className="description"> <p className="description">
Raw denim you probably haven't heard of them jean shorts Raw denim you probably haven't heard of them jean shorts
...@@ -140,19 +174,25 @@ class Landing extends React.Component { ...@@ -140,19 +174,25 @@ class Landing extends React.Component {
</TabPane> </TabPane>
<TabPane tabId="plainTabs2"> <TabPane tabId="plainTabs2">
<p className="description"> <p className="description">
Cosby sweater eu banh mi, qui irure terry richardson ex {product.product_chain_diary.map(diary => (
squid. Aliquip placeat salvia cillum iphone. Seitan <div>
aliquip quis cardigan american apparel, butcher voluptate <div className="h6 mt-3">{diary.company}</div>
nisi qui. <Row className="mb-3">
<Col>{formatDateTime(diary.date)}</Col>
<Col>{diary.description}</Col>
</Row>
</div>
))}
</p> </p>
</TabPane> </TabPane>
<TabPane tabId="plainTabs3"> <TabPane tabId="plainTabs3">
<p className="description"> <p className="description">
Raw denim you probably haven't heard of them jean shorts {product.product_certification.map((certificate) => (
Austin. Nesciunt tofu stumptown aliqua, retro synth master <div>
cleanse. Mustache cliche tempor, williamsburg carles vegan <div className="h6 mt-3 mb-3">{certificate.certification_information}</div>
helvetica. Reprehenderit butcher retro keffiyeh <img src={window.location.origin + certificate.image} alt="certificate" height="250px" />
dreamcatcher synth. </div>
))}
</p> </p>
</TabPane> </TabPane>
</TabContent> </TabContent>
...@@ -169,77 +209,10 @@ class Landing extends React.Component { ...@@ -169,77 +209,10 @@ class Landing extends React.Component {
<DemoNavbar /> <DemoNavbar />
<main ref="main"> <main ref="main">
<MainBanner/> <MainBanner/>
<section className="section bg-secondary"> {this.renderProductInfo(dummyData)}
<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>
<section className="section pb-0 bg-gradient-warning"> <section className="section pb-0 bg-gradient-warning">
<Container> <Container>
{this.renderTabs()} {this.renderTabs(dummyData)}
</Container> </Container>
{/* SVG separator */} {/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100"> <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