🐞 fix(scss): 删除modifyModal多余的scss文件

This commit is contained in:
xuan 2022-12-29 12:47:35 +08:00
commit 1546a11c34
18 changed files with 570 additions and 242 deletions

View File

@ -1,5 +1,5 @@
{
"symbol_url": "//at.alicdn.com/t/c/font_3786318_8mk04nkdxlg.js",
"symbol_url": "//at.alicdn.com/t/c/font_3786318_dbfm4mvm98c.js",
"save_dir": "./src/components/iconfont",
"use_typescript": false,
"use_rpx": true,

View File

@ -78,7 +78,7 @@
"prettier": "^2.8.0",
"react-refresh": "0.14.0",
"stylelint": "14.16.0",
"taro-iconfont-svg": "^1.0.19",
"taro-iconfont-svg": "^1.1.1",
"typescript": "^4.9.3",
"webpack": "^5.75.0"
}

View File

@ -1,11 +1,11 @@
// export const BASE_URL = CURRENT_BASE_URL
export const BASE_URL = CURRENT_BASE_URL
// export const BASE_URL = `http://192.168.0.75:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:50001/lymarket`
// export const BASE_URL = `http://10.0.0.5:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:40001/lymarket`
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
// export const BASE_URL = 'https://test.zzfzyc.com/lymarket' // 测试环境
// export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
// export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
// export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
// export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发

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 })}

View File

@ -8,14 +8,11 @@ import NormalButton from '../normalButton'
import LayoutBlock from '../layoutBlock'
import IconText from '../iconText'
import IconFont from '../iconfont/iconfont'
import InputX from '../InputX'
import Divider from '../divider'
import styles from './index.module.scss'
import { formatImgUrl } from '@/common/fotmat'
import { alert, goLink } from '@/common/common'
import CloseBtn from '@/components/closeBtn'
import { getCDNSource } from '@/common/constant'
import { getFilterData } from '@/common/util'
import { BindInvitationInfoApi, GetInvitationInfoApi } from '@/api/user'
// 获取业务员信息
interface Param { invitation_code: string; name: string; phone: string }

View File

