xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎈 perf(按钮): 优化normalButton组件

Browse Source
This commit is contained in:
xuan
2022-09-28 15:23:32 +08:00
parent 4f09a902ac
commit d00604b3f0
50 changed files with 610 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/delivery/components/Filter/index.tsx
+3 -3
View File
@@ -145,7 +145,7 @@ const DeliveryFilter = memo<DeliveryPropsType>((props) => {
不限
</FilterButton>
{!!typeList?.length &&
typeList?.map((item) => {
typeList?.map(item => {
return (
<FilterButton isActive={searchFilter.type === item?.id} onClick={() => handleSelectedType(item?.id)}>
{item.name}
@@ -171,10 +171,10 @@ const DeliveryFilter = memo<DeliveryPropsType>((props) => {
</View>
</View>
<View className={styles.filterController}>
<NormalButton type='primary' round customClassName={classnames(styles.btn, styles.rest_btn)} onClick={handleReset}>
<NormalButton plain type='primary' round customClassName={classnames(styles.btn, styles.rest_btn)} onClick={handleReset}>
重置
</NormalButton>
<NormalButton type='primary' plain round customClassName={classnames(styles.btn, styles.verify_btn)} onClick={handleConfirm}>
<NormalButton type='primary' round customClassName={classnames(styles.btn, styles.verify_btn)} onClick={handleConfirm}>
确认
</NormalButton>
</View>
src/pages/delivery/components/ItemList/index.tsx
+2 -1
View File
@@ -81,6 +81,7 @@ const ItemList:FC<PropsType> = (props) => {
<View className={styles.bottomBar}>
<NormalButton
customClassName={styles.bottomBar__button}
plain
type='info'
customStyles={{ color: '#8e8e8e', borderColor: '#8e8e8e' }}
round
@@ -88,7 +89,7 @@ const ItemList:FC<PropsType> = (props) => {
查看详情
</NormalButton>
{itemData?.status === 0 && (
<NormalButton customClassName={styles.bottomBar__button} type='primary' round onClick={() => handleAudit(itemData?.id)}>
<NormalButton customClassName={styles.bottomBar__button} type='primary' plain round onClick={() => handleAudit(itemData?.id)}>
确认审核
</NormalButton>
)}
src/pages/deliveryDetail/index.tsx
+2 -2
View File
@@ -120,10 +120,10 @@ const DeliveryDetail: FC = () => {
const BottomBar = useMemo(() => {
return (
<View className={styles.bottomBar}>
<NormalButton type='primary' round onClick={handleUploadPic}>
<NormalButton plain type='primary' round onClick={handleUploadPic}>
上传附件
</NormalButton>
<NormalButton type='primary' plain round onClick={handleAudit}>
<NormalButton type='primary' round onClick={handleAudit}>
确认审核
</NormalButton>
</View>
src/pages/login/index.tsx
+1 -1
View File
@@ -115,7 +115,7 @@ const Login: FC = () => {
<Text className={styles.isForgetPwd}>忘记密码？</Text>
</View>
</View>
<NormalButton circle plain onClick={handleLogin} customClassName={styles['login-button']}>
<NormalButton circle onClick={handleLogin} customClassName={styles['login-button']}>
登录
</NormalButton>
<QuickLogin />
src/pages/saleStatistic/index.config.ts
+4
View File
@@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '销售统计',
enablePullDownRefresh: true,
}
src/pages/saleStatistic/index.module.scss
+370
View File
@@ -0,0 +1,370 @@
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 {
display: flex;
margin-top: 24px;
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;
}
}
.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;
}
}
src/pages/saleStatistic/index.tsx
+7
View File
@@ -0,0 +1,7 @@
import { View } from "@tarojs/components"
const saleStatistic = () => {
return <View>销售统计</View>
}
export default saleStatistic
src/pages/shopping/components/bottomEditBar/index.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export default memo<PropsType>((props) => {
</MCheckbox>
</View>
<View className={styles.bottomRight}>
<NormalButton plain round type='danger' size='normal' onClick={handleSettle} customStyles={{ backgroundColor: '#F44761' }}>
<NormalButton round type='danger' size='normal' onClick={handleSettle} customStyles={{ backgroundColor: '#F44761' }}>
<Text style={{ fontSize: '32rpx' }}>删除</Text>
</NormalButton>
</View>
src/pages/shopping/components/bottomSettleBar/index.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export default memo<PropsType>((props) => {
</Text>
</View>
<View className={styles.bottomRight}>
<NormalButton plain type='primary' round size='normal' onClick={handleSettle}>
<NormalButton type='primary' round size='normal' onClick={handleSettle}>
<Text style={{fontSize: '32rpx'}}>结算</Text>
</NormalButton>
</View>
src/pages/takeDelivery/components/Filter/index.module.scss
+1 -37
View File
@@ -21,13 +21,7 @@
grid-template-columns: 1fr 1fr;
}
}
.filterTypeButton {
padding: 0 24px;
font-size: 28px;
}
.filterTypeText {
color: #6e6e6e !important;
}
.filterTimeButton {
grid-column-start: span 2;
}
@@ -35,36 +29,6 @@
background-color: #eaf2ff;
}
.filterButton {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
padding: 0 20px;
box-sizing: border-box;
border: 0 solid transparent;
background-color: #f6f6f6;
border-radius: 8px;
font-size: 28px;
height: 72px;
&--text {
color: #909090;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
&:hover {
opacity: 0.7;
}
&--active {
border: 1px solid $color_main;
background-color: #eaf2ff;
.filterButton--text {
color: $color_main;
}
}
}
.filterController {
margin-top: 60px;
width: 100%;
src/pages/takeDelivery/components/Filter/index.tsx
+7 -23
View File
@@ -1,5 +1,4 @@
import NormalButton from '@/components/normalButton'
import Popup from '@/components/popup'
import { View } from '@tarojs/components'
import classnames from 'classnames'
import styles from './index.module.scss'
@@ -9,7 +8,7 @@ import IconFont from '@/components/iconfont/iconfont'
import { EnumTakeGoodsOrderTypeList } from '@/api/index'
import dayjs from 'dayjs'
import { getFilterData } from '@/common/util'
import Taro from '@tarojs/taro'
import FilterButton from '@/components/filterButton'
interface SearchFilter {
take_goods_order_type?: number
@@ -28,13 +27,6 @@ interface DeliveryPropsType {
onReset?: () => void
}
interface ButtonPropsType {
isActive: boolean
onClick?: Function
children?: React.ReactNode
customClassName?: string
}
export const filterTimeOptions = {
0: {
name: '不限',
@@ -147,11 +139,14 @@ const DeliveryFilter = memo<DeliveryPropsType>((props) => {
不限
</FilterButton>
{!!typeList?.length &&
typeList?.map((item) => {
typeList?.map(item => {
return (
<FilterButton isActive={searchFilter.take_goods_order_type === item?.id} onClick={() => handleSelectedType(item?.id)}>
{item.name}
</FilterButton>
// <NormalButton type='info' circle onClick={() => handleSelectedType(item?.id)}>
// {item.name}
// </NormalButton>
)
})}
</View>
@@ -173,10 +168,10 @@ const DeliveryFilter = memo<DeliveryPropsType>((props) => {
</View>
</View>
<View className={styles.filterController}>
<NormalButton type='primary' round customClassName={classnames(styles.btn, styles.rest_btn)} onClick={handleReset}>
<NormalButton type='primary' plain round customClassName={classnames(styles.btn, styles.rest_btn)} onClick={handleReset}>
重置
</NormalButton>
<NormalButton type='primary' plain round customClassName={classnames(styles.btn, styles.verify_btn)} onClick={handleConfirm}>
<NormalButton type='primary' round customClassName={classnames(styles.btn, styles.verify_btn)} onClick={handleConfirm}>
确认
</NormalButton>
</View>
@@ -184,16 +179,5 @@ const DeliveryFilter = memo<DeliveryPropsType>((props) => {
)
})
const FilterButton: FC<ButtonPropsType> = (props) => {
const { onClick, children, isActive = false, customClassName } = props
const handleClick = () => {
onClick?.()
}
return (
<View className={classnames(styles.filterButton, isActive && styles['filterButton--active'], customClassName)} onClick={handleClick}>
<View className={classnames(styles['filterButton--text'])}>{children}</View>
</View>
)
}
export default DeliveryFilter
src/pages/takeDelivery/components/ItemList/index.tsx
+2 -1
View File
@@ -84,13 +84,14 @@ const ItemList:FC<PropsType> = (props) => {
<NormalButton
customClassName={styles.bottomBar__button}
type='info'
plain
customStyles={{ color: '#8e8e8e', borderColor: '#8e8e8e' }}
round
onClick={() => handleDetail(itemData)}>
查看详情
</NormalButton>
{itemData?.status === 0 && (
<NormalButton customClassName={styles.bottomBar__button} type='primary' round onClick={() => handleAudit(itemData?.id)}>
<NormalButton plain customClassName={styles.bottomBar__button} type='primary' round onClick={() => handleAudit(itemData?.id)}>
确认审核
</NormalButton>
)}
src/pages/takeDeliveryDetail/index.tsx
+3 -3
View File
@@ -138,7 +138,7 @@ const TakeDeliveryDetail: FC = () => {
// 采购提货
return (
<View className={styles.bottomBar}>
<NormalButton type='primary' plain round onClick={handleAudit} customStyles={{ width: '100%' }}>
<NormalButton type='primary' round onClick={handleAudit} customStyles={{ width: '100%' }}>
确认提货
</NormalButton>
</View>
@@ -147,10 +147,10 @@ const TakeDeliveryDetail: FC = () => {
// 退货提货
return (
<View className={styles.bottomBar} style={{ justifyContent: 'space-between' }}>
<NormalButton type='primary' round onClick={handleRefuse} customStyles={{ width: '25%' }}>
<NormalButton type='primary' plain round onClick={handleRefuse} customStyles={{ width: '25%' }}>
拒收
</NormalButton>
<NormalButton type='primary' plain round onClick={handleAudit} customStyles={{ width: '25%' }}>
<NormalButton type='primary' round onClick={handleAudit} customStyles={{ width: '25%' }}>
确认提货
</NormalButton>
</View>
src/pages/user/index.tsx
+5 -5
View File
@@ -82,7 +82,7 @@ const statisticAnalysis: IconCardType[] = [
{
iconName: 'icon-xiaoshou',
name: '销售',
path: '',
path: '/pages/saleStatistic/index',
},
{
iconName: 'icon-duizhang',
@@ -135,7 +135,7 @@ const UserInfo: FC = () => {
<Text className={styles.userno}>{userInfo.userInfo.user_code}</Text>
</View>
<View className={styles.right}>
<NormalButton type='primary' round size='normal' onClick={handleLogout}>
<NormalButton plain type='primary' round size='normal' onClick={handleLogout}>
退出登录
</NormalButton>
</View>
@@ -151,7 +151,7 @@ const UserInfo: FC = () => {
<LayoutBlock circle>
<View className={styles.layoutTitle}>功能特色</View>
<View className={styles['grid-container']}>
{feature.map((item) => {
{feature.map(item => {
return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
})}
</View>
@@ -159,7 +159,7 @@ const UserInfo: FC = () => {
<LayoutBlock circle>
<View className={styles.layoutTitle}>布料取色</View>
<View className={styles['grid-container']}>
{fabric.map((item) => {
{fabric.map(item => {
return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
})}
</View>
@@ -167,7 +167,7 @@ const UserInfo: FC = () => {
<LayoutBlock circle>
<View className={styles.layoutTitle}>统计分析</View>
<View className={styles['grid-container']}>
{statisticAnalysis.map((item) => {
{statisticAnalysis.map(item => {
return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
})}
</View>