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

Merge branch 'master' of https://gitee.com/ballminiprogramwe/mini-programs

Browse Source
This commit is contained in:
张成
2025-09-02 09:34:05 +08:00
parent 67084b20e3 0db00953b5
commit ed9147558b
135 changed files with 4954 additions and 3848 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
analyze.js Normal file
View File

@@ -0,0 +1,50 @@
const fs = require('fs');
const path = require('path');
// dist 目录路径，根据你项目实际情况修改
const DIST_DIR = path.join(__dirname, 'dist');
// 递归统计文件大小
function getFiles(dir) {
let results = [];
const list = fs.readdirSync(dir);
list.forEach(file => {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat && stat.isDirectory()) {
results = results.concat(getFiles(filePath));
} else {
results.push({ path: filePath, size: stat.size });
}
});
return results;
}
function formatSize(bytes) {
if (bytes < 1024) return bytes + ' B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
}
function analyze() {
if (!fs.existsSync(DIST_DIR)) {
console.error('dist 目录不存在，请先执行 taro build --type weapp');
return;
}
const files = getFiles(DIST_DIR);
const total = files.reduce((sum, f) => sum + f.size, 0);
console.log('文件大小分析（按从大到小排序）:');
files
.sort((a, b) => b.size - a.size)
.forEach(f => {
console.log(
`${formatSize(f.size)} | ${(f.size / total * 100).toFixed(2)}% | ${path.relative(DIST_DIR, f.path)}`
);
});
console.log(`\n总大小: ${formatSize(total)}`);
}
analyze();

11
config/index.ts
View File