@ -24,7 +24,7 @@ function hex2rgb(hex) {
return "rgb(" + rgb.join(",") + ")";
}
export type IconNames = 'icon-dianhua' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';
export type IconNames = 'icon-tips' | 'icon-dianhua' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';
type PropsType = {
name: IconNames;
@ -36,7 +36,7 @@ type PropsType = {
const IconFont:FC<PropsType> = ({
name,
size = 18,
size = 36,
color,
customStyle = {},
customClassName = ""
@ -66,6 +66,8 @@ const IconFont:FC<PropsType> = ({
// 也可以使用 if (name === 'xxx') { return <view> } 来渲染但是测试发现在ios下会有问题报错 Maximum call stack啥的。下面这个写法没问题
return (
<Block>
{/* icon-colorCard 本地svg */ }
{/* { name === 'icon-colorCard' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px' viewBox='0 0 72 72'><defs><linearGradient id='a' x1='56.049%' x2='45.965%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[0]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[1]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='b' x1='100%' x2='16.645%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[2]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[3]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='c' x1='18.906%' x2='80.404%' y1='44.444%' y2='55.556%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[4]) || '%233591FD'}'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[5]) || '%233667EF'}'/></linearGradient></defs><g fill='none' fill-rule='nonzero'><path fill='url(%23a)' d='M24.75 11.25A2.25 2.25 0 0 1 27 13.5v47.25A2.25 2.25 0 0 1 24.75 63h-13.5A2.25 2.25 0 0 1 9 60.75V13.5a2.25 2.25 0 0 1 2.25-2.25h13.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z'/><path fill='url(%23b)' d='m45.593 16.216 9.546 9.546a2.25 2.25 0 0 1 0 3.182l-31.82 31.82a2.25 2.25 0 0 1-3.182 0L16.273 56.9a3.375 3.375 0 1 0-1.174-1.174l-4.508-4.508a2.25 2.25 0 0 1 0-3.182l31.82-31.82a2.25 2.25 0 0 1 3.182 0Z'/><path fill='url(%23c)' d='M60.75 45A2.25 2.25 0 0 1 63 47.25v13.5A2.25 2.25 0 0 1 60.75 63h-49.5A2.25 2.25 0 0 1 9 60.75v-13.5A2.25 2.25 0 0 1 11.25 45h49.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z' opacity='.95'/></g></svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) } */}
{/* icon-alipay */}
{/* {name === "icon-alipay" && (
<View
@ -82,6 +84,9 @@ const IconFont:FC<PropsType> = ({
className={classnames(icon, customClassName)}
/>
)} */}
{/* icon-tips */}
{ name === 'icon-tips' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 96c229.76 0 416 186.24 416 416s-186.24 416-416 416S96 741.76 96 512 282.24 96 512 96z m0 576a32 32 0 1 0 0 64 32 32 0 0 0 0-64z m0-384a32 32 0 0 0-32 32v256a32 32 0 0 0 64 0v-256a32 32 0 0 0-32-32z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
{/* icon-dianhua */}
{ name === 'icon-dianhua' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M880.384 820.768c31.552-54.72 14.08-96.736-41.792-138.784-65.664-49.44-129.856-82.688-176-29.44 0 0-48.992 58.112-193.152-77.856-167.584-159.232-97.28-215.68-97.28-215.68 58.336-58.432 21.28-101.984-27.616-168-48.896-65.952-98.272-86.848-169.184-30.08C38.72 270.272 231.36 527.04 328.8 626.88c0 0 148.096 152.672 241.28 203.52l49.888 27.776c71.52 36.576 151.84 53.312 208.384 19.36 0 0 27.264-13.984 52.032-56.8z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,127,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }

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;
// }
}

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>

View File

@ -0,0 +1,77 @@
.organizationNameModal {
width: 75vw;
background-color: #fff;
border-radius: 20px;
padding-top: 20px;
overflow: hidden;
.inputBar {
border: 1px solid transparent;
background-color: #f5f5f5;
border-radius: 20px;
padding: 20px 42px;
margin: 32px 40px;
margin-bottom: 0;
font-size: 26px;
color: #333;
&_focus {
border: 1px solid #337fff;
}
&_error {
border: 1px solid #f64861;
color: #f64861;
}
}
&_title {
padding: 10px;
text-align: center;
}
&_content {
margin-bottom: 20px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
&_bottomBar {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
border-top: 1px solid #eee;
margin-top: 30px;
.button {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
width: 50%;
height: 100%;
font-size: 32px;
font-weight: 550;
padding: 30px 0;
border: 0;
background-color: #fff;
}
&_left {
border-right: 1px solid #eee;
color: #333;
}
&_right {
color: #337fff;
}
}
.tips {
display: flex;
background-color: #fef9f4;
font-size: 24px;
color: #ff9b33;
line-height: 1.5;
padding: 20px;
}
}
.error_tips {
color: #f64861;
padding: 10px 42px;
font-size: 20px;
}

View File

@ -0,0 +1,99 @@
import type { CommonEventFunction, InputProps } from '@tarojs/components'
import { Input, Text, View } from '@tarojs/components'
import React, { useMemo, useState } from 'react'
import classNames from 'classnames'
import Dialog from '../Dialog'
import IconFont from '../iconfont/iconfont'
import NormalButton from '../normalButton'
import styles from './index.module.scss'
interface PropsType {
showModal: boolean
onClose?: () => void
onShowModalChange?: (val: boolean) => void
onCancel?: () => void
onConfirm?: (val: string) => void
}
const OrganizationNameModal = (props: PropsType) => {
const {
showModal = false,
onClose,
onShowModalChange,
onCancel,
onConfirm,
} = props
const handleClose = () => {
onClose?.()
}
const [text, setText] = useState<string>('')
const handleCancel = () => {
onCancel?.()
handleClose()
}
const handleConfirm = () => {
onConfirm?.(text)
}
const [inputStyles, setInputStyles] = useState<string[]>([])
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) => {
setText(e.detail.value)
}
const handleFocus = () => {
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} 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}>
<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}>
<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>
}
export default OrganizationNameModal

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>
)
}

View File

@ -1,76 +0,0 @@
.modify-ickname-content {
margin: 0 auto;
width: 658px;
padding-bottom: 50px;
.modify-ickname-input {
width: 658px;
height: 182px;
background: #f3f3f3;
border: 2px solid #e6e6e6;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
font-size: 22px;
font-weight: 400;
color: #ababab;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.modify-ickname-input textarea {
width: 100%;
height: 80%;
font-size: 26px;
font-weight: 400;
color: #3c3c3c;
}
.modify-ickname-tips {
font-size: 22px;
font-weight: 400;
color: #ababab;
margin-top: 30px;
}
.modify-ickname-operation {
width: 658px;
height: 82px;
background: #ffffff;
border: 2px solid #cde5ff;
border-radius: 40px;
display: flex;
overflow: hidden;
margin-top: 105px;
display: flex;
}
.modify-ickname-operation button {
height: 100%;
width: 50%;
font-size: 32px;
font-weight: 400;
color: $color_main;
background-color: white;
border: none;
outline: none;
padding: 0;
border-radius: 0;
}
.modify-ickname-operation button::after,
.user-edit-logout::after {
border-radius: 0;
border: none;
}
.modify-ickname-operation .modify-ickname-operation-save {
background: $color_main;
color: #ffffff;
}
.modify-ickname-operation button::after {
border-radius: 0;
}
}

View File

@ -1,49 +0,0 @@
import { Button, Image, Text, Textarea, View } from '@tarojs/components'
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from 'react'
import Popup from '@/components/popup'
import './ModifyModal.scss'
interface Params{
title?: string
save: (value: any) => void // 确定保存
}
export default memo(forwardRef((props: any, ref) => {
const { title = '修改昵称' } = props
const [value, setValue] = useState('')
useEffect(() => {
setValue(props.value)
}, [props.value])
// popup输入长度
const handleTextareaInput = (ev: any) => {
setValue(ev.detail.value.slice(0, 20))
}
// 重置
const handleTextareaReset = () => {
setValue('')
}
const [textareaBottom, setTextareaBottom] = useState(0)
const handleBlur = () => {
setTextareaBottom(0)
}
const handleFocus = (ev) => {
setTextareaBottom(ev.detail.height)
}
const [modalShow, setModalShow] = useState(false)
useImperativeHandle(ref, () => ({ setModalShow }))
return (
<Popup onClose={() => setModalShow(false)} title={title} show={modalShow}>
<View style={{ marginBottom: `${textareaBottom}px` }} className="modify-ickname-content">
<View className="modify-ickname-input">
<Textarea showConfirmBar={false} auto-focus adjustPosition={false} value={value} onBlur={handleBlur} onFocus={handleFocus} onInput={handleTextareaInput} maxlength={20} />
<Text>{value?.length}/20</Text>
</View>
<Text className="modify-ickname-tips">2-20</Text>
<View className="modify-ickname-operation">
<Button onClick={handleTextareaReset} hoverClass="none" className="modify-ickname-operation-reset"></Button>
<Button onClick={() => props.save(value)} hoverClass="none" className="modify-ickname-operation-save"></Button>
</View>
</View>
</Popup>
)
}))

View File

@ -0,0 +1,78 @@
.modify-ickname-content {
margin: 0 auto;
padding: 40px 0;
.modify-ickname-input {
margin-top: 30px;
margin-left: 48px;
margin-right: 48px;
height: 182px;
background: #f3f3f3;
border: 2px solid #e6e6e6;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
font-size: 22px;
font-weight: 400;
color: #ababab;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.modify-ickname-input Textarea {
width: 100%;
height: 80%;
font-size: 26px;
font-weight: 400;
color: #3c3c3c;
}
.modify-ickname-tips {
padding: 0 48px;
font-size: 22px;
font-weight: 400;
color: #ababab;
margin-top: 30px;
}
.modify-ickname-operation {
background: #ffffff;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
padding: 0 48px;
margin-top: 80px;
.button {
width: 45%;
font-size: 32px;
padding: 20px 0;
font-weight: 400;
&::after {
border-radius: 0;
}
}
.modify-ickname-operation-save {
background: #007aff;
color: #ffffff;
}
.modify-ickname-operation-IKnown {
width: 100%;
}
}
.modify-ickname-operation .button::after,
.user-edit-logout::after {
border-radius: 0;
border: none;
}
}
.warn-tips {
background-color: #fef9f4;
line-height: 1.5;
padding: 15px 48px;
font-size: 22px;
font-weight: 400;
color: #ff9b33;
}

View File

@ -0,0 +1,118 @@
import type { CommonEventFunction, TextareaProps } from '@tarojs/components'
import { Button, Image, Text, Textarea, View } from '@tarojs/components'
import type { Ref } from 'react'
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
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
value?: string
isCompanyName?: boolean
save: (value: any) => void // 确定保存
}
export interface ModifyModalRef {
setModalShow: (val: boolean) => void
}
const ModifyModal = (props: Params, ref: Ref<ModifyModalRef>) => {
const { title = '修改昵称', value: _value = '', isCompanyName = false } = props
const [value, setValue] = useState('')
const [tipsComp, setTipsComp] = useState<React.ReactNode | null>(null)
// 不合法状态
const isInvalidate = useMemo(() => {
let flag = false
// 仅允输入类型为数字、英文、中文
const Reg = /^[a-zA-Z0-9\u4E00-\u9FA5]+$/
if (!Reg.test(value)) {
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
}
// 修改组织名称
if (isCompanyName) {
// TODO 检测是否没机会修改
if (true) {
flag = false
setTipsComp(() => {
return <View className={styles['warn-tips']}>
<View style={{ display: 'flex' }}>
<IconFont customStyle={{ marginRight: '8rpx' }} name="icon-tips" size={36} color="#f79b31"></IconFont>
<View></View>
</View>
</View>
})
}
else {
flag = true
setTipsComp(() => {
return <View className={styles['warn-tips']}>
<View style={{ display: 'flex' }}>
<IconFont customStyle={{ marginRight: '8rpx' }} name="icon-tips" size={36} color="#f79b31"></IconFont>
<View></View>
</View>
</View>
})
}
}
return flag
}, [value, isCompanyName])
useEffect(() => {
setValue(_value)
}, [_value])
// popup输入长度
const handleTextareaInput: CommonEventFunction<TextareaProps.onInputEventDetail> = (ev) => {
setValue(ev.detail.value.slice(0, 20))
}
// 重置
const handleTextareaReset = () => {
setValue('')
}
const [textareaBottom, setTextareaBottom] = useState(0)
const handleBlur: CommonEventFunction<TextareaProps.onBlurEventDetail> = () => {
setTextareaBottom(0)
}
const handleFocus: CommonEventFunction<TextareaProps.onFocusEventDetail> = (ev) => {
setTextareaBottom(ev.detail.height)
}
const [modalShow, setModalShow] = useState(false)
useImperativeHandle(ref, () => ({ setModalShow }))
return (
<Popup onClose={() => setModalShow(false)} title={title} show={modalShow}>
<View style={{ marginBottom: `${textareaBottom}px` }} className={styles['modify-ickname-content']}>
{tipsComp}
<View className={styles['modify-ickname-input']}>
<Textarea showConfirmBar={false} auto-focus adjustPosition={false} value={value} onBlur={handleBlur} onFocus={handleFocus} onInput={handleTextareaInput} maxlength={20} />
<Text>{value?.length}/20</Text>
</View>
<View className={styles['modify-ickname-tips']}>2-20</View>
<View className={styles['modify-ickname-operation']}>
{
// TODO 检测是否没机会修改
true
? <>
<NormalButton round type="primary" plain onClick={handleTextareaReset} customClassName={classNames(styles.button, styles['modify-ickname-operation-reset'])}></NormalButton>
<NormalButton round disabled={isInvalidate} onClick={() => props.save(value)} type="primary" customClassName={classNames(styles.button, styles['modify-ickname-operation-save'])}></NormalButton>
</>
: <NormalButton round onClick={() => setModalShow(false)} type="primary" customClassName={classNames(styles.button, styles['modify-ickname-operation-IKnown'])}></NormalButton>
}
</View>
</View>
</Popup>
)
}
export default memo(forwardRef(ModifyModal))

View File

@ -1,6 +1,7 @@
import { Button, Image, Picker, Text, Textarea, View } from '@tarojs/components'
import Taro, { chooseMedia } from '@tarojs/taro'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import type { ModifyModalRef } from './components/ModifyModal'
import ModifyModal from './components/ModifyModal'
import { alert, goLink, isEmptyObject, retrieval } from '@/common/common'
import Popup from '@/components/popup'
@ -14,6 +15,7 @@ import { IMG_CND_Prefix } from '@/common/constant'
import useUserInfo from '@/use/useUserInfo'
import IconFont from '@/components/iconfont/iconfont'
import { formatImgUrl } from '@/common/fotmat'
import OrganizationNameModal from '@/components/organizationNameModal'
// 列表
const UserEditList = memo((props: any) => {
@ -31,6 +33,8 @@ const UserEditList = memo((props: any) => {
export default () => {
const { getPhoneNumber, getAdminUserInfo } = useLogin()
const { adminUserInfo } = useSelector(state => state.userInfo)
const ModifyNicknameEl = useRef<ModifyModalRef>(null)
const ModifyCompanyNameEl = useRef<ModifyModalRef>(null)
// 表单数据
const [formData, setFormData] = useState<typeof adminUserInfo>(adminUserInfo)
// 用户信息
@ -40,13 +44,6 @@ export default () => {
...(adminUserInfo as any),
})
}, [adminUserInfo])
useEffect(() => {
setFormData({
...(adminUserInfo as any),
company_type_index: 0,
})
getCompanyTypeData()
}, [])
// 昵称修改保存
const { fetchData: realNameUpdateFetch } = realNameUpdateApi()
@ -75,8 +72,8 @@ export default () => {
}
if (result.success) {
getAdminUserInfo()
;(ModifyIcknameEl.current as any).setModalShow(false)
;(ModifyCompanyNameEl.current as any).setModalShow(false)
ModifyNicknameEl.current?.setModalShow(false)
ModifyCompanyNameEl.current?.setModalShow(false)
alert.success('保存成功')
}
else {
@ -125,8 +122,7 @@ export default () => {
alert.none('绑定失败!')
}
}
const ModifyIcknameEl = useRef(null)
const ModifyCompanyNameEl = useRef(null)
// 获取企业类型
const { fetchData: companyTypeFetch, state: companyTypeData } = companyTypeApi()
const getCompanyTypeData = async() => {
@ -185,6 +181,14 @@ export default () => {
}
}, [companyTypeData])
useEffect(() => {
setFormData({
...(adminUserInfo as any),
company_type_index: 0,
})
getCompanyTypeData()
}, [])
const userInfo = useSelector(state => state.userInfo)
const onPhone = () => {
@ -194,25 +198,32 @@ export default () => {
})
}
const handleClickNickname = () => {
ModifyNicknameEl.current?.setModalShow(true)
}
const handleClickCompanyName = () => {
ModifyCompanyNameEl.current?.setModalShow(true)
}
return (
<View className="user-edit">
<View onClick={handleSelectRortrait} className="user-edit-portrait">
<Image src={(formData as any)?.avatar_url} />
<Image src={formData?.avatar_url as string} />
<View></View>
</View>
<View className="user-edit-content">
<UserEditList
onClick={() => (ModifyIcknameEl.current as any).setModalShow(true)}
data={(formData as any)?.user_name}
onClick={handleClickNickname}
data={formData?.user_name}
label="昵称"
placeholder="请输入"
icon=""
/>
<UserEditList label="手机号" placeholder="去绑定" icon="" useIcon="true">
{(formData as any)?.phone
{formData?.phone
? (
<View className="user-edit-content-phone">
<View>{(formData as any)?.phone}</View>
<View>{formData?.phone}</View>
</View>
)
: (
@ -222,8 +233,8 @@ export default () => {
)}
</UserEditList>
<UserEditList
onClick={() => (ModifyCompanyNameEl.current as any).setModalShow(true)}
data={(formData as any)?.company_name}
onClick={handleClickCompanyName}
data={formData?.company_name}
label="公司名称"
placeholder="待绑定"
icon=""
@ -249,11 +260,12 @@ export default () => {
退
</Button> */}
<ModifyModal title="修改昵称" ref={ModifyIcknameEl} value={(formData as any)?.user_name} save={value => handleTextareaSave(value, 'Ickname')} />
<ModifyModal title="修改昵称" ref={ModifyNicknameEl} value={(formData as any)?.user_name} save={value => handleTextareaSave(value, 'Ickname')} />
<ModifyModal
title="修改名称"
isCompanyName
ref={ModifyCompanyNameEl}
value={(formData as any)?.company_name}
value={formData?.company_name}
save={value => handleTextareaSave(value, 'companyName')}
/>
</View>

View File

@ -30,6 +30,12 @@ $opacity-disabled: 0.3;
height: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
.hoverClass{
filter: brightness(70%);
}
$opacity-active: 0.6 !default;
//省略号
@mixin common_ellipsis($params: 1) {
overflow: hidden;

View File

@ -2424,9 +2424,9 @@
"@tarojs/api" "3.5.8"
"@tarojs/runtime" "3.5.8"
"@tarojs/taro@^3.5.7":
"@tarojs/taro@^3.5.10":
version "3.5.10"
resolved "https://registry.npmmirror.com/@tarojs/taro/-/taro-3.5.10.tgz#004b161099b89e0ca29311394694784445934a40"
resolved "https://registry.npmjs.org/@tarojs/taro/-/taro-3.5.10.tgz#004b161099b89e0ca29311394694784445934a40"
integrity sha512-WU+y8AAdbSZS9Oexz34irKkVxRkGkTpu70mDxYenfrrkgY6tOuQ/EmHavuxmQ7aEoFIjgm6s6pW91jd2AyOh+w==
dependencies:
"@tarojs/api" "3.5.10"
@ -5752,6 +5752,17 @@ css-select@^4.1.3:
domutils "^2.8.0"
nth-check "^2.0.1"
css-select@^5.1.0:
version "5.1.0"
resolved "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
dependencies:
boolbase "^1.0.0"
css-what "^6.1.0"
domhandler "^5.0.2"
domutils "^3.0.1"
nth-check "^2.0.1"
css-tree@1.0.0-alpha.29:
version "1.0.0-alpha.29"
resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.29.tgz"
@ -5768,6 +5779,14 @@ css-tree@^1.1.2, css-tree@^1.1.3:
mdn-data "2.0.14"
source-map "^0.6.1"
css-tree@^2.2.1:
version "2.3.1"
resolved "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
dependencies:
mdn-data "2.0.30"
source-map-js "^1.0.1"
css-tree@~2.2.0:
version "2.2.1"
resolved "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz"
@ -5776,7 +5795,7 @@ css-tree@~2.2.0:
mdn-data "2.0.28"
source-map-js "^1.0.1"
css-what@^6.0.1:
css-what@^6.0.1, css-what@^6.1.0:
version "6.1.0"
resolved "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz"
integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
@ -5867,7 +5886,7 @@ csso@^4.0.2, csso@^4.2.0:
dependencies:
css-tree "^1.1.2"
csso@^5.0.2:
csso@^5.0.2, csso@^5.0.5:
version "5.0.5"
resolved "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz"
integrity sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==
@ -7468,10 +7487,10 @@ fs-extra@8.1.0, fs-extra@^8.0.1, fs-extra@^8.1.0:
jsonfile "^4.0.0"
universalify "^0.1.0"
fs-extra@^10.1.0:
version "10.1.0"
resolved "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
fs-extra@^11.1.0:
version "11.1.0"
resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz#5784b102104433bb0e090f48bfc4a30742c357ed"
integrity sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==
dependencies:
graceful-fs "^4.2.0"
jsonfile "^6.0.1"
@ -9531,6 +9550,11 @@ mdn-data@2.0.28:
resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz"
integrity sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==
mdn-data@2.0.30:
version "2.0.30"
resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
mdn-data@~1.1.0:
version "1.1.4"
resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz"
@ -13047,6 +13071,18 @@ svgo@^2.7.0:
picocolors "^1.0.0"
stable "^0.1.8"
svgo@^3.0.2:
version "3.0.2"
resolved "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz#5e99eeea42c68ee0dc46aa16da093838c262fe0a"
integrity sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==
dependencies:
"@trysound/sax" "0.2.0"
commander "^7.2.0"
css-select "^5.1.0"
css-tree "^2.2.1"
csso "^5.0.5"
picocolors "^1.0.0"
swiper@6.8.0:
version "6.8.0"
resolved "https://registry.npmjs.org/swiper/-/swiper-6.8.0.tgz"
@ -13104,20 +13140,22 @@ taro-css-to-react-native@3.5.8:
css-mediaquery "^0.1.2"
postcss-value-parser "^3.3.0"
taro-iconfont-svg@^1.0.19:
version "1.0.19"
resolved "https://registry.npmmirror.com/taro-iconfont-svg/-/taro-iconfont-svg-1.0.19.tgz#92c5f264af37dc5a9e5ba59cdc1b5594ff60431b"
integrity sha512-A5B5pe6gYjYcvuMAOgz5mJ3pA+syDP8lx2F2o12r1ddcccQljsU9k4KYp73wfouCCLSNi5CCy+UCcC6Ts51f4A==
taro-iconfont-svg@^1.1.1:
version "1.1.1"
resolved "https://registry.npmjs.org/taro-iconfont-svg/-/taro-iconfont-svg-1.1.1.tgz#9bf97717bb312e9ab766fb0f4dca30dcf244ff50"
integrity sha512-rOfrubDg3hGky6b7sb+rygleq97LW1dnd23MVIJ+0h9xsMxFwEv1t4+R/ZMpWhxrWV4CQPgIJJ0YKb1BIqLs5A==
dependencies:
"@tarojs/taro" "^3.5.7"
"@tarojs/taro" "^3.5.10"
classnames "^2.3.2"
colors "^1.4.0"
fs-extra "^10.1.0"
fs-extra "^11.1.0"
glob "^8.0.3"
iconfont-parser "^1.0.0"
minimist "^1.2.7"
mkdirp "^1.0.4"
svgo "^3.0.2"
ts-node "^10.9.1"
xml2js "^0.4.23"
tarojs@^2.1.1:
version "2.1.1"
@ -14248,7 +14286,7 @@ xml-parse-from-string@^1.0.0:
resolved "https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz"
integrity sha512-ErcKwJTF54uRzzNMXq2X5sMIy88zJvfN2DmdoQvy7PAFJ+tPRU6ydWuOKNMyfmOjdyBQTFREi60s0Y0SyI0G0g==
xml2js@^0.4.19, xml2js@^0.4.22, xml2js@^0.4.5:
xml2js@^0.4.19, xml2js@^0.4.22, xml2js@^0.4.23, xml2js@^0.4.5:
version "0.4.23"
resolved "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz"
integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==