Skip to content

J
jinfa-platform
Commit 4efea365 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:修改首页接口

parent 85f75184
Hide whitespace changes
Inline Side-by-side
Showing with 623 additions and 22 deletions
config/mallRoutes/index.ts
View file @ 4efea365
...@@ -27,6 +27,15 @@ const mallRoute = { ...@@ -27,6 +27,15 @@ const mallRoute = {
component: '@/pages/lxMall/order', component: '@/pages/lxMall/order',
}, },
{ {
// 进货单
path: '/purchaseOrder',
name: 'purchaseOrder',
key: 'purchaseOrder',
hide: true,
hideHeader: true,
component: '@/pages/lxMall/purchaseOrder',
},
{
// 在线求购 // 在线求购
path: `/buy`, path: `/buy`,
name: 'onlineshopping', name: 'onlineshopping',
......
config/router.ts
View file @ 4efea365
...@@ -7,7 +7,7 @@ import shopRoute from './shopRoutes' ...@@ -7,7 +7,7 @@ import shopRoute from './shopRoutes'
* @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes * @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes
*/ */
const router = [ const router = [
{ {
path: '/', path: '/',
component: '@/wrappers/getSiteConfig', component: '@/wrappers/getSiteConfig',
......
src/app.tsx
View file @ 4efea365
...@@ -22,6 +22,12 @@ const whiteLists = [ ...@@ -22,6 +22,12 @@ const whiteLists = [
'/user/login', '/user/login',
'/user/register', '/user/register',
'/memberCenter', '/memberCenter',
'/commodity',
'/shops',
'/shop/commodity/detail',
'/shop/commodity',
'/shop',
'/infomation',
'/404', '/404',
'/noAuth' '/noAuth'
] ]
...@@ -42,7 +48,7 @@ const whiteLists = [ ...@@ -42,7 +48,7 @@ const whiteLists = [
*/ */
export function patchRoutes({ routes }: IRoutes) { export function patchRoutes({ routes }: IRoutes) {
if (isDev) { if (isDev) {
return ; return;
} }
asyncRouter(getRouters(), routes) asyncRouter(getRouters(), routes)
} }
...@@ -53,7 +59,7 @@ export function patchRoutes({ routes }: IRoutes) { ...@@ -53,7 +59,7 @@ export function patchRoutes({ routes }: IRoutes) {
* @date 2020-05-20 * @date 2020-05-20
* @export * @export
*/ */
export function render(oldRender:Function) { export function render(oldRender: Function) {
const authInfo = getAuth() const authInfo = getAuth()
if (authInfo) { if (authInfo) {
PublicApi.getMemberLoginReget().then(res => { PublicApi.getMemberLoginReget().then(res => {
...@@ -81,20 +87,21 @@ export function onRouteChange({ routes, matchedRoutes, location, action }) { ...@@ -81,20 +87,21 @@ export function onRouteChange({ routes, matchedRoutes, location, action }) {
console.log(`当前可访问的路由为`) console.log(`当前可访问的路由为`)
console.log(routes, matchedRoutes, location) console.log(routes, matchedRoutes, location)
if (isDev) { if (isDev) {
return ; return;
} }
if (whiteLists.includes(location.pathname)) return ; if (whiteLists.includes(location.pathname)) return;
const routeAuthUrls = getRouters() const routeAuthUrls = getRouters()
console.log(routeAuthUrls, "routeAuthUrls")
// 是否登录 // 是否登录
if (getAuth()) { if (getAuth()) {
if (routeAuthUrls.includes(location.pathname)) { if (routeAuthUrls.includes(location.pathname)) {
} else { } else {
history.replace('/') // history.replace('/')
} }
} else { } else {
history.replace('/404') history.replace('/user/login')
} }
} }
......
src/global/styles/reset.less
View file @ 4efea365
@import './mixins/layout.less'; @import './mixins/layout.less';
#root { #root {
.common_checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-group-item {
display: block;
margin-bottom: 12px;
}
.ant-checkbox {
&:hover,
&:active,
&:focus {
.ant-checkbox-inner {
border-color: var(--mall_main_color);
}
}
}
.ant-checkbox .ant-checkbox-indeterminate {
&:hover {
border-color: var(--mall_main_color);
}
}
.ant-checkbox-indeterminate .ant-checkbox-inner {
&:hover,
&:active,
&:focus {
border-color: var(--mall_main_color);
}
&::after {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
// 去除数字输入框的箭头 // 去除数字输入框的箭头
input[type=number] { input[type=number] {
-moz-appearance:textfield; -moz-appearance: textfield;
} }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
.identityRadio{ .identityRadio {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
.make-center(text); .make-center(text);
& label{
& label {
width: 320px; width: 320px;
height: 48px; height: 48px;
.make-center-space(margin, 12); .make-center-space(margin, 12);
...@@ -25,25 +82,28 @@ ...@@ -25,25 +82,28 @@
line-height: 48px; line-height: 48px;
} }
} }
.businessRadio{
.businessRadio {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 320px; width: 320px;
.make-center(margin); .make-center(margin);
.make-center(text); .make-center(text);
& label{
& label {
width: 148px; width: 148px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
margin: 8px 0; margin: 8px 0;
} }
& label:nth-child(odd) { & label:nth-child(odd) {
margin-right: 24px; margin-right: 24px;
} }
} }
// 设置formitem的*号到字段label前 // 设置formitem的*号到字段label前
.ant-form-item-label > label.ant-form-item-required::before { .ant-form-item-label>label.ant-form-item-required::before {
order: 10; order: 10;
margin-left: -6px; margin-left: -6px;
} }
...@@ -66,6 +126,7 @@ ...@@ -66,6 +126,7 @@
border-color: @main-color; border-color: @main-color;
background: @tree-node_hover; background: @tree-node_hover;
} }
&.ant-tree-treenode:hover { &.ant-tree-treenode:hover {
border-color: @main-color; border-color: @main-color;
background: @tree-node_hover; background: @tree-node_hover;
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Recommand/index.tsx
View file @ 4efea365
...@@ -48,7 +48,7 @@ const Recommand: React.FC = () => { ...@@ -48,7 +48,7 @@ const Recommand: React.FC = () => {
return ( return (
<div className="recommand"> <div className="recommand">
<div className="recommand_title">交易评价</div> <div className="recommand_title">买家还在看</div>
<div className="recommand_list"> <div className="recommand_list">
{ {
product_list.map((item, index) => ( product_list.map((item, index) => (
......
src/pages/lxMall/components/Category/index.tsx
View file @ 4efea365
...@@ -15,7 +15,7 @@ const Category: React.FC<CategoryPropsType> = (props) => { ...@@ -15,7 +15,7 @@ const Category: React.FC<CategoryPropsType> = (props) => {
useEffect(() => { useEffect(() => {
if (isEmpty(categoryList)) { if (isEmpty(categoryList)) {
fetchCategoryList() // fetchCategoryList()
} }
}, []) }, [])
......
src/pages/lxMall/components/Header/index.tsx
View file @ 4efea365
import React, { useState } from 'react' import React, { useState } from 'react'
import cx from 'classnames' import cx from 'classnames'
import { Link } from 'umi' import { Link, history } from 'umi'
import { FileTextOutlined } from '@ant-design/icons' import { FileTextOutlined } from '@ant-design/icons'
import logo from '@/theme/imgs/logo_w.png' import logo from '@/theme/imgs/logo_w.png'
import './index.less' import './index.less'
...@@ -36,7 +36,7 @@ const Header: React.FC<HeaderPropsType> = (props) => { ...@@ -36,7 +36,7 @@ const Header: React.FC<HeaderPropsType> = (props) => {
<div className="search_btn">搜索</div> <div className="search_btn">搜索</div>
</div> </div>
</div> </div>
<div className="shopping_cart mall"> <div className="shopping_cart mall" onClick={() => history.push('/purchaseOrder')}>
<div className="badge">0</div> <div className="badge">0</div>
<FileTextOutlined className="card_icon" /> <FileTextOutlined className="card_icon" />
<span>进货单</span> <span>进货单</span>
......
src/pages/lxMall/components/Recommand/index.less 0 → 100644
View file @ 4efea365
.recommand {
margin-top: 40px;
.recommand_title {
height: 40px;
line-height: 40px;
background-color: #f5f5f5;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-left: 20px;
margin-bottom: 20px;
}
.recommand_list {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
&_item {
position: relative;
width: 224px;
margin: 10px;
&_img {
width: 100%;
height: 224px;
overflow: hidden;
&>img {
width: 100%;
height: auto;
}
}
&_name {
margin-top: 10px;
font-size: 12px;
color: #333333;
}
&_price {
font-size: 14px;
color: #D32F2F;
margin-top: 10px;
&>span {
font-size: 12px;
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/components/Recommand/index.tsx 0 → 100644
View file @ 4efea365
import React from 'react'
import './index.less'
const Recommand: React.FC = () => {
const product_list = [
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
}
]
return (
<div className="recommand">
<div className="recommand_title">买家还在看</div>
<div className="recommand_list">
{
product_list.map((item, index) => (
<a href="/shop/commodity/detail?id=asdjflewjfe&type=prompt" key={`recommand_list_item_${index}`}>
<div className="recommand_list_item">
<div className="recommand_list_item_img">
<img src={item.imgUrl} />
</div>
<div className="recommand_list_item_price">
<span>￥</span>
{item.price}
</div>
<div className="recommand_list_item_name">{item.name}</div>
</div>
</a>
))
}
</div>
</div>
)
}
export default Recommand
src/pages/lxMall/index/index.tsx
View file @ 4efea365
...@@ -13,7 +13,7 @@ const MallIndex: React.FC = () => { ...@@ -13,7 +13,7 @@ const MallIndex: React.FC = () => {
useEffect(() => { useEffect(() => {
getImgRGB() getImgRGB()
fetchMallHome() // fetchMallHome()
}, []) }, [])
const fetchMallHome = () => { const fetchMallHome = () => {
......
src/pages/lxMall/order/index.less
View file @ 4efea365
...@@ -89,7 +89,6 @@ ...@@ -89,7 +89,6 @@
} }
} }
} }
.settlement_box { .settlement_box {
height: 50px; height: 50px;
margin-top: 30px; margin-top: 30px;
...@@ -98,6 +97,27 @@ ...@@ -98,6 +97,27 @@
justify-content: flex-end; justify-content: flex-end;
&_item { &_item {
display: flex;
align-items: center;
&_price {
margin-right: 20px;
&>span {
font-size: 12px;
color: #666666;
}
&>b {
font-size: 16px;
margin-right: 5px;
&.settlement_box_item_price_total {
color: #D32F2F;
}
}
}
&_btn { &_btn {
width: 160px; width: 160px;
......
src/pages/lxMall/order/index.tsx
View file @ 4efea365
...@@ -20,11 +20,11 @@ const Order: React.FC<OrderPropsType> = (props) => { ...@@ -20,11 +20,11 @@ const Order: React.FC<OrderPropsType> = (props) => {
<div className={styles.order}> <div className={styles.order}>
<CommonHeader title="订单结算" /> <CommonHeader title="订单结算" />
<div className={styles.order_container}> <div className={styles.order_container}>
{/* <Address /> <Address />
<PayWay /> <PayWay />
<Delivery /> <Delivery />
<Invoice /> <Invoice />
<Contract /> */} <Contract />
<div className={styles.common_title}> <div className={styles.common_title}>
<span>订单信息</span> <span>订单信息</span>
</div> </div>
...@@ -90,6 +90,21 @@ const Order: React.FC<OrderPropsType> = (props) => { ...@@ -90,6 +90,21 @@ const Order: React.FC<OrderPropsType> = (props) => {
<div className={styles.settlement_box}> <div className={styles.settlement_box}>
<div className={styles.settlement_box_item}> <div className={styles.settlement_box_item}>
<div className={styles.settlement_box_item_price}>
<span>商品金额总计：</span>
<b>400.00</b>
<span>RMB</span>
</div>
<div className={styles.settlement_box_item_price}>
<span>运费：</span>
<b>10.00</b>
<span>RMB</span>
</div>
<div className={styles.settlement_box_item_price}>
<span>共需支付：</span>
<b className={styles.settlement_box_item_price_total}>510.00</b>
<span>RMB</span>
</div>
<div className={styles.settlement_box_item_btn}>提交订单</div> <div className={styles.settlement_box_item_btn}>提交订单</div>
</div> </div>
</div> </div>
......
src/pages/lxMall/purchaseOrder/index.less 0 → 100644
View file @ 4efea365
.purchase_order {
position: relative;
&_container {
width: 1200px;
margin: 0 auto;
.order_tb_title {
display: flex;
padding: 20px 0;
font-size: 14px;
color: #333333;
&_item {
text-align: left;
&.goods_info {
padding-left: 36px;
width: 295px;
}
&.count {
width: 268px;
}
&.amount {
width: 188px;
}
}
}
.order_list {
border: 1px solid #EEEEEE;
margin-bottom: 30px;
&_shop_name {
height: 50px;
line-height: 50px;
background-color: #FAFAFA;
font-weight: 500;
&>label {
margin-left: 12px;
}
}
&_item {
display: flex;
height: 130px;
align-items: center;
font-size: 12px;
&_item {
display: flex;
&.checked {
padding-left: 12px;
}
&.goods_info {
padding-left: 12px;
width: 360px;
}
&_imgbox {
margin-right: 10px;
&_img {
width: 80px;
height: 80px;
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
}
}
&.count {
width: 268px;
flex-direction: column;
.stock {
margin-top: 10px;
}
}
&_price {
color: #D32F2F;
font-size: 16px;
}
&_name {
color: #333333;
margin-bottom: 12px;
}
&_category {
color: #666666;
&>span {
margin-right: 20px;
}
}
&.amount {
width: 188px;
}
&.opration {
width: 90px;
}
.order_list_item_item_operation {
.order_list_item_item_operation_item {
cursor: pointer;
color: #999999;
font-size: 12px;
&:not(:last-child) {
margin-bottom: 10px;
}
}
}
}
}
}
.allcheck {
padding-left: 12px;
width: 90px;
}
.unitprice {
width: 270px;
}
.settlement_box {
height: 50px;
background-color: #F5F5F5;
display: flex;
&_checkedbox {
display: flex;
flex: 1;
align-items: center;
justify-self: flex-start;
padding-left: 12px;
&_delbtn {
cursor: pointer;
color: #666666;
margin-left: 64px;
}
}
&_item {
display: flex;
align-items: center;
&_price {
margin-right: 20px;
&>span {
font-size: 12px;
color: #666666;
}
&>b {
font-size: 16px;
margin-right: 5px;
&.settlement_box_item_price_total {
color: #D32F2F;
}
}
}
&_btn {
width: 160px;
text-align: center;
color: #FFF;
height: 50px;
line-height: 50px;
font-size: 16px;
background-color: #D32F2F;
cursor: pointer;
&:hover {
opacity: .9;
}
}
}
}
}
&_title {
border-bottom: 2px solid #EEEEEE;
&_text {
position: relative;
top: 2px;
display: inline-block;
padding: 15px 0 11px 0;
color: var(--mall_main_color);
font-size: 14px;
border-bottom: 2px solid var(--mall_main_color);
}
}
}
\ No newline at end of file
src/pages/lxMall/purchaseOrder/index.tsx 0 → 100644
View file @ 4efea365
import React, { useState } from 'react'
import CommonHeader from '../components/CommonHeader'
import InputNumber from '@/components/InputNumber'
import Recommand from '../components/Recommand'
import cx from 'classnames'
import { Checkbox, Affix } from 'antd'
import styles from './index.less'
interface PurchaseOrderPropsType {
}
const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
const [buyCount, setBuyCount] = useState<number>(1)
const [indeterminate, setIndeterminate] = useState<boolean>(true)
const [checkAll, setCheckAll] = useState<boolean>(false)
const [checkedList, setCheckedList] = useState([])
const mockData = [
{
id: 1,
shopname: '温州市龙昌皮业有限公司',
orderList: [
{
id: 11,
img: '(https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg',
name: '荔枝纹牛皮二层移膜'
},
{
id: 12,
img: '(https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg',
name: '荔枝纹牛皮二层移膜'
}
]
},
{
id: 2,
shopname: '温州市龙昌皮业有限公司',
orderList: [
{
id: 21,
img: '(https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg',
name: '荔枝纹牛皮二层移膜'
},
]
},
{
id: 3,
shopname: '温州市龙昌皮业有限公司',
orderList: [
{
id: 31,
img: '(https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg',
name: '荔枝纹牛皮二层移膜'
},
]
},
]
const onCheckAllChange = (e: any) => {
}
return (
<div className={styles.purchase_order}>
<div className={styles.purchase_order_container}>
<CommonHeader title="我的进货单" />
<div className={styles.purchase_order_title}>
<span className={styles.purchase_order_title_text}>我的进货单</span>
</div>
<div className={styles.order_tb_title}>
<div className={cx(styles.order_tb_title_item, styles.allcheck)}>
<Checkbox
className="common_checkbox"
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>全选
</Checkbox>
</div>
<div className={cx(styles.order_tb_title_item, styles.goods_info)}>商品</div>
<div className={cx(styles.order_tb_title_item, styles.unitprice)}>单价(元)</div>
<div className={cx(styles.order_tb_title_item, styles.count)}>数量</div>
<div className={cx(styles.order_tb_title_item, styles.amount)}>小计(元)</div>
<div className={cx(styles.order_tb_title_item, styles.opration)}>操作</div>
</div>
{
mockData.map(item => (
<div className={styles.order_list} key={item.id}>
<div className={styles.order_list_shop_name}>
<Checkbox className="common_checkbox"></Checkbox>
<label>温州市龙昌皮业有限公司</label>
</div>
{
item.orderList.map(childItem => (
<div className={styles.order_list_item}>
<div className={cx(styles.order_list_item_item, styles.checked)}>
<Checkbox className="common_checkbox"></Checkbox>
</div>
<div className={cx(styles.order_list_item_item, styles.goods_info)}>
<div className={styles.order_list_item_item_imgbox}>
<div className={styles.order_list_item_item_imgbox_img} style={{ backgroundImage: `url(https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg)` }}></div>
</div>
<div>
<div className={styles.order_list_item_item_name}>荔枝纹牛皮二层移膜</div>
<div className={styles.order_list_item_item_category}>
<span>颜色：红色</span>
<span>尺码：XXL</span>
</div>
</div>
</div>
<div className={cx(styles.order_list_item_item, styles.unitprice)}>
<span className={styles.order_list_item_item_unitprice}>1-20平方英尺：20.00</span>
</div>
<div className={cx(styles.order_list_item_item, styles.count)}>
<InputNumber value={buyCount} onChange={(value) => setBuyCount(value)} />
<div className={styles.stock}>(库存20,000平方英尺)</div>
</div>
<div className={cx(styles.order_list_item_item, styles.amount)}>
<span className={styles.order_list_item_item_price}>20.00</span>
</div>
<div className={cx(styles.order_list_item_item, styles.opration)}>
<div className={styles.order_list_item_item_operation}>
<div className={styles.order_list_item_item_operation_item}>移入收藏夹</div>
<div className={styles.order_list_item_item_operation_item}>删除</div>
</div>
</div>
</div>
))
}
</div>
))
}
<Affix offsetBottom={0}>
<div className={styles.settlement_box}>
<div className={cx(styles.settlement_box_checkedbox)}>
<Checkbox className="common_checkbox">全选</Checkbox>
<div className={styles.settlement_box_checkedbox_delbtn}>删除</div>
</div>
<div className={styles.settlement_box_item}>
<div className={styles.settlement_box_item_price}>
<span>已选商品：</span>
<b>0</b>
<span>件</span>
</div>
<div className={styles.settlement_box_item_price}>
<span>商品金额总计(不含运费)：</span>
<b className={styles.settlement_box_item_price_total}>510.00</b>
<span>RMB</span>
</div>
<div className={styles.settlement_box_item_btn}>结算</div>
</div>
</div>
</Affix>
<Recommand />
</div>
</div>
)
}
export default PurchaseOrder
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