Commit 2510899b authored by 前端-许佳敏's avatar 前端-许佳敏
parents 3a6e5ced 78056ada
......@@ -40,6 +40,11 @@ const AuthConfigRoute = {
hidePageHeader: true
},
]
},
{
path: '/memberCenter/systemSetting/collection',
name: 'collection',
component: '@/pages/systemSetting/collection',
}
],
......
......@@ -57,7 +57,7 @@ const RowStyleLayout = styled(props => <div {...props} />)`
`
const CardCheckBox = (props) => {
const { dataSource = [] } = props.props['x-component-props']
const { dataSource = [], type = 'checkbox' } = props.props['x-component-props']
const value: number[] = props.value || []
const handleChange = (id) => {
......@@ -69,7 +69,8 @@ const CardCheckBox = (props) => {
const newValue = findItemAndDelete(value, id)
props.mutators.change(newValue)
} else {
props.mutators.change([...value, id])
// 扩展单选模式
type === 'radio' ? props.mutators.change([id]) : props.mutators.change([...value, id])
}
}
......
......@@ -140,10 +140,30 @@ export enum FILTER_TYPE {
*/
soldSort = 'soldSort',
/**
* 信用从高到低
* 信用排序
*/
creditSort = 'creditSort',
/**
* 信用从高到低
*/
creditSortHighToLow = 'creditSortHighToLow',
/**
* 信用从低到高
*/
creditSortLowToHigh = 'creditSortLowToHigh',
/**
* 时间排序
*/
dateSort = 'dateSort',
/**
* 时间从高到低
*/
dateSortHighToLow = 'dateSortHighToLow',
/**
* 时间从低到高
*/
dateSortLowToHigh = 'dateSortLowToHigh',
/**
* 属性筛选
*/
attribute = 'attribute'
......@@ -349,8 +369,8 @@ export const DOC_TYPE_EXCHANGE_RECEIPT = 'S008'; // 换货入库
export const DOC_STATUS_UNREVIEWED = 1; // 未审核
export const DOC_STATUS_REVIEWED = 2; // 已审核
export const DOC_STATUS = {
[DOC_STATUS_UNREVIEWED]: '未审核',
[DOC_STATUS_REVIEWED]: '已审核',
[DOC_STATUS_UNREVIEWED]: '未审核',
[DOC_STATUS_REVIEWED]: '已审核',
};
// 订单类型
......
......@@ -7,6 +7,10 @@
display: none;
}
.ant-pro-global-footer {
margin: 8px auto 32px auto;
}
.common_checkbox {
&:hover,
......
......@@ -203,10 +203,12 @@ export default {
// 权限管理
'menu.systemSetting': '系统',
'menu.systemSetting.authConfig': '平台权限',
'menu.systemSetting.authConfig': '权限管理',
'menu.systemSetting.authConfig.organ': '组织机构',
'menu.systemSetting.authConfig.memberSystem': '角色管理',
'menu.systemSetting.authConfig.memberDetail': '角色详情',
'menu.systemSetting.authConfig.userSystem': '用户管理',
'menu.systemSetting.authConfig.userDetail': '用户详情',
'menu.systemSetting.collection': '收藏管理',
};
\ No newline at end of file
......@@ -222,12 +222,12 @@ const AddGoods = () => {
<Form.Item
name={['brand', 'id']}
label="品牌"
rules={[
{
required: true,
message: '请填入品牌'
},
]}
// rules={[
// {
// required: true,
// message: '请填入品牌'
// },
// ]}
>
{/* <Input placeholder="最长40个字符、20个汉字" /> */}
<Select
......
......@@ -319,9 +319,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
// console.log('生成传输数据', combineAttributeArray, attributeObjArr, attributeValObjArr, tableDataSource)
Array.isArray(combineAttributeArray) ? combineAttributeArray.map((item, index)=>{ // 非数组情况下默认无组合 从table数据中获取 // 当属性减少的时候 这个combine数组还是之前的 /* code1 */
let _tempArr: any = []
console.log(item, '0')
Array.isArray(item) ? item.map((_item, _index) => { /* code2 */
console.log(item, _item, '1')
let _tempObject: any = {};
_tempObject.customerAttribute = {
......@@ -507,8 +505,9 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
[]
)
let result = range.reduce((a, b) => { if(a<b) return b })
// console.log(result, 'result')
// console.log(result, range, 'result')
if(!result) throw new Error('请正确输入阶梯数量范围');
if(range[0]!==minOrderNumber) throw new Error('阶段的起始值必须为最小起订数');
callback()
}
} catch (err) {
......@@ -521,6 +520,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
setPriceForm.resetFields() // 先清空
setIsBatchSetting(true) // 点击置为true
setSetPriceModal(true)
setLadderPrice(false)
}
/**
......
......@@ -22,6 +22,34 @@
}
}
.information_tabs {
position: relative;
color: #333333;
font-size: 14px;
position: relative;
background-color: #F5F5F5;
height: 40px;
line-height: 40px;
display: flex;
&_item {
height: 40px;
display: flex;
align-items: center;
padding: 0 15px;
cursor: pointer;
&.active {
background-color: var(--mall_main_color);
color: #ffffff;
}
&:hover {
background-color: var(--mall_main_color);
color: #ffffff;
}
}
}
.common_background() {
......
......@@ -24,6 +24,7 @@
margin-right: 4px;
.information_focus_imgbox_main {
position: relative;
&_img {
width: 598px;
......@@ -32,11 +33,59 @@
transition: all 1s;
.common_background();
}
&_title {
position: absolute;
z-index: 6;
color: #ffffff;
bottom: 30px;
padding: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24px;
margin-bottom: 0;
}
}
:global {
.ant-carousel .slick-dots-bottom {
bottom: 12px;
justify-content: flex-start;
margin: 0;
margin-left: 15px;
}
.ant-carousel .slick-dots li {
width: 4px;
height: 4px;
&.slick-active {
width: 12px;
height: 4px;
border-radius: 3px;
button {
width: 12px;
height: 4px;
border-radius: 3px;
}
}
button {
width: 4px;
height: 4px;
}
}
}
}
&_right {
.information_focus_imgbox_sub_1 {
position: relative;
&_img {
width: 598px;
height: 220px;
......@@ -44,11 +93,26 @@
}
}
.information_focus_imgbox_sub_title {
position: absolute;
z-index: 6;
color: #ffffff;
bottom: 20px;
padding: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
margin-bottom: 0;
}
.information_focus_sub_bottom {
display: flex;
margin-top: 4px;
.information_focus_imgbox_sub_2 {
position: relative;
&:not(:last-child) {
margin-right: 4px;
}
......
......@@ -115,15 +115,17 @@ const Information: React.FC<InformationPropsType> = (props) => {
<BreadCrumbs />
<div className={styles.information_focus}>
<div className={styles.information_focus_left}>
<Carousel className={styles.information_focus_carousel} pauseOnDotsHover>
<Carousel className={styles.information_focus_carousel} autoplay={true} pauseOnDotsHover>
<div className={styles.information_focus_carousel_item}>
<div className={styles.information_focus_imgbox_main}>
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${informationImg1})` }} />
<p className={styles.information_focus_imgbox_main_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
</div>
<div className={styles.information_focus_carousel_item}>
<div className={styles.information_focus_imgbox_main}>
<div className={styles.information_focus_imgbox_main_img} style={{ backgroundImage: `url(${informationImg2})` }} />
<p className={styles.information_focus_imgbox_main_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
</div>
</Carousel>
......@@ -131,81 +133,27 @@ const Information: React.FC<InformationPropsType> = (props) => {
<div className={styles.information_focus_right}>
<div className={styles.information_focus_imgbox_sub_1}>
<div className={styles.information_focus_imgbox_sub_1_img} style={{ backgroundImage: `url(${informationImg2})` }} />
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
<div className={styles.information_focus_sub_bottom}>
<div className={styles.information_focus_imgbox_sub_2}>
<div className={styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${informationImg1})` }} />
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
<div className={styles.information_focus_imgbox_sub_2}>
<div className={styles.information_focus_imgbox_sub_2_img} style={{ backgroundImage: `url(${informationImg1})` }} />
<p className={styles.information_focus_imgbox_sub_title}>高分七号卫星上岗!大美图像惊艳亮相</p>
</div>
</div>
</div>
</div>
<div className={styles.information_wrap}>
<div className={styles.information_left}>
{
MockList.map(item => (
<Fragment key={item.id}>
<div className={styles.information_title}>
<span>{item.title}</span>
</div>
<div className={styles.information_common}>
<div className={styles.information_common_left}>
<ImageBox width={360} height={240} imgUrl={informationImg2} />
<p className={styles.information_common_title}>
<Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案,如何实现全网整合</Link>
</p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
<p className={styles.information_common_content}>优秀的B2B电商商城平台开发公司除了提供搭建电商系统的服务之外,更应该为客户制定一套合理的电商系统</p>
<div className={styles.information_common_tag_list}>
<div className={styles.information_common_tag_list_item}>电商系统开发方案</div>
<div className={styles.information_common_tag_list_item}>b2b网站建设</div>
<div className={styles.information_common_tag_list_item}>供应链管理系统</div>
</div>
</div>
<div className={styles.information_common_right}>
<div className={styles.information_common_news_list}>
{
item.list.map(childImte => (
<div className={styles.information_common_news_list_item} key={childImte.id}>
<ImageBox imgUrl={informationImg2} />
<div className={styles.information_common_news_list_item_main}>
<p className={styles.information_common_news_list_item_main_content}>
<Link to="/infomation/detail?id=1">B2B供应链电商系统平台解决方案,如何实现全网整合</Link>
</p>
<div className={styles.information_common_view}>
<div className={styles.information_common_view_item}>
<ClockCircleOutlined />
<span className={styles.information_common_view_item_text}>2019-09-25</span>
</div>
<div className={styles.information_common_view_item}>
<EyeOutlined />
<span className={styles.information_common_view_item_text}>11,245</span>
</div>
</div>
</div>
</div>
))
}
</div>
</div>
</div>
</Fragment>
))
}
<div className={styles.information_title}>
<span>最新发布</span>
<div className={styles.information_tabs}>
<div className={cx(styles.information_tabs_item, styles.active)}>今日热点</div>
<div className={styles.information_tabs_item}>行业头条</div>
<div className={styles.information_tabs_item}>专题报道</div>
<div className={styles.information_tabs_item}>政策法规</div>
</div>
<div className={styles.information_latest_release_list}>
<div className={styles.information_latest_release_list_item}>
......
......@@ -62,6 +62,10 @@
font-size: 12px;
color: #CCCCCC;
&.active {
color: #333333;
}
&:last-child {
margin-top: -4px;
}
......
......@@ -11,10 +11,9 @@ import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import cx from 'classnames'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import bannerImg from '@/assets/imgs/banner_2.png'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import styles from './index.less'
interface CommodityPropsType {
......@@ -54,21 +53,11 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.points]
useEffect(() => {
console.log(layoutType, "layoutType")
fetchCommodityList()
}, [filterParam, current])
fetchCommodityList(1)
}, [filterParam])
useEffect(() => {
if (categoryId && categoryName) {
onFilter({
key: [categoryId],
title: decodeURIComponent(atob(categoryName)),
type: FILTER_TYPE.category,
})
}
}, [props.location.query])
useEffect(() => {
if (!isEmpty(filterList) || filterUpdate) {
handleFilterChange(filterList)
}
......@@ -80,12 +69,11 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
})
}, [])
const fetchCommodityList = () => {
const fetchCommodityList = (currentParam?: number) => {
let param: filterQuery = {
current,
current: currentParam ? currentParam : current,
pageSize
}
if (!isEmpty(filterParam)) {
param = Object.assign(param, filterParam)
}
......@@ -123,6 +111,7 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
const handlePageChange = (page) => {
setCurrent(page)
fetchCommodityList(page)
}
const renderPointLayoutType = (): LAYOUT_TYPE => {
......@@ -141,6 +130,51 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
return result
}
/**
* 排序
*/
const handleSort = (type: FILTER_TYPE) => {
switch (type) {
case FILTER_TYPE.priceSort:
/**
* 判断当前筛选项是否含有价格排序的筛选
*/
if (filterList.some(item => item.type === FILTER_TYPE.priceSortHighToLow)) {
onFilter({
key: null,
title: '价格从高到低',
type: FILTER_TYPE.priceSortHighToLow,
})
onFilter({
key: 'priceSortLowToHigh',
title: '价格从低到高',
type: FILTER_TYPE.priceSortLowToHigh,
})
} else if (filterList.some(item => item.type === FILTER_TYPE.priceSortLowToHigh)) {
onFilter({
key: null,
title: '价格从低到高',
type: FILTER_TYPE.priceSortLowToHigh,
})
onFilter({
key: 'priceSortHighToLow',
title: '价格从高到低',
type: FILTER_TYPE.priceSortHighToLow,
})
} else {
onFilter({
key: 'priceSortHighToLow',
title: '价格从高到低',
type: FILTER_TYPE.priceSortHighToLow,
})
}
break
default:
break
}
}
return (
<div className={styles.commodity}>
<div className={styles.mall_container}>
......@@ -152,11 +186,11 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
</div>
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item}>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.priceSort)}>
<span>积分</span>
<div className={styles.price_filter_box}>
<CaretUpOutlined className={styles.icon} />
<CaretDownOutlined className={styles.icon} />
<div className={styles.price_filter_box} >
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.priceSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.priceSortHighToLow) ? styles.active : '')} />
</div>
</div>
</div>
......
......@@ -3,7 +3,6 @@ import cx from 'classnames'
import { Skeleton } from 'antd'
import { LAYOUT_TYPE } from '@/constants'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import creditIcon from '@/assets/imgs/credit_icon.png'
import styles from './list.less'
interface CommodityListPropsType {
......@@ -17,10 +16,9 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
const getCommodityDetailUrl = () => {
switch (layoutType) {
case LAYOUT_TYPE.mall:
return ""
case LAYOUT_TYPE.channel:
return "/channelmall"
case LAYOUT_TYPE.mall:
case LAYOUT_TYPE.shop:
return "/shop"
default:
......
......@@ -3,6 +3,8 @@
background-color: #ffffff;
.commodity_container {
width: 1200px;
margin: 0 auto;
display: flex;
margin-top: 20px;
......@@ -59,6 +61,10 @@
font-size: 12px;
color: #CCCCCC;
&.active {
color: #333333;
}
&:last-child {
margin-top: -4px;
}
......@@ -155,24 +161,26 @@
margin-top: 60px;
text-align: right;
.ant-pagination-item {
:global {
.ant-pagination-item {
&:hover,
&:active {
border-color: var(--mall_main_color);
&:hover,
&:active {
border-color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
}
}
}
}
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
&>a {
color: #ffffff;
&>a {
color: #ffffff;
}
}
}
}
......
......@@ -6,113 +6,174 @@ import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
import NoResult from './noResult'
import bannerImg from '@/assets/imgs/banner_2.png'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import './index.less'
import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import styles from './index.less'
interface filterValueType {
key: string;
title: string;
type: FILTER_TYPE;
}
interface PurchaseOnlinePropsType {
location: any
}
const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
const { query: { search = "" } } = props.location
const [showType, setShowType] = useState<number>(1) // 展示方式:1:矩阵排列; 2:列表排列
const [filterList, setFilterList] = useState([])
// const [filterList, setFilterList] = useState([])
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.useArea]
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...filterList]
if (filteState) {
tempFilterList = tempFilterList.map(item => {
if (item.type === filterValue.type) {
return filterValue
}
return item
})
} else {
tempFilterList = [...tempFilterList, filterValue]
}
setFilterList(tempFilterList)
/**
* 重置筛选
*/
const handleResetFilter = () => {
onResetFilter()
}
const handleDeleteFilterItem = (key: string) => {
let tempFilterList = [...filterList]
tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
setFilterList(tempFilterList)
const handleDeleteFilterItem = (item: any) => {
onDeleteFilterItem(item.key, item.type)
}
/**
* 重置筛选
*/
const handleResetFilter = () => {
setFilterList([])
* 排序
*/
const handleSort = (type: FILTER_TYPE) => {
switch (type) {
case FILTER_TYPE.creditSort:
/**
* 判断当前筛选项是否含有信用排序的筛选
*/
if (filterList.some(item => item.type === FILTER_TYPE.creditSortHighToLow)) {
onFilter({
key: null,
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
onFilter({
key: 'creditSortLowToHigh',
title: '信用从低到高',
type: FILTER_TYPE.creditSortLowToHigh,
})
} else if (filterList.some(item => item.type === FILTER_TYPE.creditSortLowToHigh)) {
onFilter({
key: null,
title: '信用从低到高',
type: FILTER_TYPE.creditSortLowToHigh,
})
onFilter({
key: 'creditSortHighToLow',
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
} else {
onFilter({
key: 'creditSortHighToLow',
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
}
break
case FILTER_TYPE.dateSort:
/**
* 判断当前筛选项是否含有时间排序的筛选
*/
if (filterList.some(item => item.type === FILTER_TYPE.dateSortHighToLow)) {
onFilter({
key: null,
title: '时间从高到低',
type: FILTER_TYPE.dateSortHighToLow,
})
onFilter({
key: 'dateSortLowToHigh',
title: '时间从低到高',
type: FILTER_TYPE.dateSortLowToHigh,
})
} else if (filterList.some(item => item.type === FILTER_TYPE.dateSortLowToHigh)) {
onFilter({
key: null,
title: '时间从低到高',
type: FILTER_TYPE.dateSortLowToHigh,
})
onFilter({
key: 'dateSortHighToLow',
title: '时间从高到低',
type: FILTER_TYPE.dateSortHighToLow,
})
} else {
onFilter({
key: 'dateSortHighToLow',
title: '时间从高到低',
type: FILTER_TYPE.dateSortHighToLow,
})
}
break
default:
break
}
}
return (
<div className="purchaseOnline">
<div className="mall_container">
<div className="commodity_container">
<div className={styles.purchaseOnline}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter filterConfig={filterConfig} />
<div className="commodity_main">
<div className="banner">
<div className={styles.commodity_main}>
{/* <div className="banner">
<img src={bannerImg} />
</div>
<div className="tool_bar">
<div className="tool_bar_left">
<div className="tool_bar_filter_item">
</div> */}
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.dateSort)}>
<span>时间</span>
<div className="price_filter_box">
<CaretUpOutlined className="icon" />
<CaretDownOutlined className="icon" />
<div className={styles.price_filter_box}>
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.dateSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.dateSortHighToLow) ? styles.active : '')} />
</div>
</div>
<div className="tool_bar_filter_item">
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.creditSort)}>
<span>信用</span>
<div className="price_filter_box">
<CaretUpOutlined className="icon" />
<CaretDownOutlined className="icon" />
<div className={styles.price_filter_box}>
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.creditSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.creditSortHighToLow) ? styles.active : '')} />
</div>
</div>
</div>
<div className="tool_bar_right">
<div className="count">
<div className={styles.tool_bar_right}>
<div className={styles.count}>
<span></span>
<label>43</label>
<span>条求购信息</span>
</div>
</div>
</div>
{/* <div className="filter_bar">
<div className="filter_bar_left">
<div className="filter_bar_left_text">保存为常用筛选</div>
<div className="filter_bar_left_split"></div>
<div className="filter_bar_left_text" onClick={handleResetFilter}>重置</div>
</div>
<div className="filter_bar_list">
{
filterList.map(item => (
<div className="filter_bar_list_item" key={item.key}>
<span className="filter_bar_list_item_text">{item.title}</span>
<CloseOutlined className="filter_bar_list_item_icon" onClick={() => handleDeleteFilterItem(item.key)} />
</div>
))
}
</div>
</div> */}
{
filterList && filterList.length > 0 && (
<div className={styles.filter_bar}>
<div className={styles.filter_bar_left}>
<div className={styles.filter_bar_left_text} onClick={handleResetFilter}>重置</div>
</div>
<div className={styles.filter_bar_list}>
{
filterList.map(item => (
<div className={styles.filter_bar_list_item} key={item.key}>
<span className={styles.filter_bar_list_item_text}>{item.title}</span>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item)} />
</div>
))
}
</div>
</div>
)
}
{
!!search ? <NoResult search={search} /> : (
<>
<CommodityList showType={showType} />
<div className="pagination_wrap">
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</>
......@@ -125,4 +186,4 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
)
}
export default PurchaseOnline
export default observer(PurchaseOnline)
......@@ -67,6 +67,10 @@
margin: 0 auto;
margin-top: 20px;
&>a {
color: #fff;
}
&:hover {
opacity: .9;
}
......
......@@ -20,39 +20,39 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
{
dataList.map((item, index) => (
<div key={item} className="purchase_list_item row">
<a href={`/memberCenter/tranactionAbility/enquiryOffer/addEnquiry`}>
<div className="purchase_list_item_title">头层自然摔牛皮,箱包鞋面料</div>
<div className="purchase_list_item_info_box">
<div className="purchase_list_item_info_line">
<label>品类:</label>
<span>硬度适中偏软</span>
</div>
<div className="purchase_list_item_info_line">
<label>发货地:</label>
<span>广东省/广州市、广东省/深圳市、广东省/东莞市</span>
</div>
<div className="purchase_list_item_info_line">
<label>交付地址:</label>
<span>广东省广州市海珠区新港东路1068号</span>
</div>
<div className="purchase_list_item_info_line">
<label>交付日期:</label>
<span>2020-08-12</span>
</div>
<div className="purchase_list_item_info_line">
<label>截止时间:</label>
<span>2020-08-12 11:58:26</span>
</div>
<div className="purchase_list_item_info_line_split"></div>
<div className="purchase_list_item_info_name">温州市龙昌皮业有限公司</div>
<div className="purchase_list_item_info_line">
<img className="credit_icon" src={creditIcon} />
<span className="credit_text">1288</span>
</div>
<div className="quoted_price_btn">立即报价</div>
</div>
</a>
<div className="purchase_list_item_title">头层自然摔牛皮,箱包鞋面料</div>
<div className="purchase_list_item_info_box">
<div className="purchase_list_item_info_line">
<label>品类:</label>
<span>硬度适中偏软</span>
</div>
<div className="purchase_list_item_info_line">
<label>发货地:</label>
<span>广东省/广州市、广东省/深圳市、广东省/东莞市</span>
</div>
<div className="purchase_list_item_info_line">
<label>交付地址:</label>
<span>广东省广州市海珠区新港东路1068号</span>
</div>
<div className="purchase_list_item_info_line">
<label>交付日期:</label>
<span>2020-08-12</span>
</div>
<div className="purchase_list_item_info_line">
<label>截止时间:</label>
<span>2020-08-12 11:58:26</span>
</div>
<div className="purchase_list_item_info_line_split"></div>
<div className="purchase_list_item_info_name">温州市龙昌皮业有限公司</div>
<div className="purchase_list_item_info_line">
<img className="credit_icon" src={creditIcon} />
<span className="credit_text">1288</span>
</div>
<div className="quoted_price_btn">
<a href={`/memberCenter/tranactionAbility/enquiryOffer/addEnquiry`}> 立即报价 </a>
</div>
</div>
</div>
))
......
......@@ -3,6 +3,8 @@
background-color: #ffffff;
.commodity_container {
width: 1200px;
margin: 0 auto;
display: flex;
margin-top: 20px;
......@@ -58,6 +60,10 @@
font-size: 12px;
color: #CCCCCC;
&.active {
color: #333333;
}
&:last-child {
margin-top: -4px;
}
......@@ -99,6 +105,7 @@
margin-top: 7px;
display: flex;
align-items: center;
margin-bottom: 16px;
.filter_bar_left {
display: flex;
......@@ -154,24 +161,26 @@
margin-top: 60px;
text-align: right;
.ant-pagination-item {
:global {
.ant-pagination-item {
&:hover,
&:active {
border-color: var(--mall_main_color);
&:hover,
&:active {
border-color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
&>a {
color: var(--mall_main_color);
}
}
}
}
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
.ant-pagination-item-active {
background-color: var(--mall_main_color);
border-color: var(--mall_main_color);
&>a {
color: #ffffff;
&>a {
color: #ffffff;
}
}
}
}
......
......@@ -6,10 +6,9 @@ import cx from 'classnames'
import { Pagination } from 'antd'
import CommodityList from './list'
import NoResult from './noResult'
import bannerImg from '@/assets/imgs/banner_2.png'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
import './index.less'
import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import styles from './index.less'
interface filterValueType {
key: string;
......@@ -22,58 +21,88 @@ interface ShopListPropsType {
}
const ShopList: React.FC<ShopListPropsType> = (props) => {
const FilterStore = useLocalStore(() => store.FilterStore)
const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
const { query: { search = "" } } = props.location
const [showType, setShowType] = useState<number>(1) // 展示方式:1:矩阵排列; 2:列表排列
const [filterList, setFilterList] = useState([])
const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.useArea, FILTER_TYPE.activeStores, FILTER_TYPE.newJoin]
const handleFilter = (filterValue: filterValueType) => {
let filteState = filterList.some(item => item.type === filterValue.type)
let tempFilterList = [...filterList]
if (filteState) {
tempFilterList = tempFilterList.map(item => {
if (item.type === filterValue.type) {
return filterValue
}
return item
})
} else {
tempFilterList = [...tempFilterList, filterValue]
}
setFilterList(tempFilterList)
/**
* 重置筛选
*/
const handleResetFilter = () => {
onResetFilter()
}
const handleDeleteFilterItem = (key: string) => {
let tempFilterList = [...filterList]
tempFilterList = tempFilterList.filter(item => String(item.key) !== String(key))
setFilterList(tempFilterList)
const handleDeleteFilterItem = (item: any) => {
onDeleteFilterItem(item.key, item.type)
}
/**
* 重置筛选
*/
const handleResetFilter = () => {
setFilterList([])
* 排序
*/
const handleSort = (type: FILTER_TYPE) => {
switch (type) {
case FILTER_TYPE.creditSort:
/**
* 判断当前筛选项是否含有信用排序的筛选
*/
if (filterList.some(item => item.type === FILTER_TYPE.creditSortHighToLow)) {
onFilter({
key: null,
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
onFilter({
key: 'creditSortLowToHigh',
title: '信用从低到高',
type: FILTER_TYPE.creditSortLowToHigh,
})
} else if (filterList.some(item => item.type === FILTER_TYPE.creditSortLowToHigh)) {
onFilter({
key: null,
title: '信用从低到高',
type: FILTER_TYPE.creditSortLowToHigh,
})
onFilter({
key: 'creditSortHighToLow',
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
} else {
onFilter({
key: 'creditSortHighToLow',
title: '信用从高到低',
type: FILTER_TYPE.creditSortHighToLow,
})
}
break
default:
break
}
}
return (
<div className="commodity">
<div className="mall_container">
<div className="commodity_container">
<div className={styles.commodity}>
<div className={styles.mall_container}>
<div className={styles.commodity_container}>
<Filter filterConfig={filterConfig} />
<div className="commodity_main">
<div className="tool_bar">
<div className="tool_bar_left">
<div className="tool_bar_filter_item">
<div className={styles.commodity_main}>
<div className={styles.tool_bar}>
<div className={styles.tool_bar_left}>
<div className={styles.tool_bar_filter_item} onClick={() => handleSort(FILTER_TYPE.creditSort)}>
<span>信用</span>
<i className="icon">
<img src={arrowDownIcon} />
</i>
<div className={styles.price_filter_box}>
<CaretUpOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.creditSortLowToHigh) ? styles.active : '')} />
<CaretDownOutlined className={cx(styles.icon, filterList.some(item => item.type === FILTER_TYPE.creditSortHighToLow) ? styles.active : '')} />
</div>
</div>
</div>
<div className="tool_bar_right">
<div className="count">
<div className={styles.tool_bar_right}>
<div className={styles.count}>
<span></span>
<label>43</label>
<span>个店铺</span>
......@@ -81,10 +110,29 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
</div>
</div>
{
filterList && filterList.length > 0 && (
<div className={styles.filter_bar}>
<div className={styles.filter_bar_left}>
<div className={styles.filter_bar_left_text} onClick={handleResetFilter}>重置</div>
</div>
<div className={styles.filter_bar_list}>
{
filterList.map(item => (
<div className={styles.filter_bar_list_item} key={item.key}>
<span className={styles.filter_bar_list_item_text}>{item.title}</span>
<CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item)} />
</div>
))
}
</div>
</div>
)
}
{
!!search ? <NoResult search={search} /> : (
<>
<CommodityList showType={showType} />
<div className="pagination_wrap">
<div className={styles.pagination_wrap}>
<Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</>
......@@ -97,4 +145,4 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {
)
}
export default ShopList
export default observer(ShopList)
import React from 'react'
import styles from './index.less'
const Commodity: React.FC = () => {
return (
<div>
Commodity
</div>
)
}
export default Commodity
.collection_wrap {
position: relative;
background: #ffffff;
border-radius: 8px;
min-height: 74vh;
padding: 0 24px;
.collection_tabs {
position: relative;
:global {
.ant-tabs-nav::before {
display: none;
}
}
}
}
.pagination_wrap {
text-align: right;
margin-top: 24px;
padding-bottom: 32px;
}
.shops_list {
&_item {
position: relative;
display: flex;
margin-bottom: 16px;
&_item {
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
&.morehalf {
flex: 1.5;
}
.shop_header_info {
position: relative;
display: flex;
&_logo {
border-radius: 4px;
overflow: hidden;
width: 72px;
height: 72px;
margin-right: 16px;
&>img {
width: 72px;
height: 72px;
}
}
&_content {
position: relative;
&_name {
font-size: 14px;
color: #333333;
font-weight: 500;
}
&_about {
display: flex;
margin-top: 10px;
&_item {
// flex: 1;
display: flex;
align-items: center;
margin-right: 16px;
&>span {
font-size: 14px;
color: #333333;
line-height: 20px;
&.red {
color: #D32F2F;
margin-right: 4px;
}
}
&>.icon {
position: relative;
top: -1px;
overflow: hidden;
margin-right: 5px;
&>img {
width: 20px;
height: 20px;
}
}
}
}
&_icon {
color: #cccccc;
font-size: 12px;
margin-left: 6px;
}
}
}
.date {
color: #909399;
font-size: 12px;
}
.collection_state {
font-size: 14px;
color: #00B37A;
cursor: pointer;
&>label {
margin-left: 4px;
cursor: pointer;
}
}
.rate_wrap {
font-size: 12px;
:global {
.ant-rate {
font-size: 14px;
}
}
}
.level_icon {
width: 54px;
height: 16px;
margin-bottom: 4px;
display: block;
background-size: 100% 100%;
background-repeat: no-repeat;
&.level3 {
background-image: url(/static/imgs/level2@2x.png);
}
}
}
}
}
.information_list {
&_item {
position: relative;
display: flex;
margin-bottom: 16px;
&_item {
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
&.morehalf {
flex: 4;
}
.information_header_info {
position: relative;
display: flex;
&_logo {
border-radius: 4px;
overflow: hidden;
width: 108px;
height: 72px;
margin-right: 16px;
&>img {
width: 108px;
height: 72px;
}
}
&_content {
position: relative;
&_name {
font-size: 14px;
color: #333333;
font-weight: 500;
height: 44px;
line-height: 22px;
max-width: 375px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
word-wrap: break-word;
word-break: break-all;
}
&_about {
display: flex;
margin-top: 6px;
&_item {
// flex: 1;
display: flex;
align-items: center;
margin-right: 16px;
font-size: 12px;
color: #999999;
&>span {
margin-left: 4px;
}
}
}
&_icon {
color: #cccccc;
font-size: 12px;
margin-left: 6px;
}
}
}
.date {
color: #909399;
font-size: 12px;
}
.collection_state {
font-size: 14px;
color: #00B37A;
cursor: pointer;
&>label {
margin-left: 4px;
cursor: pointer;
}
}
}
}
}
\ No newline at end of file
import React from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import Commodity from './commodity'
import Infomation from './information'
import Shops from './shops'
import { Tabs } from 'antd'
import styles from './index.less'
const { TabPane } = Tabs
const Collection: React.FC = () => {
return (
<PageHeaderWrapper>
<div className={styles.collection_wrap}>
<Tabs defaultActiveKey="information" className={styles.collection_tabs} >
<TabPane tab="商品收藏" key="commodity">
<Commodity />
</TabPane>
<TabPane tab="店铺收藏" key="shops">
<Shops />
</TabPane>
<TabPane tab="资讯收藏" key="information">
<Infomation />
</TabPane>
</Tabs>
</div>
</PageHeaderWrapper>
)
}
export default Collection
\ No newline at end of file
import React from 'react'
import cx from 'classnames'
import { Pagination } from 'antd'
import { StarFilled, EyeOutlined, ClockCircleOutlined } from '@ant-design/icons'
import styles from './index.less'
const Information: React.FC = () => {
let infomationList = Array.apply({}, new Array(7))
return (
<>
<div className={styles.information_list}>
{
infomationList.map((item, index) => (
<div className={styles.information_list_item} key={`information_list_item_${index}`}>
<div className={cx(styles.information_list_item_item, styles.morehalf)}>
<div className={styles.information_header_info}>
<div className={styles.information_header_info_logo}>
<img src="https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/69f3f329d5a848119dc89029a10acb081600332395671.jpg" />
</div>
<div className={styles.information_header_info_content}>
<div className={styles.information_header_info_content_name}>
<span>B2B供应链电商系统平台解决方案,如何实现全网整合全网</span>
</div>
<div className={styles.information_header_info_content_about}>
<div className={styles.information_header_info_content_about_item}>
<ClockCircleOutlined />
<span>2019-09-25</span>
</div>
<div className={styles.information_header_info_content_about_item}>
<EyeOutlined />
<span>11,245</span>
</div>
</div>
</div>
</div>
</div>
<div className={cx(styles.information_list_item_item)}>
<span className={styles.date}>2020-10-25 10:58</span>
</div>
<div className={cx(styles.information_list_item_item)}>
<div className={cx(styles.collection_state)}>
<StarFilled />
<label>收藏</label>
</div>
</div>
</div>
))
}
</div>
<div className={styles.pagination_wrap}>
<Pagination showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</>
)
}
export default Information
import React from 'react'
import cx from 'classnames'
import { Rate, Pagination } from 'antd'
import { StarFilled } from '@ant-design/icons'
import shop_icon from '@/assets/imgs/shop_icon.png'
import credit_icon from '@/assets/imgs/credit_icon.png'
import styles from './index.less'
const Shops: React.FC = () => {
let shopList = Array.apply({}, new Array(7))
return (
<>
<div className={styles.shops_list}>
{
shopList.map((item, index) => (
<div className={styles.shops_list_item} key={`shops_list_item_${index}`}>
<div className={cx(styles.shops_list_item_item, styles.morehalf)}>
<div className={styles.shop_header_info}>
<div className={styles.shop_header_info_logo}>
<img src="https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/69f3f329d5a848119dc89029a10acb081600332395671.jpg" />
</div>
<div className={styles.shop_header_info_content}>
<div className={styles.shop_header_info_content_name}>
<span>温州市龙昌皮业有限公司</span>
</div>
<div className={styles.shop_header_info_content_about}>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={shop_icon} /></i>
<span className={styles.red}>2</span>
<span></span>
</div>
<div className={styles.shop_header_info_content_about_item}>
<i className={styles.icon}><img src={credit_icon} /></i>
<span>1288</span>
</div>
</div>
</div>
</div>
</div>
<div className={cx(styles.shops_list_item_item)}>
<i className={cx(styles.level_icon, styles.level3)}></i>
<div className={styles.rate_wrap}>
<span>满意度:</span>
<Rate disabled defaultValue={2} />
</div>
</div>
<div className={cx(styles.shops_list_item_item)}>
<span className={styles.date}>2020-10-25 10:58</span>
</div>
<div className={cx(styles.shops_list_item_item)}>
<div className={cx(styles.collection_state)}>
<StarFilled />
<label>收藏</label>
</div>
</div>
</div>
))
}
</div>
<div className={styles.pagination_wrap}>
<Pagination showSizeChanger={false} defaultCurrent={1} total={100} />
</div>
</>
)
}
export default Shops
......@@ -25,12 +25,14 @@ const AddRule:React.FC<{}> = (props) => {
// 整体表单提交
const formSubmit = async (values) => {
// const params = omit(values, ['NO_SUBMIT3'])
console.log(values, 'values')
// await PublicApi.postOrderTradingRulesAdd(params)
// setTimeout(() => {
// history.goBack(-1)
// }, 1000)
values.products = values.products.map(item => ({ productId: item.id, productName: item.name, category: item.customerCategoryName, productPrice: item.priceType, brand: item.brandName }))
values.isElectronicContract = values.isElectronicContract ? 1 : 0
const params = omit(values, ['state']) // 移除不需要的字段
console.log(values, params, 'values')
await PublicApi.postOrderTradingRulesAdd(params)
setTimeout(() => {
history.goBack(-1)
}, 1000)
}
return (
......
......@@ -20,6 +20,7 @@ import SearchSelect from '@/components/NiceForm/components/SearchSelect'
import Search from '@/components/NiceForm/components/Search'
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
import Submit from '@/components/NiceForm/components/Submit'
import SelectProcesss from './selectProcesss'
export interface RuleSettingProps {
addSchemaAction: ISchemaFormActions,
......@@ -31,7 +32,7 @@ export interface RuleSettingProps {
const RuleSetting:React.FC<RuleSettingProps> = (props) => {
const { addSchemaAction, schema, formSubmit, onFieldChange = () => {} } = props
const [visibleChannelRroduct, setVisibleChannelRroduct] = useState(false)
const [productRowSelection, productRowCtl] = useRowSelectionTable({customKey: 'productId'})
const [productRowSelection, productRowCtl] = useRowSelectionTable({customKey: 'id'})
const {
id,
......@@ -43,12 +44,20 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
// useUnitPreview(initValue, addSchemaAction)
const fetchProductList = async (params) => {
const tradingRulesId = addSchemaAction.getFieldValue('transactionProcesssId')
const res = await PublicApi.getOrderTradingRulesProductList({
...params,
tradingRulesId,
})
return res.data
const shopIds = addSchemaAction.getFieldValue('shopIds')
if(shopIds.length){
let shopInfo: any = GlobalConfig.web.shopInfo.filter(item => item.id === shopIds[0])
const res = await PublicApi.getProductCommodityCommonGetCommodityDetailList({
...params,
shopType: shopInfo[0].type,
environment: shopInfo[0].environment,
})
return res.data
}else{
message.error('请先选择适用商城!')
return []
}
}
// table删除商品
......@@ -74,35 +83,43 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
const tableColumns = [
{
dataIndex: 'productId',
dataIndex: 'id',
title: 'ID',
key: 'productId'
key: 'id'
},
{
dataIndex: 'productName',
dataIndex: 'name',
title: '商品名称',
key: 'productName',
render: (_, record) => <EyePreview url={`/memberCenter/commodityAbility/commodity/products/viewProducts?id=${record.productId}`}>{_}</EyePreview>
key: 'name',
render: (_, record) => <EyePreview url={`/memberCenter/commodityAbility/commodity/products/viewProducts?id=${record.id}`}>{_}</EyePreview>
},
{
dataIndex: 'category',
dataIndex: 'customerCategoryName',
title: '品类',
key: 'category'
key: 'customerCategoryName'
},
{
dataIndex: 'brand',
dataIndex: 'brandName',
title: '品牌',
key: 'brand'
key: 'brandName'
},
{
dataIndex: 'productPrice',
title: '商品定价',
key: 'productPrice'
dataIndex: 'priceType',
title: '商品定价',
key: 'priceType',
render: (text:any, reocrd:any)=>{
if(text===1)
return '现货价格'
else if(text===2)
return '价格需要询价'
else if(text===3)
return '积分兑换商品'
},
},
{
dataIndex: 'ctl',
title: '操作',
render: (_, record) => <Button type='link' onClick={() => handleDeleteTable(record.productId)}>删除</Button>
render: (_, record) => <Button type='link' onClick={() => handleDeleteTable(record.id)}>删除</Button>
}
]
......@@ -123,29 +140,37 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
const columnsSetProduct: any[] = [
{
dataIndex: 'productId',
dataIndex: 'id',
title: 'ID',
key: 'productId'
key: 'id'
},
{
dataIndex: 'productName',
dataIndex: 'name',
title: '商品名称',
key: 'productName'
key: 'name'
},
{
dataIndex: 'category',
dataIndex: 'customerCategoryName',
title: '品类',
key: 'category'
key: 'customerCategoryName'
},
{
dataIndex: 'brand',
dataIndex: 'brandName',
title: '品牌',
key: 'brand'
key: 'brandName'
},
{
dataIndex: 'productPrice',
dataIndex: 'priceType',
title: '商品定价',
key: 'productPrice'
key: 'priceType',
render: (text:any, reocrd:any)=>{
if(text===1)
return '现货价格'
else if(text===2)
return '价格需要询价'
else if(text===3)
return '积分兑换商品'
},
},
]
......@@ -153,7 +178,7 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
const formProduct: ISchema = {
type: 'object',
properties: {
productName: {
name: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
......@@ -176,7 +201,7 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
},
},
properties: {
categoryId: {
customerCategoryId: {
type: 'string',
"x-component": 'SearchSelect',
"x-component-props": {
......@@ -223,6 +248,9 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
tableColumns,
tableAddButton,
}}
components={{
SelectProcesss,
}}
effects={($, { setFieldState }) => {
FormEffectHooks.onFormInputChange$().subscribe(() => {
onFieldChange()
......@@ -252,12 +280,15 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
{
ctx: {
schema: formProduct,
components: { ModalSearch: Search, SearchSelect, Submit } ,
components: {
ModalSearch: Search,
SearchSelect, Submit,
} ,
effects: ($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'productName',
'name',
FORM_FILTER_PATH,
);
}
......@@ -265,7 +296,7 @@ const RuleSetting:React.FC<RuleSettingProps> = (props) => {
}
}
tableProps={{
rowKey: 'productId'
rowKey: 'id'
}}
/>
......
import React, { useState, useRef, useEffect } from 'react'
import styled from 'styled-components'
import { ISchemaFormProps, ISchemaFieldProps, ISchemaFieldComponentProps, createFormActions, useFieldState } from '@formily/antd'
import { Button, Space, Row, Col, Tag } from 'antd'
import { PlusOutlined, DeleteColumnOutlined, EditOutlined, DeleteOutlined, CaretUpOutlined, CaretDownOutlined, EyeOutlined } from '@ant-design/icons'
import cx from 'classnames'
import { PublicApi } from '@/services/api'
const SelectStyles = styled((props) => <div className='select-list' {...props}></div>)`
.select_style_border {
border: 1px solid #EBECF0;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
cursor: pointer;
line-height: 28px;
position:relative;
}
.select_style_border.active {
border: 1px solid #00B382;
}
.select_style_border.active::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid #00B37A;
border-left: 12px solid transparent;
bottom: 0;
right: 0;
z-index: 5;
}
`
enum ProcessTagColor {
'red',
'orange',
'purple',
'blue'
}
enum ProcessTagType {
'订单交易流程',
'售后换货流程',
'售后退货流程',
'售后维修流程'
}
const SelectProcesss = (props: ISchemaFieldComponentProps) => {
const [formInitValue, setFormInitValue] = useState<any>(null)
const [state, setFieldState] = useFieldState({
dataSource: [],
showMore: false
})
const { dataSource, showMore } = state
const { value, mutators, editable } = props
useEffect(() => {
PublicApi.getOrderTradingRulesTransactionProcessList().then(res => {
setFieldState({
dataSource: res.data,
showMore
})
})
}, [])
const showDataSource = showMore ? dataSource : [...dataSource].splice(0, 3)
const handleCheck = (id) => {
if (editable) {
mutators.change(id)
}
}
const toogleMore = () => {
setFieldState({
dataSource,
showMore: !showMore
})
}
const renderProcessType = (v: any) => {
return <Tag color={ProcessTagColor[v.type-1]}>
{ProcessTagType[v.type-1]}
</Tag>
}
return (
<div style={{width: '100%'}}>
<SelectStyles>
{
showDataSource.map(v => <div key={v.id} onClick={() => handleCheck(v.id)} className={cx('select_style_border', value === v.id ? 'active' : '')}>
<div>
<Row style={{color: '#172B4D'}}>
<Col>{v.name}</Col>
<Col style={{marginLeft: 6}}>
{
renderProcessType(v)
}
</Col>
</Row>
<div style={{color: '#6B778C'}}>{v.explain}</div>
</div>
</div>)
}
</SelectStyles>
{ dataSource.length > 3 &&
<div onClick={toogleMore} style={{textAlign: 'center', cursor: 'pointer'}}>
显示更多{showMore ? <CaretDownOutlined /> : <CaretUpOutlined/>}
</div>
}
</div>
)
}
SelectProcesss.defaultProps = {}
SelectProcesss.isFieldComponent = true;
export default SelectProcesss
\ No newline at end of file
......@@ -52,13 +52,30 @@ export const ruleDetailSchema: ISchema = padRequiredMessage({
"transactionProcesssId": {
type: 'string',
title: '流程选择',
required: true,
"x-component": 'SearchSelect',
"x-component": 'SelectProcesss',
"x-mega-props": {
style: {
full: true
}
},
"x-component-props": {
placeholder: '请选择交易流程',
className: 'fixed-ant-selected-down',
fetchSearch: PublicApi.getOrderTradingRulesTransactionProcessList,
dataSource: []
},
"x-rules": [
{
required: true,
message: '请选择收货方式'
}
],
// required: true,
// "x-component": 'SearchSelect',
// "x-component-props": {
// placeholder: '请选择交易流程',
// className: 'fixed-ant-selected-down',
// fetchSearch: PublicApi.getOrderTradingRulesTransactionProcessList,
// },
},
MEGA_LAYOUT1_1: {
type: 'object',
......@@ -110,7 +127,8 @@ export const ruleDetailSchema: ISchema = padRequiredMessage({
"type": "array:number",
"x-component": 'CardCheckBox',
"x-component-props": {
dataSource: GlobalConfig.web.shopInfo
dataSource: GlobalConfig.web.shopInfo,
type: 'radio' // CardCheckBox 单选模式
},
"title": "适用商城",
required: true,
......
......@@ -128,9 +128,11 @@ class FilterStore {
case FILTER_TYPE.commodityType:
tempFilterParam.priceType = filterItem.key
break
case FILTER_TYPE.minPoints:
case FILTER_TYPE.minPrice:
tempFilterParam.Min = filterItem.key
break
case FILTER_TYPE.maxPoints:
case FILTER_TYPE.maxPrice:
tempFilterParam.Max = filterItem.key
break
......@@ -165,7 +167,6 @@ class FilterStore {
if (JSON.stringify(this.filterParam) === JSON.stringify(tempFilterParam)) {
return
}
this.filterParam = tempFilterParam
}
......
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