Skip to content

J
jinfa-mall
Commit e1fecc6e authored by GuanHua's avatar GuanHua
Browse files
Options

fix: 修改商品列表价格筛选样式

parent 6a0ad3c7
Hide whitespace changes
Inline Side-by-side
Showing with 224 additions and 108 deletions
apps/b2b/web/components/Filter/components/Points/index.less
View file @ e1fecc6e
......@@ -15,20 +15,46 @@
.price_range {
flex: 1;
display: flex;
align-items: center;
margin-right: 8px;
.price_input {
width: 72px;
height: 32px;
}
&>.split {
margin: 0 4px;
width: 24px;
text-align: center;
}
}
.confirm_btn {
background-color: #EEF0F3;
width: 60px;
height: 24px;
line-height: 24px;
background-color: #00A98F;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
&_icon {
color: #FFF;
font-size: 18px;
}
&.disabled {
background-color: #EDEEEF;
.confirm_btn_icon {
color: #dee0e2;
}
}
&:hover {
opacity: .8;
......
apps/b2b/web/components/Filter/components/Points/index.tsx
View file @ e1fecc6e
import React, { useState, useEffect } from 'react'
import { Slider } from 'antd'
import { InputNumber } from 'antd'
import { LAYOUT_TYPE } from '@/constants'
import { getSearchShopStoreGetCommodityMaxPrice } from '@/services/SearchV2Api'
import cx from 'classnames'
// import { getSearchShopStoreGetCommodityMaxPrice } from '@/services/SearchV2Api'
import { useHistory } from 'react-router-dom'
import { changeURLArg, getQueryString, useMessageIntl } from 'lingxi-utils'
import { LinkTo } from '@/utils'
// import { LinkTo } from '@/utils'
import FilterBox from '../FilterBox'
import IconFont from '@/utils/iconfont'
import styles from './index.less'
interface PricePropsType {
......@@ -20,69 +22,97 @@ interface PricePropsType {
const Points: React.FC<PricePropsType> = (props) => {
const { getMessage } = useMessageIntl()
const { layoutType = LAYOUT_TYPE.mall, shopId } = props
// const { layoutType = LAYOUT_TYPE.mall, shopId } = props
const { pathname, search } = props.location || {}
const [maxPrice, setMaxPrice] = useState<number>(900)
const [priceRange, setPriceRange] = useState<any>([0, maxPrice])
const [minPrice, setMinPrice] = useState<number>()
const [maxPrice, setMaxPrice] = useState<number>()
// const [priceRange, setPriceRange] = useState<any>([0, maxPrice])
const [confirmDisable, setConfirmDisable] = useState<boolean>(true)
const history = useHistory()
useEffect(() => {
fetchMaxPrice()
}, [])
// useEffect(() => {
// fetchMaxPrice()
// }, [])
useEffect(() => {
initPriceRange(maxPrice)
initPriceRange()
}, [search])
const initPriceRange = (maxPrice: number) => {
useEffect(() => {
if (minPrice || maxPrice) {
setConfirmDisable(false)
} else {
setConfirmDisable(true)
}
}, [minPrice, maxPrice])
const initPriceRange = () => {
if (search) {
const min = getQueryString('minPoint', search)
const max = getQueryString('maxPoint', search)
const range = [min ? Number(min) : 0, max ? Number(max) : maxPrice]
setPriceRange(range)
if (min) {
setMinPrice(Number(min))
} else {
setMinPrice(undefined)
}
if (max) {
setMaxPrice(Number(max))
} else {
setMaxPrice(undefined)
}
} else {
setPriceRange([0, maxPrice])
setMinPrice(undefined)
setMaxPrice(undefined)
}
}
const fetchMaxPrice = () => {
const param: any = {}
if (layoutType === LAYOUT_TYPE.shopScoreMall) {
param.storeId = shopId
}
getSearchShopStoreGetCommodityMaxPrice(param).then(res => {
if (res.code === 1000) {
setMaxPrice(res.data)
initPriceRange(res.data)
}
})
}
// const fetchMaxPrice = () => {
// const param: any = {}
// if (layoutType === LAYOUT_TYPE.shopScoreMall) {
// param.storeId = shopId
// }
// getSearchShopStoreGetCommodityMaxPrice(param).then(res => {
// if (res.code === 1000) {
// setMaxPrice(res.data)
// initPriceRange(res.data)
// }
// })
// }
const handlePriceChange = (value: [number, number]) => {
setPriceRange(value)
}
// const handlePriceChange = (value: [number, number]) => {
// setPriceRange(value)
// }
const handleConfirmPriceRange = () => {
let min = priceRange[0]
let max = priceRange[1]
const min = minPrice
const max = maxPrice
let url = ''
if (search) {
url = `${pathname}${search}`
if (search.indexOf('minPoint') > -1) {
url = changeURLArg(url, 'minPoint', min)
url = changeURLArg(url, 'minPoint', `${min}`)
} else {
url = `${url}&minPoint=${min}`
if (min) url = `${url}&minPoint=${min}`
}
if (search.indexOf('maxPoint') > -1) {
url = changeURLArg(url, 'maxPoint', max)
url = changeURLArg(url, 'maxPoint', `${max}`)
} else {
url = `${url}&maxPoint=${max}`
if (max) url = `${url}&maxPoint=${max}`
}
} else {
url = `${pathname}?minPoint=${min}&maxPoint=${max}`
url = `${pathname}?${min ? `minPoint=${min}` : ""}${max ? `${min ? '&' : ''}maxPoint=${max}` : ""}`
}
history.push(url)
}
const handleMinChange = (value: number) => {
setMinPrice(value)
}
LinkTo(url)
const handleMaxChange = (value: number) => {
setMaxPrice(value)
}
return (
......@@ -90,15 +120,18 @@ const Points: React.FC<PricePropsType> = (props) => {
title={getMessage('points.index.RequiredIntegralRange')}
>
<div className={styles.filter_price}>
<Slider range step={1} min={0} max={maxPrice} value={priceRange} onChange={handlePriceChange} />
<div className={styles.price_box}>
<span className={styles.price_box_brief}>{getMessage('pay.pointsMall.integral')}：</span>
<div className={styles.price_range}>
<span className={styles.price}>{priceRange[0]}</span>
<InputNumber min={0} className={styles.price_input} value={minPrice} onChange={handleMinChange} />
<span className={styles.split}>-</span>
<span className={styles.price}>{priceRange[0] === maxPrice ? '' : `${priceRange[1]}`}</span>
<InputNumber min={minPrice || 0} className={styles.price_input} value={maxPrice} onChange={handleMaxChange} />
</div>
<div className={cx(styles.confirm_btn, confirmDisable ? styles.disabled : {})} onClick={() => handleConfirmPriceRange()}>
<IconFont
className={styles.confirm_btn_icon}
type="icon-a-tubiao1"
/>
</div>
<div className={styles.confirm_btn} onClick={() => handleConfirmPriceRange()}>{getMessage('enquiryOffer.index.Sure')}</div>
</div>
</div>
</FilterBox>
......
apps/b2b/web/components/Filter/components/Price/index.less
View file @ e1fecc6e
......@@ -6,7 +6,7 @@
font-size: 14px;
color: #303133;
align-items: center;
margin-top: 20px;
margin-top: 16px;
.price_box_brief {
color: #909399;
......@@ -15,23 +15,46 @@
.price_range {
flex: 1;
display: flex;
align-items: center;
margin-right: 8px;
.price_input {
width: 72px;
height: 32px;
}
&>.split {
margin: 0 4px;
width: 24px;
text-align: center;
}
}
.confirm_btn {
background-color: #EEF0F3;
width: 60px;
height: 49px;
line-height: 24px;
background-color: #00A98F;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
&_icon {
color: #FFF;
font-size: 18px;
}
&.disabled {
background-color: #EDEEEF;
.confirm_btn_icon {
color: #dee0e2;
}
}
&:hover {
opacity: .8;
......
apps/b2b/web/components/Filter/components/Price/index.tsx
View file @ e1fecc6e
import React, { useState, useEffect } from 'react'
import { Slider } from 'antd'
import { LAYOUT_TYPE } from '@/constants'
import { getSearchShopStoreGetCommodityMaxPrice } from '@/services/SearchV2Api'
import { InputNumber } from 'antd'
import cx from 'classnames'
// import { getSearchShopStoreGetCommodityMaxPrice } from '@/services/SearchV2Api'
import { useHistory } from 'react-router-dom'
import { changeURLArg, getQueryString, useMessageIntl } from 'lingxi-utils'
import FilterBox from '../FilterBox'
import IconFont from '@/utils/iconfont'
import styles from './index.less'
interface PricePropsType {
......@@ -18,86 +20,118 @@ interface PricePropsType {
}
const Price: React.FC<PricePropsType> = (props) => {
const { layoutType = LAYOUT_TYPE.mall, shopId } = props
// const { layoutType = LAYOUT_TYPE.mall, shopId } = props
const { pathname, search } = props.location || {}
const [maxPrice, setMaxPrice] = useState<number>(900)
const [priceRange, setPriceRange] = useState<any>([0, maxPrice])
const [minPrice, setMinPrice] = useState<number>()
const [maxPrice, setMaxPrice] = useState<number>()
// const [priceRange, setPriceRange] = useState<any>([0, maxPrice])
const [confirmDisable, setConfirmDisable] = useState<boolean>(true)
const history = useHistory()
const { getMessage } = useMessageIntl()
useEffect(() => {
fetchMaxPrice()
}, [])
// useEffect(() => {
// fetchMaxPrice()
// }, [])
useEffect(() => {
initPriceRange(maxPrice)
initPriceRange()
}, [search])
const initPriceRange = (maxPrice: number) => {
const initPriceRange = () => {
if (search) {
const min = getQueryString('min', search)
const max = getQueryString('max', search)
const range = [min ? Number(min) : 0, max ? Number(max) : maxPrice]
setPriceRange(range)
if (min) {
setMinPrice(Number(min))
} else {
setMinPrice(undefined)
}
if (max) {
setMaxPrice(Number(max))
} else {
setMaxPrice(undefined)
}
} else {
setPriceRange([0, maxPrice])
setMinPrice(undefined)
setMaxPrice(undefined)
}
}
const fetchMaxPrice = () => {
const param: any = {}
if (layoutType === LAYOUT_TYPE.shop) {
param.storeId = shopId
useEffect(() => {
if (minPrice || maxPrice) {
setConfirmDisable(false)
} else {
setConfirmDisable(true)
}
getSearchShopStoreGetCommodityMaxPrice(param).then(res => {
if (res.code === 1000) {
setMaxPrice(res.data)
initPriceRange(res.data)
}
})
}
}, [minPrice, maxPrice])
const handlePriceChange = (value: [number, number]) => {
setPriceRange(value)
}
// const fetchMaxPrice = () => {
// const param: any = {}
// if (layoutType === LAYOUT_TYPE.shop) {
// param.storeId = shopId
// }
// getSearchShopStoreGetCommodityMaxPrice(param).then(res => {
// if (res.code === 1000) {
// setMaxPrice(res.data)
// initPriceRange(res.data)
// }
// })
// }
// const handlePriceChange = (value: [number, number]) => {
// setPriceRange(value)
// }
const handleConfirmPriceRange = () => {
let min = priceRange[0]
let max = priceRange[1]
const min = minPrice
const max = maxPrice
let url = ''
if (search) {
url = `${pathname}${search}`
if (search.indexOf('min') > -1) {
url = changeURLArg(url, 'min', min)
url = changeURLArg(url, 'min', `${min}`)
} else {
url = `${url}&min=${min}`
if (min) url = `${url}&min=${min}`
}
if (search.indexOf('max') > -1) {
url = changeURLArg(url, 'max', max)
url = changeURLArg(url, 'max', `${max}`)
} else {
url = `${url}&max=${max}`
if (max) url = `${url}&max=${max}`
}
} else {
url = `${pathname}?min=${min}&max=${max}`
url = `${pathname}?${min ? `min=${min}` : ""}${max ? `${min ? '&' : ''}max=${max}` : ""}`
}
history.push(url)
}
const handleMinChange = (value: number) => {
setMinPrice(value)
}
const handleMaxChange = (value: number) => {
setMaxPrice(value)
}
return (
<FilterBox
title={getMessage('filter.index.price')}
>
<div className={styles.filter_price}>
<Slider range step={1} min={0} max={maxPrice} value={priceRange} onChange={handlePriceChange} />
<div className={styles.price_box}>
<span className={styles.price_box_brief}>{getMessage('filter.index.price')}：</span>
<div className={styles.price_range}>
<span className={styles.price}>￥{priceRange[0]}</span>
<InputNumber min={0} className={styles.price_input} value={minPrice} placeholder='￥' onChange={handleMinChange} />
<span className={styles.split}>-</span>
<span className={styles.price}>{priceRange[0] === maxPrice ? `￥0` : `￥${priceRange[1]}`}</span>
<InputNumber min={minPrice || 0} className={styles.price_input} value={maxPrice} placeholder='￥' onChange={handleMaxChange} />
</div>
<div className={cx(styles.confirm_btn, confirmDisable ? styles.disabled : {})} onClick={() => handleConfirmPriceRange()}>
<IconFont
className={styles.confirm_btn_icon}
type="icon-a-tubiao1"
/>
</div>
<div className={styles.confirm_btn} onClick={() => handleConfirmPriceRange()}>{getMessage('enquiryOffer.index.Sure')}</div>
</div>
</div>
</FilterBox>
......
apps/b2b/web/components/SideNav/index.tsx
View file @ e1fecc6e
......@@ -12,7 +12,7 @@ import toTopArrowIcon from './to_top_arrow_icon.png'
import styles from './index.less'
import BuyList from './buyList'
import { GlobalConfig } from '@/global/config'
import { useMessageIntl } from 'lingxi-utils'
import { useMessageIntl } from 'lingxi-utils'
interface SideNavProps {
anchorList?: any[],
......
apps/b2b/web/page/order/index.tsx
View file @ e1fecc6e
......@@ -170,7 +170,7 @@ const Order: SFC<OrderPropsType> = (props) => {
if (!spamId) return
const result = []
const sessionOrderInfo: any = await getOrderInfo(spamId)
console.log(sessionOrderInfo, 'sessionOrderInfo')
if (!sessionOrderInfo) {
message.error(getMessage('order.index.noOrder'))
history.goBack()
......
apps/b2b/web/page/pay/components/EBank/index.tsx
View file @ e1fecc6e
......@@ -29,7 +29,7 @@ const EBank: React.FC<EBankProps> = (props) => {
centered: true,
onOk: () => {
console.log(tradeCode, 'tradeCode')
LinkTo(`/pay/result?orderId=${orderId[0]}`, 'replace')
LinkTo(`/pay/result?orderId=${orderId[0]}&type=2`, 'replace')
}
})
}
......
apps/b2b/web/utils/iconfont.ts
View file @ e1fecc6e
import { createFromIconfontCN } from '@ant-design/icons'
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1971099_mp694u6aul.js', // 在 iconfont.cn 上生成
scriptUrl: '//at.alicdn.com/t/font_1971099_4pyva795w1i.js', // 在 iconfont.cn 上生成
});
export default IconFont
apps/channel/web/utils/iconfont.ts
View file @ e1fecc6e
import { createFromIconfontCN } from '@ant-design/icons'
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1971099_mp694u6aul.js', // 在 iconfont.cn 上生成
scriptUrl: '//at.alicdn.com/t/font_1971099_4pyva795w1i.js', // 在 iconfont.cn 上生成
});
export default IconFont
apps/self/web/utils/iconfont.ts
View file @ e1fecc6e
import { createFromIconfontCN } from '@ant-design/icons'
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1971099_mp694u6aul.js', // 在 iconfont.cn 上生成
scriptUrl: '//at.alicdn.com/t/font_1971099_4pyva795w1i.js', // 在 iconfont.cn 上生成
});
export default IconFont
demo.js
View file @ e1fecc6e
......@@ -9,21 +9,21 @@ const mockData = {
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: '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'
// }
{
name: '한국어-KO',
key: 'ko-KR',
icon: 'http://lingxi-frontend-test.oss-cn-hangzhou.aliyuncs.com/images/koren.png'
}
]
}
}
......
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