From 3b3adcb203e9057fceb88216c4163fac9ea4fb1a Mon Sep 17 00:00:00 2001 From: xuan Date: Tue, 27 Sep 2022 12:03:22 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf(=E5=A4=9A=E9=80=89):=20?= =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=B4=AD=E7=89=A9=E8=BD=A6=E5=A4=9A=E9=80=89?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/common/common.ts | 1 + src/common/constant.js | 4 +- src/components/iconText/index.tsx | 5 ++- src/components/iconfont/iconfont.tsx | 6 +-- .../shoppingCartItem/index.module.scss | 3 -- .../components/shoppingCartItem/index.tsx | 26 ++++++----- src/pages/shopping/context/index.ts | 1 - src/pages/shopping/index.tsx | 44 ++++++++++--------- yarn.lock | 8 ++-- 10 files changed, 53 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 410d9aa..4ec9b4a 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "eslint-plugin-react-hooks": "^4.2.0", "react-refresh": "0.11.0", "stylelint": "9.3.0", - "taro-iconfont-svg": "^1.0.7", + "taro-iconfont-svg": "^1.0.8", "terser-webpack-plugin": "^5.3.6", "typescript": "^4.1.0", "webpack": "^5.74.0" diff --git a/src/common/common.ts b/src/common/common.ts index c682644..ee7e45e 100644 --- a/src/common/common.ts +++ b/src/common/common.ts @@ -11,6 +11,7 @@ type ParamLink = 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo' export const goLink = (path = '', params = {}, way: ParamLink = 'navigateTo') => { if (path) { let params_str = Qs.stringify(params) + console.log('params_str==>', params_str) path = params_str ? path + '?' + params_str : path Taro[way]({ url: path }) } diff --git a/src/common/constant.js b/src/common/constant.js index 57a4306..c77654f 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -4,7 +4,7 @@ // export const BASE_URL = `http://10.0.0.5:50001/lymarket` // export const BASE_URL = `http://192.168.0.89:40001/lymarket` // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞 -// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境 +export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境 // export const BASE_URL = `https://pre.zzfzyc.com/lymarket` // 预发布 // export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发 // export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发 @@ -14,7 +14,7 @@ // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 // export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添 // export const BASE_URL = `http://192.168.1.42:50001/lymarket` // 杰 -export const BASE_URL = `http://192.168.1.95:40001/lymarket` // 华 +// export const BASE_URL = `http://192.168.1.95:40001/lymarket` // 华 // CDN // 生成密钥 diff --git a/src/components/iconText/index.tsx b/src/components/iconText/index.tsx index 73a65c8..db3ef30 100644 --- a/src/components/iconText/index.tsx +++ b/src/components/iconText/index.tsx @@ -8,6 +8,7 @@ type PropsType = { iconName: IconNames iconSize?: number svg?: boolean + color?: string, text?: string children?: React.ReactNode customClass?: string @@ -16,10 +17,10 @@ type PropsType = { } const IconText: FC = (props) => { - const { children, svg = false, iconName, iconSize = 40, text = '' } = props + const { children, svg = false, iconName, iconSize = 40, text = '', color } = props return ( - {svg ? : } + {svg ? : } {children ? children : {text}} ) diff --git a/src/components/iconfont/iconfont.tsx b/src/components/iconfont/iconfont.tsx index 813a7ae..006c6a0 100644 --- a/src/components/iconfont/iconfont.tsx +++ b/src/components/iconfont/iconfont.tsx @@ -4,7 +4,7 @@ import "./iconfont.scss"; import Taro from "@tarojs/taro"; import classnames from "classnames"; -const initSvgSize = (36 / 750) * Taro.getSystemInfoSync().windowWidth +const SystemWidth = Taro.getSystemInfoSync().windowWidth const quot = '"' function hex2rgb(hex) { @@ -43,7 +43,7 @@ const IconFont:FC = ({ }) => { const [colors, setColors] = useState() const [isStr, setIsStr] = useState(true) - const [svgSize, setSvgSize] = useState(initSvgSize) + const [svgSize, setSvgSize] = useState(() => (size / 750) * SystemWidth) useEffect(() => { setIsStr(typeof color === 'string') @@ -60,7 +60,7 @@ const IconFont:FC = ({ }, [color]) useEffect(() => { - setSvgSize((size / 750) * Taro.getSystemInfoSync().windowWidth) + setSvgSize((size / 750) * SystemWidth) }, [size]) // 也可以使用 if (name === 'xxx') { return } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题 diff --git a/src/pages/shopping/components/shoppingCartItem/index.module.scss b/src/pages/shopping/components/shoppingCartItem/index.module.scss index 0c96ad2..70c70ca 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.module.scss +++ b/src/pages/shopping/components/shoppingCartItem/index.module.scss @@ -76,9 +76,6 @@ display: flex; justify-content: center; align-items: center; - Text { - font-size: 52px; - } } .drawerOpen { diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index 617a5a6..25b9521 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -14,15 +14,14 @@ import { EnumSaleMode } from '@/common/Enumerate' import { useNeedMemoCallback } from '@/use/useCommon' import { selectList } from '../../config' import { useShoppingContext } from '../../context' +import IconFont from '@/components/iconfont/iconfont' type PropsType = { itemData?: ShoppingCartData } const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => { - return ( - {isOpen ? : } - ) + return {isOpen ? : } }) enum BackEndSaleModeListFieldMap { @@ -68,16 +67,21 @@ export default memo((props) => { const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, isManageStatus, setSelectedAmount, colorStore } = useShoppingContext() const memoList = useMemo(() => { + + const selectedList = itemData?.[BackEndSaleModeListFieldMap[selected]].length !==0 ? itemData?.[BackEndSaleModeListFieldMap[selected]] : [{}] + + selectedList.forEach((item) => { + console.log('memoList itemData', item) + // 初始化选中状态 + setChangedCheckbox({ + purchaserId: itemData?.purchaser_id!, + goodsKind: { [item?.id]: { id: item?.id, estimate_amount: item.estimate_amount, checked: false } }, + checked: false, + }) + }) + return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? ( itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => { - console.log('memoList itemData', item) - // 初始化选中状态 - setChangedCheckbox({ - purchaserId: itemData.purchaser_id, - goodsKind: { [item.id]: { id: item.id, estimate_amount: item.estimate_amount, checked: false } }, - checked: false, - }) - return }) ) : ( diff --git a/src/pages/shopping/context/index.ts b/src/pages/shopping/context/index.ts index a255185..541feaa 100644 --- a/src/pages/shopping/context/index.ts +++ b/src/pages/shopping/context/index.ts @@ -1,4 +1,3 @@ -import { EnumSaleMode } from '@/common/Enumerate' import React, { useRef } from 'react' import { useContext } from 'react' diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index ba4f4c6..ddbef4b 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -1,7 +1,7 @@ import Search from '@/components/search' import { View } from '@tarojs/components' import Taro, { useDidShow } from '@tarojs/taro' -import React, { FC, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react' +import React, { FC, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' import styles from './index.module.scss' import classnames from 'classnames' import IconText from '@/components/iconText' @@ -12,7 +12,7 @@ import { formatPriceDiv } from '@/common/format' import BottomSettleBar from './components/bottomSettleBar' import BottomEditBar from './components/bottomEditBar' import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index' -import { dataLoadingStatus } from '@/common/util' +import { dataLoadingStatus, debounce } from '@/common/util' import { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index' import { GoodsMeta, Goods, useShoppingCart, useShoppingContext } from './context' import { alert, goLink } from '@/common/common' @@ -60,7 +60,7 @@ const ShoppingCartContainer: FC = () => { const { fetchData, state } = ShoppingCartListApi() // 输入了搜索关键字 - const getSearchData = useCallback((e) => { + const getSearchData = useCallback(e => { fetchData({ short_name_or_phone: e }) // pageNum.current.page = 1 // setOrderData(() => ({ list: [], total: 0 })) @@ -74,7 +74,8 @@ const ShoppingCartContainer: FC = () => { return dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading }) }, [shoppingCartData, state]) - useDidShow(() => { + // useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现 + useLayoutEffect(() => { ;(async () => { await fetchData() let query = Taro.createSelectorQuery() @@ -82,7 +83,7 @@ const ShoppingCartContainer: FC = () => { query.select('#shoppingContainer').boundingClientRect() query.select('#topBar').boundingClientRect() query.select('#bottomBar').boundingClientRect() - query.exec((res) => { + query.exec(res => { console.log('res==>', res) const containerHeight = res[0].height const topBarHeight = res[1].height @@ -91,26 +92,29 @@ const ShoppingCartContainer: FC = () => { setListHeight(listHeight + 'px') }) })() - }) + }, []) useEffect(() => { setShoppingCartData({ list: state.data, total: state.data.length }) }, [state]) // 结算 - const handleSettleAccount = () => { + const handleSettleAccount = debounce(() => { const targetGoodsKind = colorStore?.[currentCheckedPurchaserId]?.['goodsKind'] - if (!targetGoodsKind) return + if (!targetGoodsKind) return Taro.showToast({ title: '请先选择客户', icon: 'error' }) + const checkedGoodsKind = Object.values(targetGoodsKind).reduce((prev, item: Goods) => { + if (item.checked) { + return [...prev,item.id] + } + return prev + }, []) + if (checkedGoodsKind.length === 0) return Taro.showToast({ title: '请先选择商品', icon: 'error' }) goLink('/pages/submitOrder/index', { purchaser_id: currentCheckedPurchaserId, sale_mode: currentCheckedSaleMode, - shopping_cart_product_color_list: Object.values(targetGoodsKind).map((item: Goods) => { - if (item.checked) { - return item.id - } - }), + shopping_cart_product_color_list: JSON.stringify(checkedGoodsKind), }) - } + }, 400) const { fetchData: deleteApi } = ShoppingCartDeleteApi() @@ -122,7 +126,7 @@ const ShoppingCartContainer: FC = () => { } Taro.showModal({ title: '要取消这些商品吗？', - success: async function (res) { + success: async function(res) { if (res.confirm) { const res = await deleteApi() if (res.success) { @@ -138,8 +142,8 @@ const ShoppingCartContainer: FC = () => { // 全选 const handleSelectAllCheckbox = (isSelectAll: boolean) => { console.log('handleSelectAllCheckbox', isSelectAll) - const tempObject = colorStore - Object.entries(colorStore).forEach(([key,value])=>{ + const tempObject = {} + Object.entries(colorStore).forEach(([key, value]) => { tempObject[key] = { ...value, checked: isSelectAll, @@ -155,9 +159,9 @@ const ShoppingCartContainer: FC = () => { {isManageStatus ? ( - + ) : ( - + )} @@ -174,7 +178,7 @@ const ShoppingCartContainer: FC = () => { {isManageStatus ? ( - handleSelectAllCheckbox(isAll)}> + handleSelectAllCheckbox(isAll)}> ) : ( )} diff --git a/yarn.lock b/yarn.lock index e8e0566..92597e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12704,10 +12704,10 @@ taro-css-to-react-native@3.3.10: css-mediaquery "^0.1.2" postcss-value-parser "^3.3.0" -taro-iconfont-svg@^1.0.7: - version "1.0.7" - resolved "https://registry.yarnpkg.com/taro-iconfont-svg/-/taro-iconfont-svg-1.0.7.tgz#953c842b3cd8865be9ee434b7fb9a86e4f7827d7" - integrity sha512-sPXvxRQW5EfWLHKdLRgpV2xIId0m7GHhYlSOgGMKqj9a6ibNcATXaklL2KYWfX9ogshi/bdOBTCuPdAqPIgXPg== +taro-iconfont-svg@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/taro-iconfont-svg/-/taro-iconfont-svg-1.0.8.tgz#7b9c20a45a8ce53bb737816eaba2d1aebe196c2b" + integrity sha512-nxKx7yGAd+HUVo7FK0PW1AbAuoZgGyUN3tL4kDKeCaGEAxtyEfET2giYt1uTK/eC4WOAZcQnCqyrFM6j8E/wpg== dependencies: "@tarojs/taro" "^3.5.5" classnames "^2.3.2"