bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改弹窗

Browse Source
This commit is contained in:
筱野
2025-11-24 23:30:27 +08:00
parent 78ab8c9a42
commit 8e558ac57f
9 changed files with 79 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/TextareaTag/TextareaTag.scss
View File

@@ -7,6 +7,9 @@
box-sizing: border-box;
.input-wrapper {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 4px;
.additional-input {
width: 100%;
min-height: 46px;
@@ -22,6 +25,15 @@
color: theme.$textarea-placeholder-color;
}
}
.char-count {
color: #999;
font-size: 12px;
line-height: 18px;
text-align: right;
&.char-count--error {
color: #ff4d4f;
}
}
}
.options-wrapper {

19
src/components/TextareaTag/TextareaTag.tsx
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react'
import React, { useCallback } from 'react'
import { View, Textarea } from '@tarojs/components'
import { Checkbox } from '@nutui/nutui-react-taro'
@@ -21,14 +21,15 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
value,
onChange,
placeholder = '请输入',
maxLength = 1000,
maxLength = 200,
options = [],
onFocus,
onBlur
}) => {
// 处理文本输入变化
const handleTextChange = useCallback((e: any) => {
onChange({...value, description: e.detail.value})
const handleTextChange = useCallback((val: string) => {
console.log(val,'e.detail.value')
onChange({...value, description: val})
}, [onChange])
// 处理标签选择变化
@@ -36,7 +37,8 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
onChange({...value, description_tag: selectedTags})
}, [onChange])
console.log(options, 'options')
const isOverflow = value.description.length > maxLength
return (
<View className='textarea-tag'>
{/* 选择选项 */}
@@ -70,12 +72,15 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
placeholder={placeholder}
value={value.description}
placeholderClass='textarea-placeholder'
onInput={handleTextChange}
maxlength={maxLength}
onInput={(e) => handleTextChange(e.detail.value)}
maxlength={-1}
autoHeight={true}
onFocus={onFocus}
onBlur={onBlur}
/>
<View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
{value.description.length}/{maxLength}
</View>
</View>

15
src/components/TitleTextarea/TitleTextarea.tsx
View File

@@ -21,12 +21,13 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
onFocus,
onBlur
}) => {
const isOverflow = value.length > maxLength
const handleChange = useCallback((values) => {
if (values.length > maxLength ) {
const newValues = values.slice(0, maxLength)
onChange(newValues)
return;
}
// if (values.length > maxLength ) {
// const newValues = values.slice(0, maxLength)
// onChange(newValues)
// return;
// }
onChange(values)
}, [])
return (
@@ -42,7 +43,9 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
onFocus={onFocus}
onBlur={onBlur}
/>
<View className='char-count'>{value.length}/{maxLength}</View>
<View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
{value.length}/{maxLength}
</View>
</View>
)
}

3
src/components/TitleTextarea/index.scss
View File

@@ -41,5 +41,8 @@
font-size: 14px;
font-weight: 400;
line-height: 24px;
&.char-count--error {
color: #ff4d4f;
}
}
}

2
src/config/formSchema/publishBallFormSchema.ts
View File

@@ -150,7 +150,7 @@ export const publishBallFormSchema: FormFieldConfig[] = [
placeholder: '补充性别偏好、特殊要求和注意事项等信息',
required: true,
props: {
maxLength: 1000,
maxLength: 200,
},
options:[
{ label: '仅限男生', value: '仅限男生' },

9
src/publish_pages/publishBall/components/AiImportPopup/AiImportPopup.tsx
View File

@@ -25,6 +25,7 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
const [loading, setLoading] = useState(false)
const [uploadLoading, setUploadLoading] = useState(false)
const maxFailCount = 3
const isCharCountExceeded = text.length > 100
// 获取 actions（在组件顶层调用 Hook）
const { setPublishData } = usePublishBallActions()
@@ -56,6 +57,7 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
}
const handlePasteAndRecognize = async () => {
if (text) {
if (text.length > 100) return;
textIdentification(text)
} else {
getClipboardData()
@@ -71,6 +73,7 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
duration: 2,
wordBreak:'break-word'
})
if (res.data.length > 100) return;
textIdentification(res.data)
// Taro.showToast({
// title: '已读取你的剪切板信息',
@@ -220,7 +223,7 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
onFocus={() => {}}
onBlur={() => {}}
placeholder="在此「粘贴识别」或输入文本，智能拆分球局时间、费用、地点和其他信息，并帮你智能生成球局标题"
maxlength={100}
maxlength={-1}
showConfirmBar={false}
placeholderClass={styles.textArea_placeholder}
autoHeight
@@ -228,7 +231,9 @@ const AiImportPopup: React.FC<AiImportPopupProps> = ({
adjustPosition={false}
/>
<View className={styles.charCount}>
<Text className={styles.charCountText}>{text.length}/100</Text>
<Text className={`${styles.charCountText} ${isCharCountExceeded ? styles.charCountTextExceeded : ''}`}>
{text.length}/100
</Text>
</View>
</View>

3
src/publish_pages/publishBall/components/AiImportPopup/index.module.scss
View File

@@ -85,6 +85,9 @@
font-size: 12px;
color: #8a8a8a;
}
.charCountTextExceeded {
color: #ff4d4f;
}
}
}

8
src/publish_pages/publishBall/components/SelectStadium/SelectStadium.tsx
View File

@@ -118,6 +118,14 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
const formData = stadiumDetailRef.current.getFormData()
console.log('获取球馆表单数据:', formData)
const { description, ...rest } = formData
const { description: descriptionInfo} = description;
if (descriptionInfo.length > 200 ) {
Taro.showToast({
title: `场地信息补充最多可输入200个字`,
icon: "none",
});
return;
};
onConfirm({ ...rest, ...description })
setSelectedStadium(null)
setSearchValue('')

26
src/publish_pages/publishBall/index.tsx
View File

@@ -206,8 +206,10 @@ const PublishBall: React.FC = () => {
image_list,
players,
current_players,
descriptionInfo
} = formData;
const { play_type, price, location_name } = activityInfo;
const { description } = descriptionInfo;
const { max } = players;
if (!image_list?.length && activityType === "group") {
@@ -241,6 +243,16 @@ const PublishBall: React.FC = () => {
}
return false;
}
if (title.length > 20) {
if (!isOnSubmit) {
Taro.showToast({
title: `标题最多可输入20个字`,
icon: "none",
});
}
return false;
}
if (
!price ||
(typeof price === "number" && price <= 0) ||
@@ -324,6 +336,16 @@ const PublishBall: React.FC = () => {
return false;
}
if (description?.length > 200) {
if (!isOnSubmit) {
Taro.showToast({
title: `补充要求最多可输入200个字`,
icon: "none",
});
}
return false;
}
return true;
};
const validateOnSubmit = () => {
@@ -865,7 +887,7 @@ const PublishBall: React.FC = () => {
</Text>
</Text>
)}
{activityType === "group" && (
{/* {activityType === "group" && (
<View className={styles["submit-tip"]}>
<Checkbox
className={styles["submit-checkbox"]}
@@ -874,7 +896,7 @@ const PublishBall: React.FC = () => {
/>
已认证 徐汇爱打球官方球场，请严格遵守签约协议
</View>
)}
)} */}
</View>
</View>
</View>