Skip to content

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

feat:订单结算页面

parent f4a34bc9
Show whitespace changes
Inline Side-by-side
Showing with 880 additions and 165 deletions
config/base.config.json
View file @ cf6a9b6a
{"userRegister":{"useType":{"memberType":[{"id":1,"typeName":"企业会员"},{"id":3,"typeName":"渠道企业会员"},{"id":4,"typeName":"渠道个人会员"},{"id":2,"typeName":"个人会员"}],"businessType":[{"id":1,"typeName":"采购"},{"id":24,"typeName":"供应"},{"id":33,"typeName":"hcx供应商"},{"id":34,"typeName":"test3"},{"id":35,"typeName":"test4"},{"id":36,"typeName":"test5"},{"id":37,"typeName":"test6"}]}},"global":{"logo":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/logo.png","countryList":[{"name":"简体中文-ZH","key":"zh-CN","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/china.png"},{"name":"English-EN","key":"en-US","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/us.png"},{"name":"日本語-JP","key":"jp","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/japen.png"},{"name":"한국어-KO","key":"ko","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/koren.png"}],"menuList":[{"code":"/memberCenter/commodityAbility","children":[{"code":"/mem"}]},{"code":"/memberCenter/commodityAbility/classAndProperty/class"}]}} {"userRegister":{"useType":{"memberType":[{"id":1,"typeName":"企业会员"},{"id":3,"typeName":"渠道企业会员"},{"id":4,"typeName":"渠道个人会员"},{"id":2,"typeName":"个人会员"}],"businessType":[{"id":1,"typeName":"采购"},{"id":24,"typeName":"供应"},{"id":33,"typeName":"hcx供应商"},{"id":34,"typeName":"test3"},{"id":35,"typeName":"test4"},{"id":36,"typeName":"test5"},{"id":37,"typeName":"test6"}]}},"web":{"shopInfo":[{"id":3,"name":"Web商城","type":1,"environment":1,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/1392a859053a4118b381626480934e0a1595418166828.png","describe":"Web商城-企业商城","state":1,"url":"https://www.baidu.com/"},{"id":4,"name":"test","type":1,"environment":2,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/c40368db31c847d4a0b2c231c670f05e1595418342974.jpg","describe":"111","state":1,"url":"https://www.baidu.com/"},{"id":52,"name":"ee","type":1,"environment":1,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/c7ad98f7b0b2442b9a0fb634a93ce1bb1595991020345.jpg","describe":"eee","state":1,"url":"https://www.baidu.com/"},{"id":601,"name":"H5企业商城","type":1,"environment":2,"logoUrl":"xxx","describe":"xxx","state":1,"url":"xxx"},{"id":103,"name":"t3334","type":2,"environment":2,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/40732d6029224a1a9cf98b63a95c0b461596022360889.jpg","describe":"rrr","state":1,"url":"https://www.baidu.com/"},{"id":104,"name":"t5555","type":3,"environment":3,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/0d5aeb851f0f449cab3c33f36c94dba31596022402153.jpg","describe":"tttttt","state":1,"url":"https://www.baidu.com/"},{"id":105,"name":"ttt","type":4,"environment":3,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/8d2c67f4325b4528a8166e5f985cbc101596022427244.jpg","describe":"yyyyyyyyyy","state":1,"url":"https://www.baidu.com/"},{"id":106,"name":"yyyyyyyyyyrrrrrrrr","type":5,"environment":2,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/16ee5e88950a4573b91b7a7257335f4a1596022450608.jpg","describe":"hhhhhhhhhh","state":1,"url":"https://www.baidu.com/"},{"id":107,"name":"加载设置的国家、语言、币制、商城","type":4,"environment":4,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/19bebe952ed0493e826e0ce0b51ea1fd1596022498567.jpg","describe":"fffffff","state":1,"url":"https://www.baidu.com/"},{"id":108,"name":"加载设置","type":3,"environment":4,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/420c2647e9b34a0a9869e3c38671c6b01596022528519.jpg","describe":"iiiiiiiiiiiiiiii","state":1,"url":"https://www.baidu.com/"},{"id":109,"name":"加载设置的国家、语言、币制、商城1","type":1,"environment":2,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/00b9764f83074becb2217716fcb6714d1596022566857.jpg","describe":"jjjjjjjjjjj","state":1,"url":"https://www.baidu.com/"},{"id":110,"name":"加载设置的国家、语言、币制、商城2","type":2,"environment":1,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/6285d1bccac14eccae8c2c0c06e9d30f1596022585847.jpg","describe":"jjjjjjjjjjjjjjjj","state":1,"url":"https://www.baidu.com/"},{"id":111,"name":"111111111111加载设置的国家、语言、币制、商城","type":1,"environment":1,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/8c81a999a38c43ccb7fcc9ca3d4cdf3c1596022729328.jpg","describe":"333333333","state":1,"url":"https://www.baidu.com/"},{"id":112,"name":"rrrrrrrrrrrrrrrrrrrrrrrrrrrrrr","type":1,"environment":1,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/08258984461e46cc870c9fe2a50e9d6f1596023343823.jpg","describe":"666666666666666","state":1,"url":"https://www.baidu.com/"},{"id":202,"name":"测试商城","type":1,"environment":1,"logoUrl":"xxx","describe":"xxx","state":1,"url":"https://www.baidu.com/"},{"id":252,"name":"hcxtest","type":1,"environment":1,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/d5c6a1adeefb4d02a2c80983dbd5167d1596794178473.jpg","describe":"tteeeww","state":1,"url":"https://www.baidu.com/"},{"id":602,"name":"APP企业商城","type":1,"environment":4,"logoUrl":"xxx","describe":"xxx","state":1,"url":"xxx"},{"id":603,"name":"H5渠道商城","type":3,"environment":2,"logoUrl":"xxx","describe":"xxx","state":1,"url":"xxx"},{"id":604,"name":"APP渠道商城","type":3,"environment":4,"logoUrl":"xxx","describe":"xxx","state":1,"url":"xxx"},{"id":605,"name":"PC企业商城","type":1,"environment":1,"logoUrl":"xxx","describe":"xxx","state":1,"url":"xxx"},{"id":606,"name":"PC积分商城","type":2,"environment":1,"logoUrl":"xxx","describe":"xxx","state":1,"url":"xxx"},{"id":607,"name":"PC渠道商城","type":3,"environment":1,"logoUrl":"xxx","describe":"xxx","state":1,"url":"xxx"},{"id":608,"name":"PC渠道自有商城","type":4,"environment":1,"logoUrl":"xxx","describe":"xxx","state":1,"url":"xxx"},{"id":609,"name":"PC渠道积分商城","type":5,"environment":1,"logoUrl":"xxx","describe":"xxx","state":1,"url":"xxx"},{"id":302,"name":"云鲜采企业商城","type":1,"environment":1,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/5b19a059530a4060984fc045125da1f81597395561658.png","describe":null,"state":1,"url":"/"},{"id":303,"name":"云鲜采渠道商城","type":3,"environment":1,"logoUrl":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a63c8c81e74947f88c64d4c72bfb565c1597395598958.png","describe":null,"state":1,"url":"/shop"}]},"global":{"siteId":502,"siteUrl":"http://localhost:4396","logo":"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/4db4e7c5424c471c968ab540bce027f31597319423082.png","countryList":[{"name":"简体中文-ZH","key":"zh-CN","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/china.png"},{"name":"English-EN","key":"en-US","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/us.png"},{"name":"日本語-JP","key":"jp","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/japen.png"},{"name":"한국어-KO","key":"ko","icon":"http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/koren.png"}]}}
src/pages/lxMall/components/Category/index.tsx
View file @ cf6a9b6a
import React from 'react' import React, { useState, useEffect } from 'react'
import { MenuOutlined, RightOutlined } from '@ant-design/icons' import { MenuOutlined, RightOutlined } from '@ant-design/icons'
import { PublicApi } from '@/services/api'
import { inject, observer } from 'mobx-react'
import './index.less' import './index.less'
import { Link } from 'umi' import { Link } from 'umi'
import { isEmpty } from '@formily/antd/esm/shared'
const Category: React.FC = () => { interface CategoryPropsType {
CategoryStore?: any;
}
const Category: React.FC<CategoryPropsType> = (props) => {
const { fetchCategoryList, categoryList } = props.CategoryStore
useEffect(() => {
if (isEmpty(categoryList)) {
fetchCategoryList()
}
}, [])
return ( return (
<div className="category"> <div className="category">
...@@ -14,59 +28,39 @@ const Category: React.FC = () => { ...@@ -14,59 +28,39 @@ const Category: React.FC = () => {
<div className="category_content"> <div className="category_content">
<div className="category_type_panel"> <div className="category_type_panel">
<ul className="category_nav_list"> <ul className="category_nav_list">
<li className="category_nav_list_item"> {
<div className="main_category">成品皮</div> categoryList.map(item => (
<li className="category_nav_list_item" key={item.id}>
<div className="main_category">{item.name}</div>
<div className="sub_category"> <div className="sub_category">
<Link to="/">牛皮</Link> {
<Link to="/">羊皮</Link> item.categoryTree.map((childCategory, childIndex) => childIndex < 3 && (
<Link to="/">猪皮</Link> <Link to={`/commodity`} key={childCategory.id}>{childCategory.title}</Link>
))
}
</div> </div>
<RightOutlined className="right_icon" /> <RightOutlined className="right_icon" />
<div className="category_type_content"> <div className="category_type_content">
<div className="category_type_list"> <div className="category_type_list">
<div className="title">成品皮</div> <div className="title">{item.name}</div>
<div className="second_category_type"> {
item.categoryTree.map(childCategory => (
<div className="second_category_type" key={childCategory.id}>
<div className="title"> <div className="title">
<Link to="/"> <Link to={`/commodity`}>
牛皮 <RightOutlined /> {childCategory.title} <RightOutlined />
</Link> </Link>
</div> </div>
<ul className="third_category_type_list"> <ul className="third_category_type_list">
<li><Link to="/">黄牛皮</Link></li> {
<li><Link to="/">水牛皮</Link></li> childCategory.children.map(thirdChildItem => (
<li>奶牛皮</li> <li key={thirdChildItem.id}><Link to={`/commodity`}>{thirdChildItem.title}</Link></li>
<li>牦牛皮</li> ))
<li>黄牛皮</li> }
<li>水牛皮</li>
<li>奶牛皮</li>
<li>牦牛皮</li>
<li>黄牛皮</li>
<li>水牛皮</li>
<li>奶牛皮</li>
<li>牦牛皮</li>
</ul>
</div>
<div className="second_category_type">
<div className="title">猪皮 <RightOutlined /></div>
<ul className="third_category_type_list">
<li>头层</li>
<li>二层</li>
</ul>
</div>
<div className="second_category_type">
<div className="title">猪皮 <RightOutlined /></div>
<ul className="third_category_type_list">
<li>头层</li>
<li>二层</li>
</ul>
</div>
<div className="second_category_type">
<div className="title">马皮 <RightOutlined /></div>
<ul className="third_category_type_list">
<li>头层</li>
<li>二层</li>
</ul> </ul>
</div> </div>
))
}
</div> </div>
<div className="category_type_right_wrap"> <div className="category_type_right_wrap">
<div className="category_advert"> <div className="category_advert">
...@@ -86,6 +80,8 @@ const Category: React.FC = () => { ...@@ -86,6 +80,8 @@ const Category: React.FC = () => {
</div> </div>
</div> </div>
</li> </li>
))
}
</ul> </ul>
</div> </div>
...@@ -94,4 +90,4 @@ const Category: React.FC = () => { ...@@ -94,4 +90,4 @@ const Category: React.FC = () => {
) )
} }
export default Category export default inject('CategoryStore')(observer(Category))
\ No newline at end of file
src/pages/lxMall/components/CommonHeader/index.less
View file @ cf6a9b6a
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
.common_header_title { .common_header_title {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: bold;
color: #333333; color: #333333;
} }
} }
......
src/pages/lxMall/components/Filter/components/Category/index.less
View file @ cf6a9b6a
...@@ -19,10 +19,16 @@ ...@@ -19,10 +19,16 @@
} }
} }
:global {
.ant-tree { .ant-tree {
font-size: 12px; font-size: 12px;
} }
.ant-tree .ant-tree-treenode {
background: none !important;
border: none !important;
}
.ant-tree-treenode { .ant-tree-treenode {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
...@@ -41,7 +47,7 @@ ...@@ -41,7 +47,7 @@
} }
.ant-tree-treenode.ant-tree-treenode-switcher-close.ant-tree-treenode-selected { .ant-tree-treenode.ant-tree-treenode-switcher-close.ant-tree-treenode-selected {
background-color: #F5F5F5; background-color: #F5F5F5 !important;
} }
.ant-tree .ant-tree-treenode { .ant-tree .ant-tree-treenode {
...@@ -55,7 +61,7 @@ ...@@ -55,7 +61,7 @@
} }
.ant-tree-treenode.ant-tree-treenode-switcher-open.ant-tree-treenode-selected { .ant-tree-treenode.ant-tree-treenode-switcher-open.ant-tree-treenode-selected {
background-color: #F5F5F5; background-color: #F5F5F5 !important;
} }
.ant-tree-treenode { .ant-tree-treenode {
...@@ -65,4 +71,5 @@ ...@@ -65,4 +71,5 @@
background-color: #F5F5F5; background-color: #F5F5F5;
} }
} }
}
} }
\ No newline at end of file
src/pages/lxMall/components/Filter/components/Category/index.tsx
View file @ cf6a9b6a
import React from 'react' import React, { useEffect, useState } from 'react'
import { Tree } from 'antd' import { Tree } from 'antd'
import FilterBox from '../FilterBox' import FilterBox from '../FilterBox'
import './index.less' import { inject, observer } from 'mobx-react'
import styles from './index.less'
interface CategoryPropsType { interface CategoryPropsType {
onFilter?: Function onFilter?: Function;
CategoryStore: any;
} }
const Category: React.FC<CategoryPropsType> = (props) => { const Category: React.FC<CategoryPropsType> = (props) => {
const { onFilter } = props const { onFilter, CategoryStore: { categoryList } } = props
const [treeData, setTreeData] = useState<any>([])
const treeData = [ useEffect(() => {
{ if (categoryList && categoryList.length > 0) {
title: '成品皮', initTreeData(categoryList)
key: '0-0', }
children: [ }, [categoryList])
{
title: '牛皮', const initTreeData = (list: any) => {
key: '0-0-0', let result: any = list.map(item => {
children: [ return {
{ title: item.name,
title: <span className="sub_category_title">黄牛皮</span>, key: item.id,
key: '0-0-0-0', children: item.categoryTree.map(secondCategoryItem => {
}, return {
{ title: secondCategoryItem.title,
title: <span className="sub_category_title" >水牛皮</span >, key: secondCategoryItem.id,
key: '0-0-0-1', children: secondCategoryItem.children.map(thirdCategoryItem => {
}, return {
], title: <span className={styles.sub_category_title}>{thirdCategoryItem.title}</span>,
}, key: thirdCategoryItem.id,
{ children: []
title: '羊皮', }
key: '0-0-1', })
children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }], }
}, })
], }
}, })
{ setTreeData(result)
title: '鞣制皮/皮胚', }
key: '0-1',
children: [
{
title: '牛皮',
key: '0-1-0',
children: [
{
title: '黄牛皮',
key: '0-1-0-0',
},
{
title: '水牛皮',
key: '0-1-0-1',
},
],
},
{
title: '羊皮',
key: '0-1-1',
children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-1-1-0' }],
},
],
},
];
const handleSelect = (selectedKeys, info) => { const handleSelect = (selectedKeys, info) => {
const { title } = info.node const { title } = info.node
...@@ -76,9 +55,9 @@ const Category: React.FC<CategoryPropsType> = (props) => { ...@@ -76,9 +55,9 @@ const Category: React.FC<CategoryPropsType> = (props) => {
<FilterBox <FilterBox
title="分类" title="分类"
> >
<div className="filter_category"> <div className={styles.filter_category}>
<Tree <Tree
defaultExpandedKeys={['0-0-0', '0-0-0']} defaultExpandedKeys={[2, "4"]}
onSelect={handleSelect} onSelect={handleSelect}
treeData={treeData} treeData={treeData}
/> />
...@@ -87,4 +66,4 @@ const Category: React.FC<CategoryPropsType> = (props) => { ...@@ -87,4 +66,4 @@ const Category: React.FC<CategoryPropsType> = (props) => {
) )
} }
export default Category export default inject('CategoryStore')(observer(Category))
src/pages/lxMall/order/address/index.less
View file @ cf6a9b6a
@import '../common.less'; @import '../common.less';
.address { .address {
padding-bottom: 16px;
.address_raido_group { .address_raido_group {
display: block; display: block;
width: 100%; width: 100%;
} }
&_list { &_list {
&_radio { &_radio {
position: relative;
display: flex; display: flex;
height: 36px; height: 36px;
align-items: center; align-items: center;
...@@ -16,22 +20,6 @@ ...@@ -16,22 +20,6 @@
border: 1px solid #ffffff; border: 1px solid #ffffff;
padding-left: 17px; padding-left: 17px;
:global {
.ant-radio-inner {
&:hover {
border-color: var(--mall_main_color);
}
}
.ant-radio-checked .ant-radio-inner {
border-color: var(--mall_main_color);
}
.ant-radio-inner::after {
background-color: var(--mall_main_color);
}
}
&:hover { &:hover {
background-color: #FAFAFA; background-color: #FAFAFA;
...@@ -61,6 +49,17 @@ ...@@ -61,6 +49,17 @@
color: #666666; color: #666666;
} }
.address_item_btn_group {
margin-left: auto;
display: flex;
.address_item_btn {
margin: 0 10px;
cursor: pointer;
}
}
&>span, &>span,
&>div { &>div {
display: block; display: block;
...@@ -69,5 +68,41 @@ ...@@ -69,5 +68,41 @@
} }
} }
:global {
span.ant-radio+* {
display: block;
width: 100%;
}
.ant-radio-inner {
&:hover {
border-color: var(--mall_main_color);
}
}
.ant-radio-wrapper.ant-radio-wrapper-checked {
border: 1px solid var(--mall_main_color);
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid var(--mall_main_color);
border-left: 12px solid transparent;
bottom: 0;
right: 0;
z-index: 5;
}
}
.ant-radio-checked .ant-radio-inner {
border-color: var(--mall_main_color);
}
.ant-radio-inner::after {
background-color: var(--mall_main_color);
}
}
} }
} }
\ No newline at end of file
src/pages/lxMall/order/address/index.tsx
View file @ cf6a9b6a
import React from 'react' import React, { useState } from 'react'
import { Radio } from 'antd' import { Radio } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import styles from './index.less' import styles from './index.less'
const Address: React.FC = () => { const Address: React.FC = () => {
const [selectKey, setSelectKey] = useState<number>()
const [expand, setExpand] = useState<boolean>(false)
const mock_data = [ const mock_data = [
{ {
...@@ -25,20 +28,45 @@ const Address: React.FC = () => { ...@@ -25,20 +28,45 @@ const Address: React.FC = () => {
address: '广东省广州市海珠区新港东路1068号中洲中心北塔6楼', address: '广东省广州市海珠区新港东路1068号中洲中心北塔6楼',
mobile: '185 2929 6758', mobile: '185 2929 6758',
isDefault: 0, isDefault: 0,
},
{
id: 4,
name: '蒯美政',
address: '广东省广州市海珠区新港东路1068号中洲中心北塔6楼',
mobile: '185 2929 6758',
isDefault: 0,
},
{
id: 5,
name: '蒯美政',
address: '广东省广州市海珠区新港东路1068号中洲中心北塔6楼',
mobile: '185 2929 6758',
isDefault: 0,
},
{
id: 6,
name: '蒯美政',
address: '广东省广州市海珠区新港东路1068号中洲中心北塔6楼',
mobile: '185 2929 6758',
isDefault: 0,
} }
] ]
const handleSelect = (e: any) => {
setSelectKey(e.target.value)
}
return ( return (
<div className={styles.address}> <div className={styles.address}>
<div className={styles.common_title}> <div className={styles.common_title}>
<span>收货地址</span> <span>收货地址</span>
<div className={styles.common_title_btn}>新增收货地址</div> <div className={styles.common_title_btn}>新增收货地址</div>
</div> </div>
<Radio.Group className={styles.address_raido_group} > <Radio.Group className={styles.address_raido_group} value={selectKey} onChange={handleSelect}>
<div className={styles.address_list}> <div className={styles.address_list}>
{ {
mock_data.map(item => ( mock_data.map((item, index) => (!expand ? index < 3 : true) && (
<Radio className={styles.address_list_radio} value={item.id}> <Radio className={styles.address_list_radio} value={item.id} key={`address_list_radio_${item.id}`}>
<div className={styles.adderss_list_radio_line}> <div className={styles.adderss_list_radio_line}>
<span>{item.name}</span> <span>{item.name}</span>
<span>{item.address}</span> <span>{item.address}</span>
...@@ -47,12 +75,26 @@ const Address: React.FC = () => { ...@@ -47,12 +75,26 @@ const Address: React.FC = () => {
item.isDefault === 1 ? <div className={styles.default_address}>默认地址</div> : item.isDefault === 1 ? <div className={styles.default_address}>默认地址</div> :
<div className={styles.set_default_address}>设为默认地址</div> <div className={styles.set_default_address}>设为默认地址</div>
} }
{
selectKey === item.id && (
<div className={styles.address_item_btn_group}>
<div className={styles.address_item_btn}>编辑</div>
<div className={styles.address_item_btn}>删除</div>
</div>
)
}
</div> </div>
</Radio> </Radio>
)) ))
} }
</div> </div>
</Radio.Group> </Radio.Group>
<div className={styles.more_btn} onClick={() => setExpand(!expand)}>
<span>{expand ? '收起' : '更多地址'}</span>
<div className={styles.more_btn_icon}>
<DownOutlined rotate={expand ? 180 : 0} />
</div>
</div>
</div> </div>
) )
} }
......
src/pages/lxMall/order/common.less
View file @ cf6a9b6a
...@@ -7,6 +7,12 @@ ...@@ -7,6 +7,12 @@
display: flex; display: flex;
margin-bottom: 5px; margin-bottom: 5px;
&_icon {
color: #999999;
margin-left: 6px;
cursor: pointer;
}
&>span { &>span {
font-weight: 500; font-weight: 500;
...@@ -21,3 +27,54 @@ ...@@ -21,3 +27,54 @@
} }
} }
} }
.checkbox {
padding: 10px 0;
&_contract_text {
cursor: pointer;
color: #D32F2F;
}
:global {
.ant-checkbox-checked .ant-checkbox-inner {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
}
.more_btn {
padding-left: 40px;
font-size: 12px;
color: #999999;
margin-top: 12px;
display: inline-block;
cursor: pointer;
&.pad_l_40 {
padding-left: 100px;
}
&.pad_l_100 {
padding-left: 100px;
}
&_icon {
display: inline-block;
width: 16px;
height: 16px;
background-color: #EEEEEE;
border-radius: 50%;
margin-left: 5px;
font-size: 8px;
line-height: 16px;
text-align: center;
color: #999999;
svg {
transition: all .2s;
}
}
}
\ No newline at end of file
src/pages/lxMall/order/contract/index.tsx
View file @ cf6a9b6a
import React from 'react' import React from 'react'
import { Tooltip, Checkbox } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'
import styles from './index.less' import styles from './index.less'
const Contract: React.FC = () => { const Contract: React.FC = () => {
...@@ -7,8 +9,16 @@ const Contract: React.FC = () => { ...@@ -7,8 +9,16 @@ const Contract: React.FC = () => {
<div className={styles.contract}> <div className={styles.contract}>
<div className={styles.common_title}> <div className={styles.common_title}>
<span>电子合同信息</span> <span>电子合同信息</span>
<Tooltip placement="top" title="勾选则表示同意签署电子合同，电子合同与纸质合同一样具备同等法律效力。">
<QuestionCircleOutlined className={styles.common_title_icon} />
</Tooltip>
</div>
<div className={styles.checkbox}>
<Checkbox>
<span>我同意签订：</span>
</Checkbox>
<span className={styles.checkbox_contract_text}> 《广州白马皮具交易中心商品购销合同.pdf》</span>
</div> </div>
Contract
</div> </div>
) )
} }
......
src/pages/lxMall/order/delivery/index.less 0 → 100644
View file @ cf6a9b6a
@import '../common.less';
.delivery {
padding-bottom: 16px;
&_list {
display: flex;
padding-top: 16px;
&_item {
position: relative;
list-style: none;
width: 130px;
height: 32px;
border: 1px solid rgba(238, 238, 238, 1);
text-align: center;
line-height: 30px;
margin-right: 15px;
cursor: pointer;
&.active {
border: 1px solid rgba(211, 47, 47, 1);
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid var(--mall_main_color);
border-left: 12px solid transparent;
bottom: 0;
right: 0;
z-index: 5;
}
}
}
}
&_info {
display: flex;
align-items: center;
margin-top: 15px;
&_label {
color: #999999;
margin-right: 19px;
}
&_brief {
&>span {
margin-right: 20px;
}
}
}
}
\ No newline at end of file
src/pages/lxMall/order/delivery/index.tsx 0 → 100644
View file @ cf6a9b6a
import React from 'react'
import cx from 'classnames'
import styles from './index.less'
const Delivery: React.FC = () => {
return (
<div className={styles.delivery}>
<div className={styles.common_title}>
<span>配送方式</span>
</div>
<div className={styles.delivery_list}>
<div className={cx(styles.delivery_list_item, styles.active)}>自提</div>
</div>
<div className={styles.delivery_info}>
<div className={styles.delivery_info_label}>自提地址：</div>
<div className={styles.delivery_info_brief}>
<span>广东省广州市海珠区新港东路1068号中洲中心北塔6楼</span>
<span>蒯美政 / 185 2929 6758</span>
</div>
</div>
</div>
)
}
export default Delivery
src/pages/lxMall/order/distributionway/index.less deleted 100644 → 0
View file @ f4a34bc9
@import '../common.less';
.distributionway {}
\ No newline at end of file
src/pages/lxMall/order/distributionway/index.tsx deleted 100644 → 0
View file @ f4a34bc9
import React from 'react'
import styles from './index.less'
const DistributionWay: React.FC = () => {
return (
<div className={styles.distributionWay}>
<div className={styles.common_title}>
<span>配送方式</span>
</div>
DistributionWay
</div>
)
}
export default DistributionWay
src/pages/lxMall/order/index.less
View file @ cf6a9b6a
@import './common.less';
.order { .order {
&_container { &_container {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
.order_tb_title {
display: flex;
padding: 20px 0;
font-size: 14px;
color: #999999;
&_item {
flex: 1;
text-align: center;
}
}
.order_list {
border: 1px solid #EEEEEE;
&_shop_name {
height: 50px;
line-height: 50px;
padding-left: 40px;
background-color: #FAFAFA;
font-weight: 500;
}
&_item {
display: flex;
height: 130px;
align-items: center;
font-size: 12px;
&_item {
display: flex;
padding-left: 25px;
&.goods_info {
padding-left: 40px;
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: 330px;
flex-direction: column;
.stock {
margin-top: 10px;
}
}
&_price {
color: #D32F2F;
font-size: 16px;
}
&_unitprice {
width: 280px;
}
&_name {
color: #333333;
margin-bottom: 12px;
}
&_category {
color: #666666;
&>span {
margin-right: 20px;
}
}
}
}
}
.settlement_box {
height: 50px;
margin-top: 30px;
background-color: #F5F5F5;
display: flex;
justify-content: flex-end;
&_item {
&_btn {
width: 160px;
text-align: center;
color: #FFF;
height: 50px;
line-height: 50px;
font-size: 16px;
background-color: #D32F2F;
cursor: pointer;
&:hover {
opacity: .9;
}
}
}
}
} }
} }
\ No newline at end of file
src/pages/lxMall/order/index.tsx
View file @ cf6a9b6a
import React from 'react' import React, { useState } from 'react'
import CommonHeader from '../components/CommonHeader' import CommonHeader from '../components/CommonHeader'
import cx from 'classnames'
import InputNumber from '@/components/InputNumber'
import Address from './address' import Address from './address'
import PayWay from './payway' import PayWay from './payway'
import DistributionWay from './distributionway' import Delivery from './delivery'
import Contract from './contract' import Contract from './contract'
import Invoice from './invoice' import Invoice from './invoice'
import styles from './index.less' import styles from './index.less'
...@@ -12,16 +14,85 @@ interface OrderPropsType { ...@@ -12,16 +14,85 @@ interface OrderPropsType {
} }
const Order: React.FC<OrderPropsType> = (props) => { const Order: React.FC<OrderPropsType> = (props) => {
const [buyCount, setBuyCount] = useState<number>(1)
return ( return (
<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 />
<DistributionWay /> <Delivery />
<Invoice /> <Invoice />
<Contract /> <Contract /> */}
<div className={styles.common_title}>
<span>订单信息</span>
</div>
<div className={styles.order_tb_title}>
<div className={styles.order_tb_title_item}>商品</div>
<div className={styles.order_tb_title_item}>单价(元)</div>
<div className={styles.order_tb_title_item}>数量</div>
<div className={styles.order_tb_title_item}>小计(元)</div>
</div>
<div className={styles.order_list}>
<div className={styles.order_list_shop_name}>
<span>温州市龙昌皮业有限公司</span>
</div>
<div className={styles.order_list_item}>
<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={styles.order_list_item_item}>
<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={styles.order_list_item_item}>
<span className={styles.order_list_item_item_price}>20.00</span>
</div>
</div>
<div className={styles.order_list_item}>
<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={styles.order_list_item_item}>
<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={styles.order_list_item_item}>
<span className={styles.order_list_item_item_price}>20.00</span>
</div>
</div>
</div>
<div className={styles.settlement_box}>
<div className={styles.settlement_box_item}>
<div className={styles.settlement_box_item_btn}>提交订单</div>
</div>
</div>
</div> </div>
</div> </div>
) )
......
src/pages/lxMall/order/invoice/index.less
View file @ cf6a9b6a
@import '../common.less'; @import '../common.less';
.invoice {} .invoice {
\ No newline at end of file padding-bottom: 16px;
.raido_group {
position: relative;
display: block;
width: 100%;
.list_radio {
border: 1px solid #FFF;
}
.invoice_list {
position: relative;
display: flex;
margin: 0 -10px;
flex-wrap: wrap;
.invoice_list_item {
display: flex;
align-items: center;
&_content {
padding-left: 10px;
&_tag {
display: inline-block;
background-color: #6B778C;
padding: 0 6px;
height: 16px;
line-height: 16px;
color: #FFF;
font-size: 12px;
&.special {
background-color: #5377CE;
}
}
&_name {
display: flex;
align-items: center;
.default {
width: 64px;
height: 16px;
line-height: 16px;
text-align: center;
background: rgba(238, 238, 238, 1);
font-size: 12px;
color: #666666;
}
&>span {
margin-right: 20px;
}
}
}
&_btn_group {
display: flex;
margin-left: auto;
line-height: 14px;
// height: 14px;
.invoice_list_item_btn {
margin: 0 10px;
}
}
}
:global {
span.ant-radio+* {
display: block;
width: 100%;
}
.ant-radio-wrapper {
display: flex;
width: 48%;
align-items: center;
height: 72px;
background-color: #FAFAFA;
margin: 10px;
padding-left: 16px;
}
.ant-radio-inner {
&:hover {
border-color: var(--mall_main_color);
}
}
.ant-radio-wrapper.ant-radio-wrapper-checked {
border: 1px solid var(--mall_main_color);
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid var(--mall_main_color);
border-left: 12px solid transparent;
bottom: 0;
right: 0;
z-index: 5;
}
}
.ant-radio-checked .ant-radio-inner {
border-color: var(--mall_main_color);
}
.ant-radio-inner::after {
background-color: var(--mall_main_color);
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/order/invoice/index.tsx
View file @ cf6a9b6a
import React from 'react' import React, { useState } from 'react'
import { Checkbox, Radio } from 'antd'
import cx from 'classnames'
import styles from './index.less' import styles from './index.less'
const Invoice: React.FC = () => { const Invoice: React.FC = () => {
const [selectKey, setSelectKey] = useState<number>()
const MockData = [
{
id: 1,
type: 1,
name: '温州市龙昌皮业有限公司',
userType: 1,
isDefault: 1
},
{
id: 2,
type: 2,
name: '温州市龙昌皮业有限公司',
userType: 1,
isDefault: 0
},
{
id: 3,
type: 2,
name: '温州市龙昌皮业有限公司',
userType: 1,
isDefault: 0
}
]
const handleSelect = (e: any) => {
setSelectKey(e.target.value)
}
return ( return (
<div className={styles.invoice}> <div className={styles.invoice}>
<div className={styles.common_title}> <div className={styles.common_title}>
<span>发票信息</span> <span>发票信息</span>
</div> </div>
Invoice <div className={styles.checkbox}>
<Checkbox>需要发票</Checkbox>
</div>
<Radio.Group className={styles.raido_group} value={selectKey} onChange={handleSelect}>
<div className={styles.invoice_list}>
{
MockData.map((item, index) => (
<Radio className={styles.list_radio} value={item.id} key={`address_list_radio_${item.id}`}>
<div className={styles.invoice_list_item} key={`invoice_list_item_${index}`}>
<div className={styles.invoice_list_item_content}>
<div className={cx(styles.invoice_list_item_content_tag, item.type !== 1 ? styles.special : '')}>{item.type === 1 ? '增值税普通发票' : '增值税专用发票'}</div>
<div className={styles.invoice_list_item_content_name}>
<span>{item.name}</span>
<span>(企业)</span>
{
item.isDefault === 1 ? <div className={styles.default}>默认</div> :
<div className={styles.set_default}>设为默认</div>
}
</div>
</div>
{
selectKey === item.id && (
<div className={styles.invoice_list_item_btn_group}>
<div className={styles.invoice_list_item_btn}>编辑</div>
<div className={styles.invoice_list_item_btn}>删除</div>
</div>
)
}
</div>
</Radio>
))
}
</div>
</Radio.Group>
</div> </div>
) )
} }
......
src/pages/lxMall/order/payway/index.less
View file @ cf6a9b6a
@import '../common.less'; @import '../common.less';
.payway {} .payway {
\ No newline at end of file padding-bottom: 16px;
.payway_line {
display: flex;
align-items: center;
margin-top: 15px;
&_label {
color: #999999;
}
.payway_pay_list {
display: flex;
padding: 0;
margin: 0;
padding-left: 32px;
&_item {
position: relative;
list-style: none;
width: 130px;
height: 32px;
border: 1px solid rgba(238, 238, 238, 1);
text-align: center;
line-height: 30px;
margin-right: 15px;
cursor: pointer;
&>img {
width: 20px;
height: 20px;
margin-right: 8px;
}
&.active {
border: 1px solid rgba(211, 47, 47, 1);
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid var(--mall_main_color);
border-left: 12px solid transparent;
bottom: 0;
right: 0;
z-index: 5;
}
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/order/payway/index.tsx
View file @ cf6a9b6a
import React from 'react' import React, { useState } from 'react'
import cx from 'classnames'
import { DownOutlined } from '@ant-design/icons'
import alipayIcon from '@/assets/imgs/alipay_icon.png'
import wechatIcon from '@/assets/imgs/wechat_icon.png'
import bankIcon from '@/assets/imgs/bank_icon.png'
import styles from './index.less' import styles from './index.less'
const PayWay: React.FC = () => { const PayWay: React.FC = () => {
const [expand, setExpand] = useState<boolean>(false)
const PayWay = [
{
name: '线上支付',
payway: [
{
type: 'alipay',
name: '支付宝',
},
{
type: 'wechat',
name: '微信支付'
},
{
type: 'bank',
name: '银联'
},
]
},
{
name: '线下支付',
payway: [
{
type: 'pay',
name: '线下支付'
}
]
},
{
name: '授信额度',
payway: [
{
type: 'pay',
name: '授信额度支付'
}
]
},
{
name: '货到付款',
payway: [
{
type: 'pay',
name: '货到付款支付'
}
]
},
]
return ( return (
<div className={styles.payway}> <div className={styles.payway}>
<div className={styles.common_title}> <div className={styles.common_title}>
<span>支付方式</span> <span>支付方式</span>
</div> </div>
PayWay {
PayWay.map((item, index) => (!expand ? index < 1 : true) && (
<div className={styles.payway_line} key={`payway_line_${index}`}>
<div className={styles.payway_line_label}>{item.name}：</div>
<ul className={styles.payway_pay_list}>
{
item.payway.map((childItem, childIndex) => (
<li className={cx(styles.payway_pay_list_item, childItem.type === 'alipay' ? styles.active : '')} key={`payway_pay_list_item_${childIndex}`}>
{childItem.type === 'alipay' && <img src={alipayIcon} />}
{childItem.type === 'wechat' && <img src={wechatIcon} />}
{childItem.type === 'bank' && <img src={bankIcon} />}
<span>{childItem.name}</span>
</li>
))
}
</ul>
</div>
))
}
<div className={cx(styles.more_btn, styles.pad_l_100)} onClick={() => setExpand(!expand)}>
<span>{expand ? '收起' : '展开'}</span>
<div className={styles.more_btn_icon}>
<DownOutlined rotate={expand ? 180 : 0} />
</div>
</div>
</div> </div>
) )
} }
......
src/services/index.ts
View file @ cf6a9b6a
This source diff could not be displayed because it is too large. You can view the blob instead.
src/store/category/index.ts 0 → 100644
View file @ cf6a9b6a
import { action, computed, observable, runInAction } from 'mobx'
import { GlobalConfig } from '@/global/config'
import { PublicApi } from '@/services/api'
import { GetSearchCommodityTemplateGetCategoryListResponse } from '@/services'
class CategoryStore {
@observable public categoryList: GetSearchCommodityTemplateGetCategoryListResponse = []; // 品类列表
@action.bound
public async fetchCategoryList() {
let res = await PublicApi.getSearchCommodityTemplateGetCategoryList()
runInAction(() => {
this.categoryList = res.data || []
})
}
}
export default CategoryStore
src/store/index.tsx
View file @ cf6a9b6a
...@@ -2,11 +2,13 @@ import UserStore from './user' ...@@ -2,11 +2,13 @@ import UserStore from './user'
import ThemeStore from './theme' import ThemeStore from './theme'
import ProductStroe from './product' import ProductStroe from './product'
import SiteStore from './site' import SiteStore from './site'
import CategoryStore from './category'
import React from 'react'; import React from 'react';
import { Provider } from 'mobx-react' import { Provider } from 'mobx-react'
import { ILoginModule } from '@/module/userModule'; import { ILoginModule } from '@/module/userModule';
import { IProductModule } from '@/module/productModule' import { IProductModule } from '@/module/productModule'
// import { ProductContext } from '@/pages/commodity/products/addProducts'; // import { ProductContext } from '@/pages/commodity/products/addProducts';
/** /**
...@@ -33,7 +35,8 @@ export const store = { ...@@ -33,7 +35,8 @@ export const store = {
userStore: new UserStore, userStore: new UserStore,
ThemeStore: new ThemeStore, ThemeStore: new ThemeStore,
ProductStore: new ProductStroe, ProductStore: new ProductStroe,
SiteStore: new SiteStore SiteStore: new SiteStore,
CategoryStore: new CategoryStore
} }
const MobxProvider: React.FC = (props) => { const MobxProvider: React.FC = (props) => {
......
src/theme/science/styles/category.less
View file @ cf6a9b6a
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
height: 460px; height: 460px;
background-color: var(--category_content_bg); background-color: var(--category_content_bg);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
top: 42px; top: 41px;
left: 0; left: 0;
z-index: 5; z-index: 5;
......
ytt.config.ts
View file @ cf6a9b6a
...@@ -9,7 +9,9 @@ const tokens = [ ...@@ -9,7 +9,9 @@ const tokens = [
'efe99e20ed1375dc0db3e809e4fc7692f42ecebaf60cd77e65c50ed65d6ba6c4', // 商品服务 'efe99e20ed1375dc0db3e809e4fc7692f42ecebaf60cd77e65c50ed65d6ba6c4', // 商品服务
'7ec923520215c7e2f771867cb4d29cafbf823daf0fb2d3d9fa70b57a523c8bfb', // 店铺服务 '7ec923520215c7e2f771867cb4d29cafbf823daf0fb2d3d9fa70b57a523c8bfb', // 店铺服务
'c789e0e56ee8a8cc2fbd85f930eb2928c58fc1014583c6643acf29cff954da49', // 支付服务 'c789e0e56ee8a8cc2fbd85f930eb2928c58fc1014583c6643acf29cff954da49', // 支付服务
'ca19f532efba91f7773cbfbd526b798c6ac83df670071e97d72c50dca1d53a48', // 搜索服务
] ]
const genMap = (tokens) => { const genMap = (tokens) => {
return tokens.map(v => { return tokens.map(v => {
return { return {
......
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