feat(码单管理添加修改抬头优化完成):

This commit is contained in:
czm 2022-12-21 10:56:25 +08:00 committed by Haiyi
parent 43b5bb7ee0
commit 23399c7776
15 changed files with 272 additions and 45 deletions

View File

@ -14,8 +14,6 @@
"import/no-commonjs": "off", "import/no-commonjs": "off",
"react/display-name": "off", "react/display-name": "off",
"no-use-before-define": "off", "no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": [ "@typescript-eslint/no-use-before-define": "warn"
"error"
]
} }
} }

View File

@ -1,13 +1,14 @@
.form-list { .form-list {
display: flex; display: flex;
justify-content: space-between;
margin: 30px 30px 0; margin: 30px 30px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.form-list-label { .form-list-label {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
color: #000000; color: rgba(0, 0, 0, 0.8);
margin-top: 20px; margin-top: 20px;
margin-right: 64px;
} }
.form-list-label-required::before { .form-list-label-required::before {
content: '*'; content: '*';
@ -58,7 +59,7 @@
// flex: 0 0 auto; // flex: 0 0 auto;
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
color: #000000; color: rgba(0, 0, 0, 0.8);
} }
.form-list-right textarea { .form-list-right textarea {
height: 186px; height: 186px;

View File

@ -0,0 +1,47 @@
.code_list {
position: fixed;
font-size: 32px;
color: #fff;
.code_list__card {
position: absolute;
width: 306px;
background-color: #fff;
color: #337fff;
top: -290px;
right: 0;
padding: 20px;
font-size: 28px;
box-sizing: border-box;
border-radius: 16px;
overflow: hidden;
transition: width 1s ease-in-out;
.code_list__card--item {
display: flex;
align-items: center;
&:nth-last-child(n + 2) {
margin-bottom: 48px;
}
text {
margin-left: 16px;
}
}
}
.code_list--text {
width: 100px;
height: 100px;
background-color: #3372ff;
text-align: center;
line-height: 100px;
font-size: 28px;
border-radius: 50%;
}
}
.mask {
position: fixed;
top: 0;
left: 0;
background: #000000;
opacity: 0.08;
width: 100vw;
height: 100vh;
}

View File

@ -0,0 +1,38 @@
import { MovableView, Text, View } from '@tarojs/components'
import { useState } from 'react'
import classnames from 'classnames'
import IconFont from '../iconfont/iconfont'
import styles from './index.module.scss'
import { goLink } from '@/common/common'
interface param {
y: number
}
export default ({ y }: param) => {
const [screenHeight, setScreenHeight] = useState({
customer_service_y: 0,
code_list_y: 0,
})
const [showCode, setShowCode] = useState(false)
return (<>
{showCode && <View className={styles.mask} catchMove onClick={() => setShowCode(!showCode)}></View>}
<MovableView className={classnames(styles.code_list, styles.fixed_btn)} direction="all" inertia x="630rpx" y={`${y}rpx`}>
{showCode && <View className={classnames(styles.code_list__card, showCode && styles['code_list--open'])}>
<View className={styles['code_list__card--item']}>
<IconFont name="icon-yuanshimadanyulan" size={46} />
<Text></Text>
</View>
<View className={styles['code_list__card--item']} onClick={() => goLink('/pages/codeList/index')}>
<IconFont name="icon-zidingyimadanyulan" size={46} />
<Text></Text>
</View>
<View className={styles['code_list__card--item']}>
<IconFont name="icon-bianjizidingyimadan" size={46} />
<Text></Text>
</View>
</View>}
<View className={styles['code_list--text']} onClick={() => setShowCode(!showCode)}></View>
</MovableView>
</>)
}

View File

@ -3,13 +3,13 @@ import Taro, { useDidShow, useReady, useRouter } from '@tarojs/taro'
import type { ReactElement } from 'react' import type { ReactElement } from 'react'
import { useEffect, useLayoutEffect, useRef, useState } from 'react' import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import classnames from 'classnames' import classnames from 'classnames'
import Customer from '../customer'
import styles from './index.module.scss' import styles from './index.module.scss'
import { GetShoppingCartApi } from '@/api/shopCart' import { GetShoppingCartApi } from '@/api/shopCart'
import useCommonData from '@/use/useCommonData' import useCommonData from '@/use/useCommonData'
import { useSelector } from '@/reducers/hooks' import { useSelector } from '@/reducers/hooks'
import { alert } from '@/common/common' import { alert } from '@/common/common'
import { formatImgUrl } from '@/common/fotmat' import { formatImgUrl } from '@/common/fotmat'
import Customer from '../customer'
type ShowStatus = 'shop'|'customer'|'order' type ShowStatus = 'shop'|'customer'|'order'
interface param { interface param {

View File

@ -3,15 +3,16 @@ import Taro, { useDidShow, useReady, useRouter } from '@tarojs/taro'
import type { ReactElement } from 'react' import type { ReactElement } from 'react'
import { useEffect, useLayoutEffect, useRef, useState } from 'react' import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import classnames from 'classnames' import classnames from 'classnames'
import Customer from '../customer'
import CodeSelect from '../codeSelect'
import styles from './index.module.scss' import styles from './index.module.scss'
import { GetShoppingCartApi } from '@/api/shopCart' import { GetShoppingCartApi } from '@/api/shopCart'
import useCommonData from '@/use/useCommonData' import useCommonData from '@/use/useCommonData'
import { useSelector } from '@/reducers/hooks' import { useSelector } from '@/reducers/hooks'
import { alert } from '@/common/common' import { alert } from '@/common/common'
import { formatImgUrl } from '@/common/fotmat' import { formatImgUrl } from '@/common/fotmat'
import Customer from '../customer'
type ShowStatus = 'shop'|'customer'|'order' type ShowStatus = 'shop'|'customer'|'order'|'code'
interface param { interface param {
children?: ReactElement | null children?: ReactElement | null
onShopClick?: () => void onShopClick?: () => void
@ -25,7 +26,7 @@ const MoveBtn = ({ children = null, onShopClick, showList = [], messageTitle = '
// 获取购物车数据数量 // 获取购物车数据数量
const { getShopCount, commonData } = useCommonData() const { getShopCount, commonData } = useCommonData()
const [screenHeight, setScreenHeight] = useState<{ shop?: number; customer?: number; order?: number }>({ const [screenHeight, setScreenHeight] = useState<{ shop?: number; customer?: number; order?: number; code?: number }>({
shop: 0, shop: 0,
customer: 0, customer: 0,
order: 0, order: 0,
@ -38,7 +39,7 @@ const MoveBtn = ({ children = null, onShopClick, showList = [], messageTitle = '
if (res.screenHeight) { if (res.screenHeight) {
const ratio = 750 / res.screenWidth const ratio = 750 / res.screenWidth
const num = res.screenHeight * ratio const num = res.screenHeight * ratio
setScreenHeight(() => ({ shop: num - 460, customer: num - 580, order: num - 700 })) setScreenHeight(() => ({ shop: num - 460, customer: num - 580, order: num - 700, code: num - 820 }))
screenWidthRef.current = res.screenWidth / 2 screenWidthRef.current = res.screenWidth / 2
} }
setShowMoveBtn(true) setShowMoveBtn(true)
@ -100,6 +101,7 @@ const MoveBtn = ({ children = null, onShopClick, showList = [], messageTitle = '
> >
<Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} /> <Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
</MovableView>} </MovableView>}
{onShow('code') && <CodeSelect y={screenHeight.code as number} />}
<Customer messageTitle={messageTitle} messagePath={messageTitle} show={customer_service_show} showCard={showCart} onClose={customerClose} /> <Customer messageTitle={messageTitle} messagePath={messageTitle} show={customer_service_show} showCard={showCart} onClose={customerClose} />
</MovableArea> </MovableArea>
) )

View File

@ -0,0 +1,9 @@
.name {
width: 78px;
height: 78px;
background: linear-gradient(337deg, #7bb7ff 0%, #4581ff 100%);
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 78px;
}

View File

@ -0,0 +1,14 @@
import { View } from '@tarojs/components'
import { useMemo } from 'react'
import styles from './index.module.scss'
interface Param {
name: string
}
export default ({ name = '' }: Param) => {
const nameLabel = useMemo(() => {
if (!name) { return '' }
return name.toString()[0]
}, [name])
return <View className={styles.name}>{nameLabel}</View>
}

View File

@ -1,13 +1,19 @@
import { Text, View } from '@tarojs/components' import { Text, View } from '@tarojs/components'
import styles from './index.module.scss' import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont' import IconFont from '@/components/iconfont/iconfont'
import NameLabel from '@/components/nameLabel'
import { goLink } from '@/common/common'
export default () => { export interface CompanyParam {
return <View className={styles.company_item}> value: { title: string; purchaser_name: string; id: number; phone: string }
<View className={styles.name}></View> }
export default (props: CompanyParam) => {
const { value } = props
return <View className={styles.company_item} onClick={() => goLink(`/pages/weightListAdd/index?type=edit&id=${value.id}`)}>
<NameLabel name={value.title} />
<View className={styles.desc}> <View className={styles.desc}>
<Text></Text> <Text>{value?.title }</Text>
<Text> 131****4873</Text> <Text>{`${value?.purchaser_name} ${value?.phone}`}</Text>
</View> </View>
<View className={styles.company_icon}><IconFont name="icon-xiala" size={43} /></View> <View className={styles.company_icon}><IconFont name="icon-xiala" size={43} /></View>
</View> </View>

View File

@ -1,18 +1,34 @@
import { Text, View } from '@tarojs/components' import { Text, View } from '@tarojs/components'
import { useEffect, useState } from 'react'
import type { CompanyParam } from '../companyItem'
import CompanyItem from '../companyItem' import CompanyItem from '../companyItem'
import styles from './index.module.scss' import styles from './index.module.scss'
import Search from '@/components/search' import Search from '@/components/search'
import { weightListApi } from '@/api/weightList'
import { goLink } from '@/common/common'
export default () => { export default () => {
const { fetchData } = weightListApi()
const [list, setList] = useState<CompanyParam['value'][]>([])
useEffect(() => {
(async() => {
const res = await fetchData()
setList(() => res.data?.list)
})()
}, [])
return <View className={styles.company_main}> return <View className={styles.company_main}>
<View className={styles.company_search}> <View className={styles.company_search}>
<View className={styles['code_list_search--code']}><Search placeholder="请输入单据抬头/客户/单号" /></View> <View className={styles['code_list_search--code']}><Search placeholder="请输入单据抬头/客户/单号" /></View>
</View> </View>
<View className={styles.company_con}> <View className={styles.company_con}>
<CompanyItem /> {list?.map((item) => {
return <View key={item.id}>
<CompanyItem value={item} />
</View>
})}
</View> </View>
<View className={styles.company_create}> <View className={styles.company_create}>
<View className={styles.company_create_btn}></View> <View className={styles.company_create_btn} onClick={() => goLink('/pages/weightListAdd/index?type=add')}></View>
</View> </View>
</View> </View>
} }

View File

@ -0,0 +1,69 @@
import { Button, MovableArea, MovableView, Text, View } from '@tarojs/components'
import Taro, { useReady } from '@tarojs/taro'
import type { ReactElement } from 'react'
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
import { goLink } from '@/common/common'
interface param {
children?: ReactElement | null
orderInfo?: any
}
const MovableAreaBtn = ({ children = null, orderInfo }: param) => {
const [screenHeight, setScreenHeight] = useState({
customer_service_y: 0,
code_list_y: 0,
})
useEffect(() => {
Taro.nextTick(() => {
const res = Taro.getSystemInfoSync()
if (res.screenHeight) {
const ratio = 750 / res.screenWidth
setScreenHeight(() => ({ customer_service_y: res.screenHeight * ratio - 600, code_list_y: res.screenHeight * ratio - 800 }))
}
})
}, [])
const [showCode, setShowCode] = useState(false)
return (
<MovableArea className={styles.movableItem}>
{children}
<MovableView className={classnames(styles.moveBtn, styles.fixed_btn)} direction="all" inertia x="630rpx" y={`${screenHeight.customer_service_y}rpx`}>
<View className={classnames('iconfont', 'icon-kefu', styles.shop_icon)}>
<Button
className={styles.wxBtn}
openType="contact"
sendMessageTitle={orderInfo?.order_no}
showMessageCard
sendMessagePath={`/pages/order/index?id=${orderInfo?.id}`}
></Button>
</View>
</MovableView>
<View>
{showCode && <View className={styles.mask} catchMove onClick={() => setShowCode(!showCode)}></View>}
</View>
<MovableView className={classnames(styles.code_list, styles.fixed_btn)} direction="all" inertia x="630rpx" y={`${screenHeight.code_list_y}rpx`}>
{showCode && <View className={classnames(styles.code_list__card, showCode && styles['code_list--open'])}>
<View className={styles['code_list__card--item']}>
<IconFont name="icon-yuanshimadanyulan" size={46} />
<Text></Text>
</View>
<View className={styles['code_list__card--item']} onClick={() => goLink('/pages/codeList/index')}>
<IconFont name="icon-zidingyimadanyulan" size={46} />
<Text></Text>
</View>
<View className={styles['code_list__card--item']}>
<IconFont name="icon-bianjizidingyimadan" size={46} />
<Text></Text>
</View>
</View>}
<View className={styles['code_list--text']} onClick={() => setShowCode(!showCode)}></View>
</MovableView>
</MovableArea>
)
}
export default MovableAreaBtn

View File

@ -287,7 +287,7 @@ const Order = () => {
[orderDetail], [orderDetail],
) )
return ( return (
<MoveBtn showList={['order']} messageTitle={orderDetail?.order_no} messagePath={`/pages/order/index?id=${orderDetail?.id}`} showCart> <MoveBtn showList={['order', 'code']} messageTitle={orderDetail?.order_no} messagePath={`/pages/order/index?id=${orderDetail?.id}`} showCart>
<View className={styles.order_main}> <View className={styles.order_main}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || ( {(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} /> <AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />

View File

@ -8,15 +8,7 @@
padding: 0 24px; padding: 0 24px;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
.name {
width: 78px;
height: 78px;
background: linear-gradient(337deg, #7bb7ff 0%, #4581ff 100%);
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 78px;
}
.desc { .desc {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -2,14 +2,15 @@ import { Text, View } from '@tarojs/components'
import styles from './index.module.scss' import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont' import IconFont from '@/components/iconfont/iconfont'
import { goLink } from '@/common/common' import { goLink } from '@/common/common'
import NameLabel from '@/components/nameLabel'
interface Param { export interface CompanyParam {
value: { title: string; purchaser_name: string; id: number; phone: string } value: { title: string; purchaser_name: string; id: number; phone: string }
} }
export default (props: Param) => { export default (props: CompanyParam) => {
const { value } = props const { value } = props
return <View className={styles.company_item} onClick={() => goLink(`/pages/weightListAdd/index?type=edit&id=${value.id}`)}> return <View className={styles.company_item} onClick={() => goLink(`/pages/weightListAdd/index?type=edit&id=${value.id}`)}>
<View className={styles.name}>{value?.title || ''}</View> <NameLabel name={value.title} />
<View className={styles.desc}> <View className={styles.desc}>
<Text>{value?.title }</Text> <Text>{value?.title }</Text>
<Text>{`${value?.purchaser_name} ${value?.phone}`}</Text> <Text>{`${value?.purchaser_name} ${value?.phone}`}</Text>

View File

@ -1,7 +1,7 @@
import { Button, Input, Text, Textarea, View } from '@tarojs/components' import { Button, Input, Text, Textarea, View } from '@tarojs/components'
import Taro, { setNavigationBarTitle, useRouter } from '@tarojs/taro' import Taro, { setNavigationBarTitle, showModal, useRouter } from '@tarojs/taro'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { weightAddApi, weightDetailApi, weightEditApi } from '@/api/weightList' import { weightAddApi, weightDeleteApi, weightDetailApi, weightEditApi } from '@/api/weightList'
import FromList from '@/components/FromList' import FromList from '@/components/FromList'
import { alert, retrieval } from '@/common/common' import { alert, retrieval } from '@/common/common'
import './index.scss' import './index.scss'
@ -100,28 +100,54 @@ export default () => {
} }
}, [formData]) }, [formData])
const { fetchData: deleteFetch } = weightDeleteApi()
const handleDelete = () => {
showModal(({
title: '提示',
content: '是否删除码单?',
async success(ev) {
if (ev.confirm) {
const result = await deleteFetch({ id: formData.id })
if (result.success) {
alert.success('删除成功')
Taro.eventCenter.trigger('weightList:refresh')
Taro.navigateBack()
}
}
},
}))
}
const handleUpdate = () => {
if (type === 'add') {
setFormData(() => ({ title: '', purchaser_name: '', phone: '', is_default: false, id: 0 }))
}
else {
handleDelete()
}
}
return ( return (
<View className="add-address"> <View className="add-address">
<FromList <FromList
onInput={(ev: any) => setFormData({ ...formData, title: ev.detail.value })} onInput={(ev: any) => setFormData({ ...formData, title: ev.detail.value })}
value={formData.title} value={formData.title}
label="抬头" label="公司抬头"
placeholder="请输入码单显示抬头信息" placeholder="请输入码单显示抬头信息"
/> />
<FromList <FromList
onInput={(ev: any) => setFormData({ ...formData, purchaser_name: ev.detail.value })} onInput={(ev: any) => setFormData({ ...formData, purchaser_name: ev.detail.value })}
value={formData.purchaser_name} value={formData.purchaser_name}
label="客户" label="客户名称"
placeholder="请输入码单显示客户名称" placeholder="请输入码单显示客户名称"
/> />
<FromList <FromList
onInput={(ev: any) => setFormData({ ...formData, phone: ev.detail.value })} onInput={(ev: any) => setFormData({ ...formData, phone: ev.detail.value })}
value={formData.phone} value={formData.phone}
label="联系方式" label="电话号码"
placeholder="请输入码单显示联系号码" placeholder="请输入码单显示联系号码"
/> />
<View className="add-address-default"> <View className="add-address-default">
<Text></Text> <Text></Text>
<View onClick={() => setFormData({ ...formData, is_default: !formData.is_default })}> <View onClick={() => setFormData({ ...formData, is_default: !formData.is_default })}>
{formData.is_default {formData.is_default
? ( ? (
@ -134,10 +160,18 @@ export default () => {
)} )}
</View> </View>
</View> </View>
<View className="weight_bottom_btn_con">
<Button style={{ background: hozon ? '#007aff' : '' }} hoverClass="none" className="add-address-save" onClick={handleSave}> <View className="weight_bottom_btn">
<Button hoverClass="none" className="add-address-save" onClick={handleUpdate}>
{type === 'add' ? '取消' : '删除'}
</Button> </Button>
<Button hoverClass="none" className="add-address-save" onClick={handleSave}>
{type === 'add' ? '提交' : '修改'}
</Button>
</View>
<View className="common_safe_area_y"></View>
</View>
</View> </View>
) )
} }