diff --git a/project.private.config.json b/project.private.config.json index b7ef913..2426a34 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -295,6 +295,34 @@ "query": "orderId=33992", "launchMode": "default", "scene": null + }, + { + "name": "领取色卡", + "pathName": "pages/getColorCard/index", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "name": "添加色卡订单", + "pathName": "pages/getColorCard/addColorCard/index", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "name": "色卡列表", + "pathName": "pages/getColorCard/colorCardList/index", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "name": "色卡详情", + "pathName": "pages/getColorCard/colorCardDetail/index", + "query": "id=5", + "launchMode": "default", + "scene": null } ] } diff --git a/src/api/colorCard/colorCardOrder.ts b/src/api/colorCard/colorCardOrder.ts new file mode 100644 index 0000000..c2842db --- /dev/null +++ b/src/api/colorCard/colorCardOrder.ts @@ -0,0 +1,56 @@ +import { useRequest } from '@/use/useHttp' + +/** + * 获取色卡订单列表 + * @returns + */ +export const GetColorCardOrderList = () => { + return useRequest({ + url: '/v2/mp/colorCardOrder/list', + method: 'get', + }) +} + +/** + * 获取色卡订单详情 + * @returns + */ +export const GetColorCardOrderDetail = () => { + return useRequest({ + url: '/v2/mp/colorCardOrder', + method: 'get', + }) +} + +/** + * 提交色卡订单 + * @returns + */ +export const SubmitColorCardOrder = () => { + return useRequest({ + url: '/v2/mp/colorCardOrder/submit', + method: 'post', + }) +} + +/** + * 获取可添加的色卡 + * @returns + */ +export const GetCanAddCardList = () => { + return useRequest({ + url: '/v2/mp/colorCardOrder/canAddCard', + method: 'post', + }) +} + +/** + * 取消色卡订单 + * @returns + */ +export const CancelColorCardOrder = () => { + return useRequest({ + url: '/v2/mp/colorCardOrder/cancel', + method: 'post', + }) +} diff --git a/src/api/colorCard/index.ts b/src/api/colorCard/index.ts new file mode 100644 index 0000000..66432e3 --- /dev/null +++ b/src/api/colorCard/index.ts @@ -0,0 +1,7 @@ +export { + GetColorCardOrderList, + GetColorCardOrderDetail, + SubmitColorCardOrder, + GetCanAddCardList, + CancelColorCardOrder, +} from './colorCardOrder' diff --git a/src/app.config.ts b/src/app.config.ts index ccfdd8a..42a0abf 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -36,6 +36,10 @@ export default defineAppConfig({ 'custom-wrapper': '/custom-wrapper', }, subPackages: [ + { + root: 'pages/getColorCard', + pages: ['index', 'addColorCard/index', 'colorCardList/index', 'colorCardDetail/index'], + }, { root: 'pages/inviteCode', pages: ['index'], diff --git a/src/common/constant.ts b/src/common/constant.ts index 39684a4..850aed6 100644 --- a/src/common/constant.ts +++ b/src/common/constant.ts @@ -39,6 +39,10 @@ export const LIST_EMPTY_IMAGE = `${IMG_CND_Prefix}/list_empty.png` export const EMPTY_IMAGE = `${IMG_CND_Prefix}/empty.png` export const SEARCH_EMPTY_IMAGE = `${IMG_CND_Prefix}/search_empty.png` +export const COLOR_CARD_LIST_EMPTY_IMAGE = `${IMG_CND_Prefix}/color_card/colorCardList_empty.png` +export const BUSINESS_MANAGER = `${IMG_CND_Prefix}/color_card/businessManager.png` +// 客服 +export const BUSINESS_MANAGER_PHONE = '0757-86834274' // 获取CND资源 export const getCDNSource = (suffix: string) => { return IMG_CND_Prefix + suffix diff --git a/src/components/AddressList/index.scss b/src/components/AddressList/index.scss index 6b614c1..78d6e47 100644 --- a/src/components/AddressList/index.scss +++ b/src/components/AddressList/index.scss @@ -30,10 +30,6 @@ border: 1px solid #68b4ff; } - .address-list:first-child { - margin-top: 0; - } - .address-list-last { margin-bottom: 300px; } diff --git a/src/components/SelectSaleRankingIndicators/index.tsx b/src/components/SelectSaleRankingIndicators/index.tsx index 45ae960..cc1ea10 100644 --- a/src/components/SelectSaleRankingIndicators/index.tsx +++ b/src/components/SelectSaleRankingIndicators/index.tsx @@ -59,7 +59,7 @@ const SelectSaleRankingIndicators: FC = (props) => { {!!enumList.length && enumList.map((item: EnumList, key) => { return ( - handleClick(item.id)}> + handleClick(item.id)}> {item.name} ) diff --git a/src/components/SelectSaleType/index.tsx b/src/components/SelectSaleType/index.tsx index ba70c74..b3709c1 100644 --- a/src/components/SelectSaleType/index.tsx +++ b/src/components/SelectSaleType/index.tsx @@ -69,7 +69,7 @@ const SelectSaleType = (props: SelectSaleTypeProps, ref) => { {!!enumList.length && enumList.map((item: EnumList, key) => { return ( - handleClick(item.id)}> + handleClick(item.id)}> {item.name} ) diff --git a/src/components/SelectTimePicker/index.tsx b/src/components/SelectTimePicker/index.tsx index 93ee28f..34fac16 100644 --- a/src/components/SelectTimePicker/index.tsx +++ b/src/components/SelectTimePicker/index.tsx @@ -153,12 +153,12 @@ const SelectTimePicker = (props: SelectSaleTypeProps, ref) => { .slice(0, -1) .map(([key, value], index) => { return ( - handleClick(key as Key)}> + handleClick(key as Key)}> {value.name} ) })} - + {customFilterButtonText.current} diff --git a/src/components/cell/index.tsx b/src/components/cell/index.tsx index cee7df6..6290821 100644 --- a/src/components/cell/index.tsx +++ b/src/components/cell/index.tsx @@ -8,7 +8,7 @@ import styles from './index.module.scss' interface CellPropsType { title: string | React.ReactNode - desc: string + desc: string | React.ReactNode isLink?: boolean onClick?: () => void customStyle?: React.CSSProperties diff --git a/src/components/checkbox/index.module.scss b/src/components/checkbox/index.module.scss index fdaed3e..7912b5b 100644 --- a/src/components/checkbox/index.module.scss +++ b/src/components/checkbox/index.module.scss @@ -42,8 +42,8 @@ justify-content: center; } .no_checkbox_item { - border: 0; - background-color: #dddddd; + opacity: $opacity-disabled; + border-color: rgba($color: $color_main, $alpha: $opacity-disabled); } .checkbox_item_select { background-color: $color_main; diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx index 237d133..4267d45 100644 --- a/src/components/checkbox/index.tsx +++ b/src/components/checkbox/index.tsx @@ -81,13 +81,13 @@ const Checkbox = (props: params, ref) => { [styles[`checkbox_main--${size}`]]: size, [styles['checkbox_main--round']]: round, [styles['checkbox_main--circle']]: circle, + [styles.no_checkbox_item]: disabled, } return classObject } const getClassName = () => { const classObject = { - [styles.no_checkbox_item]: disabled, [styles.checkbox_item_select]: selected, } return classObject diff --git a/src/components/filterButton/index.module.scss b/src/components/filterButton/index.module.scss index 39309f0..5249b10 100644 --- a/src/components/filterButton/index.module.scss +++ b/src/components/filterButton/index.module.scss @@ -8,7 +8,6 @@ box-sizing: border-box; border: 0 solid transparent; background-color: #f6f6f6; - border-radius: 8px; font-size: 28px; height: 72px; &--text { diff --git a/src/components/filterButton/index.tsx b/src/components/filterButton/index.tsx index aed8690..75ef2ed 100644 --- a/src/components/filterButton/index.tsx +++ b/src/components/filterButton/index.tsx @@ -1,24 +1,27 @@ import classnames from 'classnames' import type { FC } from 'react' +import type { ButtonSize, NormalButtonPropsType } from '../normalButton' import NormalButton from '../normalButton' import styles from './index.module.scss' -interface ButtonPropsType { +interface ButtonPropsType extends NormalButtonPropsType { isActive: boolean onClick?: Function children?: React.ReactNode customClassName?: string + size?: ButtonSize } const FilterButton: FC = (props) => { - const { onClick, children, isActive = false, customClassName } = props + const { onClick, children, isActive = false, customClassName, size = 'normal', ...normalProps } = props const handleClick = () => { onClick?.() } return ( {children} diff --git a/src/components/moveBtn/index.module.scss b/src/components/moveBtn/index.module.scss index d7f4fe7..7a8f09b 100644 --- a/src/components/moveBtn/index.module.scss +++ b/src/components/moveBtn/index.module.scss @@ -1,34 +1,45 @@ -.movableItem{ +.movableItem { + width: 100%; + height: 100%; +} +.moveBtn { + width: 100px; + height: 100px; + border-radius: 50%; + border: 2px solid #cde5ff; + box-shadow: 0px 0px 20px 0px rgba(104, 180, 255, 0.7); + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; + z-index: 999; + image { width: 100%; height: 100%; + } + .shop_icon { + font-size: 70px; + color: $color_main; + } + .product_num { + position: absolute; + font-size: 23px; + background-color: red; + color: #fff; + height: 36px; + line-height: 36px; + padding: 0 6px; + border-radius: 72px; + min-width: 25px; + text-align: center; + top: 0; + right: 0; + } +} +.no_bg_moveBtn { + box-shadow: none; + background-color: transparent; + border: none; + width: 130px; + height: 130px; } -.moveBtn{ - width: 100px; - height: 100px; - border-radius: 50%; - border: 2px solid #cde5ff; - box-shadow: 0px 0px 20px 0px rgba(104,180,255,0.70); - background-color: #fff; - display: flex; - justify-content: center; - align-items: center; - z-index:999; - .shop_icon{ - font-size: 70px; - color: $color_main; - } - .product_num{ - position: absolute; - font-size: 23px; - background-color: red; - color: #fff; - height: 36px; - line-height: 36px; - padding: 0 6px; - border-radius: 72px; - min-width: 25px; - text-align: center; - top: 0; - right: 0; - } -} \ No newline at end of file diff --git a/src/components/moveBtn/index.tsx b/src/components/moveBtn/index.tsx index a4ca924..655a764 100644 --- a/src/components/moveBtn/index.tsx +++ b/src/components/moveBtn/index.tsx @@ -1,48 +1,54 @@ -import { MovableArea, MovableView, View } from '@tarojs/components' +import { Image, MovableArea, MovableView } from '@tarojs/components' import Taro, { useReady } from '@tarojs/taro' -import type { ReactElement } from 'react' import { useEffect, useRef, useState } from 'react' import classnames from 'classnames' import styles from './index.module.scss' -import { GetShoppingCartApi } from '@/api/shopCart' import useCommonData from '@/use/useCommonData' import { useSelector } from '@/reducers/hooks' +import { BUSINESS_MANAGER, BUSINESS_MANAGER_PHONE } from '@/common/constant' +type ShowStatus = 'businessManager' interface param { - children?: ReactElement|null + children?: React.ReactNode + showList?: ShowStatus[] onClick?: () => void } -const MoveBtn = ({ children = null, onClick }: param) => { - // 获取购物车数据数量 - const { getShopCount, commonData } = useCommonData() +const MoveBtn = ({ children = null, onClick, showList = [] }: param) => { + const onShow = (val: ShowStatus) => { + if (showList.length <= 0) { return true } + return showList.includes(val) + } - const [screenHeight, setScreenHeight] = useState(0) - const [showMoveBtn, setShowMoveBtn] = useState(false) - const screenWidthRef = useRef(0) - useReady(() => { - const res = Taro.getSystemInfoSync() - if (res.screenHeight) { - const ratio = 750 / res.screenWidth - setScreenHeight(res.screenHeight * ratio - 460) - screenWidthRef.current = res.screenWidth / 2 - } - setShowMoveBtn(true) + const [screenHeight, setScreenHeight] = useState<{ shop?: number; businessManager?: number; order?: number; code?: number }>({ + shop: 0, + businessManager: 0, + order: 0, }) - useEffect(() => { - getShopCount() - }, []) - - const dragEnd = (e) => { + const screenWidthRef = useRef(0) + useReady(() => { + Taro.nextTick(() => { + const res = Taro.getSystemInfoSync() + if (res.screenHeight) { + const ratio = 750 / res.screenWidth + const num = res.screenHeight * ratio + setScreenHeight(() => ({ shop: num - 460, businessManager: num - 580, order: num - 700, code: num - 820 })) + screenWidthRef.current = res.screenWidth / 2 + } + }) + }) + const onClickBusinessManager = () => { + Taro.makePhoneCall({ + phoneNumber: BUSINESS_MANAGER_PHONE, + }) } return ( {children} - {showMoveBtn && dragEnd(e)}> - - {(commonData.shopCount > 0) && {commonData.shopCount > 99 ? '99+' : commonData.shopCount}} + {onShow('businessManager') && + } ) diff --git a/src/components/normalButton/index.tsx b/src/components/normalButton/index.tsx index df2bec4..b4005d4 100644 --- a/src/components/normalButton/index.tsx +++ b/src/components/normalButton/index.tsx @@ -5,9 +5,9 @@ import Loading from '../loading' import styles from './index.module.scss' type ButtonType = 'primary' | 'danger' | 'warning' | 'info' -type ButtonSize = 'normal' | 'small' +export type ButtonSize = 'normal' | 'small' -interface PropsType { +export interface NormalButtonPropsType { size?: ButtonSize type?: ButtonType round?: boolean // 大圆角 @@ -22,7 +22,7 @@ interface PropsType { loading?: boolean } -const NormalButton: FC = (props) => { +const NormalButton: FC = (props) => { const { type = 'primary', size = 'normal', diff --git a/src/components/steps/components/step/index.tsx b/src/components/steps/components/step/index.tsx new file mode 100644 index 0000000..97eb8e6 --- /dev/null +++ b/src/components/steps/components/step/index.tsx @@ -0,0 +1,31 @@ +import { View } from '@tarojs/components' +import classnames from 'classnames' +import type { FC } from 'react' +import '../../index.scss' + +export interface StepProps { + title?: React.ReactNode + description?: React.ReactNode + icon?: React.ReactNode + status?: 'wait' | 'process' | 'finish' | 'error' +} + +const Step: FC = (props) => { + const { + title, + description, + icon, + status = 'wait', + } = props + console.log('status==>', status) + return + + {icon || } + + + {title} + {!!description && {description}} + + +} +export default Step diff --git a/src/components/steps/index.scss b/src/components/steps/index.scss new file mode 100644 index 0000000..c5f19ed --- /dev/null +++ b/src/components/steps/index.scss @@ -0,0 +1,170 @@ +@import '../../styles/common.scss'; +$icon-size: 30px; +$icon-color: #e5e5e5; +$line-to-next-color: #e5e5e5; + +.step { + .step-indicator { + position: relative; + &::after { + content: ''; + position: absolute; + z-index: 0; + background-color: #e5e5e5; + } + .step-icon-container { + position: absolute; + z-index: 1; + background: white; + } + } + + &:last-child { + .step-indicator::after { + display: none; + } + } + &-status-finish { + .step-indicator::after { + background-color: $color_main; + } + } + + &-status-wait { + .step-icon-container { + color: #e5e5e5; + } + .step-title { + color: #999; + } + } + &-status-process { + .step-icon-container { + color: $color_main; + } + .step-title { + color: $color_main; + } + } + &-status-finish { + .step-icon-container { + color: $color_main; + } + } + &-status-error { + .step-icon-container { + color: $color_danger; + } + .step-title { + color: $color_danger; + } + } +} + +.steps { + $title-font-size: 28px; + $description-font-size: 24px; + $indicator-margin-right: 0; + + width: 100%; + box-sizing: border-box; + + &-horizontal { + display: flex; + justify-content: space-around; + padding: 16px 0; + + .step { + flex: 1; + + .step-indicator { + width: 100%; + height: 48px; + &::after { + left: 50%; + top: 50%; + height: 1px; + transform: translateY(-50%); + width: 100%; + } + .step-icon-container { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + } + + .step-content { + text-align: center; + font-size: $description-font-size; + padding: 4px 16px 0; + .step-title { + font-size: $title-font-size; + } + .step-description { + margin-top: 8px; + color: #999; + } + } + } + + &-vertical { + padding: 16px 32px; + + .step { + display: flex; + align-items: stretch; + + .step-indicator { + flex: none; + width: 48px; + margin-right: $indicator-margin-right; + + &::after { + left: 50%; + top: calc($title-font-size * 1.5 / 2); + width: 1px; + transform: translateX(-50%); + height: 100%; + } + .step-icon-container { + top: calc($title-font-size * 1.5 / 2); + left: 50%; + transform: translate(-50%, -50%); + } + } + + &:last-child { + .step-content { + padding-bottom: 0; + } + } + .step-content { + flex: auto; + padding-bottom: 48px; + .step-title { + font-size: $title-font-size; + line-height: 1.5; + } + .step-description { + padding-top: 8px; + font-size: $description-font-size; + color: #999; + } + } + } + } +} + +.step-icon-container { + font-size: $icon-size; +} + +.step-icon-dot { + display: block; + width: 16px; + height: 16px; + background: currentColor; + border-radius: 8px; +} diff --git a/src/components/steps/index.tsx b/src/components/steps/index.tsx new file mode 100644 index 0000000..d773cf5 --- /dev/null +++ b/src/components/steps/index.tsx @@ -0,0 +1,78 @@ +import { View } from '@tarojs/components' +import React from 'react' +import classNames from 'classnames' +import './index.scss' +import type { StepProps } from './components/step' + +/** + * 用法 + * + * + * + * + * + * + */ + +interface StepsProps { + current?: number + direction?: 'horizontal' | 'vertical' + children: React.ReactNode + customClassName?: string + customStyle?: React.CSSProperties +} +// 步骤条 +const Steps = (props: StepsProps) => { + const { + current = 0, + direction = 'horizontal', + children, + customClassName, + customStyle, + } = props + + return + { + React.Children.map(children, (child, index) => { + console.log('child', child) + if (!React.isValidElement(child)) { + return child + } + const props = child.props as StepProps + + // eslint-disable-next-line react/prop-types + let status = props.status || 'wait' + + if (index < current) { + // eslint-disable-next-line react/prop-types + status = props.status || 'finish' + } + else if (index === current) { + // eslint-disable-next-line react/prop-types + status = props.status || 'process' + } + console.log('status==>', status) + return React.cloneElement(child, { + // @ts-expect-error 无法推断 + status, + }) + }) + } + +} +export default Steps diff --git a/src/pages/addFabric/components/shoppingCart/index.tsx b/src/pages/addFabric/components/shoppingCart/index.tsx index 614f03d..1da503c 100644 --- a/src/pages/addFabric/components/shoppingCart/index.tsx +++ b/src/pages/addFabric/components/shoppingCart/index.tsx @@ -5,7 +5,7 @@ import classnames from 'classnames' import VirtualList from '@tarojs/components/virtual-list' import Goods from '../goodsItem' import styles from './index.module.scss' -import Divider from '@/components/Divider' +import Divider from '@/components/divider' import Search from '@/components/search' import Popup from '@/components/popup' import BottomCustomer from '@/components/BottomCustomer' diff --git a/src/pages/customerPage/index.tsx b/src/pages/customerPage/index.tsx index f7e527c..197e0ec 100644 --- a/src/pages/customerPage/index.tsx +++ b/src/pages/customerPage/index.tsx @@ -89,9 +89,11 @@ const CustomerPage = () => { setclientObj(item) const pages = Taro.getCurrentPages() // 获取当前的页面栈 const prevPage = pages[pages.length - 2] + console.log('prevPage', prevPage) prevPage.setData({ // 设置上一个页面的值 clientId: item.id, clientName: item.name, + clientPhone: item.phone, }) setClientlist(e => ({ ...e, list: clentList?.list, total: clentList?.total })) Taro.navigateBack({ diff --git a/src/pages/getColorCard/addColorCard/index.config.ts b/src/pages/getColorCard/addColorCard/index.config.ts new file mode 100644 index 0000000..e8660e0 --- /dev/null +++ b/src/pages/getColorCard/addColorCard/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '领取色卡', +} diff --git a/src/pages/getColorCard/addColorCard/index.module.scss b/src/pages/getColorCard/addColorCard/index.module.scss new file mode 100644 index 0000000..9c00d31 --- /dev/null +++ b/src/pages/getColorCard/addColorCard/index.module.scss @@ -0,0 +1,132 @@ +page { + background: #f7f7f7; + height: 100%; + display: flex; + flex-flow: column nowrap; +} +.layoutBlock { + padding: 24px 34px; +} +.main { + background-color: $color_bg_one; + height: 100%; + display: flex; + flex-flow: column nowrap; + overflow: hidden; +} +.context { + flex: 1 1 auto; + height: 100%; + overflow-y: scroll; +} +.addButton { + margin-left: 24px; + margin-right: 24px; + margin-top: 24px; +} +.customerTop { + color: #333333; + font-size: 28px; +} +.customerBottom { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + color: #9b9b9b; + font-size: 28px; +} + +.colorCardTop { + font-size: 28px; +} +.colorCardBottom { + width: 100%; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + overflow: hidden; + margin-bottom: 24px; + .leftCont { + width: 134px; + height: 134px; + border-radius: 8px; + margin-right: 24px; + } + .rightCont { + flex: 1 1 auto; + overflow: hidden; + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + &__top { + font-size: 28px; + @include common_ellipsis(1); + } + &__bottom { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + width: 100%; + align-items: flex-end; + } + &__left { + flex: 1 1 auto; + overflow: hidden; + } + &__right { + width: 30%; + } + } +} +.paymentMethod { + text-align: right; + font-size: 28px; + color: #f64861; +} + +.remarkTop { + display: flex; + justify-content: space-between; + .remarkTitle { + font-size: 28px; + font-weight: 500; + color: #393939; + } + .remarkTag { + display: flex; + flex-flow: row nowrap; + font-size: 24px; + color: #626262; + } +} + +.remarkBottom { + .remarkContent { + font-size: 28px; + color: #999999; + } +} + +.bottomBar { + .bottomTotal { + color: #aeaeae; + font-size: 24px; + } + position: relative; + z-index: 99; + box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1); + flex: none; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + padding-left: 20px; + padding-right: 20px; + padding-top: 24px; + background-color: white; + padding-bottom: calc(20px + constant(safe-area-inset-bottom)); + padding-bottom: calc(20px + env(safe-area-inset-bottom)); +} +.bottomBar__button { + font-size: 28px; +} diff --git a/src/pages/getColorCard/addColorCard/index.tsx b/src/pages/getColorCard/addColorCard/index.tsx new file mode 100644 index 0000000..bd4b96a --- /dev/null +++ b/src/pages/getColorCard/addColorCard/index.tsx @@ -0,0 +1,385 @@ +import { Text, View } from '@tarojs/components' +import Taro, { useDidShow, useUnload } from '@tarojs/taro' +import { useCallback, useEffect, useState } from 'react' +import styles from './index.module.scss' +import LayoutBlock from '@/components/layoutBlock' +import NormalButton from '@/components/normalButton' +import Divider from '@/components/divider' +import IconFont from '@/components/iconfont/iconfont' +import LabAndImg from '@/components/LabAndImg' +import Counter from '@/components/counter' +import Tag from '@/components/tag' +import { alert, goLink } from '@/common/common' +import { ClientListApi } from '@/api/order' +import AddressDetailBox from '@/pages/orderDetails/components/addressDetailBox' +import Popup from '@/components/popup' +import Remark from '@/pages/orderDetails/components/remark' +import { formatRemoveHashTag } from '@/common/format' +import { SubmitColorCardOrder } from '@/api/colorCard' +import MoveBtn from '@/components/moveBtn' + +const AddColorCard = () => { + // 获取选择的客户 + const pages = Taro.getCurrentPages() + const currPage = pages[pages.length - 1] // 获取当前页面 + const [addressInfo, setAddressInfo] = useState({}) + + // 获取客户 + const [clientList, setClientList] = useState([]) + const { fetchData: fetchClientData } = ClientListApi() + + const [order, setOrder] = useState([]) + + useDidShow(() => { + const colorCardCache = Taro.getStorageSync('colorCardCache') + if (colorCardCache) { + console.log('colorCardCache', JSON.parse(colorCardCache)) + setOrder(JSON.parse(colorCardCache)) + } + }) + + const [clientInfo, setClientInfo] = useState({ + clientId: -1, + clientName: '', + clientPhone: '', + }) + + const getClient = async() => { + const res = await fetchClientData({ + page: 1, size: 10, + }) + if (!res.success) { + return alert.error(res.msg) + } + currPage.data.clientId = res.data.list.length > 0 ? res.data.list[0]?.id : -1 + currPage.data.clientName = res.data.list.length > 0 ? res.data.list[0]?.name : '' + currPage.data.clientPhone = res.data.list.length > 0 ? res.data.list[0]?.phone : '' + const { + clientId, + clientName, + clientPhone, + } = currPage.data + setClientInfo({ + clientId, + clientName, + clientPhone, + }) + setClientList([...res.data.list]) + } + + useEffect(() => { + getClient() + }, []) + + useUnload(() => { + Taro.removeStorageSync('colorCardCache') + }) + + // 选择客户 + const handleSelectCustomer = () => { + goLink(`/pages/customerPage/index?clientId=${clientInfo?.clientId}`) + } + // 添加色卡 + const handleAddColorCard = () => { + Taro.setStorageSync('colorCardCache', JSON.stringify(order)) + + goLink('/pages/getColorCard/colorCardList/index', { isGoBack: true }) + } + + const { fetchData } = SubmitColorCardOrder() + // 提交订单 + const handleSubmitOrder = async() => { + if (!addressInfo.address_id) { + Taro.showToast({ + title: '请选择地址', + icon: 'none', + duration: 2000, + }) + return + } + if (!clientInfo.clientId) { + Taro.showToast({ + title: '请选择客户', + icon: 'none', + duration: 2000, + }) + return + } + // 请求数据 + const res = await fetchData({ + address_id: addressInfo.address_id, + color_card_infos: order.map(item => ({ id: item.id, count: item.count || 1 })), + purchaser_id: clientInfo.clientId, + remark, + }) + if (res.success) { + Taro.showToast({ + title: '提交成功', + icon: 'success', + duration: 2000, + }) + Taro.removeStorageSync('colorCardCache') + setTimeout(() => { + goLink('/pages/getColorCard/colorCardDetail/index', { id: res.data.id }, 'redirectTo') + }, 2000) + } + } + + const labAndImgObj = useCallback((item) => { + return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url } + }, []) + + const getInputValue = () => { + + } + + const deleteColorCard = (id) => { + setOrder((prev) => { + return prev.filter(item => item.id !== id) + }) + Taro.setStorageSync('colorCardCache', JSON.stringify(order.filter(item => item.id !== id))) + } + + const handleCountChange = (value: number, id: number) => { + console.log('value', value) + if (order.length === 1 && value === 0) { + Taro.showToast({ + title: '最后一个色卡不能删除', + icon: 'none', + duration: 2000, + }) + return + } + if (value === 0) { + Taro.showModal({ + content: '确认删除所选色卡？', + confirmText: '删除', + confirmColor: '#337fff', + success(res) { + if (res.confirm) { + deleteColorCard(id) + } + }, + }) + return + } + setOrder((prev) => { + const newOlder = prev.map((item) => { + if (item.id === id) { + item.count = value + } + return item + }) + Taro.setStorageSync('colorCardCache', JSON.stringify(newOlder)) + return newOlder + }) + } + + const handSelect = () => { + goLink(`/pages/addressManager/index?purchaser_id=${clientInfo.clientId}`) + } + // 接受选择客户页面传递过来的数据 + useDidShow(() => { + // 判断是否有跳转选择客户 + if (currPage.data?.clientId && currPage.data?.clientId !== '') { + setClientInfo({ + clientId: currPage.data?.clientId, + clientName: currPage.data?.clientName, + clientPhone: currPage.data?.clientPhone, + }) + } + // 默认客户 + if (currPage.data?.clientId == null) { + setClientInfo(() => { + return { + clientId: clientList.length > 0 ? clientList[0]?.id : -1, + clientName: clientList.length > 0 ? clientList[0]?.name : '', + clientPhone: clientList.length > 0 ? clientList[0]?.phone : '', + } + }) + } + }) + + const initAddressInfo = () => { + setAddressInfo(val => ({ + ...val, + province_name: '', + address_id: '', + city_name: '', + address_detail: '', + district_name: '', + target_user_name: '', + purchaser_phone: '', + })) + } + + useDidShow(() => { + // 获取选择的地址 + console.log('addressObj', currPage.data?.addressObj, clientInfo.clientId, currPage.data?.clientId) + if (!currPage.data?.addressObj) { return initAddressInfo() } + const { + purchaser_id, + province_name, + id, + city_name, + address_detail, + district_name, + name, + phone, + } = currPage.data?.addressObj + if (purchaser_id === currPage.data?.clientId) { + setAddressInfo(val => ({ + ...val, + province_name: province_name || '', + address_id: id || '', + city_name: city_name || '', + address_detail: address_detail || '', + district_name: district_name || '', + target_user_name: name || '', + purchaser_phone: phone || '', + })) + } + else { + initAddressInfo() + } + const selectId = id + const obj = currPage?.data?.ids?.filter((item) => { return item == selectId }) + console.log('ids', currPage?.data?.ids) + if (currPage?.data?.ids && obj.length === 0) { + initAddressInfo() + } + }) + + // 备注操作 + const [showDesc, setShowDesc] = useState(false) + const [remark, setRemark] = useState('') + const handleShowDesc = () => { + setShowDesc(true) + } + + const getRemark = useCallback((value: string) => { + setShowDesc(false) + console.log('remark', value) + setRemark(value) + }, []) + + return + + + {/* 客户信息 */} + + + 客户信息 + + + + { + clientInfo.clientId !== -1 + ? (<> + + {clientInfo.clientName} + + + {clientInfo.clientPhone} + + + ) + : 选择领取客户 + } + + + + { + clientInfo.clientId !== -1 && } + > + } + + 添加色卡 + {/* 色卡信息 */} + + 色卡信息 + + { + order.map((item) => { + return ( + + + + + + + + + {item.color_card_name} + + + + { + item.affiliation_product.map((product_color, index) => { + return {formatRemoveHashTag(product_color.code)} + }) + } + + + handleCountChange(e, item.id)} + onClickBtn={getInputValue} + unit="本" + minNum={0} + maxNum={999} + /> + + + + + + ) + }) + } + 快递到付 + + {/* 备注信息 */} + + + 备注信息 + + 填写/修改备注 + + + + + + { remark || '尚未备注信息' } + + + + + + + 当前共 {order.length} 种色卡,共 {order.reduce((total, curr) => total + (curr.count || 1), 0)} 本 + + + 提交订单 + + + + setShowDesc(false)}> + + + + +} +export default AddColorCard diff --git a/src/pages/getColorCard/colorCardDetail/index.config.ts b/src/pages/getColorCard/colorCardDetail/index.config.ts new file mode 100644 index 0000000..36d2b08 --- /dev/null +++ b/src/pages/getColorCard/colorCardDetail/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '色卡详情', +} diff --git a/src/pages/getColorCard/colorCardDetail/index.module.scss b/src/pages/getColorCard/colorCardDetail/index.module.scss new file mode 100644 index 0000000..d245899 --- /dev/null +++ b/src/pages/getColorCard/colorCardDetail/index.module.scss @@ -0,0 +1,203 @@ +page { + background: #f7f7f7; + height: 100%; + display: flex; + flex-flow: column nowrap; +} +.main { + background-color: $color_bg_one; + height: 100%; + display: flex; + flex-flow: column nowrap; + overflow: hidden; + .context { + flex: 1 1 auto; + height: 100%; + overflow-y: scroll; + } + .orderProcess { + font-size: 28px; + } + .orderInfoTop { + font-size: 28px; + color: $color_font_one; + } + .customerTop { + color: #333333; + font-size: 28px; + } + .customerBottom { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + color: #343434; + font-size: 28px; + } + + .colorCardTop { + font-size: 28px; + } + .colorCardBottom { + width: 100%; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + overflow: hidden; + margin-bottom: 24px; + .leftCont { + width: 134px; + height: 134px; + border-radius: 8px; + margin-right: 24px; + } + .rightCont { + flex: 1 1 auto; + overflow: hidden; + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + &__top { + font-size: 28px; + @include common_ellipsis(1); + } + &__bottom { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + width: 100%; + } + &__container { + display: flex; + flex-flow: row nowrap; + } + &__left { + flex: 1 1 auto; + overflow: hidden; + display: flex; + flex-flow: column nowrap; + } + &__right { + font-size: 28px; + } + } + } + .paymentMethod { + text-align: right; + font-size: 28px; + color: #f64861; + } +} +.address_box { + display: flex; + .address_box_left { + margin-right: 24px; + .cirle { + border-radius: 50%; + width: 64px; + height: 64px; + background: #4a7fff; + display: flex; + align-items: center; + justify-content: center; + } + } + .address_box_right { + flex: 1 1 auto; + .address { + height: 78px; + font-size: 28px; + font-weight: 500; + @include common_ellipsis(2); + color: #000000; + margin-right: 41px; + display: flex; + align-items: center; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; /*这里设置几行*/ + overflow: hidden; + } + .bottom { + display: flex; + align-items: center; + justify-content: space-between; + .reatName { + font-size: 28px; + font-weight: 500; + color: #337fff; + margin-right: 32px; + } + .leftbottom { + display: flex; + align-items: center; + .name { + line-height: 34px; + width: 84px; + height: 34px; + @include common_ellipsis(); + font-size: 28px; + font-weight: 400; + color: #343434; + margin-right: 16px; + } + + .phone { + height: 34px; + font-size: 28px; + font-weight: 400; + color: #343434; + } + } + } + } +} + +.bottomBar { + position: relative; + z-index: 99; + box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1); + flex: none; + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: center; + padding-left: 20px; + padding-right: 20px; + padding-top: 24px; + background-color: white; + padding-bottom: calc(20px + constant(safe-area-inset-bottom)); + padding-bottom: calc(20px + env(safe-area-inset-bottom)); +} +.bottomBar__button { + font-size: 28px; +} +.remark { + font-size: 28px; + color: #9b9b9b; +} + +.step-title { + display: flex; + flex-flow: row nowrap; + font-size: 28px; + align-items: center; +} +.step-status { + font-weight: 550; + color: #393939; + margin-right: 40px; +} +.attachment{ + display: flex; + flex-flow: row nowrap; + .step-url-container { + margin-right: 16px; + width: 128px; + height: 128px; + } + .step-url { + width: 100%; + height: 100%; + border-radius: 8px; + } +} diff --git a/src/pages/getColorCard/colorCardDetail/index.tsx b/src/pages/getColorCard/colorCardDetail/index.tsx new file mode 100644 index 0000000..d784be5 --- /dev/null +++ b/src/pages/getColorCard/colorCardDetail/index.tsx @@ -0,0 +1,245 @@ +import { Image, Text, View } from '@tarojs/components' +import Taro, { useRouter } from '@tarojs/taro' +import { useCallback, useEffect, useState } from 'react' +import styles from './index.module.scss' +import LayoutBlock from '@/components/layoutBlock' +import Divider from '@/components/divider' +import AddressDetailBox from '@/pages/orderDetails/components/addressDetailBox' +import LabAndImg from '@/components/LabAndImg' +import Tag from '@/components/tag' +import Cell from '@/components/cell' +import { formatDateTime, formatRemoveHashTag } from '@/common/format' +import NormalButton from '@/components/normalButton' +import Steps from '@/components/steps' +import Step from '@/components/steps/components/step' +import { CancelColorCardOrder, GetColorCardOrderDetail } from '@/api/colorCard' +import { alert } from '@/common/common' +import IconFont from '@/components/iconfont/iconfont' +import MoveBtn from '@/components/moveBtn' +import { BUSINESS_MANAGER } from '@/common/constant' + +const ColorCardDetail = () => { + const { fetchData } = GetColorCardOrderDetail() + + const router = useRouter() + + const getData = async() => { + console.log('id', router.params.id) + const res = await fetchData({ id: Number(router.params.id) }) + if (!res.success) { + return alert.error(res.msg) + } + setOrder(res.data) + } + + const [order, setOrder] = useState({}) + + const [addressInfo, setAddressInfo] = useState() + + const labAndImgObj = useCallback((item) => { + return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url } + }, []) + // 复制 + const handleCopy = (data: string) => { + Taro.setClipboardData({ + data, + success() { + Taro.showToast({ + title: '复制成功', + }) + }, + }) + } + + const { fetchData: cancelOrderApi } = CancelColorCardOrder() + + const cancelOrder = async(id: number) => { + const res = await cancelOrderApi({ id }) + if (res.success) { + getData() + alert.success('取消成功') + } + else { + alert.error(res.msg) + } + } + + // 取消订单 + const handleCancel = () => { + Taro.showModal({ + content: '确定取消该订单？', + confirmColor: '#337fff', + confirmText: '确认', + success: (res) => { + if (res.confirm) { + cancelOrder(Number(router.params.id)) + console.log('用户点击确定') + } + }, + }) + } + + useEffect(() => { + getData() + }, []) + + return + + + + 订单进程 + + + + {/* + 申请中 -> 已完成 2 + 申请中 -> 已取消 4 + 申请中 -> 已拒绝 3 + */} + + 申请中 + {formatDateTime(order?.order_progress?.[0].audit_time)} + + } + /> + {/* order.order_status === 1 申请中 */} + { + order.order_status !== 1 + ? + {order?.order_progress?.[1].order_status_name} + {formatDateTime(order?.order_progress?.[1].audit_time)} + + } description={ + <> + { + order?.order_progress?.[1].audit_remark ? {formatDateTime(order?.order_progress?.[1].audit_remark)} : null + } + { + order?.order_progress?.[1].delivery_appendix_url + ? + { + order?.order_progress?.[1].delivery_appendix_url?.map((url, index) => { + return + + + }) + } + + : null + } + + } + /> + : + } + + + + + + 客户信息 + + + {order?.purchaser_name} + {order?.purchaser_phone} + + + + + + + + + + + + + {order?.address} + + + + {order.target_user_name} + {order.target_user_phone} + + {order.shipment_mode_name} + + + + + {/* 色卡信息 */} + + 色卡信息 + + { + order.color_card_info?.map((item) => { + return ( + + + + + + + + + + + {item.name} + + + { + item.affiliation_product?.map((product_color, index) => { + return {formatRemoveHashTag(product_color)} + }) + } + + + + x{item.count}本 + + + + + + ) + }) + } + 快递到付 + + + 订单信息 + + + + {order.order_no} + handleCopy(order.order_no)}>复制 + + } + > + + + + + + 备注信息 + + {order?.remark || '暂无备注信息'} + + + + { + order.order_status === 1 + ? + 取消订单 + + : null + } + + + + +} +export default ColorCardDetail diff --git a/src/pages/getColorCard/colorCardList/index.config.ts b/src/pages/getColorCard/colorCardList/index.config.ts new file mode 100644 index 0000000..b5bcc75 --- /dev/null +++ b/src/pages/getColorCard/colorCardList/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '添加色卡', +} diff --git a/src/pages/getColorCard/colorCardList/index.module.scss b/src/pages/getColorCard/colorCardList/index.module.scss new file mode 100644 index 0000000..7e09252 --- /dev/null +++ b/src/pages/getColorCard/colorCardList/index.module.scss @@ -0,0 +1,102 @@ +page { + background: #f7f7f7; + height: 100%; + display: flex; + flex-flow: column nowrap; +} +.main { + background-color: $color_bg_one; + height: 100%; + display: flex; + flex-flow: column nowrap; + overflow: hidden; +} +.search { + width: 100%; + display: flex; + justify-content: space-between; + padding: 20px; + box-sizing: border-box; + align-items: center; + background-color: #fff; + border-bottom: 1px solid #e5e5e5; + &__cancel { + margin: 0 32px; + color: #727272; + font-size: 28px; + } +} + +.context { + flex: 1 1 auto; + height: 100%; + overflow: hidden; + background-color: white; +} + +.bottomBar { + position: relative; + z-index: 99; + box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1); + flex: none; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + padding-left: 20px; + padding-right: 20px; + padding-top: 24px; + background-color: white; + padding-bottom: calc(20px + constant(safe-area-inset-bottom)); + padding-bottom: calc(20px + env(safe-area-inset-bottom)); +} +.bottomBar__button { + width: 100%; + font-size: 28px; +} + +.colorCard { + padding: 24px 0; + border-bottom: 1px solid #f6f6f6; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + &__image { + width: 144px; + height: 144px; + border-radius: 8px; + margin-right: 24px; + overflow: hidden; + position: relative; + } + &__title { + font-size: 28px; + color: #383838; + } + &__code { + } + &__content { + flex: 1 1 auto; + display: flex; + flex-flow: column nowrap; + } + .addButton { + width: 20%; + display: flex; + justify-content: center; + align-items: center; + } +} +.imageTag { + width: 100%; + box-sizing: border-box; + position: absolute; + padding: 7px; + bottom: 0px; + right: 0px; + opacity: 0.55; + color: #ffffff; + text-align: center; + font-size: 24px; + z-index: 1; +} diff --git a/src/pages/getColorCard/colorCardList/index.tsx b/src/pages/getColorCard/colorCardList/index.tsx new file mode 100644 index 0000000..857fe93 --- /dev/null +++ b/src/pages/getColorCard/colorCardList/index.tsx @@ -0,0 +1,231 @@ +import { View } from '@tarojs/components' +import Taro, { useDidShow, useRouter, useUnload } from '@tarojs/taro' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import styles from './index.module.scss' +import Search from '@/components/search' +import NormalButton from '@/components/normalButton' +import LabAndImg from '@/components/LabAndImg' +import Tag from '@/components/tag' +import MCheckbox from '@/components/checkbox' +import InfiniteScroll from '@/components/infiniteScroll' +import { dataLoadingStatus, debounce, getFilterData } from '@/common/util' +import { alert, goLink } from '@/common/common' +import { GetCanAddCardList } from '@/api/colorCard' +import { formatRemoveHashTag } from '@/common/format' + +const ColorCardList = () => { + const { fetchData, state } = GetCanAddCardList() + + const [orderList, setOrderList] = useState<{ list: any[]; total: number }>({ + list: [], + total: 0, + }) + const multipleSelection = useRef([]) + // 搜索 + const getSearchData = debounce((value: string) => { + console.log('search', value) + }, 300) + // 取消 + const handleCancel = () => { + Taro.navigateBack() + } + + const router = useRouter() + + // redirectTo 会触发 onLoad 事件 + let isRedirect = false + // 确认 + const handleSubmit = () => { + const cache = Taro.getStorageSync('colorCardCache') + let cacheArr: any[] = multipleSelection.current + if (cache) { + cacheArr = [...cacheArr, ...JSON.parse(cache)] + } + Taro.setStorageSync('colorCardCache', JSON.stringify(cacheArr)) + if (router?.params.isGoBack) { + isRedirect = true + Taro.navigateBack({ + delta: 1, + }) + } + else { + isRedirect = true + // 携带id跳转 + goLink('/pages/getColorCard/addColorCard/index', null, 'redirectTo') + } + } + + const labAndImgObj = useCallback((item) => { + return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url } + }, []) + // 页码和页数 + const [searchField, setSearchField] = useState<{ name?: string; color_card_ids?: number[]; page: number; size: number }>({ + name: '', + color_card_ids: [], + page: 1, + size: 10, + }) + + const getData = async() => { + const res = await fetchData(getFilterData(searchField)) + if (!res.success) { + return alert.error(res.msg) + } + setOrderList({ list: res.data.list, total: res.data.total }) + } + + useEffect(() => { + getData() + }, [searchField]) + + useDidShow(() => { + const cache = Taro.getStorageSync('colorCardCache') + if (cache) { + setSearchField(val => ({ ...val, color_card_ids: JSON.parse(cache).map(item => item.id) })) + } + }) + + useDidShow(() => { + + }) + + // 上拉加载数据 + const pageNum = useRef({ size: searchField.size, page: searchField.page }) + // 列表下拉刷新 + const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) + // 下拉刷新 + const getRefresherRefresh = async() => { + pageNum.current.size = 1 + setRefresherTriggeredStatus(true) + setSearchField(val => ({ ...val, size: 10 })) + } + // 数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({ list: orderList.list, total: orderList.total, status: state.loading! }) + }, [orderList, state.loading]) + + const getScrollToLower = useCallback(() => { + if (orderList.list.length < orderList.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchField({ ...searchField, size }) + } + }, [orderList]) + // 选择 + const onSelect = (item: any) => { + console.log('item==>', item) + setOrderList((prev: any) => { + prev.list?.forEach((val) => { + if (val.id === item.id) { + val.status = true + multipleSelection.current = [...multipleSelection.current, val] + } + }) + return { list: prev.list, total: prev.total } + }) + } + // 未选择 + const onUnSelect = (item: any) => { + setOrderList((prev: any) => { + prev.list?.forEach((val) => { + if (val.id === item.id) { + val.status = false + multipleSelection.current = multipleSelection.current.filter(mul => mul.id !== val.id) + } + }) + return { list: prev.list, total: prev.total } + }) + console.log('multipleSelection', multipleSelection.current) + } + + const handleClickCheckBox = (item: any) => { + console.log('item', item) + if (!item.is_add) { + if (item.status) { + onUnSelect(item) + } + else { + onSelect(item) + } + } + } + const noop = (e) => { + e.stopPropagation() + } + + useUnload(() => { + console.log('onUnload', isRedirect) + if (!isRedirect) { + Taro.removeStorageSync('colorCardCache') + } + }) + + return + + + 取消 + + + + + { + orderList.list.map((item) => { + return handleClickCheckBox(item)}> + + + + + { + item.is_multiple_product ? 多面料共用 : null + } + + + + {item.color_card_name} + + { + item.affiliation_product?.map((colorCode, index) => { + return {formatRemoveHashTag(colorCode.code)} + }) + } + + + + onSelect(item)} + onClose={() => onUnSelect(item)} + /> + + + + }) + } + + + + + + { + multipleSelection.current.length ? `确认（已选 ${multipleSelection.current.length} 个）` : '确认' + } + + + + +} +export default ColorCardList diff --git a/src/pages/getColorCard/components/itemList/index.module.scss b/src/pages/getColorCard/components/itemList/index.module.scss new file mode 100644 index 0000000..d366ea9 --- /dev/null +++ b/src/pages/getColorCard/components/itemList/index.module.scss @@ -0,0 +1,135 @@ +.topItem { + display: flex; + align-items: center; + justify-content: space-between; + + .orderNo { + font-size: 28px; + font-weight: 550; + color: #000000; + } + + .status { + font-size: 28px; + font-weight: 550; + color: #0d7cff; + } +} +.flexBox { + display: flex; + align-items: center; + .pussName { + margin-right: 10px; + font-size: 28px; + font-weight: 500; + color: #666666; + } + .tag { + background-color: #e3ecff; + border-color: transparent; + color: #337fff; + } +} + +.contBox { + width: 100%; + display: flex; + justify-content: space-between; + overflow: hidden; + .leftCont { + width: 134px; + height: 134px; + border-radius: 8px; + position: relative; + } + + .rightCont { + width: calc(100% - 134px); + flex: 1 1 auto; + display: flex; + flex-flow: column nowrap; + overflow: hidden; + margin-left: 24px; + justify-content: space-between; + .rightTop { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; + + .productName { + width: 70%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-right: 8px; + font-size: 28px; + color: #000000; + } + + .shipMode { + width: 25%; + font-size: 28px; + color: #000000; + text-align: right; + } + } + + .colorsBox { + display: flex; + align-items: center; + + .colorName { + flex: 1; + font-size: 28px; + color: #797979; + text-align: right; + } + } + } +} + +.lineOne { + // width: 638px; + margin-right: 32px; + height: 1px; + background: #e7e7e7; + // opacity: 0.1; + margin-left: 32px; + margin-top: 24px; +} + +.bottomMsg { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; + + .msgLeft { + font-size: 24px; + font-weight: 400; + color: #a1a1a1; + } + + .msgRight { + font-size: 24px; + font-weight: 400; + color: #a1a1a1; + } +} +.paymentMethod { + display: flex; + justify-content: flex-end; + .msgRightOne { + font-size: 28px; + font-weight: 500; + color: #f64861; + align-self: flex-end; + } +} + +.bottomBox { + display: flex; + justify-content: flex-end; + margin-top: 32px; +} diff --git a/src/pages/getColorCard/components/itemList/index.tsx b/src/pages/getColorCard/components/itemList/index.tsx new file mode 100644 index 0000000..06188b8 --- /dev/null +++ b/src/pages/getColorCard/components/itemList/index.tsx @@ -0,0 +1,87 @@ +import type { ITouchEvent } from '@tarojs/components' +import { ScrollView, View } from '@tarojs/components' +import Taro from '@tarojs/taro' +import { memo, useCallback, useEffect, useMemo, useState } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' +import BottomBtns from '@/components/BottomBtns' +import { formatPriceDiv } from '@/common/format' +import LabAndImg from '@/components/LabAndImg' +import NormalButton from '@/components/normalButton' +import Divider from '@/components/divider' +import Tag from '@/components/tag' +import LayoutBlock from '@/components/layoutBlock' +import { goLink } from '@/common/common' + +interface PropsType { + data?: any + cancel?: (e: ITouchEvent) => void +} +const ItemList = (props: PropsType) => { + const { data, cancel } = props + + const labAndImgObj = useCallback((item) => { + return { lab: item?.lab, rgb: item?.rgb, texture_url: item?.texture_url } + }, []) + // 进入详情页 + const navTo = () => { + goLink('/pages/getColorCard/colorCardDetail/index', { id: data.order_id }) + } + + return ( + + + 单号：{data.order_no} + {data.order_status_name} + + + {data.purchaser_name} + + {data.sale_user_name} + + + + + + + + + + + + + {data.color_card_info[0].name} + {data.shipment_mode_name} + + + x{data.color_card_info[0].count || 0}本 + + + + + + 色卡信息： + {data?.color_card_count || 0} 种色卡，共 {data?.color_card_number || 0} 本 + + + 快递到付 + + + { + data.order_status === 1 && + 取消订单 + + } + + + + ) +} +export default memo(ItemList) diff --git a/src/pages/getColorCard/index.config.ts b/src/pages/getColorCard/index.config.ts new file mode 100644 index 0000000..e8660e0 --- /dev/null +++ b/src/pages/getColorCard/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '领取色卡', +} diff --git a/src/pages/getColorCard/index.module.scss b/src/pages/getColorCard/index.module.scss new file mode 100644 index 0000000..b6ba5a5 --- /dev/null +++ b/src/pages/getColorCard/index.module.scss @@ -0,0 +1,66 @@ +page { + background: #f7f7f7; + height: 100%; + display: flex; + flex-flow: column nowrap; +} +.main { + background-color: $color_bg_one; + height: 100%; + display: flex; + flex-flow: column nowrap; + overflow: hidden; + + .search { + width: 100%; + display: flex; + justify-content: space-between; + padding: 20px; + box-sizing: border-box; + align-items: center; + background-color: #fff; + border-bottom: 1px solid #e5e5e5; + } + .tab_bar{ + position: relative; + z-index: 99; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + padding: 20px; + background-color: white; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + } + .color_card_list{ + flex: 1 1 auto; + height: 100%; + overflow: hidden; + .order_item{ + margin: 20px 0; + } + } + .bottomBar { + position: relative; + z-index: 99; + box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1); + flex: none; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + padding-left: 20px; + padding-right: 20px; + padding-top: 24px; + background-color: white; + padding-bottom: calc(20px + constant(safe-area-inset-bottom)); + padding-bottom: calc(20px + env(safe-area-inset-bottom)); + } +} +.tab_bar .button{ + padding: 0 60px; +} +.bottomBar__button{ + width: 100%; + font-size: 28px; +} diff --git a/src/pages/getColorCard/index.tsx b/src/pages/getColorCard/index.tsx new file mode 100644 index 0000000..28a7bcf --- /dev/null +++ b/src/pages/getColorCard/index.tsx @@ -0,0 +1,169 @@ +import type { ITouchEvent } from '@tarojs/components' +import { View } from '@tarojs/components' +import Taro from '@tarojs/taro' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import styles from './index.module.scss' +import ItemList from './components/itemList' +import Search from '@/components/search' +import NormalButton from '@/components/normalButton' +import InfiniteScroll from '@/components/infiniteScroll' +import { dataLoadingStatus, debounce, getFilterData } from '@/common/util' +import FilterButton from '@/components/filterButton' +import { alert, goLink } from '@/common/common' +import { CancelColorCardOrder, GetColorCardOrderList } from '@/api/colorCard' +import IconFont from '@/components/iconfont/iconfont' +import Empty from '@/components/empty' +import { COLOR_CARD_LIST_EMPTY_IMAGE } from '@/common/constant' + +const GetColorCard = () => { + const { fetchData, state } = GetColorCardOrderList() + const getData = async() => { + const res = await fetchData(getFilterData(searchField)) + if (!res.success) { + return alert.error(res.msg) + } + setColorList({ list: res.data.list, total: res.data.total }) + } + + // status 1 申请中 2 已完成 + // 页码和页数 + const [searchField, setSearchField] = useState<{ name?: string; status?: number; page: number; size: number }>({ + name: '', + status: 0, + page: 1, + size: 10, + }) + const [colorList, setColorList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 }) + + // 列表下拉刷新 + const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) + // 数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({ list: colorList.list, total: colorList.total, status: state.loading! }) + }, [colorList, state.loading]) + // 筛选参数 + // 上拉加载数据 + const pageNum = useRef({ size: searchField.size, page: searchField.page }) + + const getRefresherRefresh = async() => { + pageNum.current.size = 1 + setRefresherTriggeredStatus(true) + setSearchField(val => ({ ...val, size: 10 })) + } + const getScrollToLower = useCallback(() => { + if (colorList.list.length < colorList.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchField({ ...searchField, size }) + } + }, [colorList]) + + // 领取色卡 + const getColorCard = () => { + goLink('/pages/getColorCard/colorCardList/index') + } + + // 搜索 + const getSearchData = debounce((value: string) => { + setSearchField(e => ({ ...e, name: value })) + }, 300) + + const FilterOptions = [ + { + key: 0, + label: '全部记录', + }, + { + key: 1, + label: '申请中', + }, + { + key: 2, + label: '已完成', + }, + ] + + const handleClickFilter = (item: typeof FilterOptions[number]) => { + if (searchField.status === item.key) { return } + setSearchField(e => ({ ...e, status: item.key })) + } + + useEffect(() => { + getData() + }, [searchField]) + + const { fetchData: cancelOrderApi } = CancelColorCardOrder() + + const cancelOrder = async(id) => { + const res = await cancelOrderApi({ id }) + if (res.success) { + getData() + } + } + + // 取消订单 + const handleCancel = (e: ITouchEvent, id: number) => { + e.stopPropagation() + Taro.showModal({ + content: '确定取消该订单？', + confirmColor: '#337fff', + confirmText: '确认', + success: (res) => { + if (res.confirm) { + cancelOrder(id) + console.log('用户点击确定') + } + }, + }) + } + + // 监听选择的类型 + // useEffect(() => { + // setSearchObj(search) + // if (search.goodsId) { getGoodList() } + // }, [search]) + + return + + + + + { + FilterOptions.map((item, index) => { + return handleClickFilter(item)}>{item.label} + }) + } + + + } + statusMore={statusMore} + selfonScrollToLower={getScrollToLower} + refresherEnabled + refresherTriggered={refresherTriggeredStatus} + selfOnRefresherRefresh={getRefresherRefresh} + safeAreaInsetBottom={false} + > + {colorList?.list?.map((item, index) => { + return ( + + handleCancel(e, item.order_id)}> + + ) + })} + + + + + 领取色卡 + + + +} + +export default GetColorCard diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 206d877..7765e6f 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -11,6 +11,7 @@ import IconCard from '@/components/iconCard' import { LoginApi } from '@/api' import { alert } from '@/common/common' import useUserInfo from '@/use/useUserInfo' +import { BUSINESS_MANAGER_PHONE } from '@/common/constant' const QuickLogin: FC = () => { return ( @@ -85,7 +86,7 @@ const Login: FC = () => { } // 处理忘记密码的逻辑 const handleForgetPwd = () => { - Taro.showToast({ title: '联系客服:0757-86834274', icon: 'none' }) + Taro.showToast({ title: `联系客服:${BUSINESS_MANAGER_PHONE}`, icon: 'none' }) } return ( diff --git a/src/pages/orderDetails/components/addressDetailBox/index.tsx b/src/pages/orderDetails/components/addressDetailBox/index.tsx index 73c051e..5fb8399 100644 --- a/src/pages/orderDetails/components/addressDetailBox/index.tsx +++ b/src/pages/orderDetails/components/addressDetailBox/index.tsx @@ -5,29 +5,45 @@ import styles from './index.module.scss' import IconFont from '@/components/iconfont/iconfont' import { alert } from '@/common/common' +interface AddressInfo { + take_goods_address: string + province_name: string + city_name: string + district_name: string + address_detail: string + target_user_name: string + purchaser_phone: string +} interface propsObj { - receivingStatus: Number | null - onReceivingStatus?: (any, Number) => void - obj?: any + receivingStatus: Number | null // 1 自提 2 物流 + onReceivingStatus?: (any, Number) => void // 切换自提或者物流 + obj?: AddressInfo navSelect?: (any) => void + icon?: React.ReactNode showBtn?: boolean showWhatFont?: string + isReadonly?: boolean } const AddressDetailBox = (props: propsObj) => { const { receivingStatus = null, onReceivingStatus, - obj = {}, + obj = { + target_user_name: '暂无', + purchaser_phone: '暂无', + } as AddressInfo, navSelect, showBtn = true, showWhatFont = '', + isReadonly = false, + icon, } = props return ( navSelect?.(obj)}> - + {icon ?? } { receivingStatus == 1 && {obj.take_goods_address || '中华人民共和国广东省佛山市禅城区陆盈纺织仓库'} @@ -38,11 +54,12 @@ const AddressDetailBox = (props: propsObj) => { } { (obj?.province_name == '' && receivingStatus == 2) - && + && 请选择地址 } { - receivingStatus !== 1 - && + (receivingStatus !== 1 && !isReadonly) + ? + : null } diff --git a/src/pages/saleStatistic/index.tsx b/src/pages/saleStatistic/index.tsx index bc2eb38..ba32cb6 100644 --- a/src/pages/saleStatistic/index.tsx +++ b/src/pages/saleStatistic/index.tsx @@ -8,7 +8,7 @@ import { ProductRankApi, PurchaserRankApi, SaleOrderDataFormApi, SalesmanRankApi import { dataUnit, formatHashTag, formatPriceDiv, setPriceUnit } from '@/common/format' import { getFilterData } from '@/common/util' import Cell from '@/components/cell' -import Divider from '@/components/Divider' +import Divider from '@/components/divider' import Iconfont from '@/components/iconfont/iconfont' import LayoutBlock from '@/components/layoutBlock' import SelectMarketingDepartment from '@/components/SelectMarketingDepartment' diff --git a/src/pages/takeDelivery/components/Filter/index.tsx b/src/pages/takeDelivery/components/Filter/index.tsx index 4c4b21f..a724a7b 100644 --- a/src/pages/takeDelivery/components/Filter/index.tsx +++ b/src/pages/takeDelivery/components/Filter/index.tsx @@ -129,13 +129,13 @@ const DeliveryFilter = (props: DeliveryPropsType) => { 提货类型 - handleSelectedType('default')}> + handleSelectedType('default')}> 不限 {!!typeList?.length && typeList?.map((item, key) => { return ( - handleSelectedType(item?.id)}> + handleSelectedType(item?.id)}> {item.name} // handleSelectedType(item?.id)}> @@ -151,12 +151,12 @@ const DeliveryFilter = (props: DeliveryPropsType) => { {Object.entries(filterTimeOptions).map(([key, value], index) => { return ( - handleSelectedTime(key)}> + handleSelectedTime(key)}> {value.name} ) })} - handleSelectedTime('6')}> + handleSelectedTime('6')}> 自定义时间 diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index 7797ac4..42484b1 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -12,7 +12,7 @@ import { TabBarIndex } from '@/reducers/tabBar' import { TabBarType } from '@/constants/tabbar' import NormalButton from '@/components/normalButton' import Tag from '@/components/tag' -import Divider from '@/components/Divider' +import Divider from '@/components/divider' import LayoutBlock from '@/components/layoutBlock' import IconCard from '@/components/iconCard' import type { IconNames } from '@/components/iconfont/iconfont' @@ -37,12 +37,6 @@ interface IconCardType { } const feature: IconCardType[] = [ - { - iconName: 'icon-lingquseka', - name: '领取色卡', - path: '', - jurisdiction: 'receive_color_card_page', - }, { iconName: 'icon-pandiansaoma', name: '盘点扫码', @@ -85,6 +79,12 @@ const feature: IconCardType[] = [ path: '/pages/customerManagement/index', jurisdiction: 'customer_list_page', }, + { + iconName: 'icon-lingquseka', + name: '领取色卡', + path: '/pages/getColorCard/index', + jurisdiction: 'receive_color_card_page', + }, ] const fabric: IconCardType[] = [