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

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

Browse Source
This commit is contained in:
cheng
2022-12-30 11:47:56 +08:00
committed by Haiyi
parent 43b5bb7ee0
commit 23399c7776
15 changed files with 272 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FromList/index.scss
+4 -3
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;
src/components/codeSelect/index.module.scss
+47
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;
}
src/components/codeSelect/index.tsx
+38
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>
</>)
}
src/components/moveBtn copy/index.tsx
+1 -1
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 {
src/components/moveBtn/index.tsx
+7 -5
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>
)
src/components/nameLabel/index.module.scss
+9
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;
}
src/components/nameLabel/index.tsx
+14
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>
}