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

🎈 perf(UI界面): 完成UI界面和逻辑，等待后端对接

Browse Source
This commit is contained in:
xuan 2022-12-27 17:02:57 +08:00
parent 5560b3b903
commit 0c1fb844a2
9 changed files with 110 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Dialog/index.tsx
View File

@ -10,10 +10,12 @@ interface PropsType {
onClose?: (show: boolean) => void
onChange?: (isShow) => void
children?: React.ReactNode
customClassName?: string
customStyles?: React.CSSProperties
}
// 弹出框
const Dialog = (props: PropsType) => {
const { showOverLay = true, show = false, onClose: _onClose, onChange: _onChange, children } = props
const { showOverLay = true, show = false, onClose: _onClose, onChange: _onChange, children, customClassName, customStyles } = props
const [_show, setShow] = usePropsValue({
value: show,
@ -47,7 +49,7 @@ const Dialog = (props: PropsType) => {
}
}, [show])
return _show
? <View className={style.dialog}>
? <View className={classnames(style.dialog, customClassName)} style={customStyles}>
{/* 遮罩层 start */}
<View
className={classnames(style.dialog_mask, { [style.dialog_mask_active]: animShow, [style['drawer_mask--hidden']]: !showOverLay })}

36
src/components/normalButton/index.module.scss
View File

@ -10,7 +10,9 @@
text-align: center;
color: #fff;
box-sizing: border-box;
&:active {
opacity: $opacity-active;
}
&--normal {
height: 72px;
font-size: $font_size_medium;
@ -85,20 +87,20 @@
}
}
// active 伪类
&--primary:active {
background-color: rgba($color: $color_main, $alpha: 0.5);
color: #fff;
}
&--danger:active {
background-color: rgba($color: $color_danger, $alpha: 0.5);
color: #fff;
}
&--warning:active {
background-color: rgba($color: $color_warning, $alpha: 0.5);
color: #fff;
}
&--info:active {
background-color: rgba($color: $color_info, $alpha: 0.5);
color: #fff;
}
// &--primary:active {
// background-color: rgba($color: $color_main, $alpha: 0.5);
// color: #fff;
// }
// &--danger:active {
// background-color: rgba($color: $color_danger, $alpha: 0.5);
// color: #fff;
// }
// &--warning:active {
// opacity: $opacity-active;
// }
// &--info:active {
// // background-color: rgba($color: $color_info, $alpha: 0.5);
// opacity: $opacity-active;
// // color: #fff;
// }
}

6
src/components/normalButton/index.tsx
View File