@@ -16,7 +16,7 @@ export default defineConfig<'webpack5'>(async (merge, { command, mode }) => {
750: 1,
375: 2,
828: 1.81 / 2,
390: 1.92
390: 1.92
},
sourceRoot: 'src',
outputRoot: 'dist',
@@ -66,9 +66,16 @@ export default defineConfig<'webpack5'>(async (merge, { command, mode }) => {
}
}
},
miniCssExtractPluginOption: {
ignoreOrder: true,
// filename: 'css/[name].[hash].css',
// chunkFilename: 'css/[name].[chunkhash].css'
},
webpackChain(chain) {
chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
}
},
// @ts-expect-error: Taro 类型定义缺少 mini.hot
hot: true,
},
h5: {
publicPath: '/',

1
package.json
View File

@@ -54,7 +54,6 @@
"@tarojs/shared": "4.1.5",
"@tarojs/taro": "4.1.5",
"dayjs": "^1.11.13",
"qqmap-wx-jssdk": "^1.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"zustand": "^4.4.7"

0
src/pages/index/index.module.scss → postcss.config.js
View File

12
src/app.config.ts
View File

@@ -1,14 +1,18 @@
export default defineAppConfig({
pages: [
'pages/list/index',
// 'pages/userInfo/myself/index',
// 'pages/publishBall/index',
'pages/list/index', // 列表页
'pages/search/index', // 搜索页
'pages/searchResult/index', // 搜索结果页面
'pages/userInfo/myself/index',
'pages/login/index/index',
'pages/login/verification/index',
'pages/login/terms/index',
'pages/publishBall/index',
// 'pages/mapDisplay/index',
'pages/index/index',
'pages/detail/index',
'pages/message/index',
'pages/personal/index',
'pages/orderCheck/index',
],
window: {
backgroundTextStyle: 'light',

4
src/app.scss
View File

@@ -0,0 +1,4 @@
@font-face {
font-family: 'PoetsenOne';
src: url('./static/asserts/fonts/PoetsenOne-Regular.ttf') format('truetype');
}

17
src/app.ts
View File

@@ -1,7 +1,10 @@
import { Component, ReactNode } from 'react'
import './app.scss'
import './nutui-theme.scss'
import './app.scss'
import { useDictionaryStore } from './store/dictionaryStore'
import { useGlobalStore } from './store/global'
// import { getNavbarHeight } from "@/utils/getNavbarHeight";
interface AppProps {
children: ReactNode
@@ -11,11 +14,12 @@ class App extends Component<AppProps> {
componentDidMount() {
// 初始化字典数据
this.initDictionaryData()
this.getNavBarHeight()
}
componentDidShow() {}
componentDidShow() { }
componentDidHide() {}
componentDidHide() { }
// 初始化字典数据
private async initDictionaryData() {
@@ -27,6 +31,13 @@ class App extends Component<AppProps> {
}
}
// 获取导航高度
getNavBarHeight = () => {
const { getNavbarHeightInfo } = useGlobalStore.getState()
getNavbarHeightInfo()
}
render() {
// this.props.children 是将要会渲染的页面
return this.props.children

117
src/components/CalendarCard/CalendarCard.tsx Normal file
View File

@@ -0,0 +1,117 @@
import React, { useMemo, useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import styles from './index.module.scss'
import images from '@/config/images'
interface CalendarCardProps {
value?: Date
minDate?: Date
maxDate?: Date
onChange?: (date: Date) => void
onNext?: (date: Date) => void
onHeaderClick?: (date: Date) => void
}
const startOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1)
const endOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth() + 1, 0)
const addMonths = (date: Date, delta: number) => new Date(date.getFullYear(), date.getMonth() + delta, 1)
const formatHeader = (date: Date) => `${date.getMonth() + 1}月 ${date.getFullYear()}`
const CalendarCard: React.FC<CalendarCardProps> = ({
value,
minDate,
maxDate,
onChange,
onHeaderClick
}) => {
const today = new Date()
const [current, setCurrent] = useState<Date>(value || startOfMonth(today))
const [selected, setSelected] = useState<Date>(value || today)
const firstDay = useMemo(() => startOfMonth(current), [current])
const lastDay = useMemo(() => endOfMonth(current), [current])
const days = useMemo(() => {
const startWeekday = firstDay.getDay() // 0 周日
const prevPadding = startWeekday // 周日为第一列
const total = prevPadding + lastDay.getDate()
const rows = Math.ceil(total / 7)
const grid: (Date | null)[] = []
for (let i = 0; i < rows * 7; i++) {
const day = i - prevPadding + 1
if (day < 1 || day > lastDay.getDate()) {
grid.push(null)
} else {
grid.push(new Date(current.getFullYear(), current.getMonth(), day))
}
}
return grid
}, [firstDay, lastDay, current])
const isDisabled = (d: Date) => {
if (minDate && d < minDate) return true
if (maxDate && d > maxDate) return true
return false
}
const gotoMonth = (delta: number) => setCurrent(prev => addMonths(prev, delta))
const handleHeaderClick = () => {
onHeaderClick && onHeaderClick(current)
}
const handleSelectDay = (d: Date | null) => {
if (!d || isDisabled(d)) return
setSelected(d)
onChange && onChange(d)
}
return (
<View className={styles['calendar-card']}>
<View className={styles['header']}>
<View className={styles['header-left']} onClick={handleHeaderClick}>
<Text className={styles['header-text']}>{formatHeader(current)}</Text>
<Image src={images.ICON_RIGHT_MAX} className={`${styles['month-arrow']}}`} onClick={() => gotoMonth(1)} />
</View>
<View className={styles['header-actions']}>
<Image src={images.ICON_RIGHT_MAX} className={`${styles['arrow']} ${styles['left']}`} onClick={() => gotoMonth(-1)} />
<Image src={images.ICON_RIGHT_MAX} className={`${styles['arrow']}}`} onClick={() => gotoMonth(1)} />
</View>
</View>
<View className={styles['week-row']}>
{['周日','周一','周二','周三','周四','周五','周六'].map((w) => (
<Text key={w} className={styles['week-item']}>{w}</Text>
))}
</View>
<View className={styles['grid']}>
{days.map((d, idx) => {
const isSelected = !!(d && selected && d.toDateString() === new Date(selected.getFullYear(), selected.getMonth(), selected.getDate()).toDateString())
return (
<View
key={idx}
className={`${styles['cell']} ${!d ? styles['empty'] : ''} ${d && isDisabled(d) ? styles['disabled'] : ''} `}
onClick={() => handleSelectDay(d)}
>
{d ? <Text className={`${styles['cell-text']} ${isSelected ? styles['selected'] : ''}`}>{d.getDate()}</Text> : null}
</View>
)
})}
</View>
</View>
)
}
export default CalendarCard

130
src/components/CalendarCard/DialogCalendarCard.tsx Normal file
View File

@@ -0,0 +1,130 @@
import React, { useState, useEffect } from 'react'
import CommonPopup from '@/components/CommonPopup'
import CalendarCard from './CalendarCard'
import DateTimePicker from '@/components/DateTimePicker'
import HourMinutePicker from '@/components/HourMinutePicker'
export interface DialogCalendarCardProps {
value?: Date
minDate?: Date
maxDate?: Date
onChange?: (date: Date) => void
onNext?: (date: Date) => void
visible: boolean
onClose: () => void
title?: React.ReactNode
}
const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
visible,
onClose,
title,
value,
minDate,
maxDate,
onChange,
onNext
}) => {
const [selected, setSelected] = useState<Date>(value || new Date())
const [type, setType] = useState<'year' | 'month' | 'time'>('year');
const [selectedHour, setSelectedHour] = useState(8)
const [selectedMinute, setSelectedMinute] = useState(0)
const handleConfirm = () => {
if (type === 'year') {
// 年份选择完成后，进入月份选择
setType('time')
} else if (type === 'month') {
// 月份选择完成后，进入时间选择
setType('year')
} else if (type === 'time') {
// 时间选择完成后，调用onNext回调
const finalDate = new Date(selected.getFullYear(), selected.getMonth(), selected.getDate(), selectedHour, selectedMinute)
console.log('finalDate', finalDate)
if (onChange) onChange(finalDate)
onClose()
}
}
const handleChange = (d: Date) => {
console.log('handleChange', d)
setSelected(d)
// if (onChange) onChange(d)
}
const onHeaderClick = (date: Date) => {
console.log('onHeaderClick', date)
setSelected(date)
setType('month')
}
const getConfirmText = () => {
if (type === 'time' || type === 'month') return '完成'
return '下一步'
}
const handleDateTimePickerChange = (year: number, month: number) => {
console.log('year', year)
console.log('month', month)
setSelected(new Date(year, month - 1, 1))
}
const dialogClose = () => {
if (type === 'month') {
setType('year')
} else if (type === 'time') {
setType('year')
} else {
onClose()
}
}
useEffect(() => {
setSelected(value || new Date())
if (visible) {
setType('year')
setSelectedHour(8)
setSelectedMinute(0)
}
}, [value, visible])
return (
<CommonPopup
visible={visible}
onClose={dialogClose}
showHeader={!!title}
title={title}
hideFooter={false}
cancelText='取消'
confirmText={getConfirmText()}
onConfirm={handleConfirm}
position='bottom'
round
zIndex={1000}
>
{
type === 'year' && <CalendarCard
value={selected}
minDate={minDate}
maxDate={maxDate}
onChange={handleChange}
onHeaderClick={onHeaderClick}
/>
}
{
type === 'month' && <DateTimePicker
onChange={handleDateTimePickerChange}
defaultYear={selected.getFullYear()}
defaultMonth={selected.getMonth() + 1}
/>
}
{
type === 'time' && <HourMinutePicker
onChange={(hour, minute) => {
setSelectedHour(hour)
setSelectedMinute(minute)
}}
defaultHour={selectedHour}
defaultMinute={selectedMinute}
/>
}
</CommonPopup>
)
}
export default DialogCalendarCard

105
src/components/CalendarCard/index.module.scss Normal file
View File

@@ -0,0 +1,105 @@
.calendar-card {
background: #fff;
border-radius: 16px;
padding: 12px 12px 8px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 16px 11px 16px;
height: 24px;
}
.header-left {
display: flex;
align-items: center;
gap: 6px;
}
.header-text {
font-size: 17px;
font-weight: 600;
color: #000;
}
.header-actions {
display: flex;
gap: 30px;
}
.month-arrow{
width: 8px
}
.arrow {
width: 10px;
position: relative;
}
.arrow.left {
left: 9px;
transform: rotate(-180deg);
}
.week-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: 0 0 4px 0;
}
.week-item {
text-align: center;
color: rgba(60, 60, 67, 0.30);
font-size: 13px;
}
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px 0;
padding: 4px 0 16px;
}
.cell {
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.cell.empty {
opacity: 0;
}
.cell.disabled {
color: rgba(0,0,0,0.2);
}
.cell-text.selected {
width: 44px;
height: 44px;
border-radius: 22px;
background: rgba(0,0,0,0.9);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.footer {
display: flex;
gap: 12px;
}
.btn {
flex: 1;
height: 44px;
border-radius: 22px;
background: rgba(0,0,0,0.06);
display: flex;
align-items: center;
justify-content: center;
}
.btn.primary {
background: #000;
color: #fff;
}
.hm-placeholder {
height: 240px;
display: flex;
align-items: center;
justify-content: center;
}

2
src/components/CalendarCard/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default } from './CalendarCard'
export { default as DialogCalendarCard } from './DialogCalendarCard'

4
src/components/CityFilter/index.tsx
View File

@@ -9,7 +9,7 @@ import {DistanceFilterProps} from '../../../types/list/types'
const MenuComponent = (props: DistanceFilterProps) => {
const { value, onChange, wrapperClassName, itemClassName, options, name } =
const { value, onChange, wrapperClassName, itemClassName, options, name, onOpen, onClose } =
props;
const [isChange, setIsChange] = useState(false);
const [iOpen, setIsOpen] = useState(false);
@@ -23,10 +23,12 @@ const MenuComponent = (props: DistanceFilterProps) => {
const handleOpen = () => {
setIsOpen(true);
onOpen && typeof onOpen === "function" && onOpen();
};
const handleClose = () => {
setIsOpen(false);
onClose && typeof onClose === "function" && onClose();
};
return (

62
src/components/CommonDialog/CommonDialog.tsx Normal file
View File

@@ -0,0 +1,62 @@
import React from 'react'
import { Dialog } from '@nutui/nutui-react-taro'
import { View, Text } from '@tarojs/components'
import styles from './index.module.scss'
export interface CommonDialogProps {
visible: boolean
title?: string
content?: React.ReactNode
cancelText?: string
confirmText?: string
onCancel?: () => void
onConfirm?: () => void
showCancel?: boolean
showConfirm?: boolean
children?: React.ReactNode
contentTitle?: string
contentDesc?: string
}
const CommonDialog: React.FC<CommonDialogProps> = ({
visible,
title,
content,
cancelText = '取消',
confirmText = '确认',
onCancel,
onConfirm,
children,
contentTitle,
contentDesc
}) => {
const getContent = () => {
if (content) {
return content
}
if (children) {
return children
}
return (
<View className={styles['confirm-content']}>
<Text className={styles['confirm-content-title']}>{contentTitle}</Text>
<Text className={styles['confirm-content-desc']}>{contentDesc}</Text>
</View>
)
}
return (
<Dialog
visible={visible}
title={title}
content={getContent()}
onCancel={onCancel}
onConfirm={onConfirm}
cancelText={cancelText}
confirmText={confirmText}
className={styles['custom-dialog']}
/>
)
}
export default CommonDialog

86
src/components/CommonDialog/index.module.scss Normal file
View File

@@ -0,0 +1,86 @@
@use '~@/scss/themeColor.scss' as theme;
.custom-dialog {
:global(.nut-dialog) {
border-radius: 12px !important;
padding: 0 !important;
max-width: 320px !important;
width: 100% !important;
text-align: center !important;
}
:global(.nut-dialog-content) {
margin:0 !important;
}
:global(.nut-dialog-header) {
margin-bottom: 8px !important;
}
:global(.nut-dialog-title) {
font-size: 18px !important;
font-weight: 600 !important;
color: #000000 !important;
}
:global(.nut-dialog-content) {
min-width: 280px !important;
}
:global(.nut-dialog-footer) {
display: flex !important;
padding: 0 !important;
height: 47.5px;
justify-content: center;
align-items: center;
border-top: 1px solid theme.$primary-border-light-color;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
overflow: hidden;
}
:global(.nut-dialog-footer .nut-button) {
flex: 1 !important;
font-size: 15px !important;
border-radius: 0;
padding: 0;
margin: 0;
border: none;
background: #fff;
border-right: 1px solid theme.$primary-border-light-color !important;
height: 100%;
&:last-child {
border-right: none !important;
}
}
:global(.nut-dialog-footer .nut-button-default) {
color: rgba(22, 24, 35, 0.75) !important;
}
:global(.nut-dialog-footer .nut-button-primary) {
color: #161823 !important;
}
:global(.nut-dialog-footer .nut-button:hover) {
opacity: 0.8 !important;
}
.confirm-content{
padding: 24px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
.confirm-content-title{
font-size: 17px;
font-weight: 500;
line-height: 24px;
color: #161823;
}
.confirm-content-desc{
font-size: 14px;
color: rgba(22, 24, 35, 0.75)
}
}
}

2
src/components/CommonDialog/index.ts Normal file
View File

@@ -0,0 +1,2 @@
import CommonDialog from './CommonDialog.tsx'
export default CommonDialog

69
src/components/CommonPopup/CommonPopup.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React, { useRef, useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Popup, Button } from '@nutui/nutui-react-taro'
import styles from './index.module.scss'
@@ -18,6 +18,8 @@ export interface CommonPopupProps {
zIndex?: number
children?: React.ReactNode
className?: string
style?: React.CSSProperties
enableDragToClose?: boolean
}
const CommonPopup: React.FC<CommonPopupProps> = ({
@@ -34,8 +36,15 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
position = 'bottom',
round = true,
zIndex,
children
style,
children,
enableDragToClose = true
}) => {
const [dragOffset, setDragOffset] = useState(0)
const [isDragging, setIsDragging] = useState(false)
const touchStartY = useRef(0)
const popupRef = useRef<HTMLDivElement>(null)
const handleCancel = () => {
if (onCancel) {
onCancel()
@@ -44,6 +53,39 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
}
}
const handleTouchStart = (e: any) => {
if (!enableDragToClose) return
touchStartY.current = e.touches[0].clientY
setIsDragging(true)
}
const handleTouchMove = (e: any) => {
if (!enableDragToClose || !isDragging) return
const currentY = e.touches[0].clientY
const deltaY = currentY - touchStartY.current
// 只允许向下拖动，限制最大拖动距离
if (deltaY > 0) {
setDragOffset(Math.min(deltaY, 200))
}
}
const handleTouchEnd = () => {
if (!enableDragToClose || !isDragging) return
setIsDragging(false)
// 如果拖动距离超过阈值，关闭弹窗
if (dragOffset > 100) {
onClose()
}
// 重置拖动偏移
setDragOffset(0)
}
return (
<Popup
visible={visible}
@@ -52,8 +94,27 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
closeable={false}
onClose={onClose}
className={`${styles['common-popup']} ${className ? className : ''}`}
style={zIndex ? { zIndex } : undefined}
style={{
zIndex: zIndex ? zIndex : undefined,
...style
}}
>
{enableDragToClose && (
<View className={styles['common-popup__drag-handle-container']}>
<View
className={styles['common-popup__drag-handle']}
style={{
transform: `translateX(-50%) translateY(${dragOffset * 0.3}px)`,
opacity: isDragging ? 0.8 : 1,
transition: isDragging ? 'none' : 'all 0.3s ease-out'
}}
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
/>
</View>
)}
{showHeader && (
<View className={styles['common-popup__header']}>
{typeof title === 'string' ? <Text className={styles['common-popup__title']}>{title}</Text> : title}
@@ -78,4 +139,4 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
)
}
export default CommonPopup
export default CommonPopup

19
src/components/CommonPopup/index.module.scss
View File

@@ -1,6 +1,25 @@
@use '~@/scss/themeColor.scss' as theme;
.common-popup {
.common-popup__drag-handle-container {
position: position;
}
.common-popup__drag-handle {
position: absolute;
top: 6px;
left: 50%;
width: 32px;
height: 4px;
background-color: rgba(22, 24, 35, 0.20);
border-radius: 2px;
z-index: 10;
cursor: pointer;
transition: background-color 0.2s ease;
&:active {
background-color: #9ca3af;
}
}
padding: 0;
box-sizing: border-box;
max-height: calc(100vh - 10px);

49
src/components/CustomNavbar/index.module.scss
View File

@@ -1,47 +1,6 @@
.customerNavbar {
// background-color: red;
.container {
padding-left: 17px;
display: flex;
align-items: center;
gap: 8px;
}
.line {
width: 1px;
height: 25px;
background-color: #0000000F;
}
.logo {
width: 60px;
height: 34px;
}
.change {
width: 12px;
height: 12px;
}
.cityWrapper {
line-height: 20px;
}
.city {
font-weight: 600;
font-size: 13px;
line-height: 20px;
}
.infoWrapper {
line-height: 12px;
}
.info {
font-weight: 400;
font-size: 10px;
line-height: 12px;
color: #3C3C4399;
}
position: sticky;
top: 0;
z-index: 999;
background-color: #ffffff;
}

70
src/components/CustomNavbar/index.tsx
View File

@@ -1,73 +1,23 @@
import { View, Text, Image } from "@tarojs/components";
import img from "@/config/images";
import { getCurrentLocation } from "@/utils/locationUtils";
import { getNavbarHeight } from "@/utils/getNavbarHeight";
import { View } from "@tarojs/components";
import styles from "./index.module.scss";
import { useEffect } from "react";
import { useGlobalState } from "@/store/global";
import { useListState } from "@/store/listStore";
const ListHeader = () => {
const { statusBarHeight, navbarHeight, totalHeight } = getNavbarHeight();
const {
updateState,
location,
getLocationText,
getLocationLoading,
getNavbarHeightInfo,
} = useGlobalState();
const { gamesNum } = useListState();
interface IProps {
children: any;
}
// 获取位置信息
const getCurrentLocal = () => {
updateState({
getLocationLoading: true,
});
getCurrentLocation().then((res) => {
updateState({
getLocationLoading: false,
location: res || {},
});
});
};
useEffect(() => {
getNavbarHeightInfo();
getCurrentLocal();
}, []);
const currentAddress = getLocationLoading
? getLocationText
: location?.address;
const CustomNavbar = (props: IProps) => {
const { children } = props;
const { statusNavbarHeightInfo } = useGlobalState();
const { totalHeight } = statusNavbarHeightInfo;
return (
<View
className={styles.customerNavbar}
style={{ height: `${totalHeight}px` }}
>
<View
className={styles.container}
style={{
height: `${navbarHeight}px`,
paddingTop: `${statusBarHeight}px`,
}}
>
{/* logo */}
<Image src={img.ICON_LOGO} className={styles.logo} />
<View className={styles.line} />
<View className={styles.content}>
<View className={styles.cityWrapper}>
{/* 位置 */}
<Text className={styles.city}>{currentAddress}</Text>
{!getLocationLoading && (
<Image src={img.ICON_CHANGE} className={styles.change} />
)}
</View>
<View className={styles.infoWrapper}>
<Text className={styles.info}>附近${gamesNum}场球局</Text>
</View>
</View>
</View>
{children}
</View>
);
};
export default ListHeader;
export default CustomNavbar;

50
src/components/CustomerNavbarBack/index.module.scss Normal file
View File

@@ -0,0 +1,50 @@
.customerNavbarBack {
position: sticky;
top: 0;
z-index: 999;
background-color: #ffffff;
.container {
padding-left: 17px;
display: flex;
align-items: center;
gap: 8px;
}
.line {
width: 1px;
height: 25px;
background-color: #0000000F;
}
.back {
width: 32px;
height: 32px;
}
.change {
width: 12px;
height: 12px;
}
.cityWrapper {
line-height: 20px;
}
.city {
font-weight: 600;
font-size: 13px;
line-height: 20px;
}
.infoWrapper {
line-height: 12px;
}
.info {
font-weight: 400;
font-size: 10px;
line-height: 12px;
color: #3C3C4399;
}
}

32
src/components/CustomerNavbarBack/index.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { View, Image } from "@tarojs/components";
import img from "@/config/images";
import styles from "./index.module.scss";
import { useGlobalState } from "@/store/global";
import Taro from "@tarojs/taro";
const ListHeader = () => {
const { statusNavbarHeightInfo } = useGlobalState();
const { statusBarHeight, navbarHeight, totalHeight } = statusNavbarHeightInfo;
const handleBack = () => {
Taro.navigateBack();
}
return (
<View
className={styles.customerNavbarBack}
style={{ height: `${totalHeight}px` }}
>
<View
className={styles.container}
style={{
height: `${navbarHeight}px`,
paddingTop: `${statusBarHeight}px`,
}}
>
{/* back */}
<Image src={img.ICON_LIST_SEARCH_BACK} className={styles.back} onClick={handleBack} />
</View>
</View>
);
};
export default ListHeader;

153
src/components/DateTimePicker/DateTimePicker.tsx
View File

@@ -1,12 +1,11 @@
import React, { useState, useEffect } from 'react'
import { View, Text } from '@tarojs/components'
import { Picker, Popup } from '@nutui/nutui-react-taro'
import { View, Text, PickerView, PickerViewColumn } from '@tarojs/components'
import styles from './index.module.scss'
export interface DateTimePickerProps {
visible: boolean
onClose: () => void
onConfirm: (year: number, month: number) => void
onChange: (year: number, month: number) => void
defaultYear?: number
defaultMonth?: number
minYear?: number
@@ -14,101 +13,91 @@ export interface DateTimePickerProps {
}
const DateTimePicker: React.FC<DateTimePickerProps> = ({
visible,
onClose,
onConfirm,
onChange,
defaultYear = new Date().getFullYear(),
defaultMonth = new Date().getMonth() + 1,
minYear = 2020,
maxYear = 2030
}) => {
console.log('defaultYear', defaultYear)
console.log('defaultMonth', defaultMonth)
const [selectedYear, setSelectedYear] = useState(defaultYear)
const [selectedMonth, setSelectedMonth] = useState(defaultMonth)
// 计算当前选项在数组中的索引
const getYearIndex = (year: number) => year - minYear
const getMonthIndex = (month: number) => month - 1
// 生成年份选项
const yearOptions = Array.from({ length: maxYear - minYear + 1 }, (_, index) => ({
text: `${minYear + index}年`,
value: minYear + index
}))
// 生成多列选择器的选项数据
const pickerOptions = [
// 年份列
Array.from({ length: maxYear - minYear + 1 }, (_, index) => ({
text: `${minYear + index}年`,
value: minYear + index
})),
// 月份列
Array.from({ length: 12 }, (_, index) => ({
text: `${index + 1}月`,
value: index + 1
}))
]
// 生成月份选项
const monthOptions = Array.from({ length: 12 }, (_, index) => ({
text: `${index + 1}月`,
value: index + 1
}))
useEffect(() => {
if (visible) {
setSelectedYear(defaultYear)
setSelectedMonth(defaultMonth)
setSelectedYear(defaultYear)
setSelectedMonth(defaultMonth)
}, [ defaultYear, defaultMonth])
const handlePickerChange = (event: any) => {
const values = event.detail.value
if (values && values.length >= 2) {
// 根据索引获取实际值
const yearIndex = values[0]
const monthIndex = values[1]
const year = minYear + yearIndex
const month = monthIndex + 1
setSelectedYear(year)
setSelectedMonth(month)
onChange(year, month)
}
}, [visible, defaultYear, defaultMonth])
const handleYearChange = (value: any) => {
setSelectedYear(value[0])
}
const handleMonthChange = (value: any) => {
setSelectedMonth(value[0])
}
const handleConfirm = () => {
onConfirm(selectedYear, selectedMonth)
onClose()
}
const handleCancel = () => {
onClose()
}
return (
<Popup
visible={visible}
position="bottom"
round
onClose={onClose}
className={styles['date-time-picker-popup']}
>
{/* 拖拽手柄 */}
<View className={styles['popup-handle']} />
{/* 时间选择器 */}
<View className={styles['picker-container']}>
<View className={styles['picker-columns']}>
{/* 年份选择 */}
<View className={styles['picker-column']}>
<Text className={styles['picker-label']}>年</Text>
<Picker
value={[selectedYear]}
options={yearOptions}
onChange={handleYearChange}
className={styles['year-picker']}
/>
</View>
{/* 月份选择 */}
<View className={styles['picker-column']}>
<Text className={styles['picker-label']}>月</Text>
<Picker
value={[selectedMonth]}
options={monthOptions}
onChange={handleMonthChange}
className={styles['month-picker']}
/>
<View className={styles['date-time-picker-overlay']} >
<View className={styles['date-time-picker-popup']} onClick={(e) => e.stopPropagation()}>
{/* 拖拽手柄 */}
<View className={styles['drag-handle']} />
{/* 时间选择器 */}
<View className={styles['picker-container']}>
{/* 多列选择器 */}
<View className={styles['picker-wrapper']}>
<PickerView
value={[getYearIndex(selectedYear), getMonthIndex(selectedMonth)]}
onChange={handlePickerChange}
className={styles['multi-column-picker']}
>
<PickerViewColumn className={styles['picker-column']}>
{pickerOptions[0].map((option, index) => (
<View key={option.value} className={styles['picker-item']}>
<Text className={styles['picker-item-text']}>{option.text}</Text>
</View>
))}
</PickerViewColumn>
<PickerViewColumn className={styles['picker-column']}>
{pickerOptions[1].map((option, index) => (
<View key={option.value} className={styles['picker-item']}>
<Text className={styles['picker-item-text']}>{option.text}</Text>
</View>
))}
</PickerViewColumn>
</PickerView>
</View>
</View>
</View>
{/* 操作按钮 */}
<View className={styles['action-buttons']}>
<View className={styles['cancel-btn']} onClick={handleCancel}>
<Text className={styles['cancel-text']}>取消</Text>
</View>
<View className={styles['confirm-btn']} onClick={handleConfirm}>
<Text className={styles['confirm-text']}>完成</Text>
</View>
</View>
</Popup>
</View>
)
}

67
src/components/DateTimePicker/README.md
View File

@@ -1,67 +0,0 @@
# DateTimePicker 年月选择器
一个基于 NutUI 的年月切换弹窗组件，支持自定义年份范围和默认值。
## 功能特性
- 🎯 年月分别选择，操作简单直观
- 🎨 遵循设计稿样式，美观易用
- 📱 支持移动端手势操作
- ⚙️ 可自定义年份范围
- <20><> 基于 NutUI 组件库，稳定可靠
## 使用方法
```tsx
import { DateTimePicker } from '@/components'
const MyComponent = () => {
const [visible, setVisible] = useState(false)
const handleConfirm = (year: number, month: number) => {
console.log('选择的年月:', year, month)
setVisible(false)
}
return (
<DateTimePicker
visible={visible}
onClose={() => setVisible(false)}
onConfirm={handleConfirm}
defaultYear={2025}
defaultMonth={11}
minYear={2020}
maxYear={2030}
/>
)
}
```
## API 参数
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| visible | boolean | - | 是否显示弹窗 |
| onClose | () => void | - | 关闭弹窗的回调 |
| onConfirm | (year: number, month: number) => void | - | 确认选择的回调 |
| defaultYear | number | 当前年份 | 默认选中的年份 |
| defaultMonth | number | 当前月份 | 默认选中的月份 |
| minYear | number | 2020 | 可选择的最小年份 |
| maxYear | number | 2030 | 可选择的最大年份 |
## 样式定制
组件使用 CSS Modules，可以通过修改 `index.module.scss` 文件来自定义样式。
主要样式类：
- `.date-time-picker-popup` - 弹窗容器
- `.picker-columns` - 选择器列容器
- `.picker-column` - 单列选择器
- `.action-buttons` - 操作按钮区域
## 注意事项
1. 组件基于 NutUI 的 Picker 和 Popup 组件
2. 年份范围建议不要设置过大，以免影响性能
3. 月份固定为 1-12 月
4. 组件会自动处理边界情况

45
src/components/DateTimePicker/example.tsx
View File

@@ -1,45 +0,0 @@
import React, { useState } from 'react'
import { View, Button } from '@tarojs/components'
import DateTimePicker from './DateTimePicker'
const DateTimePickerExample: React.FC = () => {
const [visible, setVisible] = useState(false)
const [selectedDate, setSelectedDate] = useState('')
const handleOpen = () => {
setVisible(true)
}
const handleClose = () => {
setVisible(false)
}
const handleConfirm = (year: number, month: number) => {
setSelectedDate(`${year}年${month}月`)
console.log('选择的日期:', year, month)
}
return (
<View style={{ padding: '20px' }}>
<Button onClick={handleOpen}>选择年月</Button>
{selectedDate && (
<View style={{ marginTop: '20px', fontSize: '16px' }}>
已选择: {selectedDate}
</View>
)}
<DateTimePicker
visible={visible}
onClose={handleClose}
onConfirm={handleConfirm}
defaultYear={2025}
defaultMonth={11}
minYear={2020}
maxYear={2030}
/>
</View>
)
}
export default DateTimePickerExample

147
src/components/DateTimePicker/index.module.scss
View File

@@ -1,102 +1,89 @@
/* 日期选择器弹出层样式 */
.date-time-picker-popup {
:global(.nut-popup) {
border-radius: 16px 16px 0 0;
background: #fff;
.common-popup-content {
padding: 0;
}
}
.popup-handle {
width: 40px;
width: 32px;
height: 4px;
background: #e5e5e5;
background: #e0e0e0;
border-radius: 2px;
margin: 12px auto 0;
margin: 12px auto;
}
.picker-container {
padding: 20px 0;
padding: 26px 16px 0 16px;
background: #fff;
}
.picker-columns {
.picker-header {
text-align: center;
margin-bottom: 20px;
}
.picker-title {
font-size: 18px;
font-weight: 500;
color: #333;
}
.picker-wrapper {
position: relative;
}
.multi-column-picker {
width: 100%;
height: 216px;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: none;
/* 自定义选择器样式 */
::-webkit-scrollbar {
width: 0;
background: transparent;
}
/* 选中项指示器 */
&::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 48px;
background: rgba(22, 24, 35, 0.05);
transform: translateY(-50%);
pointer-events: none;
z-index: 1;
border-radius: 4px;
}
}
.picker-item {
display: flex;
justify-content: center;
align-items: center;
gap: 60px;
justify-content: center;
font-size: 20px;
color: #161823;
transition: all 0.3s ease;
&.picker-item-active {
color: rgba(22, 24, 35, 0.05);
font-weight: 600;
transform: scale(1.05);
}
}
.picker-column {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
border: none;
outline: none;
}
.picker-label {
font-size: 14px;
color: #999;
font-weight: 400;
}
.year-picker,
.month-picker {
:global(.nut-picker) {
width: 80px;
}
:global(.nut-picker__content) {
height: 200px;
}
:global(.nut-picker-item) {
height: 40px;
line-height: 40px;
font-size: 16px;
color: #333;
}
:global(.nut-picker-item--selected) {
color: #000;
font-weight: 500;
}
:global(.nut-picker-item--disabled) {
color: #ccc;
}
}
.action-buttons {
display: flex;
padding: 0 20px 20px;
gap: 12px;
}
.cancel-btn,
.confirm-btn {
flex: 1;
height: 44px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cancel-btn {
background: #fff;
border: 1px solid #e5e5e5;
}
.cancel-text {
color: #666;
.picker-item-text {
font-size: 16px;
color: inherit;
text-align: center;
}
.confirm-btn {
background: #000;
border: 1px solid #000;
}
.confirm-text {
color: #fff;
font-size: 16px;
}

91
src/components/DistanceQuickFilter/index.scss Normal file
View File

@@ -0,0 +1,91 @@
.distanceQuickFilterWrap {
width: 100%;
.nut-menu-bar {
background-color: unset;
box-shadow: unset;
padding: 0 15px;
gap: 5px;
}
.nut-menu-title {
flex: unset;
box-sizing: border-box;
display: flex;
height: 28px;
padding: 4px 10px;
justify-content: center;
align-items: center;
gap: 2px;
border-radius: 999px;
border: 0.5px solid rgba(0, 0, 0, 0.06);
background: #ffffff;
font-size: 14px;
font-weight: 600;
line-height: 20px;
}
.nut-menu-title.active {
color: #000;
}
.nut-menu-container-wrap {
width: 100vw;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.nut-menu-container-item {
color: rgba(60, 60, 67, 0.60);
font-size: 14px;
font-weight: 600;
line-height: 20px;
}
.nut-menu-container-item.active {
flex-direction: row-reverse;
justify-content: space-between;
color: #000;
}
.positionWrap {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 16px;
}
.title {
font-size: 14px;
font-weight: 600;
}
.cityName {
font-size: 13px;
font-weight: 400;
color: #3c3c43;
}
.distanceWrap {
margin-bottom: 16px;
width: 100%;
}
.distanceBubbleItem {
display: flex;
width: 80px;
height: 28px;
padding: 4px 10px;
justify-content: center;
align-items: center;
gap: 2px;
border-radius: 999px;
border: 0.5px solid rgba(0, 0, 0, 0.06);
}
.itemIcon {
width: 20px;
height: 20px;
}
}

81
src/components/DistanceQuickFilter/index.tsx Normal file
View File

@@ -0,0 +1,81 @@
import React, { useRef, useState } from "react";
import { Menu, Button } from "@nutui/nutui-react-taro";
import { Image } from "@tarojs/components";
import img from "@/config/images";
import Bubble from "../Bubble";
import "./index.scss";
const Demo3 = (props) => {
const {
cityOptions,
quickOptions,
onChange,
cityName,
quickName,
cityValue,
quickValue,
} = props;
const itemRef = useRef(null);
const handleChange = (name: string, value: string) => {
// setIsChange(true);
onChange && onChange(name, value);
(itemRef.current as any)?.toggle(false);
};
return (
<Menu
className="distanceQuickFilterWrap"
>
<Menu.Item
title={cityValue}
ref={itemRef}
icon={<Image src={img.ICON_MENU_ITEM_SELECTED} />}
>
<div className="positionWrap">
<p className="title">当前位置</p>
<p className="cityName">上海市</p>
</div>
<div className="distanceWrap">
<Bubble
options={cityOptions}
value={cityValue}
onChange={handleChange}
layout="grid"
size="small"
columns={4}
itemClassName="distanceBubbleItem"
name={cityName}
/>
</div>
</Menu.Item>
<Menu.Item
options={quickOptions}
defaultValue={quickValue}
onChange={(value) => handleChange(quickName, value)}
icon={<Image className="itemIcon" src={img.ICON_MENU_ITEM_SELECTED} />}
/>
{/* <Menu.Item title="筛选" ref={itemRef}>
<div
style={{
width: '50%',
lineHeight: '28px',
padding: '0 30px',
}}
>
自定义内容
</div>
<Button
size="small"
onClick={() => {
;(itemRef.current as any)?.toggle(false)
}}
>
确认
</Button>
</Menu.Item> */}
</Menu>
);
};
export default Demo3;

6
src/components/FormSwitch/index.scss
View File

@@ -33,8 +33,8 @@
.info-popover {
position: absolute;
bottom: 22px;
left: -65px;
width: 130px;
left: -92px;
width: 184px;
padding:12px;
background: rgba(57, 59, 68, 0.90);
color: #fff;
@@ -51,7 +51,7 @@
content: '';
position: absolute;
bottom: -6px;
left: 68px; /* 对齐图标（宽12px），可按需微调 */
left: 94px; /* 对齐图标（宽12px），可按需微调 */
width: 0;
height: 0;
border-left: 6px solid transparent;

90
src/components/GuideBar/index.scss Normal file
View File

@@ -0,0 +1,90 @@
@use '~@/scss/images.scss' as img;
.guide-bar-container {
padding-top: calc(60px + 20px + env(safe-area-inset-bottom));
}
.guide-bar {
position: fixed;
bottom: 0;
width: 100%;
height: calc(60px + 20px + env(safe-area-inset-bottom));
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 12px env(safe-area-inset-bottom);
z-index: 999;
&-pages {
display: flex;
justify-content: space-between;
align-items: center;
display: inline-flex;
width: 240px;
height: 60px;
padding: 8px 6px;
box-sizing: border-box;
flex-shrink: 0;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(255, 255, 255, 0.40);
box-shadow: 0 4px 64px 0 rgba(0, 0, 0, 0.16);
backdrop-filter: blur(16px);
&-item {
display: flex;
width: 76px;
height: 48px;
// padding: 14px 0;
box-sizing: border-box;
justify-content: center;
align-items: center;
gap: 10px;
color: rgba(60, 60, 67, 0.60);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 125% */
}
&-item-active {
display: flex;
width: 76px;
height: 48px;
// padding: 14px 22px;
box-sizing: border-box;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 999px;
border: 0.5px solid rgba(0, 0, 0, 0.06);
background: #FFF;
box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 125% */
}
}
&-publish {
display: flex;
width: 60px;
height: 60px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 999px;
// border: 2px solid rgba(0, 0, 0, 0.06);
background: radial-gradient(75.92% 98.69% at 26.67% 8.33%, #BDFF4A 16.88%, #95F23E 54.19%, #32D838 100%);
box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
backdrop-filter: blur(16px);
&-icon {
width: 36px;
height: 36px;
}
}
}

71
src/components/GuideBar/index.tsx Normal file
View File

@@ -0,0 +1,71 @@
import React, { useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import img from '@/config/images'
import './index.scss'
import PublishMenu from '../PublishMenu'
export type currentPageType = 'games' | 'message' | 'personal'
const GuideBar = (props) => {
const { currentPage } = props
const guideItems = [
{
code: 'list',
text: '球局',
},
{
code: 'message',
text: '消息',
},
{
code: 'personal',
text: '我的',
},
]
const handlePublish = () => {
Taro.navigateTo({
url: '/pages/publishBall/index',
})
}
const handlePageChange = (code: string) => {
if (code === currentPage) {
return
}
Taro.navigateTo({
url: `/pages/${code}/index`,
}).then(() => {
Taro.pageScrollTo({
scrollTop: 0,
duration: 300,
})
})
}
return (
<View className='guide-bar-container'>
<View className='guide-bar'>
{/* guide area on the left */}
<View className='guide-bar-pages'>
{guideItems.map((item) => (
<View
className={`guide-bar-pages-item ${currentPage === item.code ? 'guide-bar-pages-item-active' : ''}`}
onClick={() => handlePageChange(item.code)}
>
<Text>{item.text}</Text>
</View>
))}
</View>
{/* publish button on the right */}
{/* <View className='guide-bar-publish' onClick={handlePublish}>
<Image className='guide-bar-publish-icon' src={img.ICON_GUIDE_BAR_PUBLISH} />
</View> */}
<PublishMenu />
</View>
</View>
)
}
export default GuideBar

95
src/components/HourMinutePicker/HourMinutePicker.tsx Normal file
View File

@@ -0,0 +1,95 @@
import React, { useState, useEffect } from 'react'
import { View, Text, PickerView, PickerViewColumn } from '@tarojs/components'
import styles from './index.module.scss'
export interface HourMinutePickerProps {
onChange: (hour: number, minute: number) => void
defaultHour?: number
defaultMinute?: number
minHour?: number
maxHour?: number
}
const HourMinutePicker: React.FC<HourMinutePickerProps> = ({
onChange,
defaultHour = new Date().getHours(),
defaultMinute = new Date().getMinutes(),
minHour = 0,
maxHour = 23
}) => {
console.log('defaultHour', defaultHour)
console.log('defaultMinute', defaultMinute)
const [selectedHour, setSelectedHour] = useState(defaultHour)
const [selectedMinute, setSelectedMinute] = useState(defaultMinute)
// 计算当前选项在数组中的索引
const getHourIndex = (hour: number) => hour - minHour
const getMinuteIndex = (minute: number) => Math.floor(minute / 5)
// 生成小时和分钟的选项数据
const pickerOptions = [
// 小时列
Array.from({ length: maxHour - minHour + 1 }, (_, index) => ({
text: `${minHour + index}时`,
value: minHour + index
})),
// 分钟列 (5分钟间隔)
Array.from({ length: 12 }, (_, index) => ({
text: `${index * 5 < 10 ? '0' + index * 5 : index * 5}分`,
value: index * 5
}))
]
useEffect(() => {
setSelectedHour(defaultHour)
setSelectedMinute(defaultMinute)
}, [defaultHour, defaultMinute])
const handlePickerChange = (event: any) => {
const values = event.detail.value
if (values && values.length >= 2) {
// 根据索引获取实际值
const hourIndex = values[0]
const minuteIndex = values[1]
const hour = minHour + hourIndex
const minute = minuteIndex * 5
setSelectedHour(hour)
setSelectedMinute(minute)
onChange(hour, minute)
}
}
return (
<View className={styles['hour-minute-picker-popup']}>
{/* 拖拽手柄 */}
{/* 时间选择器 */}
<View className={styles['picker-container']}>
{/* 多列选择器 */}
<View className={styles['picker-wrapper']}>
<PickerView
value={[getHourIndex(selectedHour), getMinuteIndex(selectedMinute)]}
onChange={handlePickerChange}
className={styles['multi-column-picker']}
>
<PickerViewColumn className={styles['picker-column']}>
{pickerOptions[0].map((option, index) => (
<View key={option.value} className={styles['picker-item']}>
<Text className={styles['picker-item-text']}>{option.text}</Text>
</View>
))}
</PickerViewColumn>
<PickerViewColumn className={styles['picker-column']}>
{pickerOptions[1].map((option, index) => (
<View key={option.value} className={styles['picker-item']}>
<Text className={styles['picker-item-text']}>{option.text}</Text>
</View>
))}
</PickerViewColumn>
</PickerView>
</View>
</View>
</View>
)
}
export default HourMinutePicker

44
src/components/HourMinutePicker/index.module.scss Normal file
View File

@@ -0,0 +1,44 @@
.hour-minute-picker-popup {
background-color: #fff;
border-radius: 16px;
width: 100%;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 26px 16px 0 16px;
box-sizing: border-box;
}
.picker-container {
display: flex;
flex-direction: column;
align-items: center;
}
.picker-wrapper {
width: 100%;
max-width: 400px;
}
.multi-column-picker {
height: 216px;
width: 100%;
}
.picker-column {
flex: 1;
text-align: center;
}
.picker-item {
height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
}
.picker-item-text {
font-size: 16px;
color: #333;
font-weight: 400;
}

2
src/components/HourMinutePicker/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default } from './HourMinutePicker'
export type { HourMinutePickerProps } from './HourMinutePicker'

47
src/components/ListCard/index.scss
View File

@@ -1,4 +1,10 @@
.list-item {
.listCard {
background: linear-gradient(90deg, rgba(183, 248, 113, 0.5) 0%, rgba(183, 248, 113, 0.1) 100%);
border-radius: 20px;
border-width: 0.5px;
}
.listItem {
display: flex;
padding: 12px 15px;
background: #ffffff;
@@ -247,4 +253,43 @@
width: 100%;
height: 100%;
object-fit: cover;
}
// 底部
.smoothPlayingGame {
padding: 5px 12px;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
.smoothWrapper,
.localAreaWrapper {
line-height: 18px;
display: flex;
align-items: center;
gap: 5px;
}
.smoothTitle {
font-size: 14px;
}
.line {
height: 8px;
width: 1px;
background: #00000040;
border-radius: 99px;
}
.iconListPlayingGame,
.localArea {
width: 14px;
height: 14px;
}
.localArea {
border: 0.5px solid #FFFFFFA6;
border-radius: 50%;
}
}

172
src/components/ListCard/index.tsx
View File

@@ -1,10 +1,11 @@
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import img from "../../config/images";
import { ListCardProps } from "../../../types/list/types";
import "./index.scss";
// import SkeletonComponent from "../../components/Skeleton";
const ListCard: React.FC<ListCardProps> = ({
id,
title,
dateTime,
location,
@@ -13,39 +14,37 @@ const ListCard: React.FC<ListCardProps> = ({
maxCount,
skillLevel,
matchType,
images,
images = [],
shinei,
}) => {
const renderItemImage = (src: string) => {
return <Image src={src} className="image" mode="aspectFill" />;
};
const handleViewDetail = () => {
console.log('id', id)
Taro.navigateTo({
url: `/pages/detail/index?id=${id || 1}&from=list&autoShare=0`,
});
};
// 根据图片数量决定展示样式
const renderImages = () => {
if (images.length === 0) return null;
if (images?.length === 0) return null;
if (images.length === 1) {
if (images?.length === 1) {
return (
<View className="single-image">
<View className="image-container">
{/* <Image src={images[0]} className="image" mode="aspectFill" /> */}
{renderItemImage(images[0])}
</View>
<View className="image-container">{renderItemImage(images[0])}</View>
</View>
);
}
if (images.length === 2) {
if (images?.length === 2) {
return (
<View className="double-image">
<View className="image-container">
{/* <Image src={images[0]} className="image" mode="aspectFill" /> */}
{renderItemImage(images[0])}
</View>
<View className="image-container">
{/* <Image src={images[1]} className="image" mode="aspectFill" /> */}
{renderItemImage(images[1])}
</View>
<View className="image-container">{renderItemImage(images[0])}</View>
<View className="image-container">{renderItemImage(images[1])}</View>
</View>
);
}
@@ -53,79 +52,94 @@ const ListCard: React.FC<ListCardProps> = ({
// 3张或更多图片
return (
<View className="triple-image">
<View className="image-container">{renderItemImage(images[0])}</View>
<View className="image-container">{renderItemImage(images[1])}</View>
<View className="image-container">{renderItemImage(images[2])}</View>
<View className="image-container">{renderItemImage(images?.[0])}</View>
<View className="image-container">{renderItemImage(images?.[1])}</View>
<View className="image-container">{renderItemImage(images?.[2])}</View>
</View>
);
};
return (
<View className="list-item">
{/* 左侧内容区域 */}
<View className="content">
{/* 标题 */}
<View className="titleWrapper">
<Text className="title">{title}</Text>
<Image
src={img.ICON_LIST_RIGHT_ARROW}
className="title-right-arrow"
mode="aspectFit"
/>
</View>
{/* 时间信息 */}
<View className="date-time">
<Text>{dateTime}</Text>
</View>
{/* 地点,室内外,距离 */}
<View className="location">
<Text className="location-text location-position">{location}</Text>
<Text className="location-text location-time-distance">
{shinei && `・${shinei}`}
{distance && `・${distance}`}
</Text>
</View>
{/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
<View className="bottom-info">
<View className="left-section">
<View className="avatar-group">
{Array.from({ length: Math.min(registeredCount, 3) }).map(
(_, index) => (
<View key={index} className="avatar">
<Image
className="avatar-image"
src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
mode="aspectFill"
/>
</View>
)
)}
</View>
<View className="listCard">
<View className="listItem" onClick={handleViewDetail}>
{/* 左侧内容区域 */}
<View className="content">
{/* 标题 */}
<View className="titleWrapper">
<Text className="title">{title}</Text>
<Image
src={img.ICON_LIST_RIGHT_ARROW}
className="title-right-arrow"
mode="aspectFit"
/>
</View>
<View className="tags">
<View className="tag">
<Text className="tag-text">
报名人数 {registeredCount}/
<Text className="tag-text-max">{maxCount}</Text>
</Text>
{/* 时间信息 */}
<View className="date-time">
<Text>{dateTime}</Text>
</View>
{/* 地点,室内外,距离 */}
<View className="location">
<Text className="location-text location-position">{location}</Text>
<Text className="location-text location-time-distance">
{shinei && `・${shinei}`}
{distance && `・${distance}`}
</Text>
</View>
{/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
<View className="bottom-info">
<View className="left-section">
<View className="avatar-group">
{Array.from({ length: Math.min(registeredCount, 3) }).map(
(_, index) => (
<View key={index} className="avatar">
<Image
className="avatar-image"
src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
mode="aspectFill"
/>
</View>
)
)}
</View>
</View>
<View className="tag">
<Text className="tag-text">{skillLevel}</Text>
</View>
<View className="tag">
<Text className="tag-text">{matchType}</Text>
<View className="tags">
<View className="tag">
<Text className="tag-text">
报名人数 {registeredCount}/
<Text className="tag-text-max">{maxCount}</Text>
</Text>
</View>
<View className="tag">
<Text className="tag-text">{skillLevel}</Text>
</View>
<View className="tag">
<Text className="tag-text">{matchType}</Text>
</View>
</View>
</View>
</View>
{/* 右侧图片区域 */}
<View className="image-section">{renderImages()}</View>
</View>
{/* 畅打球局 */}
<View className="smoothPlayingGame">
<View className="smoothWrapper">
<Image src={img.ICON_LIST_PLAYING_GAME} className="iconListPlayingGame" />
<Text className="smoothTitle">畅打球局</Text>
</View>
<View className="line" />
<View>场馆方:</View>
<View className="localAreaWrapper">
<Image className="localArea" src="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center" />
<Text className="localAreaText">仁恒河滨花园网球场</Text>
</View>
</View>
{/* 右侧图片区域 */}
<View className="image-section">{renderImages()}</View>
</View>
);
};

1
src/components/ListCardSkeleton/index.tsx
View File

@@ -13,7 +13,6 @@ const ListCard = () => {
</View>
{/* 时间信息 */}
<View className="date-time">
<Skeleton visible={false} style={{ width: "88px", }} />
</View>

44
src/components/ListLoadError/index.module.scss Normal file
View File

@@ -0,0 +1,44 @@
.listLoadError {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
.listLoadErrorImg {
width: 154px;
height: 154px;
}
.listLoadErrorText {
margin-top: 35px;
margin-bottom: 12px;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 24px;
letter-spacing: 0px;
}
.listLoadErrorBtn {
display: flex;
align-items: center;
justify-content: center;
width: 76px;
background: #00000008;
border: 0.5px solid #0000001F;
border-radius: 12px;
padding: 12px 0;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 24px;
letter-spacing: 0px;
}
.reloadIcon {
width: 16px;
height: 16px;
}
}

24
src/components/ListLoadError/index.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { Image, View, Text, Button } from "@tarojs/components";
import styles from "./index.module.scss";
import img from "@/config/images";
const ListLoadError = ({ reload }: { reload: () => void }) => {
const handleReload = () => {
reload && typeof reload === "function" && reload();
};
return (
<View className={styles.listLoadError}>
<Image
className={styles.listLoadErrorImg}
src={img.ICON_LIST_LOAD_ERROR}
/>
<Text className={styles.listLoadErrorText}>加载失败</Text>
<Button className={styles.listLoadErrorBtn} onClick={handleReload}>
<Image src={img?.ICON_LIST_RELOAD} className={styles.reloadIcon} />
重试
</Button>
</View>
);
};
export default ListLoadError;

215
src/components/MapDisplay/README.md
View File

@@ -1,215 +0,0 @@
# 腾讯地图SDK使用说明
## 概述
本项目已集成腾讯地图SDK (`qqmap-wx-jssdk`)，可以在小程序中使用腾讯地图的各种功能，包括地点搜索、地理编码等。现在已添加真实的腾讯地图组件，支持显示当前位置和交互功能。
## 安装依赖
项目已安装 `qqmap-wx-jssdk` 依赖：
```bash
npm install qqmap-wx-jssdk
# 或
yarn add qqmap-wx-jssdk
```
## 基本使用
### 1. 引入SDK
```typescript
import QQMapWX from "qqmap-wx-jssdk";
```
### 2. 初始化SDK
```typescript
const qqmapsdk = new QQMapWX({
key: 'YOUR_API_KEY' // 替换为你的腾讯地图API密钥
});
```
### 3. 使用search方法搜索地点
```typescript
// 搜索地点
qqmapsdk.search({
keyword: '关键词', // 搜索关键词
location: '39.908802,116.397502', // 搜索中心点（可选）
page_size: 20, // 每页结果数量（可选）
page_index: 1, // 页码（可选）
success: (res) => {
console.log('搜索成功:', res.data);
// 处理搜索结果
},
fail: (err) => {
console.error('搜索失败:', err);
}
});
```
## 在组件中使用
### MapDisplay组件
`MapDisplay` 组件已经封装了腾讯地图SDK的使用，包括：
- **自动初始化SDK**
- **真实地图显示**: 使用Taro的Map组件显示腾讯地图
- **当前位置显示**: 自动获取并显示用户当前位置
- **地点搜索功能**: 支持关键词搜索地点
- **搜索结果展示**: 在地图上标记搜索结果
- **交互功能**: 支持地图缩放、拖动、标记点击等
- **错误处理**: 完善的错误处理和用户提示
### 主要功能特性
#### 1. 地图显示
- 使用真实的腾讯地图组件
- 默认显示当前位置
- 支持地图缩放、拖动、旋转
- 响应式设计，适配不同屏幕尺寸
#### 2. 位置服务
- 自动获取用户当前位置
- 支持位置刷新
- 逆地理编码获取地址信息
- 位置信息悬浮显示
#### 3. 搜索功能
- 实时搜索地点
- 防抖优化（500ms）
- 搜索结果在地图上标记
- 点击结果可移动地图中心
#### 4. 地图标记
- 当前位置标记（蓝色）
- 搜索结果标记
- 标记点击交互
- 动态添加/移除标记
### 使用示例
```typescript
import { mapService } from './mapService';
// 搜索地点
const results = await mapService.search({
keyword: '体育馆',
location: '39.908802,116.397502'
});
console.log('搜索结果:', results);
```
## API密钥配置
在 `mapService.ts` 中配置你的腾讯地图API密钥：
```typescript
this.qqmapsdk = new QQMapWX({
key: 'YOUR_API_KEY' // 替换为你的实际API密钥
});
```
## 组件属性
### Map组件属性
- `longitude`: 地图中心经度
- `latitude`: 地图中心纬度
- `scale`: 地图缩放级别（1-20）
- `markers`: 地图标记数组
- `show-location`: 是否显示用户位置
- `enable-zoom`: 是否支持缩放
- `enable-scroll`: 是否支持拖动
- `enable-rotate`: 是否支持旋转
### 标记属性
```typescript
interface Marker {
id: string; // 标记唯一标识
latitude: number; // 纬度
longitude: number; // 经度
title: string; // 标记标题
iconPath?: string; // 图标路径
width: number; // 图标宽度
height: number; // 图标高度
}
```
## 主要功能
### 1. 地点搜索
- 支持关键词搜索
- 支持按位置范围搜索
- 分页显示结果
- 搜索结果地图标记
### 2. 位置服务
- 获取当前位置
- 地理编码
- 逆地理编码
- 位置刷新
### 3. 地图交互
- 地图缩放
- 地图拖动
- 地图旋转
- 标记点击
- 地图点击
### 4. 错误处理
- SDK初始化失败处理
- 搜索失败处理
- 网络异常处理
- 位置获取失败处理
## 注意事项
1. **API密钥**: 确保使用有效的腾讯地图API密钥
2. **网络权限**: 小程序需要网络访问权限
3. **位置权限**: 需要申请位置权限 (`scope.userLocation`)
4. **错误处理**: 建议添加适当的错误处理和用户提示
5. **地图组件**: 使用Taro的Map组件，确保兼容性
## 权限配置
在 `app.config.ts` 中添加位置权限：
```typescript
export default defineAppConfig({
// ... 其他配置
permission: {
'scope.userLocation': {
desc: '你的位置信息将用于小程序位置接口的效果展示'
}
},
requiredPrivateInfos: [
'getLocation'
]
})
```
## 常见问题
### Q: SDK初始化失败怎么办？
A: 检查API密钥是否正确，网络连接是否正常
### Q: 搜索没有结果？
A: 检查搜索关键词是否正确，API密钥是否有效
### Q: 如何获取用户当前位置？
A: 使用小程序的 `wx.getLocation` API，已集成到地图服务中
### Q: 地图不显示怎么办？
A: 检查网络连接，确保腾讯地图服务正常
### Q: 位置权限被拒绝？
A: 引导用户手动开启位置权限，或使用默认位置
## 更多信息
- [腾讯地图小程序SDK官方文档](https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview)
- [API密钥申请](https://lbs.qq.com/dev/console/application/mine)
- [Taro Map组件文档](https://taro-docs.jd.com/docs/components/map)

382
src/components/MapDisplay/index.scss
View File

@@ -1,382 +0,0 @@
.map-display {
height: 100vh;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
.map-section {
flex: 1;
position: relative;
background-color: #e8f4fd;
.map-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.map-component {
width: 100%;
height: calc(100vh - 50%);
border-radius: 0;
}
.map-loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
.map-loading-text {
font-size: 16px;
color: #666;
text-align: center;
padding: 20px;
}
}
.map-placeholder {
font-size: 16px;
color: #666;
text-align: center;
padding: 20px;
}
.location-info-overlay {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
z-index: 10;
.location-info {
background-color: rgba(255, 255, 255, 0.95);
padding: 12px 16px;
border-radius: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: space-between;
backdrop-filter: blur(10px);
.location-text {
font-size: 13px;
color: #333;
flex: 1;
margin-right: 12px;
line-height: 1.4;
}
.refresh-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
font-size: 12px;
&:hover {
background-color: #e0e0e0;
transform: scale(1.1);
}
&:active {
transform: scale(0.95);
}
}
}
}
.center-info-overlay {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
z-index: 10;
.center-info {
background-color: rgba(255, 255, 255, 0.95);
padding: 12px 16px;
border-radius: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
.center-text {
font-size: 13px;
color: #333;
text-align: center;
line-height: 1.4;
margin-bottom: 4px;
}
.moving-indicator {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
background-color: rgba(255, 193, 7, 0.9);
border-radius: 12px;
animation: pulse 1.5s ease-in-out infinite;
.moving-text {
font-size: 11px;
color: #333;
font-weight: 500;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
}
}
.fixed-center-indicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 15;
pointer-events: none;
.center-dot {
width: 20px;
height: 20px;
background-color: #ff4757;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
}
.location-info {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(255, 255, 255, 0.9);
padding: 8px 12px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.location-text {
font-size: 12px;
color: #333;
}
}
.sdk-status {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 12px 20px;
border-radius: 20px;
font-size: 14px;
z-index: 20;
.sdk-status-text {
color: white;
}
}
}
}
.search-section {
background-color: #fff;
padding: 16px;
border-bottom: 1px solid #eee;
.search-wrapper {
display: flex;
align-items: center;
background-color: #f8f8f8;
border-radius: 24px;
padding: 0 16px;
position: relative;
.search-icon {
font-size: 16px;
color: #999;
margin-right: 8px;
}
.search-input {
flex: 1;
height: 40px;
font-size: 14px;
color: #333;
background: transparent;
border: none;
outline: none;
&::placeholder {
color: #999;
}
&:disabled {
color: #ccc;
}
}
.clear-btn {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #e0e0e0;
border-radius: 50%;
cursor: pointer;
font-size: 12px;
color: #666;
transition: all 0.2s;
&:hover {
background-color: #d0d0d0;
color: #333;
}
}
}
}
.search-results {
background-color: #fff;
flex: 1;
overflow: hidden;
.results-header {
padding: 16px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
.results-title {
font-size: 16px;
font-weight: 500;
color: #333;
}
.results-count {
font-size: 14px;
color: #999;
margin-left: 8px;
}
}
.results-list {
max-height: 300px;
.result-item {
display: flex;
align-items: center;
padding: 16px;
border-bottom: 1px solid #f5f5f5;
cursor: pointer;
transition: background-color 0.2s;
&:hover {
background-color: #f8f8f8;
}
.result-content {
flex: 1;
.result-title {
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
display: block;
}
.result-address {
font-size: 12px;
color: #999;
display: block;
}
}
.result-arrow {
font-size: 16px;
color: #ccc;
margin-left: 12px;
}
}
}
}
.searching-indicator {
padding: 20px;
text-align: center;
background-color: #fff;
.searching-text {
font-size: 14px;
color: #999;
}
}
.no-results {
padding: 40px 20px;
text-align: center;
background-color: #fff;
.no-results-text {
font-size: 14px;
color: #999;
}
}
.sdk-status-full {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px 30px;
border-radius: 12px;
font-size: 16px;
z-index: 1000;
.sdk-status-text {
color: white;
}
}
}

505
src/components/MapDisplay/index.tsx
View File

@@ -1,505 +0,0 @@
import React, { useState, useEffect, useRef } from 'react'
import { View, Text, Input, ScrollView, Map } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { mapService, SearchResult, LocationInfo } from './mapService'
import './index.scss'
const MapDisplay: React.FC = () => {
const [currentLocation, setCurrentLocation] = useState<LocationInfo | null>(null)
const [searchValue, setSearchValue] = useState('')
const [searchResults, setSearchResults] = useState<SearchResult[]>([])
const [isSearching, setIsSearching] = useState(false)
const [mapContext, setMapContext] = useState<any>(null)
const [isSDKReady, setIsSDKReady] = useState(false)
const [mapMarkers, setMapMarkers] = useState<any[]>([])
// 地图中心点状态
const [mapCenter, setMapCenter] = useState<{lat: number, lng: number} | null>(null)
// 用户点击的中心点标记
const [centerMarker, setCenterMarker] = useState<any>(null)
// 是否正在移动地图
const [isMapMoving, setIsMapMoving] = useState(false)
// 地图移动的动画帧ID
const animationFrameRef = useRef<number | null>(null)
// 地图移动的目标位置
const [targetCenter, setTargetCenter] = useState<{lat: number, lng: number} | null>(null)
// 实时移动的定时器
const moveTimerRef = useRef<NodeJS.Timeout | null>(null)
// 地图移动状态
const [mapMoveState, setMapMoveState] = useState({
isMoving: false,
startTime: 0,
startCenter: null as {lat: number, lng: number} | null,
lastUpdateTime: 0
})
useEffect(() => {
initializeMapService()
return () => {
// 清理动画帧和定时器
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current)
}
if (moveTimerRef.current) {
clearInterval(moveTimerRef.current)
}
}
}, [])
// 初始化地图服务
const initializeMapService = async () => {
try {
const success = await mapService.initSDK()
if (success) {
setIsSDKReady(true)
console.log('地图服务初始化成功')
getCurrentLocation()
} else {
console.error('地图服务初始化失败')
Taro.showToast({
title: '地图服务初始化失败',
icon: 'none'
})
}
} catch (error) {
console.error('初始化地图服务异常:', error)
Taro.showToast({
title: '地图服务初始化异常',
icon: 'none'
})
}
}
// 获取当前位置
const getCurrentLocation = async () => {
try {
const location = await mapService.getLocation()
if (location) {
setCurrentLocation(location)
// 设置地图中心为当前位置，但不显示标记
setMapCenter({ lat: location.lat, lng: location.lng })
// 清空所有标记
setMapMarkers([])
console.log('当前位置:', location)
}
} catch (error) {
console.error('获取位置失败:', error)
Taro.showToast({
title: '获取位置失败',
icon: 'none'
})
}
}
// 地图加载完成
const handleMapLoad = (e: any) => {
console.log('地图加载完成:', e)
setMapContext(e.detail)
}
// 地图标记点击
const handleMarkerTap = (e: any) => {
const markerId = e.detail.markerId
console.log('点击标记:', markerId)
if (markerId === 'center') {
Taro.showToast({
title: '中心点标记',
icon: 'success'
})
}
}
// 地图区域点击 - 设置中心点和标记
const handleMapTap = (e: any) => {
const { latitude, longitude } = e.detail
console.log('地图点击:', { latitude, longitude })
// 设置新的地图中心点
setMapCenter({ lat: latitude, lng: longitude })
// 设置中心点标记
const newCenterMarker = {
id: 'center',
latitude: latitude,
longitude: longitude,
title: '中心点',
iconPath: '/assets/center-marker.png', // 可以添加自定义中心点图标
width: 40,
height: 40
}
setCenterMarker(newCenterMarker)
// 更新地图标记，只显示中心点标记
setMapMarkers([newCenterMarker])
Taro.showToast({
title: '已设置中心点',
icon: 'success'
})
}
// 地图开始移动
const handleMapMoveStart = () => {
console.log('地图开始移动')
setIsMapMoving(true)
setMapMoveState(prev => ({
...prev,
isMoving: true,
startTime: Date.now(),
startCenter: mapCenter,
lastUpdateTime: Date.now()
}))
// 启动实时移动更新
startRealTimeMoveUpdate()
}
// 启动实时移动更新
const startRealTimeMoveUpdate = () => {
if (moveTimerRef.current) {
clearInterval(moveTimerRef.current)
}
// 每16ms更新一次（约60fps）
moveTimerRef.current = setInterval(() => {
if (mapMoveState.isMoving && centerMarker) {
// 模拟地图移动过程中的位置更新
// 这里我们基于时间计算一个平滑的移动轨迹
const currentTime = Date.now()
const elapsed = currentTime - mapMoveState.startTime
const moveDuration = 300 // 假设移动持续300ms
if (elapsed < moveDuration) {
// 计算移动进度
const progress = elapsed / moveDuration
const easeProgress = 1 - Math.pow(1 - progress, 3) // 缓动函数
// 如果有目标位置，进行插值计算
if (targetCenter && mapMoveState.startCenter) {
const newLat = mapMoveState.startCenter.lat + (targetCenter.lat - mapMoveState.startCenter.lat) * easeProgress
const newLng = mapMoveState.startCenter.lng + (targetCenter.lng - mapMoveState.startCenter.lng) * easeProgress
// 更新中心点标记位置
const updatedCenterMarker = {
...centerMarker,
latitude: newLat,
longitude: newLng
}
setCenterMarker(updatedCenterMarker)
// 更新地图标记
const searchMarkers = mapMarkers.filter(marker => marker.id.startsWith('search_'))
setMapMarkers([updatedCenterMarker, ...searchMarkers])
}
}
}
}, 16)
}
// 地图区域变化 - 更新目标位置
const handleRegionChange = (e: any) => {
console.log('地图区域变化:', e.detail)
// 获取地图当前的中心点坐标
if (e.detail && e.detail.centerLocation) {
const { latitude, longitude } = e.detail.centerLocation
const newCenter = { lat: latitude, lng: longitude }
// 设置目标位置
setTargetCenter(newCenter)
// 更新地图中心点状态
setMapCenter(newCenter)
// 如果有中心点标记，立即更新标记位置到新的地图中心
if (centerMarker) {
const updatedCenterMarker = {
...centerMarker,
latitude: latitude,
longitude: longitude
}
setCenterMarker(updatedCenterMarker)
// 更新地图标记，保持搜索结果标记
const searchMarkers = mapMarkers.filter(marker => marker.id.startsWith('search_'))
setMapMarkers([updatedCenterMarker, ...searchMarkers])
}
}
}
// 地图移动结束
const handleMapMoveEnd = () => {
console.log('地图移动结束')
setIsMapMoving(false)
setMapMoveState(prev => ({
...prev,
isMoving: false
}))
// 停止实时移动更新
if (moveTimerRef.current) {
clearInterval(moveTimerRef.current)
moveTimerRef.current = null
}
// 清理动画帧
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current)
animationFrameRef.current = null
}
}
// 处理搜索输入
const handleSearchInput = (e: any) => {
const value = e.detail.value
setSearchValue(value)
// 如果输入内容为空，清空搜索结果
if (!value.trim()) {
setSearchResults([])
return
}
// 防抖搜索
clearTimeout((window as any).searchTimer)
;(window as any).searchTimer = setTimeout(() => {
performSearch(value)
}, 500)
}
// 执行搜索
const performSearch = async (keyword: string) => {
if (!keyword.trim() || !isSDKReady) return
setIsSearching(true)
try {
const results = await mapService.search({
keyword,
location: currentLocation ? `${currentLocation.lat},${currentLocation.lng}` : undefined
})
setSearchResults(results)
// 在地图上添加搜索结果标记
if (results.length > 0) {
const newMarkers = results.map((result, index) => ({
id: `search_${index}`,
latitude: result.location.lat,
longitude: result.location.lng,
title: result.title,
iconPath: '/assets/search-marker.png', // 可以添加自定义图标
width: 24,
height: 24
}))
// 合并中心点标记和搜索结果标记
const allMarkers = centerMarker ? [centerMarker, ...newMarkers] : newMarkers
setMapMarkers(allMarkers)
}
console.log('搜索结果:', results)
} catch (error) {
console.error('搜索异常:', error)
Taro.showToast({
title: '搜索失败',
icon: 'none'
})
setSearchResults([])
} finally {
setIsSearching(false)
}
}
// 处理搜索结果点击 - 切换地图中心到对应地点
const handleResultClick = (result: SearchResult) => {
console.log('选择地点:', result)
Taro.showToast({
title: `已切换到: ${result.title}`,
icon: 'success'
})
// 点击搜索结果时，将地图中心移动到该位置
const newCenter = { lat: result.location.lat, lng: result.location.lng }
setMapCenter(newCenter)
// 更新中心点标记
const newCenterMarker = {
id: 'center',
latitude: result.location.lat,
longitude: result.location.lng,
title: '中心点',
iconPath: '/assets/center-marker.png',
width: 40,
height: 40
}
setCenterMarker(newCenterMarker)
// 更新地图标记，保留搜索结果标记
const searchMarkers = mapMarkers.filter(marker => marker.id.startsWith('search_'))
setMapMarkers([newCenterMarker, ...searchMarkers])
// 如果地图上下文可用，也可以调用地图API移动
if (mapContext && mapContext.moveToLocation) {
mapContext.moveToLocation({
latitude: result.location.lat,
longitude: result.location.lng,
success: () => {
console.log('地图移动到搜索结果位置')
},
fail: (err: any) => {
console.error('地图移动失败:', err)
}
})
}
}
// 处理搜索框清空
const handleSearchClear = () => {
setSearchValue('')
setSearchResults([])
// 清空搜索结果标记，只保留中心点标记
setMapMarkers(centerMarker ? [centerMarker] : [])
}
// 刷新位置
const handleRefreshLocation = () => {
getCurrentLocation()
Taro.showToast({
title: '正在刷新位置...',
icon: 'loading'
})
}
return (
<View className='map-display'>
{/* 地图区域 */}
<View className='map-section'>
<View className='map-container'>
{currentLocation ? (
<Map
className='map-component'
longitude={mapCenter?.lng || currentLocation.lng}
latitude={mapCenter?.lat || currentLocation.lat}
scale={16}
markers={mapMarkers}
show-location={true}
onTap={handleMapTap}
theme="dark"
onRegionChange={handleRegionChange}
onTouchStart={handleMapMoveStart}
onTouchEnd={handleMapMoveEnd}
onError={(e) => console.error('地图加载错误:', e)}
/>
) : (
<View className='map-loading'>
<Text className='map-loading-text'>地图加载中...</Text>
</View>
)}
{/* 位置信息悬浮层 */}
{currentLocation && (
<View className='location-info-overlay'>
<View className='location-info'>
<Text className='location-text'>
{currentLocation.address || `当前位置: ${currentLocation.lat.toFixed(6)}, ${currentLocation.lng.toFixed(6)}`}
</Text>
<View className='refresh-btn' onClick={handleRefreshLocation}>
🔄
</View>
</View>
</View>
)}
{/* 中心点信息悬浮层 */}
{centerMarker && (
<View className='center-info-overlay'>
<View className='center-info'>
<Text className='center-text'>
中心点: {centerMarker.latitude.toFixed(6)}, {centerMarker.longitude.toFixed(6)}
</Text>
{isMapMoving && (
<View className='moving-indicator'>
<Text className='moving-text'>移动中...</Text>
</View>
)}
</View>
</View>
)}
{!isSDKReady && (
<View className='sdk-status'>
<Text className='sdk-status-text'>地图服务初始化中...</Text>
</View>
)}
</View>
</View>
{/* 搜索区域 */}
<View className='search-section'>
<View className='search-wrapper'>
<View className='search-icon'>🔍</View>
<Input
className='search-input'
placeholder={isSDKReady ? '搜索地点' : '地图服务初始化中...'}
value={searchValue}
onInput={handleSearchInput}
disabled={!isSDKReady}
/>
{searchValue && (
<View className='clear-btn' onClick={handleSearchClear}>
✕
</View>
)}
</View>
</View>
{/* 搜索结果列表 */}
{searchResults.length > 0 && (
<View className='search-results'>
<View className='results-header'>
<Text className='results-title'>搜索结果</Text>
<Text className='results-count'>({searchResults.length})</Text>
</View>
<ScrollView className='results-list' scrollY>
{searchResults.map((result) => (
<View
key={result.id}
className='result-item'
onClick={() => handleResultClick(result)}
>
<View className='result-content'>
<Text className='result-title'>{result.title}</Text>
<Text className='result-address'>{result.address}</Text>
</View>
<View className='result-arrow'>›</View>
</View>
))}
</ScrollView>
</View>
)}
{/* 搜索状态提示 */}
{isSearching && (
<View className='searching-indicator'>
<Text className='searching-text'>搜索中...</Text>
</View>
)}
{/* 无搜索结果提示 */}
{searchValue && !isSearching && searchResults.length === 0 && isSDKReady && (
<View className='no-results'>
<Text className='no-results-text'>未找到相关地点</Text>
</View>
)}
{/* SDK状态提示 */}
{!isSDKReady && (
<View className='sdk-status-full'>
<Text className='sdk-status-text'>正在初始化地图服务，请稍候...</Text>
</View>
)}
</View>
)
}
export default MapDisplay

63
src/components/MapDisplay/mapPlugin.tsx
View File

@@ -1,63 +0,0 @@
import Taro from '@tarojs/taro';
import { Button } from '@tarojs/components';
import { mapService, SearchResult, LocationInfo } from './mapService'
import { useEffect, useState } from 'react';
export default function MapPlugin() {
const key = 'AZNBZ-VCSC4-MLVUF-KBASD-6GZ6H-KBFTX'; //使用在腾讯位置服务申请的key
const referer = '八瓜一月'; //调用插件的app的名称
const [currentLocation, setCurrentLocation] = useState<LocationInfo | null>(null)
const category = '';
const chooseLocation = () => {
Taro.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&latitude=' + currentLocation?.lat + '&longitude=' + currentLocation?.lng
});
}
useEffect(() => {
initializeMapService()
}, [])
// 初始化地图服务
const initializeMapService = async () => {
try {
const success = await mapService.initSDK()
if (success) {
console.log('地图服务初始化成功')
getCurrentLocation()
} else {
console.error('地图服务初始化失败')
Taro.showToast({
title: '地图服务初始化失败',
icon: 'none'
})
}
} catch (error) {
console.error('初始化地图服务异常:', error)
Taro.showToast({
title: '地图服务初始化异常',
icon: 'none'
})
}
}
// 获取当前位置
const getCurrentLocation = async () => {
try {
const location = await mapService.getLocation()
if (location) {
setCurrentLocation(location)
console.log('当前位置:', location)
}
} catch (error) {
console.error('获取位置失败:', error)
Taro.showToast({
title: '获取位置失败',
icon: 'none'
})
}
}
return (
<Button onClick={chooseLocation}>选择位置</Button>
)
}

190
src/components/MapDisplay/mapService.ts
View File

@@ -1,190 +0,0 @@
// 腾讯地图SDK服务
import QQMapWX from "qqmap-wx-jssdk";
import Taro from '@tarojs/taro';
// 扩展Window接口，添加qqmapsdk属性
declare global {
interface Window {
qqmapsdk?: any;
}
}
export interface LocationInfo {
lat: number
lng: number
address?: string
}
export interface SearchResult {
id: string
title: string
address: string
location: {
lat: number
lng: number
}
}
export interface SearchOptions {
keyword: string
location?: string
page_size?: number
page_index?: number
}
class MapService {
private qqmapsdk: any = null
private isInitialized = false
// 初始化腾讯地图SDK
async initSDK(): Promise<boolean> {
if (this.isInitialized) {
return true
}
try {
// 直接使用QQMapWX，不需要通过window对象
this.qqmapsdk = new QQMapWX({
key: 'AZNBZ-VCSC4-MLVUF-KBASD-6GZ6H-KBFTX'
});
this.isInitialized = true
console.log('腾讯地图SDK初始化成功')
return true
} catch (error) {
console.error('初始化腾讯地图SDK失败:', error)
return false
}
}
// 搜索地点
async search(options: SearchOptions): Promise<SearchResult[]> {
if (!this.isInitialized) {
await this.initSDK()
}
try {
console.log(this.qqmapsdk,11)
if (this.qqmapsdk && this.qqmapsdk.search) {
return new Promise((resolve, reject) => {
this.qqmapsdk.getSuggestion({
keyword: options.keyword,
location: options.location || '39.908802,116.397502', // 默认北京
page_size: options.page_size || 20,
page_index: options.page_index || 1,
success: (res: any) => {
console.log('搜索成功:', res)
if (res.data && res.data.length > 0) {
const results: SearchResult[] = res.data.map((item: any, index: number) => ({
id: `search_${index}`,
title: item.title || item.name || '未知地点',
address: item.address || item.location || '地址未知',
location: {
lat: item.location?.lat || 0,
lng: item.location?.lng || 0
}
}))
resolve(results)
} else {
resolve([])
}
},
fail: (err: any) => {
console.error('搜索失败:', err)
reject(err)
}
})
})
} else {
// 使用模拟数据
console.log('使用模拟搜索数据')
return this.getMockSearchResults(options.keyword)
}
} catch (error) {
console.error('搜索异常:', error)
return this.getMockSearchResults(options.keyword)
}
}
// 获取模拟搜索结果
private getMockSearchResults(keyword: string): SearchResult[] {
const mockResults: SearchResult[] = [
{
id: 'mock_1',
title: `${keyword}相关地点1`,
address: '模拟地址1 - 这是一个示例地址',
location: { lat: 39.908802, lng: 116.397502 }
},
{
id: 'mock_2',
title: `${keyword}相关地点2`,
address: '模拟地址2 - 这是另一个示例地址',
location: { lat: 39.918802, lng: 116.407502 }
},
{
id: 'mock_3',
title: `${keyword}相关地点3`,
address: '模拟地址3 - 第三个示例地址',
location: { lat: 39.898802, lng: 116.387502 }
}
]
return mockResults
}
// 获取当前位置
async getCurrentLocation(): Promise<{ lat: number; lng: number } | null> {
try {
// 这里可以集成实际的定位服务
// 暂时返回模拟位置
const res = await Taro.getLocation({
type: 'gcj02',
isHighAccuracy: true
})
return {
lat: res.latitude,
lng: res.longitude
}
} catch (error) {
console.error('获取位置失败:', error)
return null
}
}
async getAddress(lat: number, lng: number): Promise<string | null | undefined> {
try {
const addressRes: any = await new Promise((resolve, reject) => {
this.qqmapsdk.reverseGeocoder({
location: {
latitude: lat,
longitude: lng
},
success: resolve,
fail: reject
})
})
return addressRes?.results?.address
} catch (error) {
console.error('获取地址失败:', error)
}
}
async getLocation(): Promise<{ lat: number; lng: number; address: string } | null | undefined> {
try {
const currentInfo: any = {};
const location = await this.getCurrentLocation();
const { lat, lng } = location || {};
if (lat && lng) {
currentInfo.lat = lat;
currentInfo.lng = lng;
const addressRes = await this.getAddress(lat, lng)
if (addressRes) {
currentInfo.address = addressRes;
}
}
return currentInfo;
} catch (error) {
console.error('获取位置失败:', error)
}
}
}
export const mapService = new MapService()

4
src/components/Menu/index.tsx
View File

@@ -6,7 +6,7 @@ import { MenuFilterProps } from "../../../types/list/types";
import styles from "./index.module.scss";
const MenuComponent = (props: MenuFilterProps) => {
const { options, value, onChange, wrapperClassName, itemClassName, name } =
const { options, value, onChange, wrapperClassName, itemClassName, name, onOpen, onClose,open } =
props;
const [isChange, setIsChange] = useState(false);
const [isOpen, setIsOpen] = useState(false);
@@ -18,10 +18,12 @@ const MenuComponent = (props: MenuFilterProps) => {
const handleOpen = () => {
setIsOpen(true);
onOpen && typeof onOpen === "function" && onOpen();
};
const handleClose = () => {
setIsOpen(false);
onClose && typeof onClose === "function" && onClose();
};
return (

26
src/components/NumberInterval/NumberInterval.tsx
View File

@@ -6,16 +6,30 @@ import { InputNumber } from '@nutui/nutui-react-taro'
interface NumberIntervalProps {
value: [number, number]
onChange: (value: [number, number]) => void
min: number
max: number
}
const NumberInterval: React.FC<NumberIntervalProps> = ({
value,
onChange
onChange,
min,
max
}) => {
const [minParticipants, maxParticipants] = value || [1, 4]
const [minParticipants, maxParticipants] = value || [1, 1]
const handleChange = (value: [number | string, number | string]) => {
onChange([Number(value[0]), Number(value[1])])
const newMin = Number(value[0])
const newMax = Number(value[1])
// 确保最少人数不能大于最多人数
if (newMin > newMax) {
return
}
onChange([newMin, newMax])
}
return (
<View className='participants-control-section'>
<View className='participant-control'>
@@ -24,7 +38,7 @@ const NumberInterval: React.FC<NumberIntervalProps> = ({
<InputNumber
className="format-width"
defaultValue={minParticipants}
min={minParticipants}
min={min}
max={maxParticipants}
onChange={(value) => handleChange([value, maxParticipants])}
formatter={(value) => `${value}人`}
@@ -37,9 +51,9 @@ const NumberInterval: React.FC<NumberIntervalProps> = ({
<InputNumber
className="format-width"
defaultValue={maxParticipants}
onChange={(value) => handleChange([value, maxParticipants])}
onChange={(value) => handleChange([minParticipants, value])}
min={minParticipants}
max={maxParticipants}
max={max}
formatter={(value) => `${value}人`}
/>
</View>

81
src/components/PublishMenu/PublishMenu.tsx Normal file
View File

@@ -0,0 +1,81 @@
import React, { useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import styles from './index.module.scss'
import images from '@/config/images'
export interface PublishMenuProps {
onPersonalPublish?: () => void
onActivityPublish?: () => void
}
const PublishMenu: React.FC<PublishMenuProps> = () => {
const [isVisible, setIsVisible] = useState(false)
const handleIconClick = () => {
setIsVisible(!isVisible)
}
const handleMenuItemClick = (type: 'individual' | 'group') => {
// 跳转到publishBall页面并传递type参数
console.log(type, 'type');
Taro.navigateTo({
url: `/pages/publishBall/index?type=${type}`
})
setIsVisible(false)
}
return (
<View className={styles.publishMenu}>
{/* 菜单选项 */}
{isVisible && (
<View className={styles.menuCard}>
<View
className={styles.menuItem}
onClick={() => handleMenuItemClick('individual')}
>
<View className={styles.menuIcon}>
<Image src={images.ICON_PERSON} />
</View>
<View className={styles.menuContent}>
<Text className={styles.menuTitle}>发布个人约球</Text>
<Text className={styles.menuDesc}>已订场，找球友；未订场，找搭子</Text>
</View>
<View className={styles.menuArrow}>
<Image src={images.ICON_ARROW_RIGHT} className={styles.img} />
</View>
</View>
<View
className={styles.menuItem}
onClick={() => handleMenuItemClick('group')}
>
<View className={styles.menuIcon}>
<Image src={images.ICON_GROUP} />
</View>
<View className={styles.menuContent}>
<Text className={styles.menuTitle}>发布畅打活动</Text>
<Text className={styles.menuDesc}>认证球场官方组织</Text>
</View>
<View className={styles.menuArrow}>
<Image src={images.ICON_ARROW_RIGHT} className={styles.img} />
</View>
</View>
</View>
)}
{/* 绿色圆形按钮 */}
<View
className={`${styles.greenButton} ${isVisible ? styles.rotated : ''}`}
onClick={handleIconClick}
>
<Image src={images.ICON_PUBLISH} className={styles.closeIcon} />
</View>
</View>
)
}
export default PublishMenu

195
src/components/PublishMenu/index.module.scss Normal file
View File

@@ -0,0 +1,195 @@
.publishMenu {
position: relative;
z-index: 1000;
}
.menuCard {
position: absolute;
bottom: 80px;
right: 0;
width: 302px;
background: white;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
padding: 12px;
animation: slideIn 0.3s ease-out;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
/* 小三角指示器 */
&::after {
content: '';
position: absolute;
bottom: -8px;
right: 20px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
/* 移除阴影，避免连接处的黑色 */
}
/* 为小三角添加单独的阴影效果 */
&::before {
content: '';
position: absolute;
bottom: -9px;
right: 20px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(0, 0, 0, 0.1);
z-index: -1;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.menuItem {
display: flex;
align-items: center;
padding: 0 10px;
cursor: pointer;
transition: background-color 0.2s ease;
border-radius: 20px;
border: 0.5px solid rgba(0, 0, 0, 0.08);
background: var(--Backgrounds-Primary, #FFF);
height: 68px;
}
.menuIcon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
}
.ballIcon {
width: 24px;
height: 24px;
border: 2px solid #333;
border-radius: 50%;
position: relative;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border: 1px solid #333;
border-radius: 50%;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
background: #333;
border-radius: 50%;
}
}
.activityIcon {
width: 24px;
height: 24px;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 16px;
border: 2px solid #333;
border-radius: 50% 50% 0 50%;
transform: rotate(-45deg);
}
&::after {
content: '+';
position: absolute;
top: -2px;
right: 0;
font-size: 12px;
font-weight: bold;
color: #333;
}
}
.menuContent {
flex: 1;
display: flex;
flex-direction: column;
}
.menuTitle {
font-size: 16px;
font-weight: 600;
color: #000;
margin-bottom: 2px;
line-height: 24px; /* 150% */
}
.menuDesc {
font-size: 12px;
color: rgba(60, 60, 67, 0.60);
line-height: 18px;
}
.menuArrow {
font-size: 16px;
color: #ccc;
margin-left: 8px;
.img{
width: 16px;
height: 16px;
}
}
.greenButton {
border-radius: 50%;
display: flex;
width: 60px;
height: 60px;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
&.rotated {
transform: rotate(-90deg);
}
}
.closeIcon {
color: white;
font-size: 24px;
width: 60px;
height: 60px;
font-weight: bold;
line-height: 1;
}

2
src/components/PublishMenu/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default } from './PublishMenu'
export type { PublishMenuProps } from './PublishMenu'

14
src/components/SearchBar/index.module.scss
View File

@@ -5,9 +5,17 @@
--nutui-searchbar-input-text-color: #000000;
--nutui-searchbar-input-padding: 0 0 0 10px;
--nutui-searchbar-padding: 10px 0 0 0;
background-color: unset;
:global(.nut-searchbar-content) {
box-shadow: 0 4px 48px #00000014;
}
.searchBarLeft {
display: flex;
align-items: center;
}
.searchBarRight {
position: relative;
width: 44px;
@@ -18,14 +26,17 @@
display: flex;
align-items: center;
justify-content: center;
&.active {
background-color: #000000;
}
}
.filterIcon {
width: 20px;
height: 20px;
}
.filterCount {
background-color: #000000;
position: absolute;
@@ -41,8 +52,9 @@
justify-content: center;
font-size: 11px;
}
.searchIcon {
width: 20px;
height: 20px;
}
}
}

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

@@ -8,20 +8,24 @@ interface IProps {
isSelect: boolean;
filterCount: number;
onChange: (value: string) => void;
value: string;
onInputClick: () => void;
}
const SearchBarComponent = (props: IProps) => {
const { handleFilterIcon, isSelect, filterCount, onChange } = props;
const { handleFilterIcon, isSelect, filterCount, onChange, value, onInputClick } = props;
const handleChange = (value: string) => {
onChange && onChange(value);
};
return (
<>
<SearchBar
clearable={false}
leftIn={
<div>
<View className={styles.searchBarLeft}>
<Image className={styles.searchIcon} src={img.ICON_SEARCH} />
</div>
</View>
}
right={
<View
@@ -42,6 +46,8 @@ const SearchBarComponent = (props: IProps) => {
className={styles.searchBar}
placeholder="搜索上海的球局和场地"
onChange={handleChange}
value={value}
onInputClick={onInputClick}
/>
</>
);

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

@@ -19,7 +19,7 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
value,
onChange,
placeholder = '请输入',
maxLength = 500,
maxLength = 1000,
options = []
}) => {
// 处理文本输入变化

77
src/components/TimePicker/README.md Normal file
View File

@@ -0,0 +1,77 @@
# TimePicker 时间选择器组件
## 功能特性
- 使用自定义样式重写PickerViewColumn功能
- 完全还原原生PickerView的样式和动画效果
- 支持年份和月份选择
- 平滑的滚动动画和切换效果
- 响应式设计，支持触摸滚动
- 渐变遮罩效果增强视觉层次
## 技术实现
### 核心特性
- 使用ScrollView替代PickerViewColumn
- 自定义滚动逻辑实现选项对齐
- CSS动画和过渡效果还原原生体验
- 智能滚动位置计算和自动对齐
### 样式还原
- 选中项指示器（高亮背景）
- 渐变遮罩效果（顶部和底部）
- 平滑的过渡动画
- 精确的尺寸和间距
## 使用方法
```tsx
import { TimePicker } from '@/components/TimePicker'
const [visible, setVisible] = useState(false)
<TimePicker
visible={visible}
onClose={() => setVisible(false)}
onConfirm={(year, month) => {
console.log('选择的时间:', year, month)
setVisible(false)
}}
defaultYear={2024}
defaultMonth={6}
minYear={2020}
maxYear={2030}
/>
```
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| visible | boolean | - | 是否显示选择器 |
| visible | boolean | - | 是否显示选择器 |
| onClose | () => void | - | 关闭回调 |
| onConfirm | (year: number, month: number) => void | - | 确认选择回调 |
| defaultYear | number | 当前年份 | 默认选中的年份 |
| defaultMonth | number | 当前月份 | 默认选中的月份 |
| minYear | number | 2020 | 最小年份 |
| maxYear | number | 2030 | 最大年份 |
## 样式定制
组件使用CSS Modules，可以通过修改`index.module.scss`文件来自定义样式：
- `.time-picker-popup`: 弹出层容器
- `.picker-container`: 选择器容器
- `.custom-picker`: 自定义选择器
- `.picker-indicator`: 选中项指示器
- `.picker-column`: 选择列
- `.picker-item`: 选择项
- `.picker-item-active`: 激活状态的选择项
## 测试
运行测试页面：
```tsx
import TimePickerTest from '@/components/TimePicker/test'
```

233
src/components/TimePicker/TimePicker.tsx Normal file
View File

@@ -0,0 +1,233 @@
import React, { useState, useEffect, useRef } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import { CommonPopup } from '../index'
import styles from './index.module.scss'
export interface TimePickerProps {
visible: boolean
onClose: () => void
onConfirm: (year: number, month: number) => void
defaultYear?: number
defaultMonth?: number
minYear?: number
maxYear?: number
}
const TimePicker: React.FC<TimePickerProps> = ({
visible,
onClose,
onConfirm,
defaultYear = new Date().getFullYear(),
defaultMonth = new Date().getMonth() + 1,
minYear = 2020,
maxYear = 2030
}) => {
const [selectedYear, setSelectedYear] = useState(defaultYear)
const [selectedMonth, setSelectedMonth] = useState(defaultMonth)
const [yearScrollTop, setYearScrollTop] = useState(0)
const [monthScrollTop, setMonthScrollTop] = useState(0)
const yearScrollRef = useRef<any>(null)
const monthScrollRef = useRef<any>(null)
// 计算当前选项在数组中的索引
const getYearIndex = (year: number) => year - minYear
const getMonthIndex = (month: number) => month - 1
// 生成选择器的选项数据
const yearOptions = Array.from({ length: maxYear - minYear + 1 }, (_, index) => ({
text: `${minYear + index}年`,
value: minYear + index
}))
const monthOptions = Array.from({ length: 12 }, (_, index) => ({
text: `${index + 1}月`,
value: index + 1
}))
// 计算滚动位置 - 确保每次只显示一个选项
const calculateScrollTop = (index: number) => {
const itemHeight = 48 // 每个选项的高度
const containerHeight = 216 // 容器高度
const centerOffset = (containerHeight - itemHeight) / 2
return index * itemHeight - centerOffset
}
// 获取当前可见的选项数量
const getVisibleItemCount = () => {
const containerHeight = 216
const itemHeight = 48
return Math.floor(containerHeight / itemHeight)
}
useEffect(() => {
if (visible) {
setSelectedYear(defaultYear)
setSelectedMonth(defaultMonth)
// 设置初始滚动位置
const yearScrollTop = calculateScrollTop(getYearIndex(defaultYear))
const monthScrollTop = calculateScrollTop(getMonthIndex(defaultMonth))
setYearScrollTop(yearScrollTop)
setMonthScrollTop(monthScrollTop)
}
}, [visible, defaultYear, defaultMonth])
// 处理年份滚动
const handleYearScroll = (event: any) => {
const scrollTop = event.detail.scrollTop
const itemHeight = 48
const containerHeight = 216
const centerOffset = (containerHeight - itemHeight) / 2
// 计算当前选中的年份索引
const currentIndex = Math.round((scrollTop + centerOffset) / itemHeight)
const clampedIndex = Math.max(0, Math.min(currentIndex, yearOptions.length - 1))
const newYear = minYear + clampedIndex
if (newYear !== selectedYear) {
setSelectedYear(newYear)
}
}
// 处理年份滚动结束，自动对齐
const handleYearScrollEnd = () => {
const yearIndex = getYearIndex(selectedYear)
const alignedScrollTop = calculateScrollTop(yearIndex)
// 使用setTimeout确保滚动动画完成后再对齐
setTimeout(() => {
setYearScrollTop(alignedScrollTop)
}, 100)
}
// 处理月份滚动
const handleMonthScroll = (event: any) => {
const scrollTop = event.detail.scrollTop
const itemHeight = 48
const containerHeight = 216
const centerOffset = (containerHeight - itemHeight) / 2
// 计算当前选中的月份索引
const currentIndex = Math.round((scrollTop + centerOffset) / itemHeight)
const clampedIndex = Math.max(0, Math.min(currentIndex, monthOptions.length - 1))
const newMonth = clampedIndex + 1
if (newMonth !== selectedMonth) {
setSelectedMonth(newMonth)
}
}
// 处理月份滚动结束，自动对齐
const handleMonthScrollEnd = () => {
const monthIndex = getMonthIndex(selectedMonth)
const alignedScrollTop = calculateScrollTop(monthIndex)
// 使用setTimeout确保滚动动画完成后再对齐
setTimeout(() => {
setMonthScrollTop(alignedScrollTop)
}, 100)
}
const handleConfirm = () => {
onConfirm(selectedYear, selectedMonth)
onClose()
}
if (!visible) return null
return (
<CommonPopup
visible={visible}
onClose={onClose}
onConfirm={handleConfirm}
showHeader={false}
hideFooter={false}
cancelText="返回"
confirmText="完成"
position="bottom"
round={true}
className={styles['time-picker-popup']}
>
{/* 拖拽手柄 */}
<View className={styles['popup-handle']} />
{/* 时间选择器 */}
<View className={styles['picker-container']}>
{/* 自定义多列选择器 */}
<View className={styles['picker-wrapper']}>
<View className={styles['custom-picker']}>
{/* 选中项指示器 */}
<View className={styles['picker-indicator']} />
{/* 年份列 */}
<View className={styles['picker-column']}>
<ScrollView
ref={yearScrollRef}
scrollY
scrollTop={yearScrollTop}
onScroll={handleYearScroll}
onTouchEnd={handleYearScrollEnd}
onScrollToLower={handleYearScrollEnd}
onScrollToUpper={handleYearScrollEnd}
className={styles['picker-scroll']}
scrollWithAnimation={true}
enhanced={true}
showScrollbar={false}
bounces={false}
fastDeceleration={true}
>
<View className={styles['picker-padding']} />
{yearOptions.map((option, index) => (
<View
key={option.value}
className={`${styles['picker-item']} ${
option.value === selectedYear ? styles['picker-item-active'] : ''
}`}
data-value={option.value}
>
<Text className={styles['picker-item-text']}>{option.text}</Text>
</View>
))}
<View className={styles['picker-padding']} />
</ScrollView>
</View>
{/* 月份列 */}
<View className={styles['picker-column']}>
<ScrollView
ref={monthScrollRef}
scrollY
scrollTop={monthScrollTop}
onScroll={handleMonthScroll}
onTouchEnd={handleMonthScrollEnd}
onScrollToLower={handleMonthScrollEnd}
onScrollToUpper={handleMonthScrollEnd}
className={styles['picker-scroll']}
scrollWithAnimation={true}
enhanced={true}
showScrollbar={false}
bounces={false}
fastDeceleration={true}
>
<View className={styles['picker-padding']} />
{monthOptions.map((option, index) => (
<View
key={option.value}
className={`${styles['picker-item']} ${
option.value === selectedMonth ? styles['picker-item-active'] : ''
}`}
data-value={option.value}
>
<Text className={styles['picker-item-text']}>{option.text}</Text>
</View>
))}
<View className={styles['picker-padding']} />
</ScrollView>
</View>
</View>
</View>
</View>
</CommonPopup>
)
}
export default TimePicker

81
src/components/TimePicker/demo.module.scss Normal file
View File

@@ -0,0 +1,81 @@
.demoContainer {
padding: 20px;
text-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: white;
}
.title {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
display: block;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.subtitle {
font-size: 16px;
margin-bottom: 30px;
display: block;
opacity: 0.9;
}
.demoButton {
margin: 20px 0;
width: 250px;
height: 50px;
border-radius: 25px;
font-size: 18px;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
&:active {
background: rgba(255, 255, 255, 0.3);
transform: scale(0.98);
}
}
.demoResult {
margin: 30px 0;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
text {
font-size: 18px;
font-weight: 600;
color: white;
}
}
.demoFeatures {
margin-top: 40px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
opacity: 0.9;
border-radius: 16px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
text-align: left;
}
.featureTitle {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
display: block;
color: white;
}
.featureItem {
font-size: 14px;
margin: 8px 0;
display: block;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
}

55
src/components/TimePicker/demo.tsx Normal file
View File

@@ -0,0 +1,55 @@
import React, { useState } from 'react'
import { View, Button, Text } from '@tarojs/components'
import TimePicker from './TimePicker'
import styles from './demo.module.scss'
const TimePickerDemo: React.FC = () => {
const [visible, setVisible] = useState(false)
const [selectedTime, setSelectedTime] = useState('')
const handleConfirm = (year: number, month: number) => {
setSelectedTime(`${year}年${month}月`)
setVisible(false)
}
return (
<View className={styles.demoContainer}>
<Text className={styles.title}>TimePicker 演示</Text>
<Text className={styles.subtitle}>体验"一个一个往下翻"的效果</Text>
<Button
type="primary"
onClick={() => setVisible(true)}
className={styles.demoButton}
>
打开时间选择器
</Button>
{selectedTime && (
<View className={styles.demoResult}>
<Text>已选择: {selectedTime}</Text>
</View>
)}
<View className={styles.demoFeatures}>
<Text className={styles.featureTitle}>特性说明:</Text>
<Text className={styles.featureItem}>• 每次只显示一个选项</Text>
<Text className={styles.featureItem}>• 完美居中对齐</Text>
<Text className={styles.featureItem}>• 平滑滚动动画</Text>
<Text className={styles.featureItem}>• 触摸结束后自动对齐</Text>
</View>
<TimePicker
visible={visible}
onClose={() => setVisible(false)}
onConfirm={handleConfirm}
defaultYear={2024}
defaultMonth={6}
minYear={2020}
maxYear={2030}
/>
</View>
)
}
export default TimePickerDemo

187
src/components/TimePicker/index.module.scss Normal file
View File

@@ -0,0 +1,187 @@
/* 时间选择器弹出层样式 */
.time-picker-popup {
.common-popup-content {
padding: 0;
}
}
.popup-handle {
width: 32px;
height: 4px;
background: #e0e0e0;
border-radius: 2px;
margin: 12px auto;
}
.picker-container {
padding: 26px 16px 0 16px;
background: #fff;
}
.picker-wrapper {
position: relative;
}
.custom-picker {
position: relative;
width: 100%;
height: 216px;
background: #fff;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/* 确保只显示一个选项 */
perspective: 1000px;
/* 水平布局 */
flex-direction: row;
/* 确保列之间有适当间距 */
gap: 0;
}
/* 选中项指示器 */
.picker-indicator {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 48px;
background: rgba(22, 24, 35, 0.05);
transform: translateY(-50%);
pointer-events: none;
z-index: 1;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(22, 24, 35, 0.1);
/* 确保指示器完美覆盖选中项 */
margin: 0 20px;
width: calc(100% - 40px);
}
.picker-column {
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/* 水平居中布局 */
min-width: 0;
/* 确保列之间有适当间距 */
padding: 0 8px;
&:first-child {
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
/* 确保滚动容器正确显示 */
&::before,
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 84px;
pointer-events: none;
z-index: 2;
}
&::before {
top: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
}
&::after {
bottom: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
}
}
.picker-scroll {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
will-change: scroll-position;
-webkit-overflow-scrolling: touch;
/* 确保滚动行为 */
scroll-snap-type: y mandatory;
/* 优化滚动性能 */
overscroll-behavior: contain;
}
.picker-padding {
height: 84px; /* (216 - 48) / 2 = 84px，用于居中对齐 */
/* 确保padding区域不可见 */
opacity: 0;
pointer-events: none;
}
.picker-item {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
width: 100%;
font-size: 16px;
color: #161823;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
will-change: transform, color;
/* 确保每个选项都能正确对齐 */
scroll-snap-align: center;
/* 水平居中 */
text-align: center;
&.picker-item-active {
color: #161823;
font-weight: 600;
transform: scale(1.02);
.picker-item-text {
color: #161823;
font-weight: 600;
}
}
&:not(.picker-item-active) {
color: rgba(22, 24, 35, 0.6);
.picker-item-text {
color: rgba(22, 24, 35, 0.6);
}
}
}
.picker-item-text {
font-size: 16px;
color: inherit;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
user-select: none;
width: 100%;
line-height: 48px;
white-space: nowrap;
/* 确保文字完美居中 */
display: block;
overflow: hidden;
text-overflow: ellipsis;
/* 强制居中对齐 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 滚动条隐藏 */
.picker-scroll {
::-webkit-scrollbar {
width: 0;
background: transparent;
}
}
/* 移除重复的渐变遮罩代码，已在.picker-column中定义 */

2
src/components/TimePicker/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default } from './TimePicker'
export type { TimePickerProps } from './TimePicker'

59
src/components/TimePicker/layout-test.module.scss Normal file
View File

@@ -0,0 +1,59 @@
.testContainer {
padding: 20px;
text-align: center;
background: #f8f9fa;
min-height: 100vh;
}
.testTitle {
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
display: block;
color: #333;
}
.testSubtitle {
font-size: 16px;
margin-bottom: 30px;
display: block;
color: #666;
}
.testInfo {
margin: 20px 0;
padding: 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text-align: left;
text {
font-size: 14px;
margin: 8px 0;
display: block;
color: #555;
line-height: 1.5;
}
}
.testButton {
margin: 20px 0;
width: 200px;
height: 44px;
border-radius: 22px;
font-size: 16px;
background: #007bff;
border: none;
}
.testResult {
margin: 20px 0;
color: white;
border-radius: 8px;
text {
font-size: 16px;
font-weight: 600;
}
}

51
src/components/TimePicker/layout-test.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React, { useState } from 'react'
import { View, Text, Button } from '@tarojs/components'
import TimePicker from './TimePicker'
import styles from './layout-test.module.scss'
const LayoutTest: React.FC = () => {
const [visible, setVisible] = useState(false)
const [selectedTime, setSelectedTime] = useState('')
const handleConfirm = (year: number, month: number) => {
setSelectedTime(`${year}年${month}月`)
setVisible(false)
}
return (
<View className={styles.testContainer}>
<Text className={styles.testTitle}>布局测试</Text>
<Text className={styles.testSubtitle}>验证年份和月份的水平居中对齐</Text>
<View className={styles.testInfo}>
<Text>• 年份和月份应该在同一行显示</Text>
<Text>• 两个列应该水平居中对齐</Text>
<Text>• 选中项指示器应该完美覆盖两个列</Text>
</View>
<Button
type="primary"
onClick={() => setVisible(true)}
className={styles.testButton}
>
测试布局
</Button>
{selectedTime && (
<View className={styles.testResult}>
<Text>选择结果: {selectedTime}</Text>
</View>
)}
<TimePicker
visible={visible}
onClose={() => setVisible(false)}
onConfirm={handleConfirm}
defaultYear={2024}
defaultMonth={6}
minYear={2020}
maxYear={2030}
/>
</View>
)
}

36
src/components/TimePicker/test.module.scss Normal file
View File

@@ -0,0 +1,36 @@
.container {
padding: 20px;
text-align: center;
background: #f5f5f5;
min-height: 100vh;
}
.title {
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 30px;
display: block;
}
.button {
margin: 20px 0;
width: 200px;
height: 44px;
border-radius: 22px;
font-size: 16px;
}
.result {
margin-top: 30px;
padding: 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text {
font-size: 16px;
color: #333;
font-weight: 500;
}
}

46
src/components/TimePicker/test.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React, { useState } from 'react'
import { View, Button, Text } from '@tarojs/components'
import TimePicker from './TimePicker'
import styles from './test.module.scss'
const TimePickerTest: React.FC = () => {
const [visible, setVisible] = useState(false)
const [selectedTime, setSelectedTime] = useState('')
const handleConfirm = (year: number, month: number) => {
setSelectedTime(`${year}年${month}月`)
setVisible(false)
}
return (
<View className={styles.container}>
<Text className={styles.title}>TimePicker 组件测试</Text>
<Button
type="primary"
onClick={() => setVisible(true)}
className={styles.button}
>
打开时间选择器
</Button>
{selectedTime && (
<View className={styles.result}>
<Text>已选择: {selectedTime}</Text>
</View>
)}
<TimePicker
visible={visible}
onClose={() => setVisible(false)}
onConfirm={handleConfirm}
defaultYear={2024}
defaultMonth={6}
minYear={2020}
maxYear={2030}
/>
</View>
)
}
export default TimePickerTest

23
src/components/TimeSelector/TimeSelector.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import { View, Text, } from '@tarojs/components'
import { getDate, getTime } from '@/utils/timeUtils'
import DateTimePicker from '@/components/DateTimePicker'
import { getDate, getTime, getDateStr, getEndTime } from '@/utils/timeUtils'
import DialogCalendarCard from '@/components/CalendarCard/DialogCalendarCard'
import './TimeSelector.scss'
export interface TimeRange {
@@ -23,8 +23,11 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
}) => {
// 格式化日期显示
const [visible, setVisible] = useState(false)
const handleConfirm = (year: number, month: number) => {
console.log('选择的日期:', year, month)
const handleConfirm = (date: Date) => {
console.log('选择的日期:', date)
const start_time = getDateStr(date)
const end_time = getEndTime(start_time)
if (onChange) onChange({start_time, end_time})
}
return (
<View className='time-selector'>
@@ -56,14 +59,10 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
</View>
</View>
</View>
<DateTimePicker
visible={visible}
onClose={() => setVisible(false)}
onConfirm={handleConfirm}
defaultYear={2025}
defaultMonth={11}
minYear={2020}
maxYear={2030}
<DialogCalendarCard
visible={visible}
onChange={handleConfirm}
onClose={() => setVisible(false)}
/>
</View>
)

13
src/components/UploadCover/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useState } from 'react'
import React, { useCallback, useRef, useState } from 'react'
import { Image, View, Text } from '@tarojs/components'
import img from '../../config/images'
import UploadSourcePopup from './upload-source-popup'
import UploadSourcePopup, { sourceMap } from './upload-source-popup'
import UploadFromWx from './upload-from-wx'
import { CommonPopup } from '../'
@@ -58,6 +58,9 @@ export default function UploadCover(props: UploadCoverProps) {
} = props
const [visible, setVisible] = useState(false)
const uploadSourcePopupRef = useRef<{
show: (sourceType: sourceType, maxCount: number) => void
}>(null)
const onAdd = useCallback((images: CoverImageValue[]) => {
// FIXME: prev is not latest value
@@ -86,6 +89,7 @@ export default function UploadCover(props: UploadCoverProps) {
round
position="bottom"
hideFooter
zIndex={1000}
>
<View className="upload-source-popup-container" style={{ height: source.length * 56 + 52 + 'px' }}>
{
@@ -96,7 +100,9 @@ export default function UploadCover(props: UploadCoverProps) {
item === 'album' ? (
<UploadFromWx onAdd={onWxAdd} maxCount={maxCount - value.length} />
) : (
<UploadSourcePopup sourceType={item} onAdd={onAdd} maxCount={maxCount - value.length} />
<View className="upload-source-popup-item-text" onClick={() => uploadSourcePopupRef.current?.show(item, maxCount - value.length)}>
<Text>{sourceMap.get(item)}</Text>
</View>
)
}
</View>
@@ -105,6 +111,7 @@ export default function UploadCover(props: UploadCoverProps) {
}
</View>
</CommonPopup>
<UploadSourcePopup ref={uploadSourcePopupRef} onAdd={onAdd} />
<div className={`upload-cover-root ${value.length === 0 && align === 'center' ? 'upload-cover-act-center' : ''}`}>
{value.length < maxCount && (
<div className="upload-cover-act" onClick={() => setVisible(true)}>

92
src/components/UploadCover/upload-source-popup.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react'
import { Image, View, Text, ScrollView, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import img from '../../config/images'
@@ -17,12 +17,10 @@ type ImageItem = {
}
interface UploadImageProps {
sourceType: SourceType
onAdd: (images: ImageItem[]) => void
maxCount: number
}
const sourceMap = new Map<SourceType, string>([
export const sourceMap = new Map<SourceType, string>([
['history', '历史图库'],
['preset', '预设图库']
])
@@ -31,13 +29,13 @@ const checkImageSelected = (images: ImageItem[], image: ImageItem) => {
return images.some(item => item.id === image.id)
}
export default function UploadImage(props: UploadImageProps) {
export default forwardRef(function UploadImage(props: UploadImageProps, ref) {
const {
sourceType = 'history',
onAdd = () => void 0,
maxCount = 9,
} = props
const [visible, setVisible] = useState(false)
const [sourceType, setSourceType] = useState<SourceType>('history')
const [maxCount, setMaxCount] = useState(9)
const [images, setImages] = useState<ImageItem[]>([])
const [selectedImages, setSelectedImages] = useState<ImageItem[]>([])
@@ -54,36 +52,50 @@ export default function UploadImage(props: UploadImageProps) {
}
}
useEffect(() => {
if (visible) {
publishService.getPictures({
pageOption: {
page: 1,
pageSize: 100,
},
seachOption: {
tag: '',
resource_type: 'image',
dateRange: [],
},
}).then(res => {
if (res.success) {
setImages(res.data.data.rows.map(item => ({
id: Date.now().toString(),
url: item.thumbnail_url,
})))
} else {
// TODO: 显示错误信息
Taro.showToast({
title: res.message,
icon: 'none'
})
}
})
} else {
setSelectedImages([])
useImperativeHandle(ref, () => ({
show: (sourceType: SourceType, maxCount: number) => {
setVisible(true)
setSourceType(sourceType)
setMaxCount(maxCount)
fetchImages()
}
}, [visible])
}))
function fetchImages() {
publishService.getPictures({
pageOption: {
page: 1,
pageSize: 100,
},
seachOption: {
tag: '',
resource_type: 'image',
dateRange: [],
},
}).then(res => {
if (res.success) {
let start = 0
setImages(res.data.data.rows.map(item => ({
id: (Date.now() + start++).toString(),
url: item.thumbnail_url,
})))
} else {
// TODO: 显示错误信息
Taro.showToast({
title: res.message,
icon: 'none'
})
}
})
}
function onClose() {
setVisible(false)
setSelectedImages([])
setImages([])
setSourceType('history')
setMaxCount(9)
}
const handleConfirm = () => {
if (selectedImages.length > 0) {
@@ -103,10 +115,11 @@ export default function UploadImage(props: UploadImageProps) {
<>
<CommonPopup
visible={visible}
onClose={() => setVisible(false)}
onClose={onClose}
round
hideFooter
position='bottom'
zIndex={1001}
>
<View className="upload-popup">
<View className="upload-popup-title">{sourceMap.get(sourceType)}</View>
@@ -154,8 +167,7 @@ export default function UploadImage(props: UploadImageProps) {
)}
</View>
</CommonPopup>
<View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View>
{/* <View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View> */}
</>
);
};
});

35
src/components/index.ts
View File

@@ -9,19 +9,28 @@ import TimeSelector from './TimeSelector'
import TitleTextarea from './TitleTextarea'
import CommonPopup from './CommonPopup'
import DateTimePicker from './DateTimePicker/DateTimePicker'
import TimePicker from './TimePicker/TimePicker'
import CalendarCard, { DialogCalendarCard } from './CalendarCard'
import CommonDialog from './CommonDialog'
import PublishMenu from './PublishMenu/PublishMenu'
import UploadCover from './UploadCover'
export {
ActivityTypeSwitch,
TextareaTag,
FormSwitch,
ImageUpload,
Range,
NumberInterval,
TimeSelector,
TitleTextarea,
CommonPopup,
DateTimePicker,
UploadCover,
}
export {
ActivityTypeSwitch,
TextareaTag,
FormSwitch,
ImageUpload,
Range,
NumberInterval,
TimeSelector,
TitleTextarea,
CommonPopup,
DateTimePicker,
TimePicker,
CalendarCard,
DialogCalendarCard,
CommonDialog,
PublishMenu,
UploadCover
}

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

@@ -50,7 +50,8 @@ export const publishBallFormSchema: FormFieldConfig[] = [
placeholder: '请选择活动类型',
required: true,
props: {
maxCount: 9
maxCount: 9,
source: ['album', 'history', 'preset']
}
},
{
@@ -121,7 +122,8 @@ export const publishBallFormSchema: FormFieldConfig[] = [
defaultValue: 1,
props: {
showSummary: true,
summary: '最少1人，最多4人',
min: 1,
max: 20,
}
},
@@ -146,6 +148,9 @@ export const publishBallFormSchema: FormFieldConfig[] = [
type: FieldType.TEXTAREATAG,
placeholder: '补充性别偏好、特殊要求和注意事项等信息',
required: true,
props: {
maxLength: 1000,
},
options:[
{ label: '仅限男生', value: '仅限男生' },
{ label: '仅限女生', value: '仅限女生' },

17
src/config/images.js
View File

@@ -19,7 +19,6 @@ export default {
ICON_LIST_RIGHT_ARROW: require('@/static/list/icon-list-right-arrow.svg'),
ICON_ARROW_LEFT: require('@/static/detail/icon-arrow-left.svg'),
ICON_LOGO_GO: require('@/static/detail/icon-logo-go.svg'),
ICON_SEARCH: require('@/static/publishBall/icon-search.svg'),
ICON_MAP: require('@/static/publishBall/icon-map.svg'),
ICON_STADIUM: require('@/static/publishBall/icon-stadium.svg'),
ICON_ARRORW_SMALL: require('@/static/publishBall/icon-arrow-small.svg'),
@@ -28,6 +27,11 @@ export default {
ICON_ADD: require('@/static/publishBall/icon-add.svg'),
ICON_COPY: require('@/static/publishBall/icon-arrow-right.svg'),
ICON_DELETE: require('@/static/publishBall/icon-delete.svg'),
ICON_RIGHT_MAX: require('@/static/publishBall/icon-right-max.svg'),
ICON_PLUS: require('@/static/publishBall/icon-plus.svg'),
ICON_GROUP: require('@/static/publishBall/icon-group.svg'),
ICON_PERSON: require('@/static/publishBall/icon-person.svg'),
ICON_PUBLISH: require('@/static/publishBall/icon-publish.png'),
ICON_CIRCLE_UNSELECT: require('@/static/publishBall/icon-circle-unselect.svg'),
ICON_CIRCLE_SELECT: require('@/static/publishBall/icon-circle-select-ring.svg'),
ICON_CIRCLE_SELECT_ARROW: require('@/static/publishBall/icon-circle-select-arrow.svg'),
@@ -41,4 +45,15 @@ export default {
ICON_DETAIL_COMMENT: require('@/static/detail/icon-comment.svg'),
ICON_DETAIL_COMMENT_DARK: require('@/static/detail/icon-comment-dark.svg'),
ICON_DETAIL_SHARE: require('@/static/detail/icon-share-dark.svg'),
ICON_GUIDE_BAR_PUBLISH: require('@/static/common/guide-bar-publish.svg'),
ICON_NAVIGATOR_BACK: require('@/static/common/navigator-back.svg'),
ICON_LIST_PLAYING_GAME: require('@/static/list/icon-paying-game.svg'),
ICON_LIST_LOAD_ERROR: require('@/static/list/icon-load-error.svg'),
ICON_LIST_RELOAD: require('@/static/list/icon-reload.svg'),
ICON_LIST_SEARCH_SEARCH: require('@/static/search/icon-search.svg'),
ICON_LIST_SEARCH_BACK: require('@/static/search/icon-back.svg'),
ICON_LIST_SEARCH_CLEAR: require('@/static/search/icon-search-clear.svg'),
ICON_LIST_SEARCH_CLEAR_HISTORY: require('@/static/search/icon-clear-history.svg'),
ICON_LIST_SEARCH_SUGGESTION: require('@/static/search/icon-search-suggestion.svg'),
ICON_LIST_INPUT_LOGO: require('@/static/list/icon-input-logo.svg'),
}

47
src/container/inputCustomerNavbar/index.scss Normal file
View File

@@ -0,0 +1,47 @@
.inputCustomerNavbarContainer {
padding-left: 17px;
display: flex;
gap: 8px;
.logo {
width: 28px;
height: 16px;
}
.icon16 {
width: 16px;
height: 16px;
}
.navContent {
display: flex;
align-items: center;
gap: 4px;
width: 73%;
height: max-content;
padding-top: 5px;
}
.searchContainer {
width: 100%;
display: flex;
align-items: center;
gap: 5.85px;
padding: 7.8px;
border-radius: 30px;
border: 0.488px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 3.902px 46.829px 0 rgba(0, 0, 0, 0.08);
height: 30px;
box-sizing: border-box;
font-size: 13.659px;
font-style: normal;
font-weight: 400;
line-height: 17.561px;
flex: 1;
.nut-input {
padding: 0;
}
}
}

74
src/container/inputCustomerNavbar/index.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { View, Image } from "@tarojs/components";
import img from "@/config/images";
import { getCurrentLocation } from "@/utils/locationUtils";
import "./index.scss";
import { useEffect } from "react";
import { useGlobalState } from "@/store/global";
import { useListState } from "@/store/listStore";
import CustomNavbar from "@/components/CustomNavbar";
import { Input } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";
interface IProps {
icon: string;
}
const ListHeader = (props: IProps) => {
const { icon } = props;
const { updateState, statusNavbarHeightInfo } = useGlobalState();
const { searchValue } = useListState();
const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
// 获取位置信息
const getCurrentLocal = () => {
updateState({
getLocationLoading: true,
});
getCurrentLocation().then((res) => {
updateState({
getLocationLoading: false,
location: res || {},
});
});
};
useEffect(() => {
getCurrentLocal();
}, []);
const handleInputClick = () => {
Taro.navigateTo({
url: "/pages/search/index",
});
}
return (
<CustomNavbar>
<View
className="inputCustomerNavbarContainer"
style={{
height: `${navbarHeight}px`,
paddingTop: `${statusBarHeight}px`,
}}
>
<View className="navContent">
{/* logo */}
<Image src={icon} className="logo" />
{/* 搜索框 */}
<View className="searchContainer">
<Image
className="searchIcon icon16"
src={img.ICON_LIST_SEARCH_SEARCH}
/>
<Input
placeholder="搜索上海的球局和场地"
clearable={false}
value={searchValue}
onClick={handleInputClick}
/>
</View>
</View>
</View>
</CustomNavbar>
);
};
export default ListHeader;

22
src/container/listContainer/index.scss Normal file
View File

@@ -0,0 +1,22 @@
.listContentWrapper {
padding: 0 5px;
background: #fafafa;
display: flex;
flex-direction: column;
gap: 5px;
// background-color: red;
.recommendTextWrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 22px 10px;
}
.recommendText {
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
font-weight: 500;
line-height: 24px;
}
}

45
src/container/listContainer/index.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { View, Text } from "@tarojs/components";
import ListCard from "@/components/ListCard";
import ListLoadError from "@/components/ListLoadError";
import ListCardSkeleton from "@/components/ListCardSkeleton";
import "./index.scss";
const ListContainer = (props) => {
const { loading, data = [], error, reload, recommendList } = props;
if (error) {
return <ListLoadError reload={reload} />;
}
const renderList = (list) => {
if (loading && list.length === 0) {
return (
<>
{new Array(10).fill(0).map(() => {
return <ListCardSkeleton />;
})}
</>
);
}
return (
<>
{list?.map((match, index) => (
<ListCard key={match.id || index} {...match} />
))}
</>
);
};
return (
<View className="listContentWrapper">
{renderList(data)}
<View className="recommendTextWrapper">
<Text className="recommendText">搜索结果较少，已为你推荐其他内容</Text>
</View>
{renderList(recommendList)}
</View>
);
};
export default ListContainer;

43
src/container/listCustomNavbar/index.module.scss Normal file
View File

@@ -0,0 +1,43 @@
.container {
padding-left: 17px;
display: flex;
align-items: center;
gap: 8px;
.line {
width: 1px;
height: 25px;
background-color: #0000000F;
}
.logo {
width: 60px;
height: 34px;
}
.change {
width: 12px;
height: 12px;
}
.cityWrapper {
line-height: 20px;
}
.city {
font-weight: 600;
font-size: 13px;
line-height: 20px;
}
.infoWrapper {
line-height: 12px;
}
.info {
font-weight: 400;
font-size: 10px;
line-height: 12px;
color: #3C3C4399;
}
}

69
src/container/listCustomNavbar/index.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { View, Text, Image } from "@tarojs/components";
import img from "@/config/images";
import { getCurrentLocation } from "@/utils/locationUtils";
import styles from "./index.module.scss";
import { useEffect } from "react";
import { useGlobalState } from "@/store/global";
import { useListState } from "@/store/listStore";
import CustomNavbar from '@/components/CustomNavbar'
const ListHeader = () => {
const {
updateState,
location,
getLocationText,
getLocationLoading,
statusNavbarHeightInfo,
} = useGlobalState();
const { gamesNum } = useListState();
const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
// 获取位置信息
const getCurrentLocal = () => {
updateState({
getLocationLoading: true,
});
getCurrentLocation().then((res) => {
updateState({
getLocationLoading: false,
location: res || {},
});
});
};
useEffect(() => {
getCurrentLocal();
}, []);
const currentAddress = getLocationLoading
? getLocationText
: location?.address;
return (
<CustomNavbar>
<View
className={styles.container}
style={{
height: `${navbarHeight}px`,
paddingTop: `${statusBarHeight}px`,
}}
>
{/* logo */}
<Image src={img.ICON_LOGO} className={styles.logo} />
<View className={styles.line} />
<View className={styles.content}>
<View className={styles.cityWrapper}>
{/* 位置 */}
<Text className={styles.city}>{currentAddress}</Text>
{!getLocationLoading && (
<Image src={img.ICON_CHANGE} className={styles.change} />
)}
</View>
<View className={styles.infoWrapper}>
<Text className={styles.info}>附近${gamesNum}场球局</Text>
</View>
</View>
</View>
</CustomNavbar>
);
};
export default ListHeader;

2
src/nutui-theme.scss
View File

@@ -3,7 +3,7 @@
// ==========================================
// 引入NutUI原始样式（如果需要）
// @import '@nutui/nutui-react-taro/dist/style.css';
@import '@nutui/nutui-react-taro/dist/style.css';
// 全局主题变量覆盖
$nut-primary-color: #000000 !important;

1122
src/package/qqmap-wx-jssdk.js
View File

File diff suppressed because it is too large Load Diff

1
src/package/qqmap-wx-jssdk.min.js vendored
View File

File diff suppressed because one or more lines are too long

91
src/pages/detail/index.scss
View File

@@ -29,6 +29,7 @@
color: #fff;
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.10);
.detail-navigator-back {
border-right: 1px solid #444;
@@ -123,6 +124,7 @@
&-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
&-tag {
@@ -545,6 +547,7 @@
&-scroll {
flex: 0 0 auto;
width: calc(100% - 116px);
&-content {
display: flex;
@@ -813,7 +816,7 @@
border-radius: 20px;
border: 1px solid rgba(33, 178, 0, 0.20);
background: rgba(255, 255, 255, 0.16);
padding: 12px 15px;
padding: 12px 0 12px 15px;
box-sizing: border-box;
&-title {
@@ -923,6 +926,52 @@
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: #FFF;
.sticky-bottom-bar-share {
display: flex;
align-items: center;
flex-direction: column;
gap: 4px;
&-icon {
width: 16px;
height: 16px;
}
&-text {
color: rgba(0, 0, 0, 0.85);
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 160% */
}
}
&-separator {
width: 1px;
height: 24px;
background: rgba(0, 0, 0, 0.10);
}
.sticky-bottom-bar-comment {
display: flex;
align-items: center;
flex-direction: column;
gap: 4px;
&-icon {
width: 16px;
height: 16px;
}
&-text {
color: rgba(0, 0, 0, 0.85);
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 160% */
}
}
}
&-join-game {
@@ -938,8 +987,48 @@
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.06);
background: #FFF;
&-price {
font-family: "PoetsenOne";
font-size: 28px;
font-weight: 400;
line-height: 24px; /* 114.286% */
letter-spacing: -0.56px;
color: #000;
}
}
}
}
}
.share-popup-content {
width: 100%;
height: 100%;
padding: 20px 16px env(safe-area-inset-bottom);
box-sizing: border-box;
// padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
display: flex;
justify-content: space-around;
align-items: center;
& > view {
width: 100px;
height: 64px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
& > image {
width: 24px;
height: 24px;
}
& > text {
color: rgba(0, 0, 0, 0.85);
}
}
}

129
src/pages/detail/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'
import { View, Text, Button, Swiper, SwiperItem, Image, Map, ScrollView } from '@tarojs/components'
import { Cell, Avatar, Progress, Popover } from '@nutui/nutui-react-taro'
import Taro, { useRouter } from '@tarojs/taro'
import Taro, { useRouter, useShareAppMessage, useShareTimeline, useDidShow } from '@tarojs/taro'
// 导入API服务
import DetailService from '../../services/detailService'
import {
@@ -9,8 +9,9 @@ import {
useUserActions
} from '../../store/userStore'
import img from '../../config/images'
import { getTextColorOnImage } from '../../utils/processImage'
import { getTextColorOnImage } from '../../utils'
import './index.scss'
import { CommonPopup } from '@/components'
const images = [
'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/1a35ebbf-2361-44da-b338-7608561d0b31.png',
@@ -22,6 +23,71 @@ function insertDotInTags(tags: string[]) {
return tags.join('-·-').split('-')
}
const SharePopup = forwardRef(({ id, from }: { id: string, from: string }, ref) => {
const [visible, setVisible] = useState(false)
useImperativeHandle(ref, () => ({
show: () => {
setVisible(true)
}
}))
function handleShareToWechat() {
useShareAppMessage(() => {
return {
title: '分享',
path: `/pages/detail/index?id=${id}&from=${from}`,
}
})
}
function handleShareToWechatMoments() {
useShareTimeline(() => {
return {
title: '分享',
path: `/pages/detail/index?id=${id}&from=${from}`,
}
})
}
function handleSaveToLocal() {
Taro.saveImageToPhotosAlbum({
filePath: images[0],
success: () => {
Taro.showToast({ title: '保存成功', icon: 'success' })
},
fail: () => {
Taro.showToast({ title: '保存失败', icon: 'none' })
},
})
}
return (
<CommonPopup
title="分享"
visible={visible}
onClose={() => { setVisible(false) }}
hideFooter
style={{ minHeight: '100px' }}
>
<View catchMove className='share-popup-content'>
<View onClick={handleShareToWechat}>
<Image src={img.ICON_DETAIL_SHARE} />
<Text>分享到微信</Text>
</View>
<View onClick={handleShareToWechatMoments}>
<Image src={img.ICON_DETAIL_SHARE} />
<Text>分享朋友圈</Text>
</View>
<View onClick={handleSaveToLocal}>
<Image src={img.ICON_DETAIL_SHARE} />
<Text>保存到本地</Text>
</View>
</View>
</CommonPopup>
)
})
function Index() {
// 使用Zustand store
// const userStats = useUserStats()
@@ -31,16 +97,24 @@ function Index() {
const [colors, setColors] = useState<string []>([])
const [detail, setDetail] = useState<any>(null)
const { params } = useRouter()
const { id, share } = params
const { id, autoShare, from } = params
console.log('from', from)
// 本地状态管理
const [loading, setLoading] = useState(false)
const sharePopupRef = useRef<any>(null)
// 页面加载时获取数据
useEffect(() => {
// useEffect(() => {
// fetchDetail()
// calcBgMainColors()
// }, [])
useDidShow(() => {
fetchDetail()
calcBgMainColors()
}, [])
})
const fetchDetail = async () => {
const res = await DetailService.getDetail(Number(id))
@@ -59,6 +133,26 @@ function Index() {
setColors(textcolors)
}
function handleShare() {
sharePopupRef.current.show()
}
const openMap = () => {
Taro.openLocation({
latitude: detail?.latitude, // 纬度（必填）
longitude: detail?.longitude, // 经度（必填）
name: '上海体育场', // 位置名（可选）
address: '上海市徐汇区肇嘉浜路128号', // 地址详情（可选）
scale: 15, // 地图缩放级别（1-28）
})
}
const handleJoinGame = () => {
Taro.navigateTo({
url: `/pages/orderCheck/index?id=${id}`,
})
}
const tags = [{
name: '🕙 急招',
icon: '',
@@ -139,7 +233,7 @@ function Index() {
{/* custom navbar */}
<view className="custom-navbar">
<View className='detail-navigator'>
<View className='detail-navigator-back'>
<View className='detail-navigator-back' onClick={() => { Taro.navigateBack() }}>
<Image className='detail-navigator-back-icon' src={img.ICON_ARROW_LEFT} />
</View>
<View className='detail-navigator-icon'>
@@ -234,7 +328,7 @@ function Index() {
{/* location message */}
<View className='location-message-text'>
{/* venue name and distance */}
<View className='location-message-text-name-distance'>
<View className='location-message-text-name-distance' onClick={openMap}>
<Text>上海体育场</Text>
<Text>·</Text>
<Text>1.2km</Text>
@@ -325,7 +419,7 @@ function Index() {
</View>
{/* participants list */}
<ScrollView className='participants-list-scroll' scrollX>
<View className='participants-list-scroll-content' style={{ width: `${(participants.length + 1) * 108 + (participants.length) * 8 - 30}px` }}>
<View className='participants-list-scroll-content' style={{ width: `${participants.length * 103 + (participants.length - 1) * 8}px` }}>
{participants.map((participant) => (
<View key={participant.id} className='participants-list-item'>
{/* <Avatar className='participants-list-item-avatar' src={participant.user.avatar_url} /> */}
@@ -420,7 +514,7 @@ function Index() {
<Avatar className='recommend-games-list-item-addon-avatar' src={game.avatar} />
<View className='recommend-games-list-item-addon-message'>
<View className='recommend-games-list-item-addon-message-applications'>
<Text>报名人数 {game.checkedApplications} / {game.applications}</Text>
<Text>报名人数 {game.checkedApplications}/{game.applications}</Text>
</View>
<View className='recommend-games-list-item-addon-message-level-requirements'>
<Text>{game.levelRequirements}</Text>
@@ -439,10 +533,17 @@ function Index() {
{/* sticky bottom action bar */}
<View className="sticky-bottom-bar">
<View className="sticky-bottom-bar-share-and-comment">
<View></View>
<View></View>
<View className='sticky-bottom-bar-share' onClick={handleShare}>
<Image className='sticky-bottom-bar-share-icon' src={img.ICON_DETAIL_SHARE} />
<Text className='sticky-bottom-bar-share-text'>分享</Text>
</View>
<View className='sticky-bottom-bar-share-and-comment-separator' />
<View className='sticky-bottom-bar-comment' onClick={() => { Taro.showToast({ title: 'To be continued', icon: 'none' }) }}>
<Image className='sticky-bottom-bar-comment-icon' src={img.ICON_DETAIL_COMMENT_DARK} />
<Text className='sticky-bottom-bar-comment-text'>32</Text>
</View>
</View>
<View className="sticky-bottom-bar-join-game">
<View className="sticky-bottom-bar-join-game" onClick={handleJoinGame}>
<Text>🎾</Text>
<Text>立即加入</Text>
<View className='game-price'>
@@ -450,6 +551,8 @@ function Index() {
</View>
</View>
</View>
{/* share popup */}
<SharePopup ref={sharePopupRef} id={id} from={from} />
</View>
</View>
)

261
src/pages/index/index.scss
View File

@@ -1,261 +0,0 @@
.index-page {
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
.page-header {
text-align: center;
margin-bottom: 24px;
.page-title {
font-size: 28px;
font-weight: bold;
color: white;
display: block;
margin-bottom: 8px;
}
.page-subtitle {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
display: block;
}
}
.user-card {
background: white;
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
.user-header {
display: flex;
align-items: center;
gap: 16px;
.user-info {
flex: 1;
.username {
font-size: 20px;
font-weight: bold;
color: #333;
display: block;
margin-bottom: 4px;
}
.user-level {
font-size: 14px;
color: #666;
display: block;
margin-bottom: 4px;
}
.join-date {
font-size: 12px;
color: #999;
display: block;
}
}
}
}
.stats-section {
background: white;
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
.section-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 16px;
display: block;
}
:global {
.nut-cell {
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 8px;
border: none;
&:last-child {
margin-bottom: 0;
}
.nut-cell__title {
font-weight: 500;
color: #555;
}
.nut-cell__value {
font-weight: bold;
color: #007bff;
}
}
}
}
.action-section {
background: white;
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
.section-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 16px;
display: block;
}
.button-group {
display: flex;
flex-direction: column;
gap: 12px;
.custom-button {
border-radius: 12px;
font-weight: 500;
height: 48px;
border: none;
margin-bottom: 12px;
font-size: 16px;
color: white;
&.primary-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
&.success-btn {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
&.warning-btn {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
&:disabled {
opacity: 0.6;
}
}
// 保留 NutUI 按钮样式（备用）
:global {
.nut-button {
border-radius: 12px;
font-weight: 500;
height: 48px;
border: none;
&--primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
&--success {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
&--warning {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
&:disabled {
opacity: 0.6;
}
}
}
}
}
.loading-section {
background: white;
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
text-align: center;
.loading-text {
font-size: 16px;
color: #666;
margin-bottom: 12px;
display: block;
}
:global {
.nut-progress {
.nut-progress-outer {
background: #f0f0f0;
border-radius: 10px;
}
.nut-progress-inner {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
}
}
}
}
.tips-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
.tips-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 16px;
display: block;
}
.tips-content {
.tip-item {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 8px;
display: block;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
// 响应式设计
@media (max-width: 768px) {
.index-page {
padding: 16px;
.page-header {
.page-title {
font-size: 24px;
}
.page-subtitle {
font-size: 14px;
}
}
.user-card,
.stats-section,
.action-section,
.loading-section,
.tips-section {
padding: 16px;
margin-bottom: 16px;
}
}
}

80
src/pages/index/index.tsx
View File

@@ -5,8 +5,9 @@ import Taro from '@tarojs/taro'
// 导入API服务
import demoApi from '../../services/demoApi'
import commonApi from '../../services/commonApi'
import {
useUserStats,
import PublishMenu from '../../components/PublishMenu'
import {
useUserStats,
useUserActions
} from '../../store/userStore'
import './index.scss'
@@ -15,7 +16,7 @@ function Index() {
// 使用Zustand store
const userStats = useUserStats()
const { incrementRequestCount, resetUserStats } = useUserActions()
// 本地状态管理
const [loading, setLoading] = useState(false)
const [userProfile, setUserProfile] = useState<any>(null)
@@ -43,19 +44,19 @@ function Index() {
const handleGetUserProfile = async () => {
console.log('获取用户信息...');
setLoading(true)
try {
const response = await demoApi.getUserProfile()
if (response.success) {
setUserProfile(response.data)
incrementRequestCount()
Taro.showToast({
title: '获取用户信息成功',
icon: 'success'
})
console.log('用户信息:', response.data)
}
} catch (error) {
@@ -64,7 +65,7 @@ function Index() {
title: '获取失败，使用模拟数据',
icon: 'none'
})
// 模拟数据
setUserProfile({
id: '123',
@@ -83,7 +84,7 @@ function Index() {
const handleSubmitStats = async () => {
console.log('提交统计数据...');
setLoading(true)
try {
const response = await commonApi.submitForm('userStats', [
{
@@ -97,21 +98,21 @@ function Index() {
}
}
])
if (response.success) {
incrementRequestCount()
Taro.showToast({
title: '统计数据提交成功',
icon: 'success'
})
console.log('提交结果:', response.data)
}
} catch (error) {
console.error('提交统计数据失败:', error)
incrementRequestCount() // 即使失败也计数，用于演示
Taro.showToast({
title: '网络模拟提交成功',
icon: 'success'
@@ -125,7 +126,7 @@ function Index() {
const handleSubmitFeedback = async () => {
console.log('提交用户反馈...');
setLoading(true)
try {
const response = await demoApi.submitFeedback({
matchId: 'demo_match_' + Date.now(),
@@ -134,21 +135,21 @@ function Index() {
aspects: ['场地环境', '服务质量', '价格合理'],
comments: `用户反馈 - 请求次数: ${userStats.requestCount + 1}，体验良好！`
})
if (response.success) {
incrementRequestCount()
Taro.showToast({
title: '反馈提交成功',
icon: 'success'
})
console.log('反馈结果:', response.data)
}
} catch (error) {
console.error('提交反馈失败:', error)
incrementRequestCount() // 即使失败也计数，用于演示
Taro.showToast({
title: '网络模拟提交成功',
icon: 'success'
@@ -163,7 +164,7 @@ function Index() {
console.log('重置所有数据...');
resetUserStats()
setUserProfile(null)
Taro.showToast({
title: '数据已重置',
icon: 'success'
@@ -181,9 +182,9 @@ function Index() {
{/* 用户信息卡片 */}
<View className='user-card'>
<View className='user-header'>
<Avatar
size="large"
src={userProfile?.avatar || ''}
<Avatar
size="large"
src={userProfile?.avatar || ''}
style={{ backgroundColor: '#fa2c19' }}
>
{userProfile?.nickname?.charAt(0) || 'U'}
@@ -205,17 +206,17 @@ function Index() {
{/* 统计数据 */}
<View className='stats-section'>
<Text className='section-title'>📊 API 请求统计</Text>
<Cell title="API 请求次数" extra={userStats.requestCount} />
<Cell title="创建的比赛" extra={userStats.matchesCreated} />
<Cell title="参加的比赛" extra={userStats.matchesJoined} />
<Cell
title="最后活跃时间"
<Cell
title="最后活跃时间"
extra={new Date(userStats.lastActiveTime).toLocaleTimeString()}
/>
{interests.length > 0 && (
<Cell
title="推荐兴趣"
<Cell
title="推荐兴趣"
extra={interests.slice(0, 2).join(', ')}
/>
)}
@@ -224,10 +225,10 @@ function Index() {
{/* API 请求按钮区域 */}
<View className='action-section'>
<Text className='section-title'>🚀 API 请求功能</Text>
<View className='button-group'>
<Button
type="primary"
<Button
type="primary"
loading={loading}
onClick={handleGetUserProfile}
disabled={loading}
@@ -236,8 +237,8 @@ function Index() {
{loading ? '请求中...' : '获取用户信息'}
</Button>
<Button
type="default"
<Button
type="default"
loading={loading}
onClick={handleSubmitStats}
disabled={loading}
@@ -246,8 +247,8 @@ function Index() {
{loading ? '提交中...' : '提交统计数据'}
</Button>
<Button
type="default"
<Button
type="default"
loading={loading}
onClick={handleSubmitFeedback}
disabled={loading}
@@ -256,8 +257,8 @@ function Index() {
{loading ? '提交中...' : '提交用户反馈'}
</Button>
<Button
type="warn"
<Button
type="warn"
onClick={handleResetAllData}
disabled={loading}
className="custom-button warning-btn"
@@ -286,6 +287,13 @@ function Index() {
<Text className='tip-item'>• 请求失败时会自动使用模拟数据</Text>
</View>
</View>
<PublishMenu
onPersonalPublish={() => {
Taro.navigateTo({
url: '/pages/publishBall/index'
})
}}
/>
</View>
)
}

19
src/pages/list/FilterPopup.tsx
View File

@@ -12,6 +12,8 @@ import { FilterPopupProps } from "../../../types/list/types";
import CourtType from "@/components/CourtType";
// 玩法
import GamePlayType from "@/components/GamePlayType";
import { useDictionaryActions } from "@/store/dictionaryStore";
import { useMemo } from "react";
const FilterPopup = (props: FilterPopupProps) => {
const {
@@ -27,7 +29,22 @@ const FilterPopup = (props: FilterPopupProps) => {
} = props;
const store = useListStore() || {};
const { timeBubbleData, locationOptions, gamePlayOptions } = store;
const { getDictionaryValue } = useDictionaryActions() || {};
const { timeBubbleData } = store;
const handleOptions = (dictionaryValue: []) => {
return dictionaryValue?.map((item) => ({ label: item, value: item })) || [];
};
const courtType = getDictionaryValue("court_type") || [];
const locationOptions = useMemo(() => {
return courtType ? handleOptions(courtType) : [];
}, [courtType]);
const gamePlay = getDictionaryValue("game_play") || [];
const gamePlayOptions = useMemo(() => {
return gamePlay ? handleOptions(gamePlay) : [];
}, [gamePlay]);
const handleFilterChange = (name, value) => {
onChange({ [name]: value });

17
src/pages/list/index.module.scss
View File

@@ -1,22 +1,25 @@
.listPage {
background-color: #fafafa;
background-color: #fefefe;
.listTopSearchWrapper {
padding: 0 15px;
// position: sticky;
// background: #fefefe;
// z-index: 999;
}
// .isScroll {
// border-bottom: 0.5px solid #0000000F;
// }
.listTopFilterWrapper {
display: flex;
align-items: center;
margin-top: 5px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
gap: 5px;
}
.listContentWrapper {
padding: 0 5px;
}
.menuFilter {
padding: 0;
}

196
src/pages/list/index.tsx
View File

@@ -1,33 +1,34 @@
import ListCard from "../../components/ListCard";
import ListCardSkeleton from "../../components/ListCardSkeleton";
import List from "../../components/List";
import Menu from "../../components/Menu";
import CityFilter from "../../components/CityFilter";
import SearchBar from "../../components/SearchBar";
import FilterPopup from "./FilterPopup";
import styles from "./index.module.scss";
import { useEffect } from "react";
import Taro, { useReachBottom } from "@tarojs/taro";
import Taro, { usePageScroll, useReachBottom } from "@tarojs/taro";
import { useListStore } from "@/store/listStore";
import {useGlobalState} from '@/store/global'
import { useGlobalState } from "@/store/global";
import { View } from "@tarojs/components";
import CustomerNavBar from "@/components/CustomNavbar";
import CustomerNavBar from "@/container/listCustomNavbar";
import InputCustomerBar from "@/container/inputCustomerNavbar";
import GuideBar from "@/components/GuideBar";
import ListContainer from "@/container/listContainer";
import DistanceQuickFilter from "@/components/DistanceQuickFilter";
import img from "@/config/images";
const ListPage = () => {
// 从 store 获取数据和方法
const store = useListStore() || {};
const {statusNavbarHeightInfo } = useGlobalState() || {}
// console.log("===store===", store);
// console.log('===statusNavbarHeightInfo', statusNavbarHeightInfo)
const { statusNavbarHeightInfo } = useGlobalState() || {};
const { totalHeight } = statusNavbarHeightInfo || {};
const {
isShowFilterPopup,
error,
matches,
recommendList,
loading,
fetchMatches,
refreshMatches,
clearError,
updateState,
filterCount,
updateFilterOptions, // 更新筛选条件
@@ -36,8 +37,22 @@ const ListPage = () => {
distanceData,
quickFilterData,
distanceQuickFilter,
isScrollTop,
searchValue,
isShowInputCustomerNavBar,
} = store;
usePageScroll((res) => {
// if (res?.scrollTop > 0 && !isScrollTop) {
// updateState({ isScrollTop: true });
// }
if (res?.scrollTop >= totalHeight && !isScrollTop) {
updateState({ isShowInputCustomerNavBar: true });
} else {
updateState({ isShowInputCustomerNavBar: false });
}
});
useReachBottom(() => {
console.log("触底了");
// 调用 store 的加载更多方法
@@ -47,7 +62,7 @@ const ListPage = () => {
useEffect(() => {
// 页面加载时获取数据
fetchMatches();
}, [fetchMatches]);
}, []);
// 下拉刷新处理函数 - 使用Taro生命周期钩子
Taro.usePullDownRefresh(() => {
@@ -78,78 +93,6 @@ const ListPage = () => {
});
});
// 错误处理
useEffect(() => {
if (error) {
Taro.showToast({
title: error,
icon: "error",
duration: 2000,
});
// 3秒后自动清除错误
setTimeout(() => {
clearError();
}, 3000);
}
}, [error, clearError]);
// 加载状态显示
if (loading && matches.length === 0) {
return (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "200px",
fontSize: "14px",
color: "#999",
}}
>
<div style={{ marginBottom: "10px" }}>加载中...</div>
<div style={{ fontSize: "12px", color: "#ccc" }}>
正在获取网球比赛数据
</div>
</div>
);
}
// 错误状态显示
if (error && matches.length === 0) {
return (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "200px",
fontSize: "14px",
color: "#999",
}}
>
<div style={{ marginBottom: "10px" }}>加载失败</div>
<div style={{ marginBottom: "15px", fontSize: "12px", color: "#ccc" }}>
{error}
</div>
<button
onClick={() => fetchMatches()}
style={{
padding: "8px 16px",
fontSize: "12px",
color: "#fff",
backgroundColor: "#007aff",
border: "none",
borderRadius: "4px",
}}
>
重试
</button>
</div>
);
}
const toggleShowPopup = () => {
updateState({ isShowFilterPopup: !isShowFilterPopup });
};
@@ -174,21 +117,40 @@ const ListPage = () => {
});
};
const handleSearchClick = () => {
Taro.navigateTo({
url: "/pages/search/index",
});
};
return (
<>
<CustomerNavBar />
{!isShowInputCustomerNavBar ? (
<CustomerNavBar />
) : (
<InputCustomerBar icon={img.ICON_LIST_INPUT_LOGO} />
)}
<View className={styles.listPage}>
<View className={styles.listTopSearchWrapper}>
<View
className={`${styles.listTopSearchWrapper} ${
isScrollTop ? styles.isScroll : ""
}`}
// style={{
// top: statusNavbarHeightInfo?.totalHeight,
// }}
>
<SearchBar
handleFilterIcon={toggleShowPopup}
isSelect={filterCount > 0}
filterCount={filterCount}
onChange={handleSearchChange}
value={searchValue}
onInputClick={handleSearchClick}
/>
{/* 综合筛选 */}
{isShowFilterPopup && (
<div>
<View>
<FilterPopup
loading={loading}
onCancel={toggleShowPopup}
@@ -200,47 +162,33 @@ const ListPage = () => {
onClose={toggleShowPopup}
statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
/>
</div>
</View>
)}
{/* 筛选 */}
<div className={styles.listTopFilterWrapper}>
{/* 全城筛选 */}
<CityFilter
options={distanceData}
value={distanceQuickFilter?.distance}
wrapperClassName={styles.menuFilter}
onChange={handleDistanceOrQuickChange}
name="distance"
/>
{/* 智能排序 */}
<Menu
options={quickFilterData}
value={distanceQuickFilter?.quick}
onChange={handleDistanceOrQuickChange}
wrapperClassName={styles.menuFilter}
name="quick"
/>
</div>
</View>
{/* 筛选 */}
<View className={styles.listTopFilterWrapper}>
<DistanceQuickFilter
cityOptions={distanceData}
quickOptions={quickFilterData}
onChange={handleDistanceOrQuickChange}
cityName="distance"
quickName="quick"
cityValue={distanceQuickFilter?.distance}
quickValue={distanceQuickFilter?.quick}
/>
</View>
<View className={styles.listContentWrapper}>
{/* 列表内容 */}
<List>
{!loading &&
matches.length > 0 &&
matches.map((match, index) => (
<ListCard key={match.id || index} {...match} />
))}
</List>
{/* 空状态 */}
{loading &&
matches.length === 0 &&
new Array(10).fill(0).map(() => {
return <ListCardSkeleton />;
})}
</View>
{/* 列表内容 */}
<ListContainer
data={matches}
recommendList={recommendList}
loading={loading}
error={error}
reload={refreshMatches}
/>
</View>
<GuideBar currentPage="list" />
</>
);
};

4
src/pages/login/index/index.tsx
View File

@@ -110,7 +110,7 @@ const LoginPage: React.FC = () => {
<View className="background_image">
<Image
className="bg_img"
src={require('../../../static/login/login_bg.png')}
src="http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/2e00dea1-8723-42fe-ae42-84fe38e9ac3f.png"
mode="aspectFill"
/>
<View className="bg_overlay"></View>
@@ -229,7 +229,7 @@ const LoginPage: React.FC = () => {
{agree_terms ? '已同意' : '同意并继续'}
</Button>
</View>
</View>
)}

14
src/pages/login/verification/index.tsx
View File

@@ -31,15 +31,15 @@ const VerificationPage: React.FC = () => {
try {
console.log('开始发送验证码，手机号:', phone);
// 调用发送短信接口
const result = await send_sms_code(phone);
console.log('发送验证码结果:', result);
if (result.success) {
console.log('验证码发送成功，开始倒计时');
Taro.showToast({
title: '验证码已发送',
icon: 'success',
@@ -49,7 +49,7 @@ const VerificationPage: React.FC = () => {
// 开始倒计时
setCanSendCode(false);
setCountdown(60);
console.log('设置状态: can_send_code = false, countdown = 60');
// 发送验证码成功后，让验证码输入框获得焦点并调用系统键盘
@@ -81,7 +81,7 @@ const VerificationPage: React.FC = () => {
// 倒计时效果
useEffect(() => {
console.log('倒计时 useEffect 触发，countdown:', countdown);
if (countdown > 0) {
const timer = setTimeout(() => {
console.log('倒计时减少，从', countdown, '到', countdown - 1);
@@ -124,7 +124,7 @@ const VerificationPage: React.FC = () => {
setTimeout(() => {
Taro.redirectTo({
url: '/pages/index/index'
url: '/pages/list/index'
});
}, 200);
} else {
@@ -257,4 +257,4 @@ const VerificationPage: React.FC = () => {
);
};
export default VerificationPage;
export default VerificationPage;

5
src/pages/mapDisplay/index.tsx
View File

@@ -1,5 +0,0 @@
// import MapPlugin from "src/components/MapDisplay/mapPlugin";
import MapDisplay from "src/components/MapDisplay";
export default function MapDisplayPage() {
return <MapDisplay />
}

5
src/pages/message/index.config.ts Normal file
View File

@@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '消息',
// navigationBarBackgroundColor: '#FAFAFA',
navigationStyle: 'custom',
})

80
src/pages/message/index.scss Normal file
View File

@@ -0,0 +1,80 @@
@use '~@/scss/images.scss' as img;
$--Backgrounds-Primary: '#fff';
.message-container {
width: 100%;
height: 100vh;
background: radial-gradient(227.15% 100% at 50% 0%, #EEFFDC 0%, #FFF 36.58%), var(--Backgrounds-Primary, #FFF);
// padding-top: 100px;
box-sizing: border-box;
.custom-navbar {
height: 56px; /* 通常与原生导航栏高度一致 */
display: flex;
align-items: center;
justify-content: flex-start;
// background-color: #fff;
color: #000;
padding-top: 44px; /* 适配状态栏 */
position: sticky;
top: 0;
z-index: 100;
.message-navigator {
position: relative;
left: 15px;
top: -2px;
width: 80px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
.message-navigator-avatar {
width: 32px;
height: 32px;
}
.message-navigator-title {
font-size: 16px;
font-weight: 500;
color: #000;
}
}
}
.message-content {
.message-content-list {
display: flex;
flex-direction: column;
padding: 10px 15px;
box-sizing: border-box;
gap: 12px;
.message-item {
padding: 10px;
// border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
.message-item-title {
font-size: 16px;
font-weight: 500;
color: #000;
}
.message-item-content {
font-size: 14px;
color: #666;
}
}
}
}

43
src/pages/message/index.tsx Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import { Avatar } from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import GuideBar from '@/components/GuideBar'
// import img from '@/config/images'
import './index.scss'
const Personal = () => {
const messageList = Array(10).fill(0).map((_, index) => ({
id: index + 1,
title: `消息${index + 1}消息${index + 1}消息${index + 1}消息${index + 1}`,
content: Array(Math.round(Math.random() * 40)).fill(0).map((_, index) => `消息${index + 1}`).join(''),
}))
return (
<View className='message-container'>
<View className='custom-navbar'>
<View className='message-navigator'>
<Avatar className='message-navigator-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
<Text className='message-navigator-title'>消息</Text>
</View>
</View>
<ScrollView scrollY className='message-content'>
<View className='message-content-list'>
{messageList.map((item) => (
<View className='message-item' key={item.id}>
<View className='message-item-title'>
<Text>{item.title}</Text>
</View>
<View className='message-item-content'>
<Text>{item.content}</Text>
</View>
</View>
))}
</View>
</ScrollView>
<GuideBar currentPage='message' />
</View>
)
}
export default Personal

4
src/pages/orderCheck/index.config.ts Normal file
View File

@@ -0,0 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '订单确认',
navigationBarBackgroundColor: '#FAFAFA'
})

1
src/pages/orderCheck/index.scss Normal file
View File

@@ -0,0 +1 @@
@use '~@/scss/images.scss' as img;

31
src/pages/orderCheck/index.tsx Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react'
import { View, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { delay } from '@/utils'
const OrderCheck = () => {
const handlePay = async () => {
Taro.showLoading({
title: '支付中...',
mask: true
})
await delay(2000)
Taro.hideLoading()
Taro.showToast({
title: '支付成功',
icon: 'success'
})
await delay(1000)
Taro.navigateBack({
delta: 1
})
}
return (
<View>
<Text>OrderCheck</Text>
<Button onClick={handlePay}>支付</Button>
</View>
)
}
export default OrderCheck

5
src/pages/personal/index.config.ts Normal file
View File

@@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '个人中心',
// navigationBarBackgroundColor: '#FAFAFA',
navigationStyle: 'custom',
})

35
src/pages/personal/index.scss Normal file
View File

@@ -0,0 +1,35 @@
@use '~@/scss/images.scss' as img;
$--Backgrounds-Primary: '#fff';
.personal-container {
width: 100%;
height: 100vh;
background: radial-gradient(227.15% 100% at 50% 0%, #EEFFDC 0%, #FFF 36.58%), var(--Backgrounds-Primary, #FFF);
padding-top: 100px;
box-sizing: border-box;
.personal-navigator {
position: fixed;
left: 10px;
top: 54px;
width: 32px;
height: 32px;
.personal-navigator-back {
width: 100%;
height: 100%;
}
}
.personal-content {
width: 100%;
height: calc(100vh - 300px);
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
font-weight: 500;
color: #000;
}
}

31
src/pages/personal/index.tsx Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import GuideBar from '@/components/GuideBar'
import img from '@/config/images'
import './index.scss'
const Personal = () => {
const { params } = useRouter()
const { id } = params
const handleBack = () => {
Taro.navigateBack()
}
return (
<View className='personal-container'>
{id && (
<View className='personal-navigator' onClick={handleBack}>
<Image className='personal-navigator-back' src={img.ICON_NAVIGATOR_BACK} />
</View>
)}
<View className='personal-content'>
<Text>Personal</Text>
</View>
<GuideBar currentPage='personal' />
</View>
)
}
export default Personal

55
src/pages/publishBall/components/FormBasicInfo/FormBasicInfo.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useCallback, useEffect } from 'react'
import { View, Text, Input, Image, Picker } from '@tarojs/components'
import { View, Text, Input, Image } from '@tarojs/components'
import PopupGameplay from '../PopupGameplay'
import img from '@/config/images';
import { FormFieldConfig } from '@/config/formSchema/publishBallFormSchema';
@@ -65,10 +65,52 @@ const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
})
setShowStadiumSelector(false)
}
const handleChange = useCallback((key: string, costValue: any) => {
// 价格输入限制：¥0.00–9999.99
console.log(costValue, 'valuevalue');
const handleChange = useCallback((key: string, value: any) => {
onChange({...value, [key]: value})
}, [onChange])
if (key === children[0]?.prop) {
// 允许清空
if (costValue === '') {
onChange({...value, [key]: ''});
return;
}
// 只允许数字和一个小数点
const filteredValue = costValue.replace(/[^\d.]/g, '');
// 确保只有一个小数点
const parts = filteredValue.split('.');
if (parts.length > 2) {
return; // 不更新，保持原值
}
// 限制小数点后最多2位
if (parts.length === 2 && parts[1].length > 2) {
return; // 不更新，保持原值
}
const numValue = parseFloat(filteredValue);
if (isNaN(numValue)) {
onChange({...value, [key]: ''});
return;
}
if (numValue < 0) {
onChange({...value, [key]: '0'});
return;
}
if (numValue > 9999.99) {
onChange({...value, [key]: '9999.99'});
return;
}
// 使用过滤后的值
onChange({...value, [key]: filteredValue});
return;
}
onChange({...value, [key]: costValue})
}, [onChange, children])
useEffect(() => {
if (children.length > 2) {
@@ -76,6 +118,10 @@ const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
setPlayGame(options)
}
}, [children])
useEffect(() => {
console.log(value, 'valuevalue');
}, [value])
const renderChildren = () => {
return children.map((child: any, index: number) => {
return <View className='form-item'>
@@ -91,6 +137,7 @@ const FormBasicInfo: React.FC<FormBasicInfoProps> = ({
placeholder='请输入'
placeholderClass='title-placeholder'
type='digit'
maxlength={7}
value={value[child.prop]}
onInput={(e) => handleChange(child.prop, e.detail.value)}
/>

13
src/pages/publishBall/components/SelectStadium/SelectStadium.tsx
View File

@@ -13,7 +13,7 @@ export interface Stadium {
id?: string
name: string
address?: string
istance?: string
distance_km?: number | null | undefined
longitude?: number
latitude?: number
}
@@ -78,6 +78,15 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
setShowDetail(true)
}
const calculateDistance = (stadium: Stadium) => {
const distance_km = stadium.distance_km
if (!distance_km) return ''
if (distance_km && distance_km > 1) {
return distance_km.toFixed(1) + 'km'
}
return (distance_km * 1000).toFixed(0) + 'm'
}
// 处理搜索框输入
const handleSearchInput = (e: any) => {
@@ -253,7 +262,7 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
handleItemLocation(stadium)
}}
>
{stadium.istance} ·
{calculateDistance(stadium)} ·
</Text>
<Text
className='stadium-address-text'

16
src/pages/publishBall/components/SelectStadium/StadiumDetail.tsx
View File

@@ -14,7 +14,7 @@ export interface Stadium {
address?: string
longitude?: number
latitude?: number
istance?: string
distance_km?: number | null
court_type?: string
court_surface?: string
description?: string
@@ -100,7 +100,7 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
address: stadium.address,
latitude: stadium.longitude,
longitude: stadium.latitude,
istance: stadium.istance,
istance: stadium.distance_km,
court_type: court_type[0] || '',
court_surface: court_surface[0] || '',
additionalInfo: '',
@@ -117,6 +117,13 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
setFormData: (data: any) => setFormData(data)
}), [formData, stadium])
const calculateDistance = (distance_km: number | null) => {
if (!distance_km) return ''
if (distance_km && distance_km > 1) {
return distance_km.toFixed(1) + 'km'
}
return (distance_km * 1000).toFixed(0) + 'm'
}
const handleMapLocation = () => {
@@ -128,7 +135,8 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
name: res.name,
address: res.address,
latitude: res.longitude,
longitude: res.latitude
longitude: res.latitude,
istance: null
})
},
fail: (err) => {
@@ -166,7 +174,7 @@ const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
<View className='stadium-item-right'>
<View className='stadium-name'>{formData.name}</View>
<View className='stadium-address'>
<Text>{formData.istance} · </Text>
<Text>{calculateDistance(formData.istance || null)} · </Text>
<Text>{formData.address}</Text>
<Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
</View>

22
src/pages/publishBall/components/WechatSwitch/WechatSwitch.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import React, { useCallback, useState } from 'react'
import { View, Text, Input } from '@tarojs/components'
import { Checkbox } from '@nutui/nutui-react-taro'
import styles from './index.module.scss'
interface FormSwitchProps {
@@ -10,7 +10,14 @@ interface FormSwitchProps {
}
const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, wechatId }) => {
const [editWechat, setEditWechat] = useState(false)
const editWechatId = () => {
}
const setWechatId = useCallback((e: any) => {
const value = e.target.value
onChange(value)
}, [])
return (
<>
<View className={styles['wechat-contact-section']}>
@@ -28,7 +35,14 @@ const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, wech
wechatId && (
<View className={styles['wechat-contact-id']}>
<Text className={styles['wechat-contact-text']}>微信号: {wechatId.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')}</Text>
<View className={styles['wechat-contact-edit']}>修改</View>
<View className={styles['wechat-contact-edit']} onClick={editWechatId}>修改</View>
</View>
)
}
{
editWechat && (
<View className={styles['wechat-contact-edit']}>
<Input value={wechatId} onInput={setWechatId} />
</View>
)
}

86
src/pages/publishBall/index.module.scss
View File

@@ -25,7 +25,8 @@
align-items: center;
gap: 4px;
color: rgba(60, 60, 67, 0.50);
font-size: 14px;
&-icon{
width: 16px;
height: 16px;
@@ -183,6 +184,9 @@
border: 1px solid rgba(0, 0, 0, 0.06);
background: #000;
box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.10);
&.submit-btn-disabled {
color: rgba(255, 255, 255, 0.30);
}
}
.submit-tip {
@@ -191,12 +195,21 @@
color: #999;
line-height: 1.4;
display: flex;
justify-content: center;
padding: 12px 0;
justify-content: center;
padding: 12px 0;
align-items: center;
.link {
color: #007AFF;
}
}
.submit-checkbox {
width: 11px;
height: 11px;
:global(.nut-icon-Checked){
background: rgba(22, 24, 35, 0.75)!important;
}
}
}
// 加载状态遮罩保持原样
@@ -230,74 +243,7 @@
}
}
// 删除确认弹窗
.delete-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
&__content {
background: white;
border-radius: 16px;
padding: 24px;
margin: 0 32px;
max-width: 320px;
width: 100%;
text-align: center;
}
&__title {
display: block;
font-size: 18px;
font-weight: 600;
color: theme.$primary-color;
margin-bottom: 8px;
}
&__desc {
display: block;
font-size: 14px;
color: rgba(60, 60, 67, 0.6);
margin-bottom: 24px;
}
&__actions {
display: flex;
gap: 12px;
.delete-modal__btn {
flex: 1;
height: 44px;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.2s ease;
&:first-child {
background: rgba(0, 0, 0, 0.04);
color: rgba(60, 60, 67, 0.8);
}
&:last-child {
background: #FF3B30;
color: white;
}
&:hover {
opacity: 0.8;
}
}
}
}
}
// 旋转动画

Some files were not shown because too many files have changed in this diff Show More