diff --git a/iconfont.json b/iconfont.json
index 222d69b..783a592 100644
--- a/iconfont.json
+++ b/iconfont.json
@@ -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",
"trim_icon_prefix": "",
- "default_icon_size": 18,
+ "default_icon_size": 36,
"design_width": 750
}
diff --git a/src/components/dropDown-item/index.module.scss b/src/components/dropDown-item/index.module.scss
index f5afe1b..260ff3f 100644
--- a/src/components/dropDown-item/index.module.scss
+++ b/src/components/dropDown-item/index.module.scss
@@ -1,3 +1,18 @@
.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;
+ }
+ }
}
diff --git a/src/components/dropDown-item/index.tsx b/src/components/dropDown-item/index.tsx
index 80dd395..0d29a3f 100644
--- a/src/components/dropDown-item/index.tsx
+++ b/src/components/dropDown-item/index.tsx
@@ -2,23 +2,25 @@ import { View, Text } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
import styles from './index.module.scss'
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 Options = {
+export type DropDownOptions = {
text: string
value: number
}
interface DropDownEvent {
- change: (value: Options['value']) => void // value 变化时触发
+ change?: (value: DropDownOptions['value']) => void // value 变化时触发
}
interface PropsType extends DropDownEvent{
direction?: Direction
title: string // 已选中的菜单标题
- options?: Options[]
+ options?: DropDownOptions[]
value?: number | string // 当前选中的值
children?: React.ReactNode
activeColor?: string
@@ -27,27 +29,59 @@ interface PropsType extends DropDownEvent{
export default (props: PropsType) => {
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 (
-
- {text}
-
-
+ handleClickOption(value)}>
+ {text}
+
)
})
+ }, [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 (
-
-
+
+
{title}
-
+
- {children ? children : defaultOptions()}
+
+ {children ? children : defaultOptions}
+
)
}
diff --git a/src/components/iconfont/iconfont.tsx b/src/components/iconfont/iconfont.tsx
index 006c6a0..fb03eee 100644
--- a/src/components/iconfont/iconfont.tsx
+++ b/src/components/iconfont/iconfont.tsx
@@ -24,7 +24,7 @@ function hex2rgb(hex) {
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 = {
name: IconNames;
@@ -36,7 +36,7 @@ type PropsType = {
const IconFont:FC = ({
name,
- size = 18,
+ size = 36,
color,
customStyle = {},
customClassName = ""
@@ -82,7 +82,43 @@ const IconFont:FC = ({
className={classnames(icon, customClassName)}
/>
)} */}
- {/* icon-zhankai */}
+ {/* icon-zhankai1 */}
+
+ { name === 'icon-zhankai1' && () }
+{/* icon-shouqi1 */}
+
+ { name === 'icon-shouqi1' && () }
+{/* icon-shouhou1 */}
+
+ { name === 'icon-shouhou1' && () }
+{/* icon-cangku1 */}
+
+ { name === 'icon-cangku1' && () }
+{/* icon-saoma */}
+
+ { name === 'icon-saoma' && () }
+{/* icon-dizhi1 */}
+
+ { name === 'icon-dizhi1' && () }
+{/* icon-huodaofukuan */}
+
+ { name === 'icon-huodaofukuan' && () }
+{/* icon-yufukuan1 */}
+
+ { name === 'icon-yufukuan1' && () }
+{/* icon-yue */}
+
+ { name === 'icon-yue' && () }
+{/* icon-zidingyi */}
+
+ { name === 'icon-zidingyi' && () }
+{/* icon-jinetiaozheng */}
+
+ { name === 'icon-jinetiaozheng' && () }
+{/* icon-tuikuan1 */}
+
+ { name === 'icon-tuikuan1' && () }
+{/* icon-zhankai */}
{ name === 'icon-zhankai' && () }
{/* icon-shouqi */}
diff --git a/src/components/popup/index.module.scss b/src/components/popup/index.module.scss
index 6c3b1d5..4756285 100644
--- a/src/components/popup/index.module.scss
+++ b/src/components/popup/index.module.scss
@@ -1,58 +1,62 @@
$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 {
position: fixed;
- left: 0;
- top: 0;
+ left: 0;
+ top: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
- height: 100vh;
+ height: 100%;
margin: 0 auto;
z-index: 1000;
visibility: hidden;
transition: visibility $am-ms ease-in-out;
- .drawer_mask {
+
+ .drawer_container {
display: flex;
+ flex-direction: column;
position: absolute;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background: rgba(0, 0, 0, 0.6);
- z-index: 1011;
- opacity: 0;
- transition: opacity $am-ms ease-in;
- .drawer_container {
+ background-color: #fff;
+ z-index: 1012;
+ transition: transform $am-ms ease-in-out;
+ .drawer_container_title {
display: flex;
- flex-direction: column;
- position: absolute;
- background-color: #fff;
- z-index: 1012;
- transition: transform $am-ms ease-in-out;
- .drawer_container_title {
- 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;
- }
+ align-items: center;
+ justify-content: center;
+ height: 80px;
+ font-size: 29px;
+ color: #000000;
+ padding-top: 10px;
}
- .drawer_container_active {
- transform: translate3d(0, 0, 0);
+ .common_close_btn_icon {
+ position: absolute;
+ top: 10px;
+ left: 10px;
}
}
- .drawer_mask_active {
- opacity: 1;
+ .drawer_container_active {
+ transform: translate3d(0, 0, 0);
}
}
.drawer_active {
@@ -80,7 +84,7 @@ $am-ms: 200ms;
.drawer_container_right {
bottom: 0;
right: 0;
- height: 100vh;
+ height: 100%;
min-width: 300px;
border-radius: 20px 0 0 20px;
transform: translate3d(100%, 0, 0);
diff --git a/src/components/popup/index.tsx b/src/components/popup/index.tsx
index 4907caa..d39dba5 100644
--- a/src/components/popup/index.tsx
+++ b/src/components/popup/index.tsx
@@ -3,20 +3,39 @@ import style from './index.module.scss'
import classnames from 'classnames'
import { memo, ReactNode, useEffect, useMemo, useRef } from 'react'
import CloseBtnIcon from '@/components/closeBtn'
+import Taro from '@tarojs/taro'
-export interface Params {
- title?: string //标题
- show?: false | true //显示显示弹窗
- showTitle?: false | true //是否显示标题
+export interface PopupEvent {
onClose?: () => void //关闭事件
- children?: ReactNode //插槽内容
- // IconButton?: ReactNode, //
- showIconButton?: false | true //是否显示关闭按钮
- position?: 'bottom' | 'top' | 'right' //弹出位置
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(
- ({ 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(null)
useEffect(() => {
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 (
<>
-
- onClose?.()}>
- e.stopPropagation()}>
- {showTitle && {title}}
- {showIconButton && (
-
- onClose?.()} />
-
- )}
+
+
+ e.stopPropagation()}>
+ {showTitle && {title}}
+ {showIconButton && (
+
+
+
+ )}
- {children}
-
+
+ {children}
+ {safeAreaInsetBottom && }
diff --git a/src/pages/saleStatistic/index.module.scss b/src/pages/saleStatistic/index.module.scss
index 93b6ee0..2f4d103 100644
--- a/src/pages/saleStatistic/index.module.scss
+++ b/src/pages/saleStatistic/index.module.scss
@@ -1,370 +1,10 @@
-page {
- background: #f7f7f7;
-}
-
-.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 {
+.saleStatistic {
+ &--filterBar {
display: flex;
- margin-top: 24px;
+ flex-flow: row nowrap;
+ justify-content: space-evenly;
align-items: center;
- justify-content: space-between;
-
- .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;
- }
+ width: 100%;
+ background-color: white;
+ }
}
-
-.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;
- }
-}
\ No newline at end of file
diff --git a/src/pages/saleStatistic/index.tsx b/src/pages/saleStatistic/index.tsx
index 0ee6bd6..f3ca5a1 100644
--- a/src/pages/saleStatistic/index.tsx
+++ b/src/pages/saleStatistic/index.tsx
@@ -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 = () => {
- return 销售统计
+ const [options, setOptions] = useState([
+ {
+ text: 'name',
+ value: 0,
+ },
+ {
+ text: 'name1',
+ value: 1,
+ },
+ {
+ text: 'name2',
+ value: 2,
+ },
+ ])
+
+ return (
+
+
+ sdflkajsfdlk
+
+
+
+ )
}
export default saleStatistic