✨ feat(下拉菜单): 下拉菜单组件50%
This commit is contained in:
xuan
parent
d00604b3f0
commit
47a13a4365
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"symbol_url": "//at.alicdn.com/t/c/font_3619513_1msan9t0ewxk.js",
|
"symbol_url": "//at.alicdn.com/t/c/font_3619513_j3kxbij3zac.js",
|
||||||
"save_dir": "./src/components/iconfont",
|
"save_dir": "./src/components/iconfont",
|
||||||
"trim_icon_prefix": "",
|
"trim_icon_prefix": "",
|
||||||
"default_icon_size": 18,
|
"default_icon_size": 36,
|
||||||
"design_width": 750
|
"design_width": 750
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,18 @@
|
|||||||
.dropDownItem{
|
.dropDownItem{
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&--title{
|
||||||
|
position: relative;
|
||||||
|
z-index: 2000;
|
||||||
|
background-color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24px 0;
|
||||||
|
&--text{
|
||||||
|
display: block;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,23 +2,25 @@ import { View, Text } from '@tarojs/components'
|
|||||||
import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
|
import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import Iconfont from '../iconfont/iconfont'
|
import Iconfont, { IconNames } from '../iconfont/iconfont'
|
||||||
|
import Popup from '../popup'
|
||||||
|
import FilterButton from '../filterButton'
|
||||||
// 弹窗选择向上弹窗还是向下弹窗
|
// 弹窗选择向上弹窗还是向下弹窗
|
||||||
type Direction = 'up' | 'down'
|
type Direction = 'up' | 'down'
|
||||||
// 配置 菜单可选项
|
// 配置 菜单可选项
|
||||||
type Options = {
|
export type DropDownOptions = {
|
||||||
text: string
|
text: string
|
||||||
value: number
|
value: number
|
||||||
}
|
}
|
||||||
|
|
||||||
interface DropDownEvent {
|
interface DropDownEvent {
|
||||||
change: (value: Options['value']) => void // value 变化时触发
|
change?: (value: DropDownOptions['value']) => void // value 变化时触发
|
||||||
}
|
}
|
||||||
|
|
||||||
interface PropsType extends DropDownEvent{
|
interface PropsType extends DropDownEvent{
|
||||||
direction?: Direction
|
direction?: Direction
|
||||||
title: string // 已选中的菜单标题
|
title: string // 已选中的菜单标题
|
||||||
options?: Options[]
|
options?: DropDownOptions[]
|
||||||
value?: number | string // 当前选中的值
|
value?: number | string // 当前选中的值
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
activeColor?: string
|
activeColor?: string
|
||||||
@ -27,27 +29,59 @@ interface PropsType extends DropDownEvent{
|
|||||||
export default (props: PropsType) => {
|
export default (props: PropsType) => {
|
||||||
const { children, direction = 'down', title, value, options, change, activeColor } = props
|
const { children, direction = 'down', title, value, options, change, activeColor } = props
|
||||||
|
|
||||||
const defaultOptions = () => {
|
const [showPopup, setShowPopup] = useState(false)
|
||||||
|
|
||||||
|
const handleClickOption = (value: DropDownOptions['value']) => {
|
||||||
|
|
||||||
|
change?.(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultOptions = useMemo(() => {
|
||||||
|
const currentValue = value
|
||||||
return options?.map(({text, value})=>{
|
return options?.map(({text, value})=>{
|
||||||
return (
|
return (
|
||||||
<View>
|
<FilterButton isActive={currentValue === value} onClick={() => handleClickOption(value)}>
|
||||||
<Text>{text}</Text>
|
{text}
|
||||||
<Iconfont name='icon-bianji' size={40} color={value !== options[0].value ? activeColor : '#333'}></Iconfont>
|
</FilterButton>
|
||||||
</View>
|
|
||||||
)
|
)
|
||||||
|
|
||||||
})
|
})
|
||||||
|
}, [value])
|
||||||
|
|
||||||
|
const getIconName = () => {
|
||||||
|
if(direction === 'up'){
|
||||||
|
return showPopup ? 'icon-zhankai1' : 'icon-shouqi1'
|
||||||
|
}
|
||||||
|
// down
|
||||||
|
return showPopup ? 'icon-shouqi1' : 'icon-zhankai1'
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClickTitle = () => {
|
||||||
|
setShowPopup(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClosePopup = () => {
|
||||||
|
setShowPopup(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className={styles.dropDownItem}>
|
<View className={styles.dropDownItem}>
|
||||||
<View >
|
<View className={styles['dropDownItem--title']} onClick={handleClickTitle}>
|
||||||
<Text className='' style={{ color: activeColor }}>
|
<Text className={styles['dropDownItem--title--text']} style={{ color: activeColor }}>
|
||||||
{title}
|
{title}
|
||||||
</Text>
|
</Text>
|
||||||
<Iconfont name='icon-bianji' size={40} color={value !== options![0].value ? activeColor : '#333'}></Iconfont>
|
<Iconfont name={getIconName()} size={20} color={value !== options![0].value ? activeColor : '#333'}></Iconfont>
|
||||||
</View>
|
</View>
|
||||||
{children ? children : defaultOptions()}
|
<Popup
|
||||||
|
onClose={handleClosePopup}
|
||||||
|
show={showPopup}
|
||||||
|
showTitle={false}
|
||||||
|
safeAreaInsetBottom={false}
|
||||||
|
customStyle={{ position: 'absolute', top: 'unset' }}
|
||||||
|
overlayStyle={{ position: 'absolute', top: 'unset' }}
|
||||||
|
position={direction === 'down' ? 'top' : 'bottom'}>
|
||||||
|
{children ? children : defaultOptions}
|
||||||
|
</Popup>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,7 +24,7 @@ function hex2rgb(hex) {
|
|||||||
return "rgb(" + rgb.join(",") + ")";
|
return "rgb(" + rgb.join(",") + ")";
|
||||||
}
|
}
|
||||||
|
|
||||||
export type IconNames = 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
|
export type IconNames = 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
|
||||||
|
|
||||||
type PropsType = {
|
type PropsType = {
|
||||||
name: IconNames;
|
name: IconNames;
|
||||||
@ -36,7 +36,7 @@ type PropsType = {
|
|||||||
|
|
||||||
const IconFont:FC<PropsType> = ({
|
const IconFont:FC<PropsType> = ({
|
||||||
name,
|
name,
|
||||||
size = 18,
|
size = 36,
|
||||||
color,
|
color,
|
||||||
customStyle = {},
|
customStyle = {},
|
||||||
customClassName = ""
|
customClassName = ""
|
||||||
@ -82,7 +82,43 @@ const IconFont:FC<PropsType> = ({
|
|||||||
className={classnames(icon, customClassName)}
|
className={classnames(icon, customClassName)}
|
||||||
/>
|
/>
|
||||||
)} */}
|
)} */}
|
||||||
{/* icon-zhankai */}
|
{/* icon-zhankai1 */}
|
||||||
|
|
||||||
|
{ name === 'icon-zhankai1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 954.181818L1442.909091 46.545455H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-shouqi1 */}
|
||||||
|
|
||||||
|
{ name === 'icon-shouqi1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 69.818182l698.181818 907.636363H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-shouhou1 */}
|
||||||
|
|
||||||
|
{ name === 'icon-shouhou1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M563.584 256C694.144 256 800 361.84 800 492.416v23.168C800 646.144 694.16 752 563.584 752H256l72.64-65.92A235.728 235.728 0 0 1 256 515.6v-23.168C256 361.856 361.84 256 492.416 256h71.168z m-109.76 198.4a49.52 49.52 0 0 0-49.456 49.6c0 27.392 22.144 49.6 49.44 49.6a49.52 49.52 0 0 0 49.472-49.6c0-27.392-22.144-49.6-49.456-49.6z m148.352 0a49.52 49.52 0 0 0-49.44 49.6c0 27.392 22.128 49.6 49.44 49.6a49.52 49.52 0 0 0 49.456-49.6c0-27.392-22.144-49.6-49.44-49.6z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' opacity='.95' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-cangku1 */}
|
||||||
|
|
||||||
|
{ name === 'icon-cangku1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M565.6 251.968l2.96 2.64 2.432 2.352 231.664 233.248c11.632 11.712 11.68 27.536 3.952 43.904a20 20 0 0 1-16 11.344l-2.08 0.112H754.4V738.56a43.424 43.424 0 0 1-38.56 43.152l-2.72 0.224-2.096 0.048H313.2a43.408 43.408 0 0 1-43.312-40.784l-0.08-2.64-0.016-193.024h-34.032a20 20 0 0 1-16.208-8.256l-1.152-1.792-0.752-1.456c-7.024-14.992-8.176-28.96 0.24-41.056l1.824-2.4 1.792-1.936 230.368-231.952a83.824 83.824 0 0 1 113.712-4.736zM576.976 592h-129.984a25.008 25.008 0 0 0 0 50h130a25.008 25.008 0 0 0 0-50z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-saoma */}
|
||||||
|
|
||||||
|
{ name === 'icon-saoma' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(89,102,247)'}' /%3E%3Cpath d='M302 592v130h129.984l0.016 40h-150c-11.04 0-20-8.96-20-20V592h40z m460 0v150c0 11.04-8.96 20-20 20H592v-40h130V592h40z m0-100v40h-500v-40h500z m-20-230c11.04 0 20 8.96 20 20V432h-40v-130H592v-40h150z m-310 0v40h-130V432h-40v-150c0-11.04 8.96-20 20-20H432z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-dizhi1 */}
|
||||||
|
|
||||||
|
{ name === 'icon-dizhi1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M512 222c127.04 0 230 102.976 230 230 0 51.2-25.28 110.896-75.328 180.928l-3.536 4.896-3.648 4.976-6.512 8.704-6.816 8.912-7.04 8.96-7.28 9.056-7.52 9.152-7.728 9.216-4.016 4.736-10.176 11.744-2.128 2.432-8.512 9.584-8.736 9.696-9.008 9.792-9.232 9.92-9.488 10.016-9.28 9.648-19.232 21.12a20 20 0 0 1-28.4 1.168l-1.168-1.184-18.88-20.72-9.728-10.144-9.488-10.016-9.248-9.92-8.992-9.808-8.72-9.648-4.32-4.864-8.4-9.536-10.08-11.712-9.808-11.68-7.52-9.168-7.296-9.056-6.992-8.928-3.44-4.448-3.392-4.464-6.48-8.656c-54.768-74.24-82.432-137.12-82.432-190.704 0-127.04 102.976-230 230-230z m0 140a90 90 0 1 0 0 180 90 90 0 0 0 0-180z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-huodaofukuan */}
|
||||||
|
|
||||||
|
{ name === 'icon-huodaofukuan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M224 400m32 0l512 0q32 0 32 32l0 304q0 32-32 32l-512 0q-32 0-32-32l0-304q0-32 32-32Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M320.48 240h383.04a32 32 0 0 1 26.048 13.408l52.368 73.28A16 16 0 0 1 768.912 352H255.088a16 16 0 0 1-13.024-25.296l52.368-73.296A32 32 0 0 1 320.464 240z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M461.728 485.008l1.36 1.248L512 535.168l48.912-48.912a21.328 21.328 0 0 1 31.424 28.8l-1.248 1.36L563.488 544h23.184a21.328 21.328 0 0 1 0 42.672l-53.344-0.016v32h53.344a21.328 21.328 0 1 1 0 42.672h-53.344v21.344a21.328 21.328 0 1 1-42.656 0l-0.016-21.344h-53.328a21.328 21.328 0 1 1 0-42.656l53.328-0.016v-32h-53.328a21.328 21.328 0 0 1 0-42.656h23.168l-27.584-27.584a21.328 21.328 0 0 1 28.816-31.408z' fill='${(isStr ? colors : colors?.[3]) || 'rgb(74,127,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-yufukuan1 */}
|
||||||
|
|
||||||
|
{ name === 'icon-yufukuan1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M762 422c11.04 0 20 8.96 20 20v300c0 11.04-8.96 20-20 20h-500c-11.04 0-20-8.96-20-20v-300c0-11.04 8.96-20 20-20h500zM512 622H352a10 10 0 0 0-10 10v20c0 5.52 4.48 10 10 10h160c5.52 0 10-4.48 10-10V632a10 10 0 0 0-10-10z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M404.96 223.872l322.384 119.36a20 20 0 0 1-6.944 38.768H325.392a20 20 0 0 1-17.632-29.44l63.04-117.792c5.808-10.848 21.12-15.728 34.16-10.896z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' opacity='.7' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-yue */}
|
||||||
|
|
||||||
|
{ name === 'icon-yue' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(252,168,70)'}' /%3E%3Cpath d='M772 402c5.52 0 10 4.48 10 10V752c0 5.52-4.48 10-10 10H252A10 10 0 0 1 242 752V412c0-5.52 4.48-10 10-10h520z m-185.856 85.856a20 20 0 0 0-28.288 0L512 533.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V672a20 20 0 0 0 40 0v-20h50a20 20 0 0 0 0-40H532v-30h50a20 20 0 0 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M262 292m10 0l480 0q10 0 10 10l0 40q0 10-10 10l-480 0q-10 0-10-10l0-40q0-10 10-10Z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-zidingyi */}
|
||||||
|
|
||||||
|
{ name === 'icon-zidingyi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M497.12 695.84l-115.824 60.88a32 32 0 0 1-46.432-33.744l22.128-128.96a32 32 0 0 0-9.216-28.32l-93.68-91.328a32 32 0 0 1 17.728-54.576l129.488-18.816a32 32 0 0 0 24.08-17.504l57.92-117.328a32 32 0 0 1 57.376 0l57.92 117.328a32 32 0 0 0 24.08 17.504l129.488 18.816a32 32 0 0 1 17.728 54.576l-93.68 91.328a32 32 0 0 0-9.216 28.32l22.128 128.96a32 32 0 0 1-46.432 33.744l-115.808-60.896a32 32 0 0 0-29.792 0z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-jinetiaozheng */}
|
||||||
|
|
||||||
|
{ name === 'icon-jinetiaozheng' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M768 304a32 32 0 0 1 32 32v352a32 32 0 0 1-32 32H256a32 32 0 0 1-32-32V336a32 32 0 0 1 32-32h512z m-309.856 119.856a20 20 0 0 0-28.288 0L384 469.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V608a20 20 0 0 0 40 0v-20h50a20 20 0 0 0 0-40H404v-30h50a20 20 0 0 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008zM560 448h160a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H560a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16z m0 112h160a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H560a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-tuikuan1 */}
|
||||||
|
|
||||||
|
{ name === 'icon-tuikuan1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M752 416a32 32 0 0 1 32 32v288a32 32 0 0 1-32 32H272a32 32 0 0 1-32-32V448a32 32 0 0 1 32-32h480z m-165.856 87.856a20 20 0 0 0-28.288 0L512 549.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V688a20 20 0 1 0 40 0v-20h50a20 20 0 1 0 0-40H532v-30h50a20 20 0 1 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M354.128 253.168a24 24 0 0 1 31.6 36.048l-1.856 1.616-26.816 21.168H720a24 24 0 0 1 23.888 21.696L744 336a24 24 0 0 1-21.696 23.888L720 360H288c-22.032 0-32.08-26.896-16.528-41.424l1.648-1.408 81.008-64z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
|
{/* icon-zhankai */}
|
||||||
|
|
||||||
{ name === 'icon-zhankai' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M492.586667 668.138667c9.962667 9.941333 25.642667 10.666667 36.416 2.133333l2.389333-2.133333 232.746667-232.746667a27.434667 27.434667 0 0 0-36.394667-40.917333l-2.389333 2.133333-213.397334 213.333333-213.312-213.333333a27.434667 27.434667 0 0 0-36.394666-2.133333l-2.389334 2.133333a27.434667 27.434667 0 0 0-2.133333 36.394667l2.133333 2.389333 232.746667 232.746667z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.8' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
{ name === 'icon-zhankai' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M492.586667 668.138667c9.962667 9.941333 25.642667 10.666667 36.416 2.133333l2.389333-2.133333 232.746667-232.746667a27.434667 27.434667 0 0 0-36.394667-40.917333l-2.389333 2.133333-213.397334 213.333333-213.312-213.333333a27.434667 27.434667 0 0 0-36.394666-2.133333l-2.389334 2.133333a27.434667 27.434667 0 0 0-2.133333 36.394667l2.133333 2.389333 232.746667 232.746667z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.8' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||||
{/* icon-shouqi */}
|
{/* icon-shouqi */}
|
||||||
|
|||||||
@ -1,58 +1,62 @@
|
|||||||
$am-ms: 200ms;
|
$am-ms: 200ms;
|
||||||
|
|
||||||
|
.drawer_mask {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
z-index: 1011;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity $am-ms ease-in;
|
||||||
|
&_active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.drawer_main {
|
.drawer_main {
|
||||||
.drawer {
|
.drawer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: visibility $am-ms ease-in-out;
|
transition: visibility $am-ms ease-in-out;
|
||||||
.drawer_mask {
|
|
||||||
|
.drawer_container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
background-color: #fff;
|
||||||
left: 0;
|
z-index: 1012;
|
||||||
width: 100vw;
|
transition: transform $am-ms ease-in-out;
|
||||||
height: 100vh;
|
.drawer_container_title {
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
z-index: 1011;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity $am-ms ease-in;
|
|
||||||
.drawer_container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
position: absolute;
|
justify-content: center;
|
||||||
background-color: #fff;
|
height: 80px;
|
||||||
z-index: 1012;
|
font-size: 29px;
|
||||||
transition: transform $am-ms ease-in-out;
|
color: #000000;
|
||||||
.drawer_container_title {
|
padding-top: 10px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 80px;
|
|
||||||
font-size: 29px;
|
|
||||||
color: #000000;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
.common_close_btn_icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.drawer_container_active {
|
.common_close_btn_icon {
|
||||||
transform: translate3d(0, 0, 0);
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.drawer_mask_active {
|
.drawer_container_active {
|
||||||
opacity: 1;
|
transform: translate3d(0, 0, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.drawer_active {
|
.drawer_active {
|
||||||
@ -80,7 +84,7 @@ $am-ms: 200ms;
|
|||||||
.drawer_container_right {
|
.drawer_container_right {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
border-radius: 20px 0 0 20px;
|
border-radius: 20px 0 0 20px;
|
||||||
transform: translate3d(100%, 0, 0);
|
transform: translate3d(100%, 0, 0);
|
||||||
|
|||||||
@ -3,20 +3,39 @@ import style from './index.module.scss'
|
|||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import { memo, ReactNode, useEffect, useMemo, useRef } from 'react'
|
import { memo, ReactNode, useEffect, useMemo, useRef } from 'react'
|
||||||
import CloseBtnIcon from '@/components/closeBtn'
|
import CloseBtnIcon from '@/components/closeBtn'
|
||||||
|
import Taro from '@tarojs/taro'
|
||||||
|
|
||||||
export interface Params {
|
export interface PopupEvent {
|
||||||
title?: string //标题
|
|
||||||
show?: false | true //显示显示弹窗
|
|
||||||
showTitle?: false | true //是否显示标题
|
|
||||||
onClose?: () => void //关闭事件
|
onClose?: () => void //关闭事件
|
||||||
children?: ReactNode //插槽内容
|
|
||||||
// IconButton?: ReactNode, //
|
|
||||||
showIconButton?: false | true //是否显示关闭按钮
|
|
||||||
position?: 'bottom' | 'top' | 'right' //弹出位置
|
|
||||||
animationEnd?: () => void //弹出动画结束
|
animationEnd?: () => void //弹出动画结束
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Params extends PopupEvent {
|
||||||
|
title?: string //标题
|
||||||
|
show?: boolean //显示显示弹窗
|
||||||
|
showTitle?: boolean //是否显示标题
|
||||||
|
children?: ReactNode //插槽内容
|
||||||
|
// IconButton?: ReactNode, //
|
||||||
|
showIconButton?: boolean //是否显示关闭按钮
|
||||||
|
position?: 'bottom' | 'top' | 'right' //弹出位置
|
||||||
|
customStyle?: React.CSSProperties
|
||||||
|
overlayStyle?: React.CSSProperties
|
||||||
|
safeAreaInsetBottom?: boolean // 是否为iphoneX提供小黑条适配
|
||||||
|
}
|
||||||
export default memo(
|
export default memo(
|
||||||
({ title = '标题', show = false, showTitle = true, onClose, showIconButton = false, children, position = 'bottom', animationEnd }: Params) => {
|
({
|
||||||
|
title = '标题',
|
||||||
|
show = false,
|
||||||
|
showTitle = true,
|
||||||
|
onClose,
|
||||||
|
showIconButton = false,
|
||||||
|
children,
|
||||||
|
position = 'bottom',
|
||||||
|
animationEnd,
|
||||||
|
customStyle,
|
||||||
|
safeAreaInsetBottom = true,
|
||||||
|
overlayStyle,
|
||||||
|
}: Params) => {
|
||||||
const animationTime = useRef<any>(null)
|
const animationTime = useRef<any>(null)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (show) {
|
if (show) {
|
||||||
@ -34,24 +53,45 @@ export default memo(
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
// const getStyle = () => {
|
||||||
|
// if (position === 'bottom' || position === 'top') {
|
||||||
|
// const query = Taro.createSelectorQuery()
|
||||||
|
// query
|
||||||
|
// .select('#drawerContainerContext')
|
||||||
|
// .fields(
|
||||||
|
// { dataset: true, size: true, scrollOffset: true, properties: ['scrollX', 'scrollY'], computedStyle: ['margin', 'backgroundColor'], context: true },
|
||||||
|
// function(res) {
|
||||||
|
// console.log(res) // #drawerContainerContext 节点的上边界坐标
|
||||||
|
// },
|
||||||
|
// )
|
||||||
|
// .exec()
|
||||||
|
// return {}
|
||||||
|
// // return {
|
||||||
|
// // left: '0px',
|
||||||
|
// // }
|
||||||
|
// }
|
||||||
|
// return {}
|
||||||
|
// }
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View className={style.drawer_main}>
|
<View className={style.drawer_main}>
|
||||||
<View catchMove={true} className={`${style.drawer} ${show ? style.drawer_active : ''}`}>
|
<View catchMove={true} className={classnames(style.drawer, show ? style.drawer_active : '')} style={customStyle}>
|
||||||
<View className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show })} onClick={() => onClose?.()}>
|
<View className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show })} onClick={onClose} style={overlayStyle}></View>
|
||||||
<View
|
<View
|
||||||
className={classnames(style.drawer_container, style['drawer_container_' + position], { [style.drawer_container_active]: show })}
|
className={classnames(style.drawer_container, style['drawer_container_' + position], { [style.drawer_container_active]: show })}
|
||||||
onClick={(e) => e.stopPropagation()}>
|
onClick={e => e.stopPropagation()}>
|
||||||
{showTitle && <View className={style.drawer_container_title}>{title}</View>}
|
{showTitle && <View className={style.drawer_container_title}>{title}</View>}
|
||||||
{showIconButton && (
|
{showIconButton && (
|
||||||
<View className={style.common_close_btn_icon}>
|
<View className={style.common_close_btn_icon}>
|
||||||
<CloseBtnIcon onClose={() => onClose?.()} />
|
<CloseBtnIcon onClose={onClose} />
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<View className={style.drawer_container_context}>{children}</View>
|
<View id='drawerContainerContext' className={style.drawer_container_context}>
|
||||||
<View className='common_safe_area_y'></View>
|
{children}
|
||||||
</View>
|
</View>
|
||||||
|
{safeAreaInsetBottom && <View className='common_safe_area_y'></View>}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@ -1,370 +1,10 @@
|
|||||||
page {
|
.saleStatistic {
|
||||||
background: #f7f7f7;
|
&--filterBar {
|
||||||
}
|
|
||||||
|
|
||||||
.mainBox {
|
|
||||||
.pussBox {
|
|
||||||
margin-top: 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.pussName {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pussPhone {
|
|
||||||
margin-left: 88px;
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.total {
|
|
||||||
margin-top: 44px;
|
|
||||||
font-size: 24px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
margin-left: 32px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.productBox {
|
|
||||||
width: 702px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 16px;
|
|
||||||
margin-left: 24px;
|
|
||||||
padding-bottom: 36px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.flexMoney {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 32px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.flexTotalBox {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.totalFont {
|
|
||||||
margin-left: 32px;
|
|
||||||
margin-right: 8px;
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tishi {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shoudPay {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #F64861;
|
|
||||||
margin-right: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.defaltBox {
|
|
||||||
margin: 24px;
|
|
||||||
padding: 24px 32px 24px 24px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 16px;
|
|
||||||
|
|
||||||
.titleBox {
|
|
||||||
width: 638px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modeName {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #337FFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modeLine {
|
|
||||||
margin-top: 24px;
|
|
||||||
width: 638px;
|
|
||||||
height: 1px;
|
|
||||||
background: #000000;
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.goodsBox {
|
|
||||||
margin-top: 24px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-bottom: 8px solid #F7F7F7;
|
|
||||||
|
|
||||||
.goodsProduct {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
margin-left: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goodsLine {
|
|
||||||
width: 638px;
|
|
||||||
height: 1px;
|
|
||||||
background: #000000;
|
|
||||||
opacity: 0.1;
|
|
||||||
margin-left: 32px;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemGoods {
|
|
||||||
margin-top: 24px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.itemPic {
|
|
||||||
margin-left: 32px;
|
|
||||||
margin-right: 42px;
|
|
||||||
width: 108px;
|
|
||||||
height: 108px;
|
|
||||||
background: #322F2F;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemRight {
|
|
||||||
padding-bottom: 24px;
|
|
||||||
width: 495px;
|
|
||||||
border-bottom: 1px solid #f7f7f7;
|
|
||||||
|
|
||||||
.item_right_top {
|
|
||||||
margin-bottom: 41px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.itemName {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemNums {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_right_Bottom {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.itemMoney {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemMoneyOne {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.itemGoods:last-child {
|
|
||||||
margin-top: 24px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.itemPic {
|
|
||||||
margin-left: 32px;
|
|
||||||
margin-right: 42px;
|
|
||||||
width: 108px;
|
|
||||||
height: 108px;
|
|
||||||
background: #322F2F;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemRight {
|
|
||||||
padding-bottom: 24px;
|
|
||||||
width: 495px;
|
|
||||||
border-bottom: none;
|
|
||||||
|
|
||||||
.item_right_top {
|
|
||||||
margin-bottom: 41px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.itemName {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemNums {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item_right_Bottom {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.itemMoney {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemMoneyOne {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goodsBox:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailBox {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 24px;
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
width: 100%;
|
||||||
|
background-color: white;
|
||||||
.detailRightFlex {
|
}
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.detailRight {
|
|
||||||
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailBtn {
|
|
||||||
margin-left: 16px;
|
|
||||||
width: 65px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1PX solid #337FFF;
|
|
||||||
font-size: 24px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #337FFF;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailFont {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.remarkFont {
|
|
||||||
margin-top: 24px;
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.safeBottom {
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottomBox {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 750px;
|
|
||||||
height: 160px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
padding-bottom: 24px;
|
|
||||||
// position: relative;
|
|
||||||
|
|
||||||
.moreFont {
|
|
||||||
font-size: 28px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(0, 0, 0, 0.8);
|
|
||||||
margin-left: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posssBox {
|
|
||||||
position: absolute;
|
|
||||||
left: 32px;
|
|
||||||
z-index: 99;
|
|
||||||
bottom: 170px;
|
|
||||||
// width: 120px;
|
|
||||||
padding: 24px;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
box-shadow: 2px 2px 2px #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posssBox:after {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
bottom: -20px;
|
|
||||||
z-index: 88;
|
|
||||||
// left: 5px;
|
|
||||||
width: 0;
|
|
||||||
height: 0px;
|
|
||||||
content: '';
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 20px;
|
|
||||||
border-color: #fff #fff transparent transparent;
|
|
||||||
transform: rotate(135deg);
|
|
||||||
box-shadow: 2px -2px 2px #ccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,7 +1,31 @@
|
|||||||
import { View } from "@tarojs/components"
|
import DropDownItem, { DropDownOptions } from '@/components/dropDown-item'
|
||||||
|
import { View } from '@tarojs/components'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
const saleStatistic = () => {
|
const saleStatistic = () => {
|
||||||
return <View>销售统计</View>
|
const [options, setOptions] = useState<DropDownOptions[]>([
|
||||||
|
{
|
||||||
|
text: 'name',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'name1',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'name2',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className={styles.saleStatistic}>
|
||||||
|
<View className={styles['saleStatistic--filterBar']}>
|
||||||
|
<View>sdflkajsfdlk</View>
|
||||||
|
<DropDownItem title='name' activeColor='#337fff' options={options}></DropDownItem>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
export default saleStatistic
|
export default saleStatistic
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user