diff --git a/config/dev.js b/config/dev.js index 2f809db..acd0ca0 100644 --- a/config/dev.js +++ b/config/dev.js @@ -22,10 +22,10 @@ module.exports = { args: [ { terserOptions: { - compress: true, // 默认使用terser压缩 - // compress: { - // drop_console: true, // 去掉打印 - // }, // 默认使用terser压缩 + // compress: true, // 默认使用terser压缩 + compress: { + drop_console: false, // 去掉打印 + }, // 默认使用terser压缩 // mangle: false, keep_classnames: true, // 不改变class名称 keep_fnames: true, // 不改变函数名称 diff --git a/config/pre.js b/config/pre.js index 688d394..6df5a41 100644 --- a/config/pre.js +++ b/config/pre.js @@ -24,7 +24,7 @@ module.exports = { terserOptions: { // compress: true, // 默认使用terser压缩 compress: { - // drop_console: true, // 去掉打印 + drop_console: false, // 去掉打印 }, // 默认使用terser压缩 // mangle: false, keep_classnames: true, // 不改变class名称 diff --git a/src/components/checkbox/index.module.scss b/src/components/checkbox/index.module.scss index 3eda977..dcefcb0 100644 --- a/src/components/checkbox/index.module.scss +++ b/src/components/checkbox/index.module.scss @@ -37,7 +37,7 @@ } } .checkbox_main_no_selected { - border: 0 !important; + border-color: #c2c2c2; } .checkbox_item { display: flex; @@ -45,7 +45,7 @@ justify-content: center; } .no_checkbox_item { - border: 0 !important; + border-color: #c2c2c2; background-color: #dddddd !important; } .checkbox_item_select { diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx index ee1eef9..fb4f95c 100644 --- a/src/components/checkbox/index.tsx +++ b/src/components/checkbox/index.tsx @@ -44,6 +44,7 @@ const Checkbox = (props: params, ref) => { }) const onSelectEven = () => { + console.log('disabled', disabled) if (disabled) { return false } const res = !selected if (res) { diff --git a/src/components/navBar/index.module.scss b/src/components/navBar/index.module.scss new file mode 100644 index 0000000..8cafbeb --- /dev/null +++ b/src/components/navBar/index.module.scss @@ -0,0 +1,38 @@ +.navBarContainer { + overflow: hidden; + background-color: #fff; + height: auto; + flex-shrink: 0; +} +.navBar { + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + width: 100%; + padding: 0 24px; + box-sizing: border-box; + .left_view { + flex: 2; + } + .title { + flex: 5; + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + font-size: 36px; + font-weight: 550; + color: #000; + } + .right_view { + flex: 2; + } +} +.back { + display: flex; + align-items: center; + .iconName { + font-size: 28px; + } +} diff --git a/src/components/navBar/index.tsx b/src/components/navBar/index.tsx new file mode 100644 index 0000000..1f475fb --- /dev/null +++ b/src/components/navBar/index.tsx @@ -0,0 +1,75 @@ +import { View } from '@tarojs/components' +import Taro, { useReady } from '@tarojs/taro' +import { useEffect, useMemo, useRef, useState } from 'react' +import styles from './index.module.scss' +import IconFont from '@/components/iconfont/iconfont' + +interface NavBarPropsType { + children?: React.ReactNode + hasLeft?: boolean + leftSlot?: React.ReactNode + title?: string + onClickLeftIcon?: () => void +} +const NavBar = (props: NavBarPropsType) => { + const { children, hasLeft = false, title = '', leftSlot, onClickLeftIcon } = props + const handleClickLeftIcon = () => { + onClickLeftIcon?.() + } + const menuButtonRect = useRef(null) + const systemInfo = useRef(null) + const navBarExtendHeight = useRef(0) + const rpxToPx = useRef(0) + const [, setForceUpdate] = useState({}) + const [height, setHeight] = useState(0) + // 处理布局 + const handleLayout = () => { + const { statusBarHeight, system } = systemInfo.current! + const ios = !!(system.toLowerCase().search('ios') + 1) + if (ios) { + navBarExtendHeight.current = 4 // 下方扩展4像素高度 防止下方边距太小 + } + else { + navBarExtendHeight.current = 0 + } + const { top, height: menuHeight } = menuButtonRect.current! + const height = menuHeight + (top - statusBarHeight!) * 2 + statusBarHeight! // 整个navBar的高度 + console.log('height', height) + setHeight(height) + } + useEffect(() => { + systemInfo.current = Taro.getSystemInfoSync() + menuButtonRect.current = Taro.getMenuButtonBoundingClientRect() + rpxToPx.current = systemInfo.current.screenWidth / 750 + setForceUpdate({}) + handleLayout() + }, []) + + const menuHeight = useMemo(() => { + return menuButtonRect.current?.height + }, [menuButtonRect.current]) + + const menuTop = useMemo(() => { + return menuButtonRect.current?.top + }, [menuButtonRect.current]) + + return + + + {hasLeft && leftSlot + ? leftSlot + : + + 返回 + + } + + + { title || children } + {/* 占位元素 */} + + + + +} +export default NavBar diff --git a/src/pages/colorCardClipping/components/productItem/index.module.scss b/src/pages/colorCardClipping/components/productItem/index.module.scss index 0866e28..9f3b9ac 100644 --- a/src/pages/colorCardClipping/components/productItem/index.module.scss +++ b/src/pages/colorCardClipping/components/productItem/index.module.scss @@ -49,6 +49,22 @@ } } } + .item_con_tag { + display: flex; + flex-flow: row wrap; + margin-top: 8px; + padding-left: 24px; + .tag { + box-sizing: border-box; + background-color: #e4ecfe; + color: $color_main; + padding: 4px 8px; + margin-right: 8px; + font-size: 22px; + margin-bottom: 10px; + border-radius: 10px; + } + } .item_con_count { text-align: right; color: rgba(0, 0, 0, 0.6); diff --git a/src/pages/colorCardClipping/components/productItem/index.tsx b/src/pages/colorCardClipping/components/productItem/index.tsx index 4044a0f..ad1669d 100644 --- a/src/pages/colorCardClipping/components/productItem/index.tsx +++ b/src/pages/colorCardClipping/components/productItem/index.tsx @@ -3,6 +3,7 @@ import { useMemo } from 'react' import styles from './index.module.scss' import LabAndImg from '@/components/LabAndImg' import { goLink } from '@/common/common' +import { formatRemoveHashTag } from '@/common/fotmat' interface color_card_info { count: number @@ -10,6 +11,7 @@ interface color_card_info { name: string rgb: { r: number; g: number; b: number } texture_url: string + affiliation_product: any[] } export interface ParamItem { @@ -62,6 +64,14 @@ export default (props: Param) => { {card_one?.name} {value.shipment_mode_name} + + { + value.color_card_info?.[0]?.affiliation_product?.map((item) => { + return {formatRemoveHashTag(item.code)} + }) + } + + x{card_one?.count}本 diff --git a/src/pages/colorCardList/components/productItem/index.tsx b/src/pages/colorCardList/components/productItem/index.tsx index 0e691b3..c0338bf 100644 --- a/src/pages/colorCardList/components/productItem/index.tsx +++ b/src/pages/colorCardList/components/productItem/index.tsx @@ -3,6 +3,7 @@ import { memo, useCallback, useMemo, useState } from 'react' import styles from './index.module.scss' import LabAndImg from '@/components/LabAndImg' import Checkbox from '@/components/checkbox' +import { alert } from '@/common/common' interface ProductItemParamType { code: string @@ -19,13 +20,22 @@ export interface ParamType { is_add: boolean onSelect?: (val: ParamType, status: boolean) => void count?: number + selectList?: any[] } +// 限制5个 +const limit = 5 + export default memo((props: ParamType) => { - const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb } = props + const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb, selectList } = props const [checkStatus, setCheckStatus] = useState(false) const changeSelect = () => { + console.log('isDisabled', isDisabled) if (props.is_add) { return false } + if (isDisabled) { + alert.none('每次最多申请5种面料') + return false + } setCheckStatus(!checkStatus) props.onSelect?.(props, !checkStatus) } @@ -38,6 +48,20 @@ export default memo((props: ParamType) => { props.onSelect?.(props, false) setCheckStatus(false) } + + const isDisabled = useMemo(() => { + const set = new Set(selectList?.map(item => item.id)) + if (selectList) { + if (set.has(props.id)) { + return false + } + return set.size >= limit + } + else { + return false + } + }, [selectList]) + const labAndImgObj = useMemo( () => { return { lab: props.lab, rgb: props.rgb, texture_url: props.texture_url } @@ -56,7 +80,7 @@ export default memo((props: ParamType) => { e.stopPropagation()}> - + }) diff --git a/src/pages/colorCardList/index.tsx b/src/pages/colorCardList/index.tsx index 1b8fa61..1c66e61 100644 --- a/src/pages/colorCardList/index.tsx +++ b/src/pages/colorCardList/index.tsx @@ -100,16 +100,22 @@ export default () => { }) } } + // 多选 + const multipleSelection = useRef([]) const onSelectData = (val, status) => { + console.log('onSelectData', val, status) + console.log('selectList', selectList) if (status) { + multipleSelection.current.push(val) setSelectList(e => [val, ...e]) } else { const res = selectList?.filter((item) => { return val.id != item.id }) - setSelectList(e => res) + multipleSelection.current = res + setSelectList(res) } } @@ -129,14 +135,14 @@ export default () => { {colorCardData.list?.map((item) => { return ( - + ) })} - 0 ? styles.selected : '')}>确认 + 0 ? styles.selected : '')}>确认 } diff --git a/src/pages/colorCardOrder/index.config.ts b/src/pages/colorCardOrder/index.config.ts index b6f5435..3e12077 100644 --- a/src/pages/colorCardOrder/index.config.ts +++ b/src/pages/colorCardOrder/index.config.ts @@ -1,4 +1,6 @@ export default { navigationBarTitleText: '领取色卡', enableShareAppMessage: true, + disableSwipeBack: true, + navigationStyle: 'custom', } diff --git a/src/pages/colorCardOrder/index.module.scss b/src/pages/colorCardOrder/index.module.scss index 8df6368..584fccb 100644 --- a/src/pages/colorCardOrder/index.module.scss +++ b/src/pages/colorCardOrder/index.module.scss @@ -1,9 +1,12 @@ .main { min-height: 100vh; background-color: #f7f7f7ff; - padding: 24px; padding-bottom: 180px; + .backIcon { + transform: rotate(180deg); + } .add_card_btn { + margin: 24px; height: 82px; background: #ffffff; border-radius: 16px; @@ -14,6 +17,7 @@ margin-top: 24px; } .card_con { + margin: 24px; background-color: #ffffff; padding: 0 24px; margin-top: 24px; @@ -37,6 +41,9 @@ } } } + .remark { + margin: 24px; + } .order_btn { position: fixed; diff --git a/src/pages/colorCardOrder/index.tsx b/src/pages/colorCardOrder/index.tsx index 8e4fa40..f470838 100644 --- a/src/pages/colorCardOrder/index.tsx +++ b/src/pages/colorCardOrder/index.tsx @@ -14,6 +14,8 @@ import { UseSubscriptionMessage } from '@/use/useCommon' import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum' import { addressListApi } from '@/api/addressManager' import MoveBtn from '@/components/moveBtn' +import IconFont from '@/components/iconfont/iconfont' +import NavBar from '@/components/navBar' export interface submitData { address_id: number @@ -136,8 +138,30 @@ export default () => { setAddressInfo(defaultInfo!) } + const onClickBack = () => { + Taro.showModal({ + content: '返回后页面数据将不回保留,确认返回?', + confirmColor: '#4a8dff', + success: ({ confirm }) => { + if (confirm) { + Taro.navigateBack({ + delta: 1, + }) + } + }, + }) + } + return -
+ + + + } title="领取色卡" + > + +
+ 添加色卡 色卡信息 @@ -146,7 +170,9 @@ export default () => { 快递到付 - + + + {numText} diff --git a/src/pages/cutSampleListOrder/index.config.ts b/src/pages/cutSampleListOrder/index.config.ts index 6d8b6a0..712b2bc 100644 --- a/src/pages/cutSampleListOrder/index.config.ts +++ b/src/pages/cutSampleListOrder/index.config.ts @@ -1,4 +1,5 @@ export default { navigationBarTitleText: '领取剪样', - enableShareAppMessage: true, + disableSwipeBack: true, + navigationStyle: 'custom', } diff --git a/src/pages/cutSampleListOrder/index.module.scss b/src/pages/cutSampleListOrder/index.module.scss index 7911afd..5827fea 100644 --- a/src/pages/cutSampleListOrder/index.module.scss +++ b/src/pages/cutSampleListOrder/index.module.scss @@ -1,9 +1,12 @@ .main { min-height: 100vh; background-color: #f7f7f7ff; - padding: 24px; padding-bottom: 180px; + .backIcon { + transform: rotate(180deg); + } .add_card_btn { + margin: 24px; height: 82px; background: #ffffff; border-radius: 16px; @@ -14,6 +17,7 @@ margin-top: 24px; } .card_con { + margin: 24px; background-color: #ffffff; padding: 0 24px; margin-top: 24px; @@ -37,7 +41,9 @@ } } } - + .remark { + margin: 24px; + } .order_btn { position: fixed; height: 162px; diff --git a/src/pages/cutSampleListOrder/index.tsx b/src/pages/cutSampleListOrder/index.tsx index fb7e9ca..ddbcd84 100644 --- a/src/pages/cutSampleListOrder/index.tsx +++ b/src/pages/cutSampleListOrder/index.tsx @@ -15,6 +15,8 @@ import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum' import { formatHashTag } from '@/common/fotmat' import { submitCutSampleOrderApi } from '@/api/cutSample' import { addressListApi } from '@/api/addressManager' +import NavBar from '@/components/navBar' +import IconFont from '@/components/iconfont/iconfont' export interface submitData { address_id: number @@ -196,8 +198,27 @@ export default () => { submitData.current.address_id = defaultInfo!.id || 0 setAddressInfo(defaultInfo!) } + const onClickBack = () => { + Taro.showModal({ + content: '返回后页面数据将不回保留,确认返回?', + confirmColor: '#4a8dff', + success: ({ confirm }) => { + if (confirm) { + Taro.navigateBack({ + delta: 1, + }) + } + }, + }) + } return + + + + } title="领取剪样" + >
添加剪样 {list?.map(item =>