Skip to content

J
jinfa-platform
Commit 6e0574f7 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:资讯页面的开发

parent b41907cf
Hide whitespace changes
Inline Side-by-side
Showing with 1547 additions and 54 deletions
config/mallRoutes/index.ts
View file @ 6e0574f7
......@@ -70,8 +70,24 @@ const mallRoute = {
path: `/infomation`,
name: 'infomation',
key: 'infomation',
component: '@/pages/lxMall/commodity',
component: '@/pages/lxMall/information',
},
{
// 资讯详情
path: '/infomation/detail',
name: 'infomationDetail',
key: 'infomationDetail',
hide: true,
component: '@/pages/lxMall/information/detail',
},
{
// 资讯详情搜索
path: '/infomation/search',
name: 'infomationSearch',
key: 'infomationSearch',
hide: true,
component: '@/pages/lxMall/information/search',
}
],
}
......
src/components/ImageBox/index.less 0 → 100644
View file @ 6e0574f7
.image_box {
&_img {
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
}
\ No newline at end of file
src/components/ImageBox/index.tsx 0 → 100644
View file @ 6e0574f7
import React from 'react'
import styles from './index.less'
import cx from 'classnames'
interface ImageBoxPropsType {
width?: number;
height?: number;
imgUrl: string;
className?: any;
}
const ImageBox: React.FC<ImageBoxPropsType> = (props) => {
const { width = 120, height = 80, imgUrl = "", className } = props
return (
<div className={styles.image_box}>
<div className={cx(styles.image_box_img, className)} style={{ backgroundImage: `url(${imgUrl})`, width: `${width}px`, height: `${height}px` }}></div>
</div>
)
}
export default ImageBox
\ No newline at end of file
src/pages/lxMall/information/common.less 0 → 100644
View file @ 6e0574f7
.information_title {
position: relative;
color: #333333;
font-size: 14px;
font-weight: 600;
position: relative;
padding-left: 12px;
background-color: #F5F5F5;
height: 40px;
line-height: 40px;
&::before {
content: "";
position: absolute;
width: 2px;
height: 16px;
background-color: #333333;
top: 0;
bottom: 0;
margin: auto 0;
left: 0;
}
}
.common_background() {
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
}
.text_clamp(@num) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @num;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
word-wrap: break-word;
word-break: break-all;
}
.arrow_icon {
width: 20px;
height: 36px;
background-image: url(/static/imgs/arrow_down_active.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
&.left {
transform: rotate(90deg);
}
&.right {
transform: rotate(-90deg);
}
}
\ No newline at end of file
src/pages/lxMall/information/components/breadCrumbs/index.less 0 → 100644
View file @ 6e0574f7
.information_bread_crumbs {
display: flex;
padding: 20px 0;
align-items: center;
&_item {
line-height: 14px;
color: #666666;
font-size: 14px;
&.arrow {
padding: 0 5px;
}
}
&_search {
margin-left: auto;
display: flex;
width: 336px;
background: rgba(250, 250, 250, 1);
border-radius: 28px;
border: 1px solid rgba(238, 238, 238, 1);
align-items: center;
padding-right: 15px;
overflow: hidden;
&_input {
margin-right: 8px;
border: none;
outline: none;
background-color: rgba(250, 250, 250, 1);
box-shadow: none;
&:focus {
box-shadow: none;
}
}
&_icon {
font-size: 18px;
color: #cccccc;
}
}
}
\ No newline at end of file
src/pages/lxMall/information/components/breadCrumbs/index.tsx 0 → 100644
View file @ 6e0574f7
import React from 'react'
import { Input } from 'antd'
import { history } from 'umi'
import { SearchOutlined } from '@ant-design/icons'
import cx from 'classnames'
import styles from './index.less'
interface BreadCrumbsPropsType {
}
const handlePreeEnter = (e) => {
const { value } = e.target
history.push(`/infomation/search?keyword=${value}`)
}
const BreadCrumbs: React.FC<BreadCrumbsPropsType> = (props) => {
return (
<div className={styles.information_bread_crumbs}>
<div className={styles.information_bread_crumbs_item}>您的位置：</div>
<div className={styles.information_bread_crumbs_item}>官网首页</div>
<div className={cx(styles.information_bread_crumbs_item, styles.arrow)}>&gt;</div>
<div className={styles.information_bread_crumbs_item}>资讯</div>
<div className={styles.information_bread_crumbs_search}>
<Input className={styles.information_bread_crumbs_search_input} onPressEnter={handlePreeEnter} />
<SearchOutlined className={styles.information_bread_crumbs_search_icon} />
</div>
</div>
)
}
export default BreadCrumbs
src/pages/lxMall/information/components/informationRight/index.less 0 → 100644
View file @ 6e0574f7
@import '../../common.less';
.information_right {
width: 336px;
margin-left: auto;
.information_lead_news {
padding-top: 30px;
.information_lead_news_list {
padding-top: 15px;
.information_lead_news_list_item {
display: flex;
align-items: center;
margin-bottom: 30px;
&.first {
.information_lead_news_list_item_sort {
position: relative;
font-weight: bold;
font-size: 32px;
&::after {
position: absolute;
content: '';
width: 1px;
height: 35px;
top: 0;
bottom: 0;
margin: auto 0;
right: -20px;
background-color: #eeeeee;
}
}
.information_lead_news_list_item_title {
overflow: auto;
text-overflow: initial;
white-space: normal;
font-weight: 500;
padding-left: 20px;
}
}
&_sort {
font-size: 24px;
color: #cccccc;
margin-right: 15px;
}
&_title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: #000000;
}
}
}
}
.information_new_label_list {
padding-top: 30px;
padding-bottom: 10px;
display: flex;
flex-wrap: wrap;
&_item {
width: 50%;
&>span {
display: block;
padding: 0 10px;
height: 30px;
background: #f5f5f5;
border-radius: 15px;
font-size: 12px;
text-align: center;
margin-right: 86px;
line-height: 30px;
margin-bottom: 20px;
cursor: pointer;
&:hover {
background: #f2f2f2;
}
}
}
}
.information_recommend {
padding-top: 30px;
&_main_title {
color: #000000;
font-weight: 600;
font-size: 12px;
margin-top: 15px;
margin-bottom: 10px;
}
&_date {
color: #999999;
font-size: 12px;
}
&_list {
&_item {
display: flex;
margin-top: 30px;
&_main {
font-size: 12px;
margin-left: 10px;
&_title {
color: #000000;
margin-bottom: 10px;
&>a {
color: #000000;
}
}
&_date {
color: #999999;
}
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/information/components/informationRight/index.tsx 0 → 100644
View file @ 6e0574f7
import React from 'react'
import cx from 'classnames'
import informationImg2 from '@/assets/imgs/information_2.png'
import ImageBox from '@/components/ImageBox'
import styles from './index.less'
const TAG_LIST = [
{
id: 1,
name: '今日热点'
},
{
id: 2,
name: '行业头条'
},
{
id: 3,
name: '专题报道'
},
{
id: 4,
name: '政策法规'
},
{
id: 5,
name: '法律法规'
},
{
id: 6,
name: '专家访谈'
},
{
id: 7,
name: '工艺技术'
},
{
id: 8,
name: '价格指数'
},
{
id: 9,
name: '环保节能'
},
{
id: 10,
name: '专题报道'
},
]
const InformationRight: React.FC = () => {
return (
<div className={styles.information_right}>
<div className={styles.information_title}>
<span>头条文章</span>
</div>
<div className={styles.information_lead_news}>
<ImageBox width={336} height={224} imgUrl={informationImg2} />
<div className={styles.information_lead_news_list}>
<div className={cx(styles.information_lead_news_list_item, styles.first)}>
<div className={styles.information_lead_news_list_item_sort}>01</div>
<div className={styles.information_lead_news_list_item_title}>杨幂蔡依林撞包，原来今年时髦的包包长杨幂蔡依林撞包，原来今年时髦原来今年时髦原来今</div>
</div>
<div className={styles.information_lead_news_list_item}>
<div className={styles.information_lead_news_list_item_sort}>02</div>
<div className={styles.information_lead_news_list_item_title}>维柯（VECO）公司——第20届中国国际展览盛大开幕</div>
</div>
<div className={styles.information_lead_news_list_item}>
<div className={styles.information_lead_news_list_item_sort}>03</div>
<div className={styles.information_lead_news_list_item_title}>广交会同期2017秋季广州国际鞋类皮革鞋火爆开场热销</div>
</div>
<div className={styles.information_lead_news_list_item}>
<div className={styles.information_lead_news_list_item_sort}>04</div>
<div className={styles.information_lead_news_list_item_title}>你有钱，我不一定有货！2017年涨价已成定局</div>
</div>
<div className={styles.information_lead_news_list_item}>
<div className={styles.information_lead_news_list_item_sort}>05</div>
<div className={styles.information_lead_news_list_item_title}>智造新契机——第二十二届温州国际皮革火爆开场热销</div>
</div>
</div>
</div>
<div className={styles.information_title}>
<span>热门标签</span>
</div>
<div className={styles.information_new_label_list}>
{
TAG_LIST.map(item => (
<div key={`information_new_label_list_item_${item.id}`} className={styles.information_new_label_list_item}>
<span>{item.name}</span>
</div>
))
}
</div>
<div className={styles.information_title}>
<span>推荐阅读</span>
</div>
<div className={styles.information_recommend}>
<ImageBox width={336} height={224} imgUrl={informationImg2} />
<p className={styles.information_recommend_main_title}>收藏！制革污水新技术</p>
<div className={styles.information_recommend_date}>2019-09-15</div>
<div className={styles.information_recommend_list}>
<div className={styles.information_recommend_list_item}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_recommend_list_item_main}>
<p className={styles.information_recommend_list_item_main_title}>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
<div className={styles.information_recommend_list_item_main_date}>2019-09-15</div>
</div>
</div>
<div className={styles.information_recommend_list_item}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_recommend_list_item_main}>
<p className={styles.information_recommend_list_item_main_title}>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
<div className={styles.information_recommend_list_item_main_date}>2019-09-15</div>
</div>
</div>
<div className={styles.information_recommend_list_item}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_recommend_list_item_main}>
<p className={styles.information_recommend_list_item_main_title}>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
<div className={styles.information_recommend_list_item_main_date}>2019-09-15</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default InformationRight
src/pages/lxMall/information/detail.less 0 → 100644
View file @ 6e0574f7
@import './common.less';
.information_detail {
&_container {
width: 1200px;
margin: 0 auto;
background-color: #ffffff;
padding-bottom: 60px;
.information_detail_wrap {
display: flex;
.information_detail_panel {
position: relative;
width: 813px;
}
}
}
&_title {
font-size: 24px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #222222;
}
.information_detail_view {
display: flex;
padding: 30px 0;
justify-content: center;
&_item {
font-size: 12px;
color: #999999;
margin-right: 20px;
&_text {
margin-left: 5px;
}
}
}
.information_detail_split {
height: 1px;
width: 100%;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.information_detail_abstract {
width: 100%;
height: 168px;
background-color: #fafafa;
margin-top: 30px;
padding: 0 32px;
display: flex;
align-items: center;
&_character {
font-size: 80px;
font-family: Helvetica;
color: rgba(51, 51, 51, 1);
&.left {
align-self: flex-start;
}
&.right {
transform: rotate(180deg);
align-self: flex-end;
}
}
&_main {
padding: 0 24px;
}
}
.information_detail_content {
position: relative;
padding: 20px 0;
}
.information_common_tag_list {
display: flex;
margin-bottom: 20px;
&_item {
margin-right: 10px;
background-color: #FAFAFA;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 15px;
font-size: 12px;
padding: 0 10px;
color: #666666;
}
}
.information_detail_pagination {
display: flex;
padding-top: 16px;
padding-bottom: 35px;
&_item {
flex: 1;
&>a {
color: #333333;
}
&.right {
text-align: right;
}
&_line {
display: flex;
align-items: center;
&.right {
justify-content: flex-end;
}
&>span {
margin: 0 15px;
}
}
}
&_split {
width: 1px;
background: rgba(0, 0, 0, 0.1);
height: 64px;
}
}
.information_about_list {
display: flex;
margin: 0 -10px;
padding: 20px 0;
&_item {
width: 257px;
margin: 0 10px;
&>p {
font-size: 12px;
color: #000000;
margin-top: 10px;
.text_clamp(2);
}
}
}
}
\ No newline at end of file
src/pages/lxMall/information/detail.tsx 0 → 100644
View file @ 6e0574f7
import React from 'react'
import BreadCrumbs from './components/breadCrumbs'
import InformationRight from './components/informationRight'
import cx from 'classnames'
import { Link } from 'umi'
import ImageBox from '@/components/ImageBox'
import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons'
import informationImg2 from '@/assets/imgs/information_2.png'
import styles from './detail.less'
interface InformationDetailPropsType {
}
const InformationDetail: React.FC<InformationDetailPropsType> = (props) => {
return (
<div className={styles.information_detail}>
<div className={styles.information_detail_container}>
<BreadCrumbs />
<div className={styles.information_detail_wrap}>
<div className={styles.information_detail_panel}>
<div className={styles.information_detail_title}>河北省重点行业清洁生产评审结果公布，11家皮革企业获通过</div>
<div className={styles.information_detail_view}>
<div className={styles.information_detail_view_item}>
<ClockCircleOutlined />
<span className={styles.information_detail_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_detail_view_item}>
<EyeOutlined />
<span className={styles.information_detail_view_item_text}>11,245</span>
</div>
</div>
<div className={styles.information_detail_split}></div>
<div className={styles.information_detail_abstract}>
<div className={cx(styles.information_detail_abstract_character, styles.left)}>“</div>
<div className={styles.information_detail_abstract_main}>
近日，省环保厅公布了河北省2017年重点行业清洁生产审核评估验收结果。509家企业通过了清洁生产评估和验收。本次评估审核中鞋革行业共有11家企业，均通过了清洁生产审核工作。
</div>
<div className={cx(styles.information_detail_abstract_character, styles.right)}>“</div>
</div>
<div className={styles.information_detail_content}>
资讯详情
<div dangerouslySetInnerHTML={{ __html: '' }}></div>
</div>
<div className={styles.information_common_tag_list}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div>
<div className={styles.information_detail_split}></div>
<div className={styles.information_detail_pagination}>
<div className={cx(styles.information_detail_pagination_item, styles.left)}>
<div className={cx(styles.information_detail_pagination_item_line, styles.left)}>
<div className={cx(styles.arrow_icon, styles.left)}></div>
<span>上一篇</span>
</div>
<Link to="/infomation/detail?id=2">【制革技术干货】中华皮革技术群聊天记录整理（三十三）</Link>
</div>
<div className={styles.information_detail_pagination_split}></div>
<div className={cx(styles.information_detail_pagination_item, styles.right)}>
<div className={cx(styles.information_detail_pagination_item_line, styles.right)}>
<span>下一篇</span>
<div className={cx(styles.arrow_icon, styles.right)}></div>
</div>
<Link to="/infomation/detail?id=3">爱马仕的2018年春夏系列来了~</Link>
</div>
</div>
<div className={styles.information_title}>
<span>相关资讯</span>
</div>
<div className={styles.information_about_list}>
<div className={styles.information_about_list_item}>
<ImageBox width={257} height={172} imgUrl={informationImg2} />
<p>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
</div>
<div className={styles.information_about_list_item}>
<ImageBox width={257} height={172} imgUrl={informationImg2} />
<p>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
</div>
<div className={styles.information_about_list_item}>
<ImageBox width={257} height={172} imgUrl={informationImg2} />
<p>智造新契机——第二十二届温州国际皮革火爆开场热销</p>
</div>
</div>
</div>
<InformationRight />
</div>
</div>
</div>
)
}
export default InformationDetail
src/pages/lxMall/information/index.less
View file @ 6e0574f7
@import './common.less';
.information {
background-color: #ffffff;
padding-bottom: 60px;
&_container {
width: 1200px;
margin: 0 auto;
.information_focus {
display: flex;
&_left {
position: relative;
margin-right: 4px;
.information_focus_imgbox_main {
&_img {
width: 598px;
height: 444px;
.common_background()
}
}
}
&_right {
.information_focus_imgbox_sub_1 {
&_img {
width: 598px;
height: 220px;
.common_background()
}
}
.information_focus_sub_bottom {
display: flex;
margin-top: 4px;
.information_focus_imgbox_sub_2 {
&:not(:last-child) {
margin-right: 4px;
}
&_img {
width: 297px;
height: 220px;
.common_background()
}
}
}
}
}
.information_wrap {
display: flex;
margin-top: 30px;
.information_left {
width: 813px;
.information_latest_release_list {
padding-top: 30px;
&_item {
position: relative;
margin-bottom: 30px;
display: flex;
&_main {
display: flex;
flex-direction: column;
flex: 1;
width: 0;
margin-left: 20px;
&>p {
color: #222222;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
margin-bottom: 15px;
&>a {
color: #222222;
}
}
&_content {
color: rgb(153, 153, 153);
.text_clamp(2);
line-height: 22px;
padding-top: 15px;
height: 85px;
margin-bottom: 15px;
}
}
}
}
}
.information_common {
display: flex;
padding: 30px 0;
&_left {
width: 360px;
}
&_right {
width: 440px;
margin-left: auto;
.information_common_news_list {
&_item {
padding-bottom: 15px;
display: flex;
&:not(:last-child) {
border-bottom: 1px solid #F5F5F5;
margin-bottom: 15px;
}
&_main {
width: 0;
flex: 1;
margin-left: 15px;
&_content {
.text_clamp(2);
&>a {
color: #222222;
}
}
}
}
}
}
&_title {
font-size: 16px;
margin: 10px 0;
.text_clamp(2);
&>a {
color: #222222;
}
}
&_view {
display: flex;
&_item {
font-size: 12px;
color: #999999;
margin-right: 20px;
&_text {
margin-left: 5px;
}
}
}
&_content {
padding: 10px 0;
color: rgb(153, 153, 153);
margin-bottom: 0;
.text_clamp(2)
}
&_tag_list {
display: flex;
&_item {
margin-right: 10px;
background-color: #FAFAFA;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 15px;
font-size: 12px;
padding: 0 10px;
color: #666666;
}
}
}
}
}
}
.pagination_wrap {
text-align: right;
:global {
.ant-pagination-item {
&:hover,
&:active {
border-color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
}
}
}
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
&>a {
color: #ffffff;
}
}
}
}
\ No newline at end of file
src/pages/lxMall/information/index.tsx
View file @ 6e0574f7
import React from 'react'
import React, { Fragment } from 'react'
import cx from 'classnames'
import { Input, Pagination } from 'antd'
import { Link } from 'umi'
import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons'
import informationImg1 from '@/assets/imgs/information_1.png'
import informationImg2 from '@/assets/imgs/information_2.png'
import ImageBox from '@/components/ImageBox'
import BreadCrumbs from './components/breadCrumbs'
import InformationRight from './components/informationRight'
import styles from './index.less'
interface InformationPropsType {
}
const MockList = [
{
id: new Date().getTime(),
title: '今日热点',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
{
id: new Date().getTime(),
title: '今日热点',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
{
id: new Date().getTime(),
title: '行业头条',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
{
id: new Date().getTime(),
title: '专题报道',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
{
id: new Date().getTime(),
title: '政策法规',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
]
const Information: React.FC<InformationPropsType> = (props) => {
return (
<div>
Information
<div className={styles.information}>
<div className={styles.information_container}>
<BreadCrumbs />
<div className={styles.information_focus}>
<div className={styles.information_focus_left}>
<div className={styles.information_focus_imgbox_main}>
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${informationImg1})` }} />
</div>
</div>
<div className={styles.information_focus_right}>
<div className={styles.information_focus_imgbox_sub_1}>
<div className={styles.information_focus_imgbox_sub_1_img} style={{ backgroundImage: `url(${informationImg2})` }} />
</div>
<div className={styles.information_focus_sub_bottom}>
<div className={styles.information_focus_imgbox_sub_2}>
<div className={styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${informationImg1})` }} />
</div>
<div className={styles.information_focus_imgbox_sub_2}>
<div className={styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${informationImg1})` }} />
</div>
</div>
</div>
</div>
<div className={styles.information_wrap}>
<div className={styles.information_left}>
{
MockList.map(item => (
<Fragment key={item.id}>
<div className={styles.information_title}>
<span>{item.title}</span>
</div>
<div className={styles.information_common}>
<div className={styles.information_common_left}>
<ImageBox width={360} height={240} imgUrl={informationImg2} />
<p className={styles.information_common_title}>
<Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案，如何实现全网整合</Link>
</p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
<p className={styles.information_common_content}>优秀的B2B电商商城平台开发公司除了提供搭建电商系统的服务之外，更应该为客户制定一套合理的电商系统</p>
<div className={styles.information_common_tag_list}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div>
</div>
<div className={styles.information_common_right}>
<div className={styles.information_common_news_list}>
{
item.list.map(childImte => (
<div className={styles.information_common_news_list_item} key={childImte.id}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_common_news_list_item_main}>
<p className={styles.information_common_news_list_item_main_content}>
<Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案，如何实现全网整合</Link>
</p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
</div>
</div>
))
}
</div>
</div>
</div>
</Fragment>
))
}
<div className={styles.information_title}>
<span>最新发布</span>
</div>
<div className={styles.information_latest_release_list}>
<div className={styles.information_latest_release_list_item}>
<ImageBox width={285} height={190} imgUrl={informationImg2} />
<div className={styles.information_latest_release_list_item_main}>
<p><Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案，如何实现全网整合</Link></p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
<div className={styles.information_latest_release_list_item_main_content}>
优秀的B2B电商商城平台开发公司除了提供搭建电商系统的服务之外，更应该为客户制定一套合理的电商系统平台整合解决方案…
</div>
<div className={cx(styles.information_common_tag_list, styles.bottom)}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div>
</div>
</div>
</div>
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</div>
<InformationRight />
</div>
</div>
</div>
)
}
......
src/pages/lxMall/information/search.tsx 0 → 100644
View file @ 6e0574f7
import React, { Fragment } from 'react'
import cx from 'classnames'
import { Pagination } from 'antd'
import { Link } from 'umi'
import { ClockCircleOutlined, EyeOutlined } from '@ant-design/icons'
import informationImg2 from '@/assets/imgs/information_2.png'
import ImageBox from '@/components/ImageBox'
import BreadCrumbs from './components/breadCrumbs'
import InformationRight from './components/informationRight'
import styles from './index.less'
interface InformationPropsType {
}
const MockList = [
{
id: new Date().getTime(),
title: '今日热点',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
{
id: new Date().getTime(),
title: '今日热点',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
{
id: new Date().getTime(),
title: '行业头条',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
{
id: new Date().getTime(),
title: '专题报道',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
{
id: new Date().getTime(),
title: '政策法规',
list: [
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
{
id: new Date().getTime()
},
]
},
]
const InformationSearch: React.FC<InformationPropsType> = (props) => {
return (
<div className={styles.information}>
<div className={styles.information_container}>
<BreadCrumbs />
<div className={styles.information_wrap}>
<div className={styles.information_left}>
<div className={styles.information_title}>
<span>资讯搜索：</span>
</div>
<div className={styles.information_latest_release_list}>
<div className={styles.information_latest_release_list_item}>
<ImageBox width={285} height={190} imgUrl={informationImg2} />
<div className={styles.information_latest_release_list_item_main}>
<p><Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案，如何实现全网整合</Link></p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
<div className={styles.information_latest_release_list_item_main_content}>
优秀的B2B电商商城平台开发公司除了提供搭建电商系统的服务之外，更应该为客户制定一套合理的电商系统平台整合解决方案…
</div>
<div className={cx(styles.information_common_tag_list, styles.bottom)}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div>
</div>
</div>
</div>
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</div>
<InformationRight />
</div>
</div>
</div>
)
}
export default InformationSearch
src/pages/lxMall/order/invoice/index.tsx
View file @ 6e0574f7
......@@ -38,6 +38,7 @@ const Invoice: React.FC = () => {
<div className={styles.invoice}>
<div className={styles.common_title}>
<span>发票信息</span>
<div className={styles.common_title_btn}>新增发票信息</div>
</div>
<div className={styles.checkbox}>
<Checkbox>需要发票</Checkbox>
......
src/pages/lxMall/pay/components/bank/index.less 0 → 100644
View file @ 6e0574f7
@import '../common.less';
.bank_payway {
position: relative;
&_container {
width: 320px;
margin: 0 auto;
padding-top: 50px;
.bank_payway_line {
margin-bottom: 20px;
&>label {
color: #999999;
display: inline-block;
width: 70px;
}
}
.bank_payway_upload_dragger {
position: relative;
margin-top: 20px;
}
.bank_payway_upload {
width: 320px;
height: 148px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
&_icon {
color: #cccccc;
font-size: 26px;
}
&>p {
margin-top: 10px;
color: #999999;
}
}
:global {
.ant-upload.ant-upload-drag {
border: 1px solid rgba(245, 245, 245, 1);
&:hover {
// border: 1px solid var(--mall_main_color);
border: 1px solid #cccccc;
}
}
}
.pay_btn {
font-size: 16px;
width: 160px;
height: 50px;
color: #ffffff;
text-align: center;
line-height: 50px;
background-color: #D32F2F;
cursor: pointer;
margin: 20px auto 0 auto;
&:hover {
opacity: .9;
}
}
}
&_needpay {
color: #666666;
font-size: 12px;
margin-top: 28px;
text-align: center;
&>span {
color: #D32F2F;
font-size: 20px;
margin: 0 5px;
}
}
}
\ No newline at end of file
src/pages/lxMall/pay/components/bank/index.tsx 0 → 100644
View file @ 6e0574f7
import React from 'react'
import { Upload } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import wechatIcon from '@/assets/imgs/wechat_icon.png'
import wechatImg from '@/assets/imgs/wechat.png'
import styles from './index.less'
const { Dragger } = Upload
interface BankPayWayPropsType {
}
const BankPayWay: React.FC<BankPayWayPropsType> = (props) => {
const uploadProps = {
name: 'file',
multiple: true,
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
onChange(info) {
const { status } = info.file;
if (status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (status === 'done') {
} else if (status === 'error') {
}
},
};
return (
<>
<div className={styles.common_title}>
<span>线下转账线上确认</span>
</div>
<div className={styles.bank_payway}>
<div className={styles.bank_payway_container}>
<div className={styles.bank_payway_line}>
<label>账户名称：</label>
<span>温州市龙昌皮具有限公司</span>
</div>
<div className={styles.bank_payway_line}>
<label>银行账号：</label>
<span>6214 7812 3456 7891 1234</span>
</div>
<div className={styles.bank_payway_line}>
<label>开户行：</label>
<span>中国建设银行广州市分行营业部</span>
</div>
<Dragger {...uploadProps} className={styles.bank_payway_upload_dragger}>
<div className={styles.bank_payway_upload}>
<UploadOutlined className={styles.bank_payway_upload_icon} />
<p>上传支付凭证</p>
</div>
</Dragger>
<div className={styles.bank_payway_needpay}>
<label>支付金额：</label>
<span>20,000</span>
<label>RMB</label>
</div>
<div className={styles.pay_btn}>提交</div>
</div>
</div>
</>
)
}
export default BankPayWay
src/pages/lxMall/pay/components/common.less
View file @ 6e0574f7
.common_title {
font-size: 14px;
color: #333333;
padding: 15px 0 11px 0;
border-bottom: 2px solid #EEEEEE;
line-height: 14px;
display: flex;
margin-bottom: 5px;
align-items: center;
&_icon {
color: #999999;
margin-left: 6px;
cursor: pointer;
margin-right: 5px;
&>img {
width: 20px;
height: 20px;
}
}
&>span {
font-weight: 500;
}
&_amount {
margin-left: auto;
color: #666666;
&>span {
color: #D32F2F;
font-size: 20px;
margin: 0 5px;
}
}
&_btn {
margin-left: auto;
cursor: pointer;
&:hover {
opacity: .8;
}
}
}
\ No newline at end of file
.common_title {
font-size: 14px;
color: #333333;
padding: 15px 0 11px 0;
border-bottom: 2px solid #EEEEEE;
line-height: 14px;
display: flex;
margin-bottom: 5px;
align-items: center;
&_icon {
color: #999999;
margin-left: 6px;
cursor: pointer;
margin-right: 5px;
&>img {
width: 20px;
height: 20px;
}
}
&>span {
font-weight: 500;
}
&_amount {
margin-left: auto;
color: #666666;
&>span {
color: #D32F2F;
font-size: 20px;
margin: 0 5px;
}
}
&_btn {
margin-left: auto;
cursor: pointer;
&:hover {
opacity: .8;
}
}
}
\ No newline at end of file
src/pages/lxMall/pay/index.tsx
View file @ 6e0574f7
......@@ -4,6 +4,7 @@ import PointPayWay from './components/point'
import BablancePayWay from './components/balance'
import CreditPayWay from './components/credit'
import WechatPayWay from './components/wechat'
import BankPayWay from './components/bank'
import styles from './index.less'
interface PayPagePropsType {
......@@ -16,6 +17,7 @@ enum PayWayType {
credit = 'credit', // 授信额度支付
wechat = 'wechat', // 微信支付
transfer = 'transfer', // 转战
bank = 'bank'
}
const getPayTypeTitle = (type) => {
......@@ -26,6 +28,7 @@ const getPayTypeTitle = (type) => {
return "余额支付"
case PayWayType.credit:
case PayWayType.wechat:
case PayWayType.bank:
return "收银台"
default:
return ""
......@@ -33,8 +36,8 @@ const getPayTypeTitle = (type) => {
}
const PayPage: React.FC<PayPagePropsType> = (props) => {
const [pageTitle, setPageTitle] = useState<string>(getPayTypeTitle(PayWayType.wechat))
const [payType] = useState<string>(PayWayType.wechat)
const [pageTitle, setPageTitle] = useState<string>(getPayTypeTitle(PayWayType.bank))
const [payType] = useState<string>(PayWayType.bank)
const renderPayWay = () => {
switch (payType) {
......@@ -46,6 +49,8 @@ const PayPage: React.FC<PayPagePropsType> = (props) => {
return <CreditPayWay />
case PayWayType.wechat:
return <WechatPayWay />
case PayWayType.bank:
return <BankPayWay />
default:
return null
}
......
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