✨ feat(ID1000868): 内部商城用户申请领取色卡
【商城用户申请领取色卡】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000868
This commit is contained in:
xuan
parent
4f02cec568
commit
91a97502c1
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
56
src/api/colorCard/colorCardOrder.ts
Normal file
56
src/api/colorCard/colorCardOrder.ts
Normal file
@ -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',
|
||||
})
|
||||
}
|
||||
7
src/api/colorCard/index.ts
Normal file
7
src/api/colorCard/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export {
|
||||
GetColorCardOrderList,
|
||||
GetColorCardOrderDetail,
|
||||
SubmitColorCardOrder,
|
||||
GetCanAddCardList,
|
||||
CancelColorCardOrder,
|
||||
} from './colorCardOrder'
|
||||
@ -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'],
|
||||
|
||||
@ -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
|
||||
|
||||
@ -30,10 +30,6 @@
|
||||
border: 1px solid #68b4ff;
|
||||
}
|
||||
|
||||
.address-list:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.address-list-last {
|
||||
margin-bottom: 300px;
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = (props) => {
|
||||
{!!enumList.length
|
||||
&& enumList.map((item: EnumList, key) => {
|
||||
return (
|
||||
<FilterButton key={key} isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
<FilterButton circle key={key} isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
{item.name}
|
||||
</FilterButton>
|
||||
)
|
||||
|
||||
@ -69,7 +69,7 @@ const SelectSaleType = (props: SelectSaleTypeProps, ref) => {
|
||||
{!!enumList.length
|
||||
&& enumList.map((item: EnumList, key) => {
|
||||
return (
|
||||
<FilterButton key={key} isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
<FilterButton circle key={key} isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
{item.name}
|
||||
</FilterButton>
|
||||
)
|
||||
|
||||
@ -153,12 +153,12 @@ const SelectTimePicker = (props: SelectSaleTypeProps, ref) => {
|
||||
.slice(0, -1)
|
||||
.map(([key, value], index) => {
|
||||
return (
|
||||
<FilterButton key={index} isActive={key === currentValue} onClick={() => handleClick(key as Key)}>
|
||||
<FilterButton circle key={index} isActive={key === currentValue} onClick={() => handleClick(key as Key)}>
|
||||
{value.name}
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
<FilterButton customClassName={styles.customFilterTime} isActive={currentValue === 'custom'} onClick={handleCustomTime}>
|
||||
<FilterButton circle customClassName={styles.customFilterTime} isActive={currentValue === 'custom'} onClick={handleCustomTime}>
|
||||
<Text>{customFilterButtonText.current}</Text>
|
||||
<IconFont name="icon-chakanquanbukehu" color={currentValue === 'custom' ? '#3983ff' : '#7f7f7f'}></IconFont>
|
||||
</FilterButton>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
box-sizing: border-box;
|
||||
border: 0 solid transparent;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 8px;
|
||||
font-size: 28px;
|
||||
height: 72px;
|
||||
&--text {
|
||||
|
||||
@ -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<ButtonPropsType> = (props) => {
|
||||
const { onClick, children, isActive = false, customClassName } = props
|
||||
const { onClick, children, isActive = false, customClassName, size = 'normal', ...normalProps } = props
|
||||
const handleClick = () => {
|
||||
onClick?.()
|
||||
}
|
||||
return (
|
||||
<NormalButton
|
||||
customTextClassName={styles['filterButton--text']}
|
||||
customClassName={classnames(styles.filterButton, isActive && styles['filterButton--active'], customClassName)}
|
||||
{...normalProps}
|
||||
customClassName={classnames(customClassName, styles.filterButton, isActive && styles['filterButton--active'])}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{children}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
.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_bg_moveBtn {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
@ -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 (
|
||||
<MovableArea className={styles.movableItem}>
|
||||
{children}
|
||||
{showMoveBtn && <MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia x="630rpx" y={`${screenHeight}rpx`} onTouchEnd={e => dragEnd(e)}>
|
||||
<View className={classnames('iconfont', 'icon-gouwuche', styles.shop_icon)} ></View>
|
||||
{(commonData.shopCount > 0) && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
|
||||
{onShow('businessManager') && <MovableView onClick={onClickBusinessManager} className={classnames(styles.moveBtn, styles.no_bg_moveBtn)} direction="all" inertia x="630rpx" y={`${screenHeight.businessManager}rpx`}>
|
||||
<Image mode="aspectFit" src={BUSINESS_MANAGER} />
|
||||
</MovableView>}
|
||||
</MovableArea>
|
||||
)
|
||||
|
||||
@ -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<PropsType> = (props) => {
|
||||
const NormalButton: FC<NormalButtonPropsType> = (props) => {
|
||||
const {
|
||||
type = 'primary',
|
||||
size = 'normal',
|
||||
|
||||
31
src/components/steps/components/step/index.tsx
Normal file
31
src/components/steps/components/step/index.tsx
Normal file
@ -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<StepProps> = (props) => {
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
status = 'wait',
|
||||
} = props
|
||||
console.log('status==>', status)
|
||||
return <View className={classnames(`step-status-${status}`, 'step')}>
|
||||
<View className="step-indicator">
|
||||
<View className="step-icon-container">{icon || <View className="step-icon-dot"></View>}</View>
|
||||
</View>
|
||||
<View className="step-content">
|
||||
<View className="step-title">{title}</View>
|
||||
{!!description && <View className="step-description">{description}</View>}
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
export default Step
|
||||
170
src/components/steps/index.scss
Normal file
170
src/components/steps/index.scss
Normal file
@ -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;
|
||||
}
|
||||
78
src/components/steps/index.tsx
Normal file
78
src/components/steps/index.tsx
Normal file
@ -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'
|
||||
|
||||
/**
|
||||
* 用法
|
||||
* <Steps direction="vertical">
|
||||
* <Step
|
||||
* status="finish"
|
||||
* title="已下单"
|
||||
* description="2021-08-09 15:00:00"
|
||||
* />
|
||||
* <Step
|
||||
* status="finish"
|
||||
* title="已下单"
|
||||
* description="2021-08-09 15:00:00"
|
||||
* />
|
||||
* <Step
|
||||
* title="已下单"
|
||||
* status="error"
|
||||
* description="2021-08-09 15:00:00"
|
||||
* />
|
||||
* <Step
|
||||
* title="已下单"
|
||||
* description="2021-08-09 15:00:00"
|
||||
* />
|
||||
*</Steps>
|
||||
*/
|
||||
|
||||
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 <View className={classNames('steps', `steps-${direction}`, customClassName)} style={customStyle}>
|
||||
{
|
||||
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,
|
||||
})
|
||||
})
|
||||
}
|
||||
</View>
|
||||
}
|
||||
export default Steps
|
||||
@ -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'
|
||||
|
||||
@ -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({
|
||||
|
||||
3
src/pages/getColorCard/addColorCard/index.config.ts
Normal file
3
src/pages/getColorCard/addColorCard/index.config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '领取色卡',
|
||||
}
|
||||
132
src/pages/getColorCard/addColorCard/index.module.scss
Normal file
132
src/pages/getColorCard/addColorCard/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
385
src/pages/getColorCard/addColorCard/index.tsx
Normal file
385
src/pages/getColorCard/addColorCard/index.tsx
Normal file
@ -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<any>({})
|
||||
|
||||
// 获取客户
|
||||
const [clientList, setClientList] = useState<any[]>([])
|
||||
const { fetchData: fetchClientData } = ClientListApi()
|
||||
|
||||
const [order, setOrder] = useState<any[]>([])
|
||||
|
||||
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 <MoveBtn showList={['businessManager']}>
|
||||
<View className={styles.main}>
|
||||
<View className={styles.context}>
|
||||
{/* 客户信息 */}
|
||||
<LayoutBlock circle onClick={handleSelectCustomer} customStyle={{ marginTop: '12px' }} customClassName={styles.layoutBlock}>
|
||||
<View className={styles.customerTop}>
|
||||
<View>客户信息</View>
|
||||
</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.customerBottom}>
|
||||
{
|
||||
clientInfo.clientId !== -1
|
||||
? (<>
|
||||
<Text>
|
||||
{clientInfo.clientName}
|
||||
</Text>
|
||||
<Text>
|
||||
{clientInfo.clientPhone}
|
||||
</Text>
|
||||
</>
|
||||
)
|
||||
: <View>选择领取客户</View>
|
||||
}
|
||||
<IconFont name="icon-chakanquanbukehu" color="#444444" size={32}></IconFont>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
{
|
||||
clientInfo.clientId !== -1 && <AddressDetailBox
|
||||
showBtn={false}
|
||||
showWhatFont="物流"
|
||||
navSelect={handSelect}
|
||||
obj={addressInfo}
|
||||
receivingStatus={2}
|
||||
icon={<IconFont name="icon-dizhi1" size={60}></IconFont>}
|
||||
></AddressDetailBox>
|
||||
}
|
||||
|
||||
<NormalButton customClassName={styles.addButton} circle onClick={handleAddColorCard} plain size="normal" type="primary">添加色卡</NormalButton>
|
||||
{/* 色卡信息 */}
|
||||
<LayoutBlock customStyle={{ marginTop: '12px' }} circle customClassName={styles.layoutBlock}>
|
||||
<View className={styles.colorCardTop}>色卡信息</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
{
|
||||
order.map((item) => {
|
||||
return (
|
||||
<View className={styles.colorCardBottom} key={item.id}>
|
||||
<View style={{ minWidth: '24%' }}>
|
||||
<View className={styles.leftCont}>
|
||||
<LabAndImg value={labAndImgObj(item)} />
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.rightCont}>
|
||||
<View className={styles.rightCont__top}>
|
||||
{item.color_card_name}
|
||||
</View>
|
||||
<View className={styles.rightCont__bottom}>
|
||||
<View className={styles.rightCont__left}>
|
||||
{
|
||||
item.affiliation_product.map((product_color, index) => {
|
||||
return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color.code)}</Tag>
|
||||
})
|
||||
}
|
||||
</View>
|
||||
<View className={styles.rightCont__right}>
|
||||
<Counter
|
||||
onBlue={getInputValue}
|
||||
defaultNum={item?.count || 1}
|
||||
onChange={e => handleCountChange(e, item.id)}
|
||||
onClickBtn={getInputValue}
|
||||
unit="本"
|
||||
minNum={0}
|
||||
maxNum={999}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0 0 ' }}></Divider>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
<View className={styles.paymentMethod}>快递到付</View>
|
||||
</LayoutBlock>
|
||||
{/* 备注信息 */}
|
||||
<LayoutBlock circle customClassName={styles.layoutBlock} onClick={handleShowDesc}>
|
||||
<View className={styles.remarkTop}>
|
||||
<View className={styles.remarkTitle}>备注信息</View>
|
||||
<View className={styles.remarkTag}>
|
||||
<Text>填写/修改备注</Text>
|
||||
<IconFont name="icon-chakanquanbukehu" color="#444444" size={32}></IconFont>
|
||||
</View>
|
||||
</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.remarkBottom}>
|
||||
<View className={styles.remarkContent}>{ remark || '尚未备注信息' }</View>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
|
||||
</View>
|
||||
<View className={styles.bottomBar}>
|
||||
<View className={styles.bottomTotal}>
|
||||
当前共 {order.length} 种色卡,共 {order.reduce((total, curr) => total + (curr.count || 1), 0)} 本
|
||||
</View>
|
||||
<NormalButton
|
||||
customClassName={styles.bottomBar__button}
|
||||
type="primary"
|
||||
round
|
||||
onClick={handleSubmitOrder}
|
||||
>
|
||||
提交订单
|
||||
</NormalButton>
|
||||
|
||||
</View>
|
||||
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
|
||||
<Remark onSave={getRemark} defaultValue={remark} showInput={!!showDesc} />
|
||||
</Popup>
|
||||
</View>
|
||||
</MoveBtn>
|
||||
}
|
||||
export default AddColorCard
|
||||
3
src/pages/getColorCard/colorCardDetail/index.config.ts
Normal file
3
src/pages/getColorCard/colorCardDetail/index.config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '色卡详情',
|
||||
}
|
||||
203
src/pages/getColorCard/colorCardDetail/index.module.scss
Normal file
203
src/pages/getColorCard/colorCardDetail/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
245
src/pages/getColorCard/colorCardDetail/index.tsx
Normal file
245
src/pages/getColorCard/colorCardDetail/index.tsx
Normal file
@ -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<any>({})
|
||||
|
||||
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 <MoveBtn showList={['businessManager']}>
|
||||
<View className={styles.main} >
|
||||
<View className={styles.context}>
|
||||
<LayoutBlock circle customStyle={{ padding: '24rpx', marginTop: '24rpx' }}>
|
||||
<View className={styles.orderProcess}>订单进程</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.orderProcessBottom}>
|
||||
<Steps current={order.order_status === 1 ? 0 : 1} direction="vertical" customStyle={{ padding: '0' }}>
|
||||
{/*
|
||||
申请中 -> 已完成 2
|
||||
申请中 -> 已取消 4
|
||||
申请中 -> 已拒绝 3
|
||||
*/}
|
||||
<Step
|
||||
title={
|
||||
<View className={styles['step-title']}>
|
||||
<Text className={styles['step-status']}>申请中</Text>
|
||||
<Text>{formatDateTime(order?.order_progress?.[0].audit_time)}</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
{/* order.order_status === 1 申请中 */}
|
||||
{
|
||||
order.order_status !== 1
|
||||
? <Step status={order.order_status === 3 ? 'error' : undefined} title={
|
||||
<View className={styles['step-title']}>
|
||||
<Text className={styles['step-status']}>{order?.order_progress?.[1].order_status_name}</Text>
|
||||
<Text>{formatDateTime(order?.order_progress?.[1].audit_time)}</Text>
|
||||
</View>
|
||||
} description={
|
||||
<>
|
||||
{
|
||||
order?.order_progress?.[1].audit_remark ? <View>{formatDateTime(order?.order_progress?.[1].audit_remark)}</View> : null
|
||||
}
|
||||
{
|
||||
order?.order_progress?.[1].delivery_appendix_url
|
||||
? <View className={styles.attachment}>
|
||||
{
|
||||
order?.order_progress?.[1].delivery_appendix_url?.map((url, index) => {
|
||||
return <View className={styles['step-url-container']} key={index}>
|
||||
<Image className={styles['step-url']} src={url} lazyLoad mode="aspectFill" />
|
||||
</View>
|
||||
})
|
||||
}
|
||||
</View>
|
||||
: null
|
||||
}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
: <Step title="已完成" />
|
||||
}
|
||||
|
||||
</Steps>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
|
||||
<View className={styles.customerTop}>客户信息</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.customerBottom}>
|
||||
<Text>{order?.purchaser_name}</Text>
|
||||
<Text>{order?.purchaser_phone}</Text>
|
||||
<Text></Text>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.address_box}>
|
||||
|
||||
<View className={styles.address_box_left}>
|
||||
<View className={styles.cirle}>
|
||||
<IconFont name="icon-dizhi1" size={60}></IconFont>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.address_box_right}>
|
||||
<View className={styles.address}>{order?.address}</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0', marginTop: '6px' }}></Divider>
|
||||
<View className={styles.bottom}>
|
||||
<View className={styles.leftbottom}>
|
||||
<View className={styles.name}>{order.target_user_name}</View>
|
||||
<View className={styles.phone}>{order.target_user_phone}</View>
|
||||
</View>
|
||||
<View className={styles.reatName}>{order.shipment_mode_name}</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
{/* 色卡信息 */}
|
||||
<LayoutBlock customStyle={{ padding: '24rpx', marginTop: '24rpx' }} circle customClassName={styles.layoutBlock}>
|
||||
<View className={styles.colorCardTop}>色卡信息</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
{
|
||||
order.color_card_info?.map((item) => {
|
||||
return (
|
||||
<View className={styles.colorCardBottom} key={item.id}>
|
||||
<View style={{ minWidth: '24%' }}>
|
||||
<View className={styles.leftCont}>
|
||||
<LabAndImg value={labAndImgObj(item)} />
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.rightCont}>
|
||||
<View className={styles.rightCont__container}>
|
||||
<View className={styles.rightCont__left}>
|
||||
<View className={styles.rightCont__top}>
|
||||
{item.name}
|
||||
</View>
|
||||
<View className={styles.rightCont__bottom}>
|
||||
{
|
||||
item.affiliation_product?.map((product_color, index) => {
|
||||
return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(product_color)}</Tag>
|
||||
})
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.rightCont__right}>
|
||||
x{item.count}本
|
||||
</View>
|
||||
</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '0' }}></Divider>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
<View className={styles.paymentMethod}>快递到付</View>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
|
||||
<View className={styles.orderInfoTop}>订单信息</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.orderInfoDetail}>
|
||||
<Cell title="订单编号：" desc={
|
||||
<>
|
||||
<Text className={styles.orderInfoDetail__desc}>{order.order_no}</Text>
|
||||
<Tag type="primary" onClick={() => handleCopy(order.order_no)}>复制</Tag>
|
||||
</>
|
||||
}
|
||||
></Cell>
|
||||
<Cell title="创建时间：" desc={formatDateTime(order?.create_time) || '暂无创建时间'}></Cell>
|
||||
<Cell title="业务员：" desc={order.sale_user_name}></Cell>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle customStyle={{ padding: '24rpx' }}>
|
||||
<View className={styles.orderInfoTop}>备注信息</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.remark}>{order?.remark || '暂无备注信息'}</View>
|
||||
</LayoutBlock>
|
||||
</View>
|
||||
<View className={styles.bottomBar}>
|
||||
{
|
||||
order.order_status === 1
|
||||
? <NormalButton customClassName={styles.bottomBar__button} type="info" plain round onClick={handleCancel} >
|
||||
取消订单
|
||||
</NormalButton>
|
||||
: null
|
||||
}
|
||||
|
||||
</View>
|
||||
</View>
|
||||
</MoveBtn>
|
||||
}
|
||||
export default ColorCardDetail
|
||||
3
src/pages/getColorCard/colorCardList/index.config.ts
Normal file
3
src/pages/getColorCard/colorCardList/index.config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '添加色卡',
|
||||
}
|
||||
102
src/pages/getColorCard/colorCardList/index.module.scss
Normal file
102
src/pages/getColorCard/colorCardList/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
231
src/pages/getColorCard/colorCardList/index.tsx
Normal file
231
src/pages/getColorCard/colorCardList/index.tsx
Normal file
@ -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<typeof orderList['list']>([])
|
||||
// 搜索
|
||||
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 <View className={styles.main}>
|
||||
<View className={styles.search}>
|
||||
<Search placeholder="请输入搜索面料/色卡" showBtn={false} changeOnSearch={getSearchData} >
|
||||
<View className={styles.search__cancel} onClick={handleCancel}>取消</View>
|
||||
</Search>
|
||||
</View>
|
||||
<View className={styles.context}>
|
||||
<InfiniteScroll
|
||||
statusMore={statusMore}
|
||||
selfonScrollToLower={getScrollToLower}
|
||||
refresherEnabled
|
||||
refresherTriggered={refresherTriggeredStatus}
|
||||
selfOnRefresherRefresh={getRefresherRefresh}
|
||||
safeAreaInsetBottom={false}
|
||||
>
|
||||
{
|
||||
orderList.list.map((item) => {
|
||||
return <View key={item.id} style={{ padding: '0 16px', backgroundColor: 'white' }} onClick={() => handleClickCheckBox(item)}>
|
||||
<View className={styles.colorCard}>
|
||||
<View style={{ minWidth: '24%' }}>
|
||||
<View className={styles.colorCard__image}>
|
||||
<LabAndImg value={labAndImgObj(item)} />
|
||||
{
|
||||
item.is_multiple_product ? <View className={styles.imageTag}>多面料共用</View> : null
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.colorCard__content}>
|
||||
<View className={styles.colorCard__title}>{item.color_card_name}</View>
|
||||
<View className={styles.colorCard__code}>
|
||||
{
|
||||
item.affiliation_product?.map((colorCode, index) => {
|
||||
return <Tag customStyle={{ marginRight: '5px', marginBottom: '2px', padding: '5px', background: '#e3ecff', color: '#558cff', borderColor: '#e3ecff' }} key={index} size="small" circle>{formatRemoveHashTag(colorCode.code)}</Tag>
|
||||
})
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.addButton} onClick={noop}>
|
||||
<MCheckbox
|
||||
disabled={item.is_add}
|
||||
status={item.is_add || item.status}
|
||||
onSelect={() => onSelect(item)}
|
||||
onClose={() => onUnSelect(item)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
})
|
||||
}
|
||||
</InfiniteScroll>
|
||||
|
||||
</View>
|
||||
<View className={styles.bottomBar}>
|
||||
<NormalButton
|
||||
customClassName={styles.bottomBar__button}
|
||||
type="primary"
|
||||
round
|
||||
disabled={multipleSelection.current.length === 0}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{
|
||||
multipleSelection.current.length ? `确认（已选 ${multipleSelection.current.length} 个）` : '确认'
|
||||
}
|
||||
</NormalButton>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
export default ColorCardList
|
||||
135
src/pages/getColorCard/components/itemList/index.module.scss
Normal file
135
src/pages/getColorCard/components/itemList/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
87
src/pages/getColorCard/components/itemList/index.tsx
Normal file
87
src/pages/getColorCard/components/itemList/index.tsx
Normal file
@ -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 (
|
||||
<LayoutBlock onClick={navTo} circle>
|
||||
<View className={styles.topItem}>
|
||||
<View className={styles.orderNo}>单号：{data.order_no}</View>
|
||||
<View className={styles.status}>{data.order_status_name}</View>
|
||||
</View>
|
||||
<View className={styles.flexBox}>
|
||||
<View className={styles.pussName}>{data.purchaser_name}</View>
|
||||
<Tag type="primary" size="normal" circle customClassName={styles.tag} plain>
|
||||
{data.sale_user_name}
|
||||
</Tag>
|
||||
</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.contBox}>
|
||||
<View style={{ minWidth: '24%' }}>
|
||||
<View className={styles.leftCont}>
|
||||
<LabAndImg value={labAndImgObj(data.color_card_info[0])} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className={styles.rightCont}>
|
||||
<View className={styles.rightTop}>
|
||||
<View className={styles.productName}>{data.color_card_info[0].name}</View>
|
||||
<View className={styles.shipMode}>{data.shipment_mode_name}</View>
|
||||
</View>
|
||||
<View className={styles.colorsBox}>
|
||||
<View className={styles.colorName}>x{data.color_card_info[0].count || 0}本</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
|
||||
<View className={styles.bottomMsg}>
|
||||
<View className={styles.msgLeft}>色卡信息：</View>
|
||||
<View className={styles.msgRight}>{data?.color_card_count || 0} 种色卡，共 {data?.color_card_number || 0} 本</View>
|
||||
</View>
|
||||
<View className={styles.paymentMethod}>
|
||||
<View className={styles.msgRightOne}>快递到付</View>
|
||||
</View>
|
||||
<View className={styles.bottomBox}>
|
||||
{
|
||||
data.order_status === 1 && <NormalButton
|
||||
customStyles={{ fontSize: '14px' }}
|
||||
type="info"
|
||||
size="normal"
|
||||
round
|
||||
plain
|
||||
onClick={cancel}
|
||||
>
|
||||
取消订单
|
||||
</NormalButton>
|
||||
}
|
||||
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
)
|
||||
}
|
||||
export default memo(ItemList)
|
||||
3
src/pages/getColorCard/index.config.ts
Normal file
3
src/pages/getColorCard/index.config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '领取色卡',
|
||||
}
|
||||
66
src/pages/getColorCard/index.module.scss
Normal file
66
src/pages/getColorCard/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
169
src/pages/getColorCard/index.tsx
Normal file
169
src/pages/getColorCard/index.tsx
Normal file
@ -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 <View className={styles.main}>
|
||||
<View className={styles.search}>
|
||||
<Search placeholder="请输入客户或业务员" showBtn={false} changeOnSearch={getSearchData} />
|
||||
</View>
|
||||
<View className={styles.tab_bar}>
|
||||
{
|
||||
FilterOptions.map((item, index) => {
|
||||
return <FilterButton key={index} isActive={searchField.status === item.key} round customClassName={styles.button} size="small" onClick={() => handleClickFilter(item)}>{item.label}</FilterButton>
|
||||
})
|
||||
}
|
||||
</View>
|
||||
<View className={styles.color_card_list}>
|
||||
<InfiniteScroll
|
||||
emptySlot={<Empty picUrl={COLOR_CARD_LIST_EMPTY_IMAGE} text="还没有领取过色卡" />}
|
||||
statusMore={statusMore}
|
||||
selfonScrollToLower={getScrollToLower}
|
||||
refresherEnabled
|
||||
refresherTriggered={refresherTriggeredStatus}
|
||||
selfOnRefresherRefresh={getRefresherRefresh}
|
||||
safeAreaInsetBottom={false}
|
||||
>
|
||||
{colorList?.list?.map((item, index) => {
|
||||
return (
|
||||
<View key={item.id} className={styles.order_item}>
|
||||
<ItemList data={item} key={index} cancel={e => handleCancel(e, item.order_id)}></ItemList>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
<View className={styles.bottomBar}>
|
||||
<NormalButton
|
||||
customClassName={styles.bottomBar__button}
|
||||
type="primary"
|
||||
round
|
||||
onClick={getColorCard}
|
||||
>
|
||||
领取色卡
|
||||
</NormalButton>
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
|
||||
export default GetColorCard
|
||||
@ -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 (
|
||||
|
||||
@ -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 (
|
||||
<View className={styles.addressBox}>
|
||||
<View className={styles.topBox} onClick={() => navSelect?.(obj)}>
|
||||
<View className={styles.cirle}>
|
||||
<IconFont name="icon-cangku1" size={60}></IconFont>
|
||||
{icon ?? <IconFont name="icon-cangku1" size={60}></IconFont>}
|
||||
</View>
|
||||
{
|
||||
receivingStatus == 1 && <View className={styles.address}>{obj.take_goods_address || '中华人民共和国广东省佛山市禅城区陆盈纺织仓库'}</View>
|
||||
@ -38,11 +54,12 @@ const AddressDetailBox = (props: propsObj) => {
|
||||
}
|
||||
{
|
||||
(obj?.province_name == '' && receivingStatus == 2)
|
||||
&& <View className={styles.address}></View>
|
||||
&& <View className={styles.address}>请选择地址</View>
|
||||
}
|
||||
{
|
||||
receivingStatus !== 1
|
||||
&& <IconFont name="icon-chakanquanbukehu" size={50} ></IconFont>
|
||||
(receivingStatus !== 1 && !isReadonly)
|
||||
? <IconFont name="icon-chakanquanbukehu" size={50} ></IconFont>
|
||||
: null
|
||||
}
|
||||
</View>
|
||||
<View className={styles.line}></View>
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -129,13 +129,13 @@ const DeliveryFilter = (props: DeliveryPropsType) => {
|
||||
<View className={styles.filterItem}>
|
||||
<View className={styles['filterItem--title']}>提货类型</View>
|
||||
<View className={classnames(styles['filterItem--wrapper'], styles['filter--type'])}>
|
||||
<FilterButton isActive={searchFilter.take_goods_order_type == undefined} onClick={() => handleSelectedType('default')}>
|
||||
<FilterButton circle isActive={searchFilter.take_goods_order_type == undefined} onClick={() => handleSelectedType('default')}>
|
||||
不限
|
||||
</FilterButton>
|
||||
{!!typeList?.length
|
||||
&& typeList?.map((item, key) => {
|
||||
return (
|
||||
<FilterButton key={key} isActive={searchFilter.take_goods_order_type === item?.id} onClick={() => handleSelectedType(item?.id)}>
|
||||
<FilterButton key={key} circle isActive={searchFilter.take_goods_order_type === item?.id} onClick={() => handleSelectedType(item?.id)}>
|
||||
{item.name}
|
||||
</FilterButton>
|
||||
// <NormalButton type='info' circle onClick={() => handleSelectedType(item?.id)}>
|
||||
@ -151,12 +151,12 @@ const DeliveryFilter = (props: DeliveryPropsType) => {
|
||||
<View className={classnames(styles['filterItem--wrapper'], styles['filter--time'])}>
|
||||
{Object.entries(filterTimeOptions).map(([key, value], index) => {
|
||||
return (
|
||||
<FilterButton key={index} isActive={searchFilter.timeKey === key} onClick={() => handleSelectedTime(key)}>
|
||||
<FilterButton circle key={index} isActive={searchFilter.timeKey === key} onClick={() => handleSelectedTime(key)}>
|
||||
{value.name}
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
<FilterButton isActive={searchFilter.timeKey === '6'} customClassName={styles.filterTimeButton} onClick={() => handleSelectedTime('6')}>
|
||||
<FilterButton circle isActive={searchFilter.timeKey === '6'} customClassName={styles.filterTimeButton} onClick={() => handleSelectedTime('6')}>
|
||||
自定义时间<IconFont name="icon-chakanquanbukehu" size={40} color={searchFilter.timeKey === '6' ? '#4581ff' : '#909090'}></IconFont>
|
||||
</FilterButton>
|
||||
</View>
|
||||
|
||||
@ -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[] = [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user