@ -12,7 +12,7 @@ interface PropsType {
type?: ButtonType
round?: boolean // 大圆角
disabled?: boolean
plain?: boolean // plain
plain?: boolean // 朴素(背景色为白色那种，不是全背景色)
circle?: boolean // 小圆角
children?: ReactNode
onClick?: Function
@ -20,10 +20,12 @@ interface PropsType {
customStyles?: React.CSSProperties
customTextClassName?: string
loading?: boolean
hoverClass?: string
}
const NormalButton: FC<PropsType> = (props) => {
const {
hoverClass = '',
type = 'primary',
size = 'normal',
round = false,
@ -57,7 +59,7 @@ const NormalButton: FC<PropsType> = (props) => {
}
return (
<View className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
<View hoverClass={hoverClass} className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
<View className={classnames(styles['button--text'], customTextClassName)}>
<View className={styles.loading}>{loading && <Loading width={30} />}</View>
{children}</View>

12
src/components/organizationNameModal/index.module.scss
View File

@ -10,6 +10,7 @@
border-radius: 20px;
padding: 20px 42px;
margin: 32px 40px;
margin-bottom: 0;
font-size: 26px;
color: #333;
&_focus {
@ -37,6 +38,7 @@
align-items: center;
justify-content: space-between;
border-top: 1px solid #eee;
margin-top: 30px;
.button {
display: flex;
align-items: center;
@ -44,9 +46,11 @@
text-align: center;
box-sizing: border-box;
width: 50%;
font-size: 30px;
height: 100%;
font-size: 32px;
font-weight: 550;
padding: 30px 0;
border: 0;
background-color: #fff;
}
&_left {
@ -58,6 +62,7 @@
}
}
.tips {
display: flex;
background-color: #fef9f4;
font-size: 24px;
color: #ff9b33;
@ -65,3 +70,8 @@
padding: 20px;
}
}
.error_tips {
color: #f64861;
padding: 10px 42px;
font-size: 20px;
}

54
src/components/organizationNameModal/index.tsx
View File

@ -1,11 +1,11 @@
import type { CommonEventFunction, InputProps } from '@tarojs/components'
import { Input, View } from '@tarojs/components'
import React, { useState } from 'react'
import { Input, Text, View } from '@tarojs/components'
import React, { useMemo, useState } from 'react'
import classNames from 'classnames'
import Dialog from '../Dialog'
import InputX from '../InputX'
import IconFont from '../iconfont/iconfont'
import NormalButton from '../normalButton'
import styles from './index.module.scss'
import { usePropsValue } from '@/use/useCommon'
interface PropsType {
showModal: boolean
@ -37,37 +37,61 @@ const OrganizationNameModal = (props: PropsType) => {
onConfirm?.(text)
}
const [inputStyles, setInputStyles] = useState<string[]>([])
const Reg = /^[a-zA-Z0-9\u4E00-\u9FA5]+$/
const [tipsComp, setTipsComp] = useState<React.ReactNode | null>(null)
const isInvalidate = useMemo(() => {
let flag = false
const Reg = /^[a-zA-Z0-9\u4E00-\u9FA5]+$/
console.log('text', text)
setTipsComp(null)
setInputStyles(() => [styles.inputBar_focus])
if (!text) {
flag = true
}
if (text && !Reg.test(text)) {
flag = true
setInputStyles(() => [styles.inputBar_error])
setTipsComp(() => {
return <View className={styles.error_tips}>
只允许输入数字、英文、中文；不允许输入任何其他符号
</View>
})
}
return flag
}, [text])
const handleIntput: CommonEventFunction<InputProps.inputEventDetail> = (e) => {
if (!Reg.test(e.detail.value)) {
setInputStyles(() => [styles.inputBar_error])
setText(e.detail.value)
return
}
setText(e.detail.value)
}
const handleFocus = () => {
if (text && !Reg.test(text)) {
if (isInvalidate) {
setInputStyles(() => [styles.inputBar_error])
return
}
setInputStyles(() => [styles.inputBar_focus])
}
const handleBlur = () => {
if (isInvalidate) {
setInputStyles(() => [styles.inputBar_error])
return
}
setInputStyles(() => [])
}
return <Dialog show={showModal} onClose={handleClose} onChange={onShowModalChange}>
return <Dialog show={showModal} customStyles={{ zIndex: '9999' }} onClose={handleClose} onChange={onShowModalChange}>
<View className={styles.organizationNameModal}>
<View className={styles.organizationNameModal_title}>请设置您的组织昵称</View>
<View className={styles.organizationNameModal_content}>
<View className={styles.tips}>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</View>
<View className={styles.tips}>
<IconFont name="icon-tips" customStyle={{ marginRight: '8rpx', flexShrink: '0' }} size={36} color="#f79b31"></IconFont>
<Text>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</Text>
</View>
<Input className={classNames(styles.inputBar, [...inputStyles])} onFocus={handleFocus} onBlur={handleBlur} onInput={handleIntput} value={text} type="text" placeholder="请输入 组织/公司/码单昵称" />
{tipsComp}
</View>
<View className={styles.organizationNameModal_bottomBar}>
<View hoverClass="hoverClass" className={classNames(styles.button, styles.organizationNameModal_bottomBar_left)} onClick={handleCancel}>下次更改</View>
<View hoverClass="hoverClass" className={classNames(styles.button, styles.organizationNameModal_bottomBar_right)} onClick={handleConfirm}>确认</View>
<NormalButton type="info" customClassName={classNames(styles.button, styles.organizationNameModal_bottomBar_left)} onClick={handleCancel}>下次更改</NormalButton>
<NormalButton type="primary" disabled={isInvalidate} customClassName={classNames(styles.button, styles.organizationNameModal_bottomBar_right)} onClick={handleConfirm}>确认</NormalButton>
</View>
</View>
</Dialog>

19
src/components/shopCart/index.tsx
View File

@ -7,6 +7,7 @@ import type { SalesManDialogRef } from '../bindSalesManDialog'
import BindSalesManDialog from '../bindSalesManDialog'
import LabAndImgShow from '../LabAndImgShow'
import LabAndImg from '../LabAndImg'
import OrganizationNameModal from '../organizationNameModal'
import styles from './index.module.scss'
import ProductItem from './components/productItem'
import Popup from '@/components/popup'
@ -258,6 +259,15 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod
}
}, [list])
const [showModal, setShowModal] = useState(false)
const handleClose = () => {
setShowModal(false)
}
const handleShowChange = (val: boolean) => {
setShowModal(val)
}
// 去结算
const { fetchData: FetchData } = GetAdminUserInfoApi()
const { fetchData: applyOrderAccessFetchData } = ApplyOrderAccessApi()
@ -268,7 +278,12 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod
bindSalesManDialogRef.current?.handleChange(true)
// setShowBindSalesman(() => true)
onClose?.()
return false
return
}
// TODO 检测是否修改过组织昵称
if (false) {
setShowModal(true)
return
}
getSelectId()
if (selectIds.current.length == 0) {
@ -308,6 +323,7 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod
setSelectStatus(true)
})
}, [selectIndex])
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
@ -378,6 +394,7 @@ const ShopCart = ({ show = false, onClose, intoStatus = 'shop', default_sale_mod
<View>
<LabAndImgShow value={labImageValue} show={showLabImage} onClose={closeLabImgShow} />
</View>
<OrganizationNameModal showModal={showModal} onClose={handleClose} onShowModalChange={handleShowChange} />
</View>
)
}

