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 = {
component: '@/pages/lxMall/order',
},
{
// 进货单
path: '/purchaseOrder',
name: 'purchaseOrder',
key: 'purchaseOrder',
hide: true,
hideHeader: true,
component: '@/pages/lxMall/purchaseOrder',
},
{
// 在线求购
path: `/buy`,
name: 'onlineshopping',
......
config/router.ts
View file @ 4efea365
......@@ -7,7 +7,7 @@ import shopRoute from './shopRoutes'
* @description 路由配置页, 更多配置可查看 https://umijs.org/zh-CN/docs/routing#routes
*/
const router = [
{
path: '/',
component: '@/wrappers/getSiteConfig',
......
src/app.tsx
View file @ 4efea365
......@@ -22,6 +22,12 @@ const whiteLists = [
'/user/login',
'/user/register',
'/memberCenter',
'/commodity',
'/shops',
'/shop/commodity/detail',
'/shop/commodity',
'/shop',
'/infomation',
'/404',
'/noAuth'
]
......@@ -42,7 +48,7 @@ const whiteLists = [
*/
export function patchRoutes({ routes }: IRoutes) {
if (isDev) {
return ;
return;
}
asyncRouter(getRouters(), routes)
}
......@@ -53,7 +59,7 @@ export function patchRoutes({ routes }: IRoutes) {
* @date 2020-05-20
* @export
*/
export function render(oldRender:Function) {
export function render(oldRender: Function) {
const authInfo = getAuth()
if (authInfo) {
PublicApi.getMemberLoginReget().then(res => {
......@@ -81,20 +87,21 @@ export function onRouteChange({ routes, matchedRoutes, location, action }) {
console.log(`当前可访问的路由为`)
console.log(routes, matchedRoutes, location)
if (isDev) {
return ;
return;
}
if (whiteLists.includes(location.pathname)) return ;
if (whiteLists.includes(location.pathname)) return;
const routeAuthUrls = getRouters()
console.log(routeAuthUrls, "routeAuthUrls")
// 是否登录
if (getAuth()) {
if (routeAuthUrls.includes(location.pathname)) {
} else {
history.replace('/')
// history.replace('/')
}
} else {
history.replace('/404')
history.replace('/user/login')
}
}
......
src/global/styles/reset.less
View file @ 4efea365
@import './mixins/layout.less';
#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] {
-moz-appearance:textfield;
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.identityRadio{
.identityRadio {
display: flex;
flex-direction: column;
margin: 0 auto;
.make-center(text);
& label{
& label {
width: 320px;
height: 48px;
.make-center-space(margin, 12);
......@@ -25,25 +82,28 @@
line-height: 48px;
}
}
.businessRadio{
.businessRadio {
display: flex;
flex-wrap: wrap;
width: 320px;
.make-center(margin);
.make-center(text);
& label{
& label {
width: 148px;
height: 32px;
line-height: 32px;
margin: 8px 0;
}
& label:nth-child(odd) {
margin-right: 24px;
}
}
// 设置formitem的*号到字段label前
.ant-form-item-label > label.ant-form-item-required::before {
.ant-form-item-label>label.ant-form-item-required::before {
order: 10;
margin-left: -6px;
}
......@@ -66,6 +126,7 @@
border-color: @main-color;
background: @tree-node_hover;
}
&.ant-tree-treenode:hover {
border-color: @main-color;
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 = () => {
return (
<div className="recommand">
<div className="recommand_title">交易评价</div>
<div className="recommand_title">买家还在看</div>
<div className="recommand_list">
{
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) => {
useEffect(() => {
if (isEmpty(categoryList)) {
fetchCategoryList()
// fetchCategoryList()
}
}, [])
......
src/pages/lxMall/components/Header/index.tsx
View file @ 4efea365
import React, { useState } from 'react'
import cx from 'classnames'
import { Link } from 'umi'
import { Link, history } from 'umi'
import { FileTextOutlined } from '@ant-design/icons'
import logo from '@/theme/imgs/logo_w.png'
import './index.less'
......@@ -36,7 +36,7 @@ const Header: React.FC<HeaderPropsType> = (props) => {
<div className="search_btn">搜索</div>
</div>
</div>
<div className="shopping_cart mall">
<div className="shopping_cart mall" onClick={() => history.push('/purchaseOrder')}>
<div className="badge">0</div>
<FileTextOutlined className="card_icon" />
<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 = () => {
useEffect(() => {
getImgRGB()
fetchMallHome()
// fetchMallHome()
}, [])
const fetchMallHome = () => {
......
src/pages/lxMall/order/index.less
View file @ 4efea365
......@@ -89,7 +89,6 @@
}
}
}
.settlement_box {
height: 50px;
margin-top: 30px;
......@@ -98,6 +97,27 @@
justify-content: flex-end;
&_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;
......
src/pages/lxMall/order/index.tsx
View file @ 4efea365
......@@ -20,11 +20,11 @@ const Order: React.FC<OrderPropsType> = (props) => {
<div className={styles.order}>
<CommonHeader title="订单结算" />
<div className={styles.order_container}>
{/* <Address />
<Address />
<PayWay />
<Delivery />
<Invoice />
<Contract /> */}
<Contract />
<div className={styles.common_title}>
<span>订单信息</span>
</div>
......@@ -90,6 +90,21 @@ const Order: React.FC<OrderPropsType> = (props) => {
<div className={styles.settlement_box}>
<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>
</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