Skip to content

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

feat:添加新增收货地址,发票信息和列表左侧筛选页面

parent cb8d7e69
Hide whitespace changes
Inline Side-by-side
Showing with 1044 additions and 29 deletions
config/routes/index.ts
View file @ 131b9e74
......@@ -40,14 +40,15 @@ const memberCenterRoute = {
{
path: '/memberCenter/noAuth',
auth: false,
hideInMenu: true,
component: '@/pages/403',
},
// 能力中心的404页
{
path: '/*',
auth: false,
component: '@/pages/404',
},
// {
// path: '/*',
// auth: false,
// component: '@/pages/404',
// },
],
}
......
src/app.tsx
View file @ 131b9e74
......@@ -64,6 +64,7 @@ export function patchRoutes({ routes }: IRoutes) {
*/
export function render(oldRender: Function) {
const authInfo = getAuth()
if (authInfo) {
PublicApi.getMemberLoginReget().then(res => {
const { data } = res
......
src/pages/lxMall/commodity/index.tsx
View file @ 131b9e74
import React, { useState } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter from '../components/Filter'
import Filter, { FilterType } from '../components/Filter'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
......@@ -34,6 +34,8 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const filterConfig = [FilterType.commonlyUsed, FilterType.category, FilterType.style, FilterType.brand, FilterType.price, FilterType.useArea, FilterType.commodityType]
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...filterList]
......@@ -67,11 +69,11 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
<div className="commodity">
<div className="mall_container">
<div className="commodity_container">
<Filter onFilter={handleFilter} />
<Filter onFilter={handleFilter} filterConfig={filterConfig} />
<div className="commodity_main">
{/* <div className="banner">
<div className="banner">
<img src={bannerImg} />
</div> */}
</div>
<div className="tool_bar">
<div className="tool_bar_left">
<div className="tool_bar_filter_item">
......
src/pages/lxMall/components/Filter/components/ActiveStores/index.less 0 → 100644
View file @ 131b9e74
.active_stores {
width: 240px;
background: #ffffff;
margin-top: 20px;
border: 1px solid rgba(238, 238, 238, 1);
&_title {
font-weight: 500;
padding: 15px;
}
.active_stores_list {
padding: 0 15px;
&_item {
display: flex;
margin-bottom: 20px;
align-items: center;
.active_stores_rank {
width: 22px;
height: 32px;
line-height: 32px;
font-size: 14px;
color: #666666;
font-weight: 500;
margin-right: 10px;
}
.active_stores_logo {
width: 32px;
height: 32px;
overflow: hidden;
margin-right: 10px;
&>img {
width: 100%;
height: 100%;
}
}
.active_stores_name {
color: #333333;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&>a {
color: #333333;
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/components/Filter/components/ActiveStores/index.tsx 0 → 100644
View file @ 131b9e74
/*
* 活跃店铺
* @Author: ghua
* @Date: 2020-08-20 16:23:39
* @Last Modified by: ghua
* @Last Modified time: 2020-08-20 16:38:49
*/
import React from 'react'
import styles from './index.less'
interface ActiveStoresPropsType {
}
const ActiveStores: React.FC<ActiveStoresPropsType> = (props) => {
return (
<div className={styles.active_stores}>
<div className={styles.active_stores_title}>
<label>活跃店铺</label>
</div>
<div className={styles.active_stores_list}>
<div className={styles.active_stores_list_item}>
<div className={styles.active_stores_rank}>01</div>
<div className={styles.active_stores_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.active_stores_name}> <a href="/">无锡市群明钢业有限公司</a></div>
</div>
<div className={styles.active_stores_list_item}>
<div className={styles.active_stores_rank}>02</div>
<div className={styles.active_stores_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.active_stores_name}>无锡市群明钢业有限公司</div>
</div>
<div className={styles.active_stores_list_item}>
<div className={styles.active_stores_rank}>03</div>
<div className={styles.active_stores_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.active_stores_name}>无锡市群明钢业有限公司</div>
</div>
<div className={styles.active_stores_list_item}>
<div className={styles.active_stores_rank}>04</div>
<div className={styles.active_stores_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.active_stores_name}>无锡市群明钢业有限公司</div>
</div>
<div className={styles.active_stores_list_item}>
<div className={styles.active_stores_rank}>05</div>
<div className={styles.active_stores_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.active_stores_name}>无锡市群明钢业有限公司</div>
</div>
</div>
</div>
)
}
export default ActiveStores
src/pages/lxMall/components/Filter/components/Category/index.tsx
View file @ 131b9e74
......@@ -6,7 +6,7 @@ import styles from './index.less'
interface CategoryPropsType {
onFilter?: Function;
CategoryStore: any;
CategoryStore?: any;
}
const Category: React.FC<CategoryPropsType> = (props) => {
......
src/pages/lxMall/components/Filter/components/NewJoin/index.less 0 → 100644
View file @ 131b9e74
.new_join {
width: 240px;
margin-top: 20px;
background: #ffffff;
border: 1px solid rgba(238, 238, 238, 1);
&_title {
font-weight: 500;
padding: 15px;
}
.new_join_list {
padding: 0 15px;
&_item {
display: flex;
margin-bottom: 20px;
align-items: center;
.new_join_rank {
width: 22px;
height: 32px;
line-height: 32px;
font-size: 14px;
color: #666666;
font-weight: 500;
margin-right: 10px;
}
.new_join_logo {
width: 32px;
height: 32px;
overflow: hidden;
margin-right: 10px;
&>img {
width: 100%;
height: 100%;
}
}
.new_join_name {
color: #333333;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&>a {
color: #333333;
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/components/Filter/components/NewJoin/index.tsx 0 → 100644
View file @ 131b9e74
/*
* 最新加入
* @Author: ghua
* @Date: 2020-08-20 16:23:39
* @Last Modified by: ghua
* @Last Modified time: 2020-08-20 16:49:11
*/
import React from 'react'
import styles from './index.less'
interface NewJoinPropsType {
}
const NewJoin: React.FC<NewJoinPropsType> = (props) => {
return (
<div className={styles.new_join}>
<div className={styles.new_join_title}>
<label>最新加入</label>
</div>
<div className={styles.new_join_list}>
<div className={styles.new_join_list_item}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.new_join_name}> <a href="/">无锡市群明钢业有限公司</a></div>
</div>
<div className={styles.new_join_list_item}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
</div>
<div className={styles.new_join_list_item}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
</div>
<div className={styles.new_join_list_item}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
</div>
<div className={styles.new_join_list_item}>
<div className={styles.new_join_logo}>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3381279230,433852972&fm=26&gp=0.jpg" />
</div>
<div className={styles.new_join_name}>无锡市群明钢业有限公司</div>
</div>
</div>
</div>
)
}
export default NewJoin
src/pages/lxMall/components/Filter/components/Points/index.less 0 → 100644
View file @ 131b9e74
.filter_price {
padding: 15px 15px 20px 15px;
.price_box {
display: flex;
font-size: 14px;
color: #333333;
align-items: center;
margin-top: 20px;
.price_box_brief {
color: #999999;
font-size: 12px;
}
.price_range {
flex: 1;
&>.split {
margin: 0 4px;
}
}
.confirm_btn {
background-color: #eeeeee;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
cursor: pointer;
&:hover {
opacity: .8;
}
}
}
.ant-slider-track {
background-color: var(--mall_main_color);
}
.ant-slider {
&:hover {
.ant-slider-track {
background-color: var(--mall_main_color);
}
}
// background-color: var(--mall_main_color);
}
.ant-slider-handle {
width: 4px;
height: 16px;
border: none;
background-color: var(--mall_main_color);
border-radius: 0;
}
}
\ No newline at end of file
src/pages/lxMall/components/Filter/components/Points/index.tsx 0 → 100644
View file @ 131b9e74
import React, { useState } from 'react'
import { Slider } from 'antd'
import FilterBox from '../FilterBox'
import './index.less'
interface PointsPropsType {
}
const Points: React.FC<PointsPropsType> = (props) => {
const [priceRange, setPriceRange] = useState<any>([0, 1000])
const handlePriceChange = (value) => {
setPriceRange(value)
}
return (
<FilterBox
title="所需积分范围"
>
<div className="filter_price">
<Slider range step={1} min={0} max={1000} value={priceRange} onChange={handlePriceChange} />
<div className="price_box">
<span className="price_box_brief">积分：</span>
<div className="price_range">
<span className="price">{priceRange[0]}</span>
<span className="split">-</span>
<span className="price">{priceRange[1]}</span>
</div>
<div className="confirm_btn">确定</div>
</div>
</div>
</FilterBox>
)
}
export default Points
src/pages/lxMall/components/Filter/index.tsx
View file @ 131b9e74
import React from 'react'
import isEmpty from 'lodash/isEmpty'
import CommonlyUsed from './components/CommonlyUsed'
import Category from './components/Category'
import Style from './components/Style'
......@@ -6,28 +7,116 @@ import Brand from './components/Brand'
import Price from './components/Price'
import UseArea from './components/UseArea'
import CommodityType from './components/CommodityType'
import ActiveStores from './components/ActiveStores'
import NewJoin from './components/NewJoin'
import Points from './components/Points'
import './index.less'
interface FilterPropsType {
onFilter?: Function;
filterConfig?: string[]
}
export enum FilterType {
/**
* 常用筛选
*/
commonlyUsed = 'commonlyUsed',
/**
* 分类
*/
category = 'category',
/**
* 风格
*/
style = 'style',
/**
* 品牌
*/
brand = 'brand',
/**
* 价格
*/
price = 'price',
/**
* 发货地
*/
useArea = 'useArea',
/**
* 商品类型
*/
commodityType = 'commodityType',
/**
* 活跃店铺
*/
activeStores = 'activeStores',
/**
* 最新加入
*/
newJoin = 'newJoin',
/**
* 所需积分
*/
points = 'points'
}
const Filter: React.FC<FilterPropsType> = (props) => {
const { onFilter } = props
const { onFilter, filterConfig = [] } = props
const handleFilter = (filterValue: any) => {
onFilter(filterValue)
}
const renderFilter = () => {
if (!isEmpty(filterConfig)) {
let result = []
for (let type of filterConfig) {
switch (type) {
case FilterType.commonlyUsed:
result.push(<CommonlyUsed />)
break
case FilterType.category:
result.push(<Category onFilter={handleFilter} />)
break
case FilterType.style:
result.push(<Style onFilter={handleFilter} />)
break
case FilterType.brand:
result.push(<Brand onFilter={handleFilter} />)
break
case FilterType.price:
result.push(<Price />)
break
case FilterType.useArea:
result.push(<UseArea onFilter={handleFilter} />)
break
case FilterType.commodityType:
result.push(<CommodityType />)
break
case FilterType.activeStores:
result.push(<ActiveStores />)
break
case FilterType.newJoin:
result.push(<NewJoin />)
break
case FilterType.points:
result.push(<Points />)
break
default:
break
}
}
return result
} else {
return null
}
}
return (
<div className="filter">
<CommonlyUsed />
<Category onFilter={handleFilter} />
<Style onFilter={handleFilter} />
<Brand onFilter={handleFilter} />
<Price />
<UseArea onFilter={handleFilter} />
<CommodityType />
{
renderFilter()
}
</div>
)
}
......
src/pages/lxMall/information/index.less
View file @ 131b9e74
......@@ -60,6 +60,10 @@
display: flex;
margin-top: 30px;
&.no_mar_top {
margin-top: 0;
}
.information_left {
width: 813px;
......
src/pages/lxMall/information/index.tsx
View file @ 131b9e74
......@@ -107,8 +107,6 @@ const MockList = [
},
]
const Information: React.FC<InformationPropsType> = (props) => {
return (
......
src/pages/lxMall/information/search.tsx
View file @ 131b9e74
......@@ -112,7 +112,7 @@ const InformationSearch: React.FC<InformationPropsType> = (props) => {
<div className={styles.information}>
<div className={styles.information_container}>
<BreadCrumbs />
<div className={styles.information_wrap}>
<div className={cx(styles.information_wrap, styles.no_mar_top)}>
<div className={styles.information_left}>
<div className={styles.information_title}>
<span>资讯搜索：</span>
......
src/pages/lxMall/order/address/index.tsx
View file @ 131b9e74
import React, { useState } from 'react'
import { Radio } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import AddAddress from '../components/addAddress'
import styles from './index.less'
const Address: React.FC = () => {
const [selectKey, setSelectKey] = useState<number>()
const [expand, setExpand] = useState<boolean>(false)
const [addressFormVisible, setAddressFormVisible] = useState<boolean>(false)
const mock_data = [
{
......@@ -60,7 +62,7 @@ const Address: React.FC = () => {
<div className={styles.address}>
<div className={styles.common_title}>
<span>收货地址</span>
<div className={styles.common_title_btn}>新增收货地址</div>
<div className={styles.common_title_btn} onClick={() => setAddressFormVisible(true)}>新增收货地址</div>
</div>
<Radio.Group className={styles.address_raido_group} value={selectKey} onChange={handleSelect}>
<div className={styles.address_list}>
......@@ -95,6 +97,12 @@ const Address: React.FC = () => {
<DownOutlined rotate={expand ? 180 : 0} />
</div>
</div>
<AddAddress
title="新增收货地址"
visible={addressFormVisible}
onCancel={() => setAddressFormVisible(false)}
/>
</div>
)
}
......
src/pages/lxMall/order/components/addAddress/index.less 0 → 100644
View file @ 131b9e74
@import '../common.less';
\ No newline at end of file
src/pages/lxMall/order/components/addAddress/index.tsx 0 → 100644
View file @ 131b9e74
import React, { useState, useEffect } from 'react'
import { Modal, Select as ISelect } from 'antd'
import {
SchemaForm,
SchemaMarkupField as Field,
createFormActions,
FormEffectHooks,
FormPath,
} from '@formily/antd'
import { Input, Switch, Select, FormMegaLayout } from '@formily/antd-components'
import { PublicApi } from '@/services/api'
import { PATTERN_MAPS } from '@/constants/regExp'
import ChinaImg from '../../../../../../mockStatic/china.png'
import japenImg from '../../../../../../mockStatic/japen.png'
import korenImg from '../../../../../../mockStatic/koren.png'
import us from '../../../../../../mockStatic/us.png'
import styles from './index.less'
const _width: number = 24
const _height: number = 17
interface countryItem {
name: string,
key: string,
icon: string
}
//列表带来的参数
export interface ListProps {
title?: React.ReactNode
}
export interface ListType {
checked: boolean //可选
}
interface AddAddressPropsType {
visible?: boolean;
onOk?: any;
onCancel?: any;
title?: string;
}
const { Option } = ISelect;
const actions = createFormActions()
const { onFieldValueChange$ } = FormEffectHooks
const AddAddress: React.FC<AddAddressPropsType> = (props) => {
const { visible = false, title, onOk, onCancel } = props
const [Options, setOptions] = useState([])
const [state, setState] = useState({ editable: true })
const [provinceName, setProvinceName] = useState('')
const [cityName, setCityName] = useState('')
const [districtName, setDistrictName] = useState('')
const [headerTitle, setHeaderTitle] = useState('')
const [provinceList, setProvinceList] = useState([])
const [cityList, setCityList] = useState([])
const selectList: any = [
{ label: <><img src={ChinaImg} key='1' style={{ width: _width, height: _height }} /> +86</>, value: '1' },
{ label: <><img src={japenImg} key='3' style={{ width: _width, height: _height }} /> +86</>, value: '3' },
{ label: <><img src={korenImg} key='4' style={{ width: _width, height: _height }} /> +86</>, value: '4' },
{ label: <><img src={us} key='5' style={{ width: _width, height: _height }} /> +86</>, value: '5' }
]
let _Options: any = [], TelCodeList: any = []
/**
* @description: formilyjs表单赋值方法 actions.setFieldState(key,state=> {state.value= **})
* @param {type}
* @return:
*/
useEffect(() => {
PublicApi.getManageGetTelCode().then(res => {
res.data.forEach((item, index) => {
TelCodeList.push({ label: item, value: (index).toString() })
})
setOptions(TelCodeList)
})
const getAllCode = setTimeout(() => {
PublicApi.getManageAreaByPcodeAll({ pcode: '100000' }).then(res => {
let list = []
res.data.forEach((item: any, index: number) => {
list.push({ label: item.name, value: `${item.code}-${item.name}` })
// list.push({ label: item.name, value: item.code })
})
setProvinceList(list)
})
}, 1000)
return () => {
clearTimeout(getAllCode)
}
}, [])
/**
* @description: Form保存
* @param {type}
* @return:
*/
const formSubmit = (values) => {
console.log(values)
let id = 0 //0新建
let type = 2 //'1' 发货 '2'收货
let value = { ...values }
value.isDefault = values.isDefault ? 1 : 0
value.provinceCode = value.provinceCode.split('-').length > 1 ? value.provinceCode.split('-')[0] : value.provinceCode
value.cityCode = value.cityCode.split('-').length > 1 ? value.cityCode.split('-')[0] : value.cityCode
value.districtCode = value.districtCode.split('-').length > 1 ? value.districtCode.split('-')[0] : value.districtCode
value.provinceName = provinceName
value.cityName = cityName
value.districtName = districtName
PublicApi.postLogisticsReceiverAddressAdd(value).then(res => {
if (res.code == 1000) {
}
})
}
/**
* @description: 自定义HOOK
* @param {type}
* @return:
*/
const useAreaEffects = () => {
const { setFieldState } = createFormActions()
onFieldValueChange$('provinceCode').subscribe(({ value }) => {
console.log(value)
setFieldState('districtCode', state => {
state.value = ''
})
let name = value && value.split('-').length > 1 ? value.split('-')[1] : ''
setProvinceName(name)
setFieldState('*(cityCode)', state => {
state.value = ''
let list = []
let pcode = value && value.split('-').length > 1 ? value.split('-')[0] : value
PublicApi.getManageAreaByPcodeAll({ pcode: pcode }).then(res => {
res.data.forEach((item: any, index: number) => {
// list.push({ label: item.name, value: item.code })
list.push({ label: item.name, value: `${item.code}-${item.name}` })
})
})
FormPath.setIn(state, 'props.enum', list)
})
})
onFieldValueChange$('cityCode').subscribe(({ value }) => {
console.log(value)
let name = value && value.split('-').length > 1 ? value.split('-')[1] : ''
setCityName(name)
setFieldState('*(districtCode)', state => {
state.value = ''
let list = []
let pcode = value && value.split('-').length > 1 ? value.split('-')[0] : value
PublicApi.getManageAreaByPcodeAll({ pcode: pcode }).then(res => {
res.data.forEach((item: any, index: number) => {
// list.push({ label: item.name, value: item.code })
list.push({ label: item.name, value: `${item.code}-${item.name}` })
})
})
FormPath.setIn(state, 'props.enum', list)
})
})
onFieldValueChange$('districtCode').subscribe(({ value }) => {
let name = value && value.split('-').length > 1 ? value.split('-')[1] : ''
setDistrictName(name)
})
}
const handleOk = () => {
actions.submit()
}
return visible && (
<Modal
title={title}
visible={visible}
onOk={handleOk}
width={600}
centered
className={styles.common_add_modal}
onCancel={onCancel}
maskClosable={false}
>
<SchemaForm editable={state.editable}
actions={actions} // 要传递
components={{
Input, Select, TextArea: Input.TextArea, Switch
}}
effects={() => useAreaEffects()}
onSubmit={(values) => formSubmit(values)}
>
<FormMegaLayout labelCol={4} labelAlign="left">
<Field
x-rules={{
required: true,
message: '请输入收货人',
}}
title="收货人"
name="receiverName"
maxLength={40}
x-component="Input"
x-component-props={{
placeholder: '请输入收货人'
}}
/>
<FormMegaLayout label="收货地区" grid full autoRow required>
<Field
x-mega-props={{ span: 1 }}
x-component="Select"
enum={provinceList}
x-rules={{
required: true,
message: '请选择省份/直辖市',
}}
name="provinceCode"
x-component-props={{
placeholder: '-省份/直辖市-'
}}
/>
<Field
x-mega-props={{ span: 1 }}
x-component="Select"
enum={cityList}
x-rules={{
required: true,
message: '请选择市',
}}
name="cityCode"
x-component-props={{
placeholder: '-市-'
}}
/>
<Field
x-mega-props={{ span: 1 }}
x-component="Select"
enum={[]}
x-rules={{
required: true,
message: '请选择区',
}}
name="districtCode"
x-component-props={{
placeholder: '-区-'
}}
/>
</FormMegaLayout>
<Field
x-rules={{
required: true,
message: '请输入详细地址',
}}
title="详细地址"
name="address"
maxLength={60}
x-component="TextArea"
x-component-props={{
placeholder: '请输入详细地址'
}}
/>
<Field
title="邮编"
name="postalCode"
maxLength={12}
x-component="Input"
x-component-props={{
placeholder: ''
}}
/>
<FormMegaLayout label='手机号码' grid required full>
<Field
x-mega-props={{ span: 1 }}
name="areaCode"
x-rules={{
required: true,
message: '请选择区号',
}}
x-component="Select"
enum={selectList}
x-component-props={{
placeholder: '请选择'
}}
/>
<Field
x-mega-props={{ span: 5 }}
name="phone"
maxLength={11}
x-component="Input"
x-rules={[
{
required: true,
message: '输入你的手机号码',
},
{
pattern: PATTERN_MAPS.phone,
message: '请输入正确手机号',
// maximum={11}数值的意思
}
]}
x-component-props={{
placeholder: '输入你的手机号码',
}}
/>
</FormMegaLayout>
<FormMegaLayout label='电话号码' grid full>
<Field
x-mega-props={{ span: 5 }}
name="tel"
x-component="Input"
x-component-props={{
placeholder: ''
}}
/>
</FormMegaLayout>
<Field
title="是否默认"
name="isDefault"
x-component="Switch"
x-component-props={{
placeholder: ''
}}
/>
</FormMegaLayout>
</SchemaForm>
</Modal>
)
}
export default AddAddress
src/pages/lxMall/order/components/addInvoice/index.less 0 → 100644
View file @ 131b9e74
@import '../common.less';
\ No newline at end of file
src/pages/lxMall/order/components/addInvoice/index.tsx 0 → 100644
View file @ 131b9e74
import React, { useState, useEffect } from 'react'
import { Modal } from 'antd'
import {
SchemaForm,
SchemaMarkupField as Field,
createFormActions,
FormEffectHooks,
FormPath,
} from '@formily/antd'
import { Input, Switch, Select, FormMegaLayout, Radio } from '@formily/antd-components'
import styles from './index.less'
//列表带来的参数
export interface ListProps {
title?: React.ReactNode
}
export interface ListType {
checked: boolean //可选
}
interface AddAddressPropsType {
visible?: boolean;
onOk?: any;
onCancel?: any;
title?: string;
}
const actions = createFormActions()
const { onFieldValueChange$ } = FormEffectHooks
const AddInvoice: React.FC<AddAddressPropsType> = (props) => {
const { visible = false, title, onOk, onCancel } = props
const [state, setState] = useState({ editable: true })
/**
* @description: Form保存
* @param {type}
* @return:
*/
const formSubmit = (values) => {
console.log(values)
}
const handleOk = () => {
actions.submit()
}
return visible && (
<Modal
title={title}
visible={visible}
onOk={handleOk}
width={600}
centered
className={styles.common_add_modal}
onCancel={onCancel}
maskClosable={false}
>
<SchemaForm editable={state.editable}
actions={actions} // 要传递
initialValues={{
Radio2: '1',
fapiao: '1'
}}
components={{
Input, Select, TextArea: Input.TextArea, Switch,
Radio,
RadioGroup: Radio.Group
}}
onSubmit={(values) => formSubmit(values)}
>
<FormMegaLayout labelCol={4} labelAlign="left">
<Field
required
title="开具类型"
name="Radio2"
x-component="RadioGroup"
enum={[
{ label: '企业(默认)', value: '1' },
{ label: '个人', value: '2' },
]}
/>
<Field
required
title="发票种类"
name="fapiao"
x-component="RadioGroup"
enum={[
{ label: '增值税普通发票(默认)', value: '1' },
{ label: '增值税专用发票', value: '2' },
]}
/>
<Field
x-rules={{
required: true,
message: '请输入发票抬头',
}}
title="发票抬头"
name="receiverName"
maxLength={40}
x-component="Input"
x-component-props={{
placeholder: '请输入发票抬头'
}}
/>
<Field
x-rules={{
required: true,
message: '请输入纳税号',
}}
title="纳税号"
name="receiverName2"
maxLength={40}
x-component="Input"
x-component-props={{
placeholder: '请输入纳税号'
}}
/>
<Field
title="开户行"
name="receiverName3"
maxLength={40}
x-component="Input"
/>
<Field
title="账号"
name="receiverName4"
maxLength={40}
x-component="Input"
/>
<Field
title="地址"
name="receiverName5"
maxLength={40}
x-component="Input"
/>
<Field
title="电话号码"
name="receiverName6"
maxLength={40}
x-component="Input"
/>
<Field
title="是否默认"
name="isDefault"
x-component="Switch"
x-component-props={{
placeholder: ''
}}
/>
</FormMegaLayout>
</SchemaForm>
</Modal>
)
}
export default AddInvoice
src/pages/lxMall/order/components/common.less 0 → 100644
View file @ 131b9e74
.common_add_modal {
position: relative;
:global {
.ant-form-item-label>label.ant-form-item-required::before {
order: 10;
margin-left: -6px;
}
.ant-radio-checked .ant-radio-inner {
border-color: var(--mall_main_color);
}
.ant-radio-inner::after {
background-color: var(--mall_main_color);
}
.ant-radio-checked::after {
border-color: var(--mall_main_color);
}
.ant-radio-group {
display: flex;
}
.ant-input {
&:hover,
&:focus {
box-shadow: 0 0 0 2px var(--mall_main_color_opacity_2);
border: 1px solid var(--mall_main_color);
}
}
.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
border-color: var(--mall_main_color);
border-right-width: 1px !important;
}
.ant-select-focused.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
border-color: var(--mall_main_color);
border-right-width: 1px !important;
outline: 0;
box-shadow: 0 0 0 2px var(--mall_main_color_opacity_2);
}
.ant-modal-footer {
.ant-btn {
&:hover,
&:focus,
&:active {
color: var(--mall_main_color);
border-color: var(--mall_main_color);
}
}
.ant-btn-primary {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
&:hover {
color: #ffffff;
opacity: .9;
}
}
}
}
}
\ No newline at end of file
src/pages/lxMall/order/invoice/index.tsx
View file @ 131b9e74
import React, { useState } from 'react'
import { Checkbox, Radio } from 'antd'
import AddInvoice from '../components/addInvoice'
import cx from 'classnames'
import styles from './index.less'
const Invoice: React.FC = () => {
const [selectKey, setSelectKey] = useState<number>()
const [invoiceFormVisible, setInvoiceFormVisible] = useState<boolean>(false)
const MockData = [
{
......@@ -38,7 +40,7 @@ const Invoice: React.FC = () => {
<div className={styles.invoice}>
<div className={styles.common_title}>
<span>发票信息</span>
<div className={styles.common_title_btn}>新增发票信息</div>
<div className={styles.common_title_btn} onClick={() => setInvoiceFormVisible(true)}>新增发票信息</div>
</div>
<div className={styles.checkbox}>
<Checkbox>需要发票</Checkbox>
......@@ -75,6 +77,11 @@ const Invoice: React.FC = () => {
</div>
</Radio.Group>
<AddInvoice
title="新增发票信息"
visible={invoiceFormVisible}
onCancel={() => setInvoiceFormVisible(false)}
/>
</div>
)
}
......
src/pages/lxMall/pointsMall/index.tsx
View file @ 131b9e74
import React, { useState } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter from '../components/Filter'
import Filter, { FilterType } from '../components/Filter'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
......@@ -34,6 +34,8 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const filterConfig = [FilterType.category, FilterType.points]
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...filterList]
......@@ -67,7 +69,7 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
<div className="commodity">
<div className="mall_container">
<div className="commodity_container">
<Filter onFilter={handleFilter} />
<Filter onFilter={handleFilter} filterConfig={filterConfig} />
<div className="commodity_main">
<div className="banner">
<img src={bannerImg} />
......
src/pages/lxMall/purchaseOnline/index.tsx
View file @ 131b9e74
import React, { useState } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter from '../components/Filter'
import Filter, { FilterType } from '../components/Filter'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
......@@ -34,6 +34,8 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const filterConfig = [FilterType.commonlyUsed, FilterType.category, FilterType.useArea]
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...filterList]
......@@ -67,7 +69,7 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
<div className="purchaseOnline">
<div className="mall_container">
<div className="commodity_container">
<Filter onFilter={handleFilter} />
<Filter onFilter={handleFilter} filterConfig={filterConfig} />
<div className="commodity_main">
<div className="banner">
<img src={bannerImg} />
......
src/pages/lxMall/shopList/index.tsx
View file @ 131b9e74
import React, { useState } from 'react'
import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
import Filter from '../components/Filter'
import Filter, { FilterType } from '../components/Filter'
import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
......@@ -34,6 +34,8 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [filterList, setFilterList] = useState([])
const filterConfig = [FilterType.category, FilterType.useArea, FilterType.activeStores, FilterType.newJoin]
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...filterList]
......@@ -67,7 +69,7 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
<div className="commodity">
<div className="mall_container">
<div className="commodity_container">
<Filter onFilter={handleFilter} />
<Filter onFilter={handleFilter} filterConfig={filterConfig} />
<div className="commodity_main">
<div className="tool_bar">
<div className="tool_bar_left">
......
src/theme/science/styles/colors.less
View file @ 131b9e74
......@@ -2,6 +2,7 @@
// 企业商城科技模板
.theme-mall-science {
--mall_main_color: #D32F2F;
--mall_main_color_opacity_2: rgba(211, 47, 47, .2);
--mall_sub_color: rgba(211, 47, 47, 0.1);
--category_content_bg: #FFFFFF;
......
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