xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc
View File

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

7
src/components/FromList/index.scss
View File

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

47
src/components/codeSelect/index.module.scss Normal file
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;
}

38
src/components/codeSelect/index.tsx Normal file
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>
</>)
}

2
src/components/moveBtn copy/index.tsx
View File

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

12
src/components/moveBtn/index.tsx
View File

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

9
src/components/nameLabel/index.module.scss Normal file
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;
}

14
src/components/nameLabel/index.tsx Normal file
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>
}

16
src/pages/codeList/components/companyItem/index.tsx
View File

@ -1,13 +1,19 @@
import { Text, View } from '@tarojs/components'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
import NameLabel from '@/components/nameLabel'
import { goLink } from '@/common/common'
export default () => {
return <View className={styles.company_item}>
<View className={styles.name}>欧</View>
export interface CompanyParam {
value: { title: string; purchaser_name: string; id: number; phone: string }
}
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}>
<Text>布郡纺织有限公司</Text>
<Text>杨翰俊 131****4873</Text>
<Text>{value?.title }</Text>
<Text>{`${value?.purchaser_name} ${value?.phone}`}</Text>
</View>
<View className={styles.company_icon}><IconFont name="icon-xiala" size={43} /></View>
</View>

20
src/pages/codeList/components/companyModel/index.tsx
View File

@ -1,18 +1,34 @@
import { Text, View } from '@tarojs/components'
import { useEffect, useState } from 'react'
import type { CompanyParam } from '../companyItem'
import CompanyItem from '../companyItem'
import styles from './index.module.scss'
import Search from '@/components/search'
import { weightListApi } from '@/api/weightList'
import { goLink } from '@/common/common'
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}>
<View className={styles.company_search}>
<View className={styles['code_list_search--code']}><Search placeholder="请输入单据抬头/客户/单号" /></View>
</View>
<View className={styles.company_con}>
<CompanyItem />
{list?.map((item) => {
return <View key={item.id}>
<CompanyItem value={item} />
</View>
})}
</View>
<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>
}

69
src/pages/order/components/movableAreaBtn/index copy.tsx Normal file
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

2
src/pages/order/index.tsx
View File

@ -287,7 +287,7 @@ const Order = () => {
[orderDetail],
)
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}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />

10
src/pages/weightList/components/companyItem/index.module.scss
View File

@ -8,15 +8,7 @@
padding: 0 24px;
align-items: center;
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 {
display: flex;
flex-direction: column;

7
src/pages/weightList/components/companyItem/index.tsx
View File

@ -2,14 +2,15 @@ import { Text, View } from '@tarojs/components'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
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 }
}
export default (props: Param) => {
export default (props: CompanyParam) => {
const { value } = props
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}>
<Text>{value?.title }</Text>
<Text>{`${value?.purchaser_name} ${value?.phone}`}</Text>

52
src/pages/weightListAdd/index.tsx
View File

@ -1,7 +1,7 @@
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 { weightAddApi, weightDetailApi, weightEditApi } from '@/api/weightList'
import { weightAddApi, weightDeleteApi, weightDetailApi, weightEditApi } from '@/api/weightList'
import FromList from '@/components/FromList'
import { alert, retrieval } from '@/common/common'
import './index.scss'
@ -100,28 +100,54 @@ export default () => {
}
}, [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 (
<View className="add-address">
<FromList
onInput={(ev: any) => setFormData({ ...formData, title: ev.detail.value })}
value={formData.title}
label="抬头"
label="公司抬头"
placeholder="请输入码单显示抬头信息"
/>
<FromList
onInput={(ev: any) => setFormData({ ...formData, purchaser_name: ev.detail.value })}
value={formData.purchaser_name}
label="客户"
label="客户名称"
placeholder="请输入码单显示客户名称"
/>
<FromList
onInput={(ev: any) => setFormData({ ...formData, phone: ev.detail.value })}
value={formData.phone}
label="联系方式"
label="电话号码"
placeholder="请输入码单显示联系号码"
/>
<View className="add-address-default">
<Text>设为默认地址</Text>
<Text>设为默认抬头</Text>
<View onClick={() => setFormData({ ...formData, is_default: !formData.is_default })}>
{formData.is_default
? (
@ -134,10 +160,18 @@ export default () => {
)}
</View>
</View>
<View className="weight_bottom_btn_con">
<View className="weight_bottom_btn">
<Button hoverClass="none" className="add-address-save" onClick={handleUpdate}>
{type === 'add' ? '取消' : '删除'}
</Button>
<Button hoverClass="none" className="add-address-save" onClick={handleSave}>
{type === 'add' ? '提交' : '修改'}
</Button>
</View>
<View className="common_safe_area_y"></View>
</View>
<Button style={{ background: hozon ? '#007aff' : '' }} hoverClass="none" className="add-address-save" onClick={handleSave}>
保存
</Button>
</View>
)
}