18
src/pages/userEdit/components/ModifyModal/index.tsx
View File

@ -7,6 +7,7 @@ import classNames from 'classnames'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import NormalButton from '@/components/normalButton'
import IconFont from '@/components/iconfont/iconfont'
interface Params {
title?: string
@ -31,7 +32,10 @@ const ModifyModal = (props: Params, ref: Ref<ModifyModalRef>) => {
flag = true
setTipsComp(() => {
return <View className={styles['warn-tips']}>
仅允许驶入类型为数字、英文、中文，禁止输入其他任何字符
<View style={{ display: 'flex', alignItems: 'center' }}>
<IconFont customStyle={{ marginRight: '8rpx' }} name="icon-tips" size={36} color="#f79b31"></IconFont>
<Text>仅允许驶入类型为数字、英文、中文，禁止输入其他任何字符</Text>
</View>
</View>
})
return flag
@ -43,8 +47,10 @@ const ModifyModal = (props: Params, ref: Ref<ModifyModalRef>) => {
flag = false
setTipsComp(() => {
return <View className={styles['warn-tips']}>
<View>公司名称是辨识您身份的重要依据，</View>
<View>请谨慎修改。（仅支持修改一次）</View>
<View style={{ display: 'flex' }}>
<IconFont customStyle={{ marginRight: '8rpx' }} name="icon-tips" size={36} color="#f79b31"></IconFont>
<View>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</View>
</View>
</View>
})
}
@ -52,8 +58,10 @@ const ModifyModal = (props: Params, ref: Ref<ModifyModalRef>) => {
flag = true
setTipsComp(() => {
return <View className={styles['warn-tips']}>
<View>您修改的次数已达到上限！</View>
<View>如需修改，请联系业务经理修改。</View>
<View style={{ display: 'flex' }}>
<IconFont customStyle={{ marginRight: '8rpx' }} name="icon-tips" size={36} color="#f79b31"></IconFont>
<View>您修改的次数已达到上限！如需修改，请联系业务经理修改。</View>
</View>
</View>
})
}

11
src/pages/userEdit/index.tsx
View File

@ -198,17 +198,7 @@ export default () => {
})
}
const [showModal, setShowModal] = useState(false)
const handleClose = () => {
setShowModal(false)
}
const handleShowChange = (val: boolean) => {
setShowModal(val)
}
const handleClickNickname = () => {
// setShowModal(true)
ModifyNicknameEl.current?.setModalShow(true)
}
const handleClickCompanyName = () => {
@ -278,7 +268,6 @@ export default () => {
value={formData?.company_name}
save={value => handleTextareaSave(value, 'companyName')}
/>
<OrganizationNameModal showModal={showModal} onClose={handleClose} onShowModalChange={handleShowChange} />
</View>
)
}

2
src/styles/common.scss
View File

@ -34,6 +34,8 @@ $opacity-disabled: 0.3;
filter: brightness(70%);
}
$opacity-active: 0.6 !default;
//省略号
@mixin common_ellipsis($params: 1) {
overflow: hidden;