sai/swimmingUni
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面修改

Browse Source
This commit is contained in:
Ls
2026-03-28 08:55:48 +08:00
parent deaf39e943
commit b8c05d23ae
48 changed files with 9948 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
CLAUDE.md Normal file
View File

@@ -0,0 +1,88 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
This is a uni-app Vue 3 + TypeScript swimming timer/training application called "智能秒表" (Smart Stopwatch). It supports multiple platforms including H5, WeChat mini-program, and native apps.
## Development Commands
```bash
# Development
npm run dev:h5 # Run H5 development server
npm run dev:mp-weixin # Run WeChat mini-program development
npm run dev:app # Run app development
# Build
npm run build:h5 # Build for H5
npm run build:mp-weixin # Build for WeChat mini-program
npm run build:app # Build for app
# Type checking
npm run type-check # Run TypeScript type checking
```
## Architecture
### Directory Structure
```
src/
├── pages/ # Main pages (index/, user/)
├── pages/userFunc/ # Sub-package for user features (timing, segmentation, project)
├── components/ # Reusable Vue components
├── Service/ # API service layer
│ ├── Service.ts # Main service class (extends BaseConfig)
│ └── BaseConfig.ts # Base configuration
├── common/
│ ├── Domain/ # TypeScript interfaces (Project, StudentRecord, TimingState)
│ └── Unit/ # Utility classes (HttpRequest, StoreAssist, UploadAssist)
├── static/ # Static assets
├── types/ # Additional TypeScript types
└── colorui/ # ColorUI CSS framework
```
### Service Layer Pattern
- `Service` class extends `BaseConfig` and provides:
- API requests: `Service.Request(url, method, data)` - handles 401 token expiration automatically
- Navigation: `Service.GoPage()`, `Service.GoPageTab()`, `Service.GoPageBack()`, `Service.GoPageDelse()`
- Storage: `Service.SetStorageCache()`, `Service.GetStorageCache()`, `Service.DelStorageCache()`
- Messages: `Service.Msg()`, `Service.Alert()`
- Loading: `Service.LoadIng()`, `Service.LoadClose()`
- File uploads: `Service.UpLoadMedia()`, `Service.uploadH5()`
### Pages Configuration
- Pages registered in `src/pages.json`
- User features in `subPackages` under `pages/userFunc/`
- Tab bar with 2 tabs: "项目" (index) and "我的" (user)
- Navigation style is custom for some pages (e.g., swimim page)
### Key Domain Types
- `Project`: Swimming project data (id, name, createdAt)
- `StudentRecord`: Student timing records
- `TimingState`: Timer state management
- `ResultData`: Standard API response wrapper
## Code Style
- Use tabs for indentation
- Single quotes for strings
- PascalCase for components and classes
- camelCase for variables and functions
- kebab-case for CSS classes
- Use `@/` path alias for imports from src/ directory
- Import Vue composition API from 'vue', uni-app hooks from `@dcloudio/uni-app`
## UI Framework
- **uview-plus** as primary UI component library (configured with easycom)
- **ColorUI** for CSS framework and icons
- Component prefix: `u-` (e.g., `<u-icon>`, `<u-button>`)
- Use `rpx` units for responsive design
## Important Notes
- Automatic 401 token handling: API requests through `Service.Request()` redirect to login on token expiration
- Clean up intervals in `onUnmounted()` lifecycle hook
- No test framework currently configured
- Platform-specific APIs prefixed with `uni.` (uni-app framework)

15
src/Service/Service.ts
View File

@@ -185,6 +185,21 @@ export class Service extends BaseConfig {
})
}
static Confirm(msg : string, cb ?: any) {
uni.showModal({
title: '确认',
content: msg,
showCancel: true,
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
cb && cb();
}
}
})
}
static LoadIng(text : any) : void {
uni.showLoading({
title: text,

136
src/pages.json
View File

@@ -26,69 +26,95 @@
"subPackages": [{
"root": "pages/userFunc",
"pages": [{
"path" : "setCourse",
"style" :
"path": "setCourse",
"style": {
"navigationBarTitleText": "新增项目"
}
},
{
"navigationBarTitleText" : "新增项目"
}
},
{
"path" : "swiming",
"style" :
"path": "swiming",
"style": {
"navigationBarTitleText": "游泳项目",
"navigationStyle": "custom"
}
},
{
"navigationBarTitleText" : "游泳项目",
"navigationStyle": "custom"
}
},
{
"path" : "segmentation",
"style" :
"path": "segmentation",
"style": {
"navigationBarTitleText": "分段"
}
},
{
"navigationBarTitleText" : "分段"
}
},
{
"path" : "student",
"style" :
"path": "student",
"style": {
"navigationBarTitleText": "学员管理"
}
},
{
"navigationBarTitleText" : "学员管理"
}
},
{
"path" : "analyze",
"style" :
"path": "analyze",
"style": {
"navigationBarTitleText": "数据分析"
}
},
{
"navigationBarTitleText" : "数据分析"
}
},
{
"path" : "dataAnalyze",
"style" :
"path": "dataAnalyze",
"style": {
"navigationBarTitleText": "数据分析图"
}
},
{
"navigationBarTitleText" : "数据分析图"
}
},
{
"path" : "set",
"style" :
"path": "set",
"style": {
"navigationBarTitleText": "设置"
}
},
{
"navigationBarTitleText" : "设置"
}
},
{
"path" : "projectList",
"style" :
"path": "projectList",
"style": {
"navigationBarTitleText": "项目列表"
}
},
{
"navigationBarTitleText" : "项目列表"
"path": "project",
"style": {
"navigationBarTitleText": "包干"
}
}
},
{
"path" : "project",
"style" :
]
}, {
"root": "pages/dataAnalyze",
"pages": [
{
"navigationBarTitleText" : "包干"
"path": "baoganAnalyze",
"style": {
"navigationBarTitleText": "包干数据"
}
},
{
"path": "timingAnalze",
"style": {
"navigationBarTitleText": "计时数据"
}
},
{
"path": "Curve",
"style": {
"navigationBarTitleText": "曲线走势图"
}
},
{
"path": "paragraphAnalyze",
"style": {
"navigationBarTitleText": "分段数据"
}
},
{
"path": "grades",
"style": {
"navigationBarTitleText": "成绩排名"
}
}
}]
]
}],
"globalStyle": {
"navigationBarTextStyle": "black",
@@ -104,12 +130,12 @@
"pagePath": "pages/index/index",
"iconPath": "static/tab/01.png",
"selectedIconPath": "static/tab/02.png",
"text": "智能秒表"
"text": "项目"
},
{
"pagePath": "pages/index/user",
"iconPath": "static/tab/01.png",
"selectedIconPath": "static/tab/02.png",
"iconPath": "static/tab/03.png",
"selectedIconPath": "static/tab/04.png",
"text": "我的"
}
]

710
src/pages/dataAnalyze/Curve.vue Normal file
View File

@@ -0,0 +1,710 @@
<template>
<view class="curve-container">
<!-- 页面标题区域 -->
<view class="header-section">
<view class="header-title">
<text class="title">曲线走势图</text>
<text class="subtitle">学员成绩趋势变化分析</text>
</view>
</view>
<!-- ==================== 项目选择区域 ==================== -->
<view class="project-select-section">
<view class="section-header">
<text class="section-title">选择项目</text>
</view>
<!-- 项目选择器 -->
<picker mode="selector" :range="projectOptions" range-key="name" :value="selectedProjectIndex" @change="handleProjectChange">
<view class="picker-wrapper">
<text class="picker-text">{{ selectedProjectName }}</text>
<u-icon name="arrow-down" size="18" color="#999"></u-icon>
</view>
</picker>
</view>
<!-- ==================== 学生选择区域 ==================== -->
<!-- 仅在选择项目后显示 -->
<view class="student-select-section" v-if="selectedProjectId && projectStudents.length > 0">
<view class="section-header">
<text class="section-title">选择学员（最多3人）</text>
<text class="select-count">已选：{{ selectedStudentIds.length }}/3</text>
</view>
<!-- 学生列表 -->
<view class="student-list">
<view v-for="student in projectStudents" :key="student.id" :class="['student-item', { 'selected': selectedStudentIds.includes(student.id) }]" @click="toggleStudent(student.id)">
<!-- 学生头像（使用首字母作为头像） -->
<view class="student-avatar">
<text class="avatar-text">{{ student.name.charAt(0) }}</text>
</view>
<!-- 学生姓名 -->
<text class="student-name">{{ student.name }}</text>
<!-- 选择状态图标 -->
<view class="check-icon" v-if="selectedStudentIds.includes(student.id)">
<u-icon name="checkmark" size="16" color="#fff"></u-icon>
</view>
</view>
</view>
</view>
<!-- ==================== 空状态提示 ==================== -->
<!-- 未选择项目时的提示 -->
<view class="hint-state" v-if="!selectedProjectId">
<view class="hint-icon">
<u-icon name="list" size="80" color="#52c41a"></u-icon>
</view>
<text class="hint-text">请先选择项目</text>
</view>
<!-- 无学生时的提示 -->
<view class="hint-state" v-else-if="projectStudents.length === 0">
<view class="hint-icon">
<u-icon name="account" size="80" color="#52c41a"></u-icon>
</view>
<text class="hint-text">该项目暂无学员数据</text>
</view>
<!-- ==================== 图表展示区域 ==================== -->
<!-- 仅在选择了至少一名学生后显示 -->
<view class="chart-section" v-if="selectedStudentIds.length > 0">
<!-- 数据统计卡片 -->
<view class="stats-card">
<view class="stat-item">
<text class="stat-label">选中项目</text>
<text class="stat-value">{{ selectedProjectName }}</text>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-label">对比学员</text>
<text class="stat-value">{{ selectedStudentIds.length }}人</text>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-label">训练次数</text>
<text class="stat-value">{{ maxTrainingCount }}次</text>
</view>
</view>
<!-- 折线图卡片 -->
<view class="chart-card">
<view class="chart-header">
<text class="chart-title">成绩趋势对比</text>
<text class="chart-desc">历史训练成绩变化曲线</text>
</view>
<!-- 折线图容器 -->
<view class="chart-box">
<qiun-data-charts type="line" :opts="lineOpts" :chartData="lineChartData" :ontouch="true" />
</view>
</view>
<!-- 图例说明 -->
<view class="legend-section">
<text class="legend-title">图例说明</text>
<view class="legend-list">
<view v-for="(student, index) in selectedStudents" :key="student.id" class="legend-item">
<view class="legend-color" :style="{ backgroundColor: chartColors[index] }"></view>
<text class="legend-name">{{ student.name }}</text>
<text class="legend-desc">（{{ getStudentBestTime(student.id) }}s 最佳）</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app"
import { Service } from '@/Service/Service'
import { ref, computed, watch } from 'vue'
// ==================== 常量定义 ====================
// 最大选择学生数量限制
const MAX_SELECTED_STUDENTS = 3
// 图表颜色配置（最多支持3种颜色）
const chartColors = ['#52c41a', '#1890ff', '#faad14']
// ==================== 响应式数据 - 项目相关 ====================
// 项目列表数据
const projectList = ref([
{ id: '1', name: '100米自由泳' },
{ id: '2', name: '50米自由泳' },
{ id: '3', name: '200米由泳' },
{ id: '4', name: '100米蛙泳' }
])
// 项目选择器选项（用于 picker 组件）
const projectOptions = ref(projectList.value)
// 当前选中的项目索引（用于 picker 组件的显示）
const selectedProjectIndex = ref(-1)
// 当前选中的项目 ID
const selectedProjectId = ref('')
// 当前选中的项目名称（用于显示）
const selectedProjectName = computed(() => {
if (selectedProjectIndex.value === -1) {
return '请选择项目'
}
return projectList.value[selectedProjectIndex.value]?.name || '请选择项目'
})
// ==================== TypeScript 接口定义 ====================
/**
* 学生接口
* 定义学生的基本信息
*/
interface Student {
id: string
name: string
}
/**
* 学生训练记录接口
* 定义学生某次训练的详细记录
*/
interface StudentTrainingRecord {
studentId: string
studentName: string
time: number
recordDate: string
recordFullDate: string
round: number
}
// ==================== 响应式数据 - 学生相关 ====================
// 当前项目的学生列表
const projectStudents = ref<Student[]>([])
// 已选中的学生 ID 列表
const selectedStudentIds = ref<string[]>([])
// 已选中的学生详细信息列表（（计算属性）
const selectedStudents = computed(() => {
return projectStudents.value.filter(student =>
selectedStudentIds.value.includes(student.id)
)
})
// ==================== 响应式数据 - 图表相关 ====================
// 折线图配置选项
const lineOpts = ref({
color: chartColors,
padding: [15, 10, 0, 15],
legend: {
show: true,
position: 'bottom',
itemGap: 30
},
xAxis: {
disableGrid: true,
itemCount: 6,
rotateLabel: true
},
yAxis: {
data: [{
min: 0,
format: (val: number) => val.toFixed(1) + 's'
}]
},
extra: {
line: {
type: 'curve',
width: 2,
activeType: 'hollow',
linearType: 'none',
onGap: false
}
}
})
// 折线图数据
const lineChartData = ref({
categories: [] as string[],
series: [] as any[]
})
// 最大训练次数（计算属性）
const maxTrainingCount = computed(() => {
const allRecords = mockTrainingRecords[selectedProjectId.value] || []
const studentCounts = new Map<string, number>()
allRecords.forEach(record => {
studentCounts.set(record.studentId, (studentCounts.get(record.studentId) || 0) + 1)
})
return Math.max(0, ...Array.from(studentCounts.values()))
})
// ==================== 模拟数据 ====================
// 模拟的学生数据（按项目分组）
const mockProjectStudents: Record<string, Student[]> = {
'1': [
{ id: 's1', name: '张小明' },
{ id: 's2', name: '李小红' },
{ id: 's3', name: '王小明' },
{ id: 's4', name: '赵小芳' },
{ id: 's5', name: '陈小刚' }
],
'2': [
{ id: 's6', name: '刘小华' },
{ id: 's7', name: '张小丽' },
{ id: 's8', name: '杨小龙' }
],
'3': [
{ id: 's9', name: '黄小东' },
{ id: 's10', name: '吴小西' },
{ id: 's11', name: '周小南' },
{ id: 's12', name: '徐小北' }
],
'4': [
{ id: 's13', name: '马小兵' },
{ id: 's14', name: '朱小红' }
]
}
// 模拟的训练记录数据（按项目分组）
const mockTrainingRecords: Record<string, StudentTrainingRecord[]> = {
'1': [
{ studentId: 's1', studentName: '张小明', time: 28.5, recordDate: '03-12', recordFullDate: '2026-03-12', round: 1 },
{ studentId: 's1', studentName: '张小明', time: 27.2, recordDate: '03-14', recordFullDate: '2026-03-14', round: 1 },
{ studentId: 's1', studentName: '张小明', time: 26.5, recordDate: '03-16', recordFullDate: '2026-03-16', round: 1 },
{ studentId: 's1', studentName: '张小明', time: 25.8, recordDate: '03-19', recordFullDate: '2026-03-19', round: 1 },
{ studentId: 's1', studentName: '张小明', time: 25.2, recordDate: '03-24', recordFullDate: '2026-03-24', round: 1 },
{ studentId: 's2', studentName: '李小红', time: 32.5, recordDate: '03-12', recordFullDate: '2026-03-12', round: 1 },
{ studentId: 's2', studentName: '李小红', time: 31.2, recordDate: '03-14', recordFullDate: '2026-03-14', round: 1 },
{ studentId: 's2', studentName: '李小红', time: 30.5, recordDate: '03-19', recordFullDate: '2026-03-19', round: 1 },
{ studentId: 's2', studentName: '李小红', time: 29.8, recordDate: '03-24', recordFullDate: '2026-03-24', round: 1 },
{ studentId: 's3', studentName: '王小明', time: 25.8, recordDate: '03-12', recordFullDate: '2026-03-12', round: 1 },
{ studentId: 's3', studentName: '王小明', time: 24.5, recordDate: '03-16', recordFullDate: '2026-03-16', round: 1 },
{ studentId: 's3', studentName: '王小明', time: 23.8, recordDate: '03-24', recordFullDate: '2026-03-24', round: 1 },
{ studentId: 's4', studentName: '赵小芳', time: 33.5, recordDate: '03-14', recordFullDate: '2026-03-14', round: 1 },
{ studentId: 's4', studentName: '赵小芳', time: 32.2, recordDate: '03-19', recordFullDate: '2026-03-19', round: 1 },
{ studentId: 's5', studentName: '陈小刚', time: 35.5, recordDate: '03-19', recordFullDate: '2026-03-19', round: 1 }
],
'2': [
{ studentId: 's6', studentName: '刘小华', time: 24.5, recordDate: '03-12', recordFullDate: '2026-03-12', round: 1 },
{ studentId: 's6', studentName: '刘小华', time: 23.8, recordDate: '03-14', recordFullDate: '2026-03-14', round: 1 },
{ studentId: 's6', studentName: '刘小华', time: 23.2, recordDate: '03-19', recordFullDate: '2026-03-19', round: 1 },
{ studentId: 's7', studentName: '张小丽', time: 26.8, recordDate: '03-12', recordFullDate: '2026-03-12', round: 1 },
{ studentId: 's7', studentName: '张小丽', time: 26.2, recordDate: '03-16', recordFullDate: '2026-03-16', round: 1 },
{ studentId: 's8', studentName: '杨小龙', time: 25.5, recordDate: '03-14', recordFullDate: '2026-03-14', round: 1 },
{ studentId: 's8', studentName: '杨小龙', time: 24.8, recordDate: '03-19', recordFullDate: '2026-03-19', round: 1 }
],
'3': [
{ studentId: 's9', studentName: '黄小东', time: 125.8, recordDate: '03-12', recordFullDate: '2026-03-12', round: 1 },
{ studentId: 's9', studentName: '黄小东', time: 124.5, recordDate: '03-14', recordFullDate: '2026-03-14', round: 1 },
{ studentId: 's10', studentName: '吴小西', time: 128.5, recordDate: '03-12', recordFullDate: '2026-03-12', round: 1 },
{ studentId: 's10', studentName: '吴小西', time: 127.2, recordDate: '03-16', recordFullDate: '2026-03-16', round: 1 },
{ studentId: 's10', studentName: '吴小西', time: 126.8, recordDate: '03-19', recordFullDate: '2026-03-19', round: 1 }
],
'4': [
{ studentId: 's13', studentName: '马小兵', time: 82.5, recordDate: '03-12', recordFullDate: '2026-03-12', round: 1 },
{ studentId: 's13', studentName: '马小兵', time: 81.8, recordDate: '03-14', recordFullDate: '2026-03-14', round: 1 },
{ studentId: 's14', studentName: '朱小红', time: 88.5, recordDate: '03-12', recordFullDate: '2026-03-12', round: 1 }
]
}
// ==================== 生命周期钩子 ====================
onLoad(() => {
loadProjectData()
})
onShow(() => {
// TODO: 如果需要在页面显示时刷新数据，可以在这里添加逻辑
})
// ==================== 监听器 ====================
// 监听选中学生 ID 列表的变化
// 使用 getter 函数返回数组副本，这样可以确保监听器触发
watch(() => [...selectedStudentIds.value], (newIds, oldIds) => {
console.log('selectedStudentIds changed:', newIds)
console.log('oldIds:', oldIds)
updateChartData()
})
// ==================== 业务逻辑方法 ====================
const loadProjectData = () => {
// TODO: 调用后端 API 获取项目列表
}
const handleProjectChange = (e: any) => {
const index = e.detail.value
selectedProjectIndex.value = index
const selectedProject = projectList.value[index]
if (selectedProject) {
selectedProjectId.value = selectedProject.id
loadProjectStudents(selectedProject.id)
}
selectedStudentIds.value = []
}
const loadProjectStudents = (projectId: string) => {
if (mockProjectStudents[projectId]) {
projectStudents.value = mockProjectStudents[projectId]
} else {
projectStudents.value = []
}
}
const toggleStudent = (studentId: string) => {
const index = selectedStudentIds.value.indexOf(studentId)
if (index !== -1) {
selectedStudentIds.value.splice(index, 1)
} else {
if (selectedStudentIds.value.length >= MAX_SELECTED_STUDENTS) {
Service.Msg(`最多只能选择 ${MAX_SELECTED_STUDENTS} 名学员`)
return
}
selectedStudentIds.value.push(studentId)
}
}
const getStudentBestTime = (studentId: string): number => {
const records = mockTrainingRecords[selectedProjectId.value] || []
const studentRecords = records.filter(r => r.studentId === studentId)
if (studentRecords.length === 0) return 0
return Math.min(...studentRecords.map(r => r.time))
}
const updateChartData = () => {
if (selectedStudentIds.value.length === 0 || !selectedProjectId.value) {
lineChartData.value.series = []
lineChartData.value.categories = []
return
}
const projectRecords = mockTrainingRecords[selectedProjectId.value] || []
const allDates = new Set<string>()
projectRecords.forEach(record => {
allDates.add(record.recordFullDate)
})
const sortedDates = Array.from(allDates).sort()
lineChartData.value.categories = sortedDates.map(date => {
const parts = date.split('-')
return `${parts[1]}-${parts[2]}`
})
const seriesData: any[] = []
selectedStudentIds.value.forEach((studentId, index) => {
const studentRecords = projectRecords.filter(r => r.studentId === studentId)
studentRecords.sort((a, b) => a.recordFullDate.localeCompare(b.recordFullDate))
const timeMap = new Map<string, number>()
studentRecords.forEach(record => {
timeMap.set(record.recordFullDate, record.time)
})
const timeData = sortedDates.map(date => timeMap.get(date) || null)
const studentName = projectStudents.value.find(s => s.id === studentId)?.name || '未知学员'
seriesData.push({
name: studentName,
data: timeData,
color: chartColors[index]
})
})
console.log();
lineChartData.value.series = seriesData
}
</script>
<style lang="scss" scoped>
page {
background-color: #f5f5f5;
}
.curve-container {
min-height: 100vh;
padding-bottom: 40rpx;
}
.header-section {
background-color: #fff;
padding: 32rpx 28rpx 24rpx;
margin-bottom: 20rpx;
.header-title {
.title {
font-size: 36rpx;
font-weight: 700;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.subtitle {
font-size: 24rpx;
color: #999;
}
}
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.section-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
}
.select-count {
font-size: 24rpx;
color: #52c41a;
}
}
.project-select-section {
background-color: #fff;
margin: 0 20rpx 20rpx;
border-radius: 16rpx;
padding: 28rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.picker-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 24rpx;
background-color: #f8f8f8;
border-radius: 12rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.3s ease;
&:active {
background-color: #f0f0f0;
border-color: #52c41a;
}
.picker-text {
font-size: 28rpx;
color: #333;
}
}
}
.student-select-section {
background-color: #fff;
margin: 0 20rpx 20rpx;
border-radius: 16rpx;
padding: 28rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.section-header {
margin-bottom: 24rpx;
}
.student-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16rpx;
.student-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 10rpx;
background-color: #f8f8f8;
border-radius: 12rpx;
border: 2rpx solid transparent;
transition: all 0.3s ease;
position: relative;
&:active {
transform: scale(0.95);
}
&.selected {
background-color: #f0f9eb;
border-color: #52c41a;
}
.student-avatar {
width: 60rpx;
height: 60rpx;
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3);
.avatar-text {
font-size: 24rpx;
font-weight: 700;
color: #fff;
}
}
.student-name {
font-size: 24rpx;
color: #333;
text-align: center;
}
.check-icon {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 28rpx;
height: 28rpx;
background-color: #52c41a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.hint-state {
margin: 0 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 80rpx 40rpx;
text-align: center;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.hint-icon {
margin-bottom: 24rpx;
}
.hint-text {
font-size: 28rpx;
color: #999;
}
}
.chart-section {
margin: 0 20rpx;
.stats-card {
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.stat-item {
text-align: center;
.stat-label {
font-size: 24rpx;
color: #999;
display: block;
margin-bottom: 8rpx;
}
.stat-value {
font-size: 32rpx;
font-weight: 700;
color: #52c41a;
}
}
.stat-divider {
width: 1rpx;
height: 50rpx;
background-color: #eee;
}
}
.chart-card {
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.chart-header {
margin-bottom: 20rpx;
padding-left: 12rpx;
border-left: 6rpx solid #52c41a;
.chart-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 6rpx;
}
.chart-desc {
font-size: 24rpx;
color: #999;
}
}
.chart-box {
width: 100%;
height: 500rpx;
background-color: #fafafa;
border-radius: 12rpx;
overflow: hidden;
}
}
.legend-section {
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.legend-title {
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.legend-list {
display: flex;
flex-direction: column;
gap: 16rpx;
.legend-item {
display: flex;
align-items: center;
gap: 12rpx;
.legend-color {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
flex-shrink: 0;
}
.legend-name {
font-size: 26rpx;
color: #333;
font-weight: 600;
}
.legend-desc {
font-size: 24rpx;
color: #999;
}
}
}
}
}
</style>

360
src/pages/dataAnalyze/baoganAnalyze.vue Normal file
View File

@@ -0,0 +1,360 @@
<template>
<view class="baogan-container">
<!-- 页面标题区域 -->
<view class="header-section">
<view class="header-title">
<text class="title">包干数据</text>
<text class="subtitle">包干项目训练记录统计</text>
</view>
</view>
<!-- 日历组件 -->
<view class="calendar-wrapper">
<uni-calendar
:insert="true"
:lunar="false"
:show-month="true"
:selected="selectedDates"
@monthSwitch="handleMonthSwitch"
@change="handleDateChange">
</uni-calendar>
</view>
<!-- 选中日期数据统计 -->
<view class="date-summary" v-if="selectedDate">
<view class="summary-item">
<text class="summary-label">选中日期</text>
<text class="summary-value">{{ selectedDate }}</text>
</view>
<view class="summary-divider"></view>
<view class="summary-item">
<text class="summary-label">训练人数</text>
<text class="summary-value">{{ tableData.length }}人</text>
</view>
<view class="summary-divider"></view>
<view class="summary-item">
<text class="summary-label">完成率平均</text>
<text class="summary-value">{{ averageCompletion }}%</text>
</view>
</view>
<!-- 数据表格 -->
<view class="table-section" v-if="selectedDate">
<sl-table
:columns="columns"
:tableData="tableData"
@cell-click="handleCellClick">
<template #empty>
<view class="empty-container">
<view class="empty-icon">
<u-icon name="file-text" size="80" color="#ccc"></u-icon>
</view>
<text class="empty-text">该日期暂无训练数据</text>
</view>
</template>
</sl-table>
</view>
<!-- 未选择日期提示 -->
<view class="hint-state" v-if="!selectedDate">
<view class="hint-icon">
<u-icon name="calendar" size="80" color="#faad14"></u-icon>
</view>
<text class="hint-text">请选择日期查看数据</text>
</view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app"
import { Service } from '@/Service/Service'
import { ref, computed } from 'vue'
// 当前年月
const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth() + 1)
// 选中的日期
const selectedDate = ref('')
// 表格列定义
const columns = ref([
{
label: '姓名',
prop: 'name',
width: '100px'
},
{
label: '项目名称',
prop: 'projectName',
width: '120px'
},
{
label: '包干计划',
prop: 'plan',
width: '100px'
},
{
label: '完成比例',
prop: 'completion',
width: '100px'
},
{
label: '详细数据',
prop: 'detail',
width: '120px'
}
])
// 表格数据
interface TableDataItem {
name: string
projectName: string
plan: string
completion: number
detail: string
}
const tableData = ref<TableDataItem[]>([{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 100, detail: '1500/1500' }])
// 日历打点数据
const selectedDates = ref([
{ date: '2026-03-15', info: '训练' },
{ date: '2026-03-18', info: '训练' },
{ date: '2026-03-20', info: '训练' },
{ date: '2026-03-22', info: '训练' },
{ date: '2026-03-25', info: '训练' }
])
// 平均完成率
const averageCompletion = computed(() => {
if (tableData.value.length === 0) return 0
const total = tableData.value.reduce((sum, item) => sum + item.completion, 0)
return Math.round(total / tableData.value.length)
})
// 模拟数据
const mockData: Record<string, TableDataItem[]> = {
'2026-03-15': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 100, detail: '1500/1500' }
],
'2026-03-18': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 85, detail: '1530/1800' },
{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 95, detail: '1425/1500' }
],
'2026-03-20': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 87, detail: '1740/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 90, detail: '1800/2000' }
],
'2026-03-22': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 92, detail: '1840/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 88, detail: '1760/2000' },
{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 90, detail: '1620/1800' },
{ name: '王小明', projectName: '200米自由泳', plan: '1500米', completion: 98, detail: '1470/1500' },
{ name: '陈小刚', projectName: '100米自由泳', plan: '2000米', completion: 75, detail: '1500/2000' }
],
'2026-03-25': [
{ name: '张小明', projectName: '100米自由泳', plan: '2000米', completion: 85, detail: '1700/2000' },
{ name: '李小红', projectName: '100米自由泳', plan: '2000米', completion: 95, detail: '1900/2000' },
{ name: '赵小芳', projectName: '100米自由泳', plan: '1800米', completion: 88, detail: '1584/1800' }
]
}
onLoad(() => {
loadData()
})
onShow(() => {
// 页面显示时刷新数据
})
// 加载数据
const loadData = () => {
// TODO: 调用API获取数据
}
// 月份单元格点击处理
const handleCellClick = (event: any) => {
console.log('单元格点击事件:', event)
}
// 月份切换处理
const handleMonthSwitch = (e: any) => {
currentYear.value = e.year
currentMonth.value = e.month
loadData()
// 切换月份后清空选中日期
selectedDate.value = ''
tableData.value = []
}
// 日期选择处理
const handleDateChange = (e: any) => {
// 点击日期后的处理
const date = e.fulldate
selectedDate.value = date
// 加载该日期的数据
if (mockData[date]) {
tableData.value = mockData[date]
} else {
tableData.value = []
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #f5f5f5;
}
.baogan-container {
min-height: 100vh;
padding-bottom: 40rpx;
}
/* 页面标题区域 */
.header-section {
background-color: #fff;
padding: 32rpx 28rpx 24rpx;
margin-bottom: 20rpx;
.header-title {
.title {
font-size: 36rpx;
font-weight: 700;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.subtitle {
font-size: 24rpx;
color: #999;
}
}
}
/* 日历组件包装 */
.calendar-wrapper {
background-color: #fff;
margin-bottom: 20rpx;
padding: 20rpx 0;
}
/* 日期数据统计 */
.date-summary {
background-color: #fff;
margin: 0 20rpx 20rpx;
border-radius: 16rpx;
padding: 24rpx;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.summary-item {
text-align: center;
.summary-label {
font-size: 24rpx;
color: #999;
display: block;
margin-bottom: 8rpx;
}
.summary-value {
font-size: 32rpx;
font-weight: 700;
color: #faad14;
}
}
.summary-divider {
width: 1rpx;
height: 50rpx;
background-color: #eee;
}
}
/* 表格区域 */
.table-section {
margin: 0 20rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
/* 空状态容器 */
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 40rpx;
.empty-icon {
margin-bottom: 24rpx;
}
.empty-text {
font-size: 28rpx;
color: #999;
}
}
/* 提示状态 */
.hint-state {
margin: 0 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 80rpx 40rpx;
text-align: center;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.hint-icon {
margin-bottom: 24rpx;
}
.hint-text {
font-size: 28rpx;
color: #999;
}
}
/* sl-table 样式覆盖 */
::v-deep .sl-table {
width: 100%;
}
::v-deep .sl-table__header {
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%) !important;
}
::v-deep .sl-table__header__cell {
color: #fff !important;
font-weight: 700;
font-size: 28rpx;
}
::v-deep .sl-table__body__cell {
font-size: 26rpx;
color: #333;
padding: 24rpx 16rpx;
}
::v-deep .sl-table__body__row:nth-child(even) {
background-color: #fafafa !important;
}
::v-deep .sl-table__body__row:nth-child(odd) {
background-color: #fff !important;
}
</style>

535
src/pages/dataAnalyze/grades.vue Normal file
View File

@@ -0,0 +1,535 @@
<template>
<view class="grades-container">
<!-- 页面标题区域 -->
<view class="header-section">
<view class="header-title">
<text class="title">成绩排名</text>
<text class="subtitle">学生最佳成绩排名</text>
</view>
</view>
<!-- ==================== 项目选择区域 ==================== -->
<view class="project-select-section">
<view class="section-header">
<text class="section-title">选择项目</text>
</view>
<!-- 项目选择器 -->
<picker mode="selector" :range="projectOptions" range-key="name" :value="selectedProjectIndex"
@change="handleProjectChange">
<view class="picker-wrapper">
<text class="picker-text">{{ selectedProjectName }}</text>
<u-icon name="arrow-down" size="18" color="#999"></u-icon>
</view>
</picker>
</view>
<!-- ==================== 空状态提示 ==================== -->
<!-- 未选择项目时的提示 -->
<view class="hint-state" v-if="!selectedProjectId">
<view class="hint-icon">
<u-icon name="list" size="80" color="#eb2f96"></u-icon>
</view>
<text class="hint-text">请先选择项目</text>
</view>
<!-- 无数据时的提示 -->
<view class="hint-state" v-else-if="gradeList.length === 0">
<view class="hint-icon">
<u-icon name="file-text" size="80" color="#eb2f96"></u-icon>
</view>
<text class="hint-text">该项目暂无排名数据</text>
</view>
<!-- ==================== 排名列表区域 ==================== -->
<!-- 仅在选择了项目且有数据时显示 -->
<view class="ranking-section" v-if="selectedProjectId && gradeList.length > 0">
<!-- 排名统计卡片 -->
<view class="stats-card">
<view class="stat-item">
<text class="stat-label">对比项目</text>
<text class="stat-value">{{ selectedProjectName }}</text>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-label">参与人数</text>
<text class="stat-value">{{ gradeList.length }}人</text>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-label">最高速度</text>
<text class="stat-value">{{ maxSpeed }}m/s</text>
</view>
</view>
<!-- 排名列表 -->
<view class="ranking-list">
<view v-for="(item, index) in gradeList" :key="item.id"
:class="['ranking-item', { 'top-three': index < 3 }]" @click="handleRankingClick(item)">
<!-- 排名徽章 -->
<view class="rank-badge" :class="`rank-${index + 1}`">
<text class="rank-number">{{ index + 1 }}</text>
</view>
<!-- 学生头像 -->
<view class="student-avatar">
<text class="avatar-text">{{ item.name.charAt(0) }}</text>
</view>
<!-- 学生信息 -->
<view class="student-info">
<text class="student-name">{{ item.name }}</text>
<text class="student-speed">最快速度：{{ item.bestSpeed }}m/s</text>
</view>
<!-- 成绩详情 -->
<view class="speed-detail">
<text class="detail-text">用时：{{ item.bestTime }}s</text>
<text class="detail-text">日期：{{ item.recordDate }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app"
import { Service } from '@/Service/Service'
import { ref, computed } from 'vue'
// ==================== 响应式数据 - 项目相关 ====================
// 项目列表数据
const projectList = ref([
{ id: '1', name: '100米自由泳' },
{ id: '2', name: '50米自由泳' },
{ id: '3', name: '200米自由泳' },
{ id: '4', name: '100米蛙泳' }
])
// 项目选择器选项（用于 picker 组件）
const projectOptions = ref(projectList.value)
// 当前选中的项目索引（用于 picker 组件的显示）
const selectedProjectIndex = ref(-1)
// 当前选中的项目 ID
const selectedProjectId = ref('')
// 当前选中的项目名称（用于显示）
const selectedProjectName = computed(() => {
if (selectedProjectIndex.value === -1) {
return '请选择项目'
}
return projectList.value[selectedProjectIndex.value]?.name || '请选择项目'
})
// ==================== TypeScript 接口定义 ====================
/**
* 学生成绩接口
* 定义学生的成绩和排名信息
*/
interface StudentGrade {
id : string // 学生 ID
name : string // 学生姓名
bestSpeed : number // 最快速度（m/s）
bestTime : number // 最快用时（秒）
recordDate : string // 记录日期
studentId : string // 学生 ID（用于数据关联）
}
// ==================== 响应式数据 - 排名相关 ====================
// 排名列表数据
const gradeList = ref<StudentGrade[]>([])
// 最高速度（计算属性）
const maxSpeed = computed(() => {
if (gradeList.value.length === 0) return 0
return Math.max(...gradeList.value.map(item => item.bestSpeed)).toFixed(2)
})
// ==================== 模拟数据 ====================
/**
* 模拟的学生成绩数据（按项目分组）
* 键为项目 ID，值为该项目的学生成绩列表
*/
const mockStudentGrades : Record<string, StudentGrade[]> = {
'1': [
{ id: 'g1', name: '王小明', bestSpeed: 3.89, bestTime: 25.72, recordDate: '03-24', studentId: 's3' },
{ id: 'g2', name: '张小明', bestSpeed: 3.97, bestTime: 25.18, recordDate: '03-24', studentId: 's1' },
{ id: 'g3', name: '赵小芳', bestSpeed: 3.03, bestTime: 32.96, recordDate: '03-14', studentId: 's4' },
{ id: 'g4', name: '李小红', bestSpeed: 3.38, bestTime: 29.58, recordDate: '03-24', studentId: 's2' },
{ id: 'g5', name: '陈小刚', bestSpeed: 2.82, bestTime: 35.46, recordDate: '03-19', studentId: 's5' }
],
'2': [
{ id: 'g6', name: '杨小龙', bestSpeed: 2.05, bestTime: 24.39, recordDate: '03-19', studentId: 's8' },
{ id: 'g7', name: '刘小华', bestSpeed: 2.11, bestTime: 23.70, recordDate: '03-19', studentId: 's6' },
{ id: 'g8', name: '张小丽', bestSpeed: 1.91, bestTime: 26.18, recordDate: '03-16', studentId: 's7' }
],
'3': [
{ id: 'g9', name: '吴小西', bestSpeed: 1.59, bestTime: 125.79, recordDate: '03-16', studentId: 's10' },
{ id: 'g10', name: '黄小东', bestSpeed: 1.61, bestTime: 124.23, recordDate: '03-14', studentId: 's9' },
{ id: 'g11', name: '周小南', bestSpeed: 0.00, bestTime: 0, recordDate: '-', studentId: 's11' },
{ id: 'g12', name: '徐小北', bestSpeed: 0.00, bestTime: 0, recordDate: '-', studentId: 's12' }
],
'4': [
{ id: 'g13', name: '马小兵', bestSpeed: 1.22, bestTime: 81.97, recordDate: '03-14', studentId: 's13' },
{ id: 'g14', name: '朱小红', bestSpeed: 1.13, bestTime: 88.47, recordDate: '03-12', studentId: 's14' }
]
}
// ==================== 生命周期钩子 ====================
/**
* 页面加载时触发
* 在页面初始化时执行，只执行一次
*/
onLoad(() => {
// 初始化数据
loadProjectData()
})
/**
* 页面显示时触发
* 每次页面从后台切换到前台时执行
*/
onShow(() => {
// TODO: 如果需要在页面显示时刷新数据，可以在这里添加逻辑
})
// ==================== 业务逻辑方法 - 项目相关 ====================
/**
* 加载项目数据
* 从后端 API 获取项目列表
*/
const loadProjectData = () => {
// TODO: 调用后端 API 获取项目列表
// 示例代码：
// Service.Request('/api/projects', 'GET').then(res => {
// projectList.value = res.data
// projectOptions.value = res.data
// })
}
/**
* 处理项目选择变化事件
* 当用户选择项目时触发
* @param e picker 选择事件对象，包含 detail.value 属性表示选中的索引
*/
const handleProjectChange = (e : any) => {
// 获取选中的项目索引
const index = e.detail.value
// 更新选中项目的索引
selectedProjectIndex.value = index
// 获取选中的项目
const selectedProject = projectList.value[index]
if (selectedProject) {
// 更新选中项目的 ID
selectedProjectId.value = selectedProject.id
// 加载该项目的排名数据
loadProjectGrades(selectedProject.id)
}
// TODO: 实际项目中应该调用 API 获取该项目的排名数据
}
/**
* 加载项目排名数据
* 根据项目 ID 获取该项目的学生成绩排名列表
* @param projectId 项目 ID
*/
const loadProjectGrades = (projectId : string) => {
// 从模拟数据中获取排名列表
if (mockStudentGrades[projectId]) {
// 按最快速度从高到低排序
gradeList.value = [...mockStudentGrades[projectId]].sort((a, b) => b.bestSpeed - a.bestSpeed)
} else {
gradeList.value = []
}
}
// ==================== 业务逻辑方法 - 排名相关 ====================
/**
* 处理排名项点击事件
* 点击某排名项查看详情
* @param item 排名项数据
*/
const handleRankingClick = (item : StudentGrade) => {
console.log('点击了排名项:', item)
// TODO: 跳转到学生详情页面
// Service.GoPage('/pages/student/detail', { studentId: item.studentId })
}
</script>
<style lang="scss" scoped>
// 页面背景色设置
page {
background-color: #f5f5f5;
}
// 页面容器
.grades-container {
min-height: 100vh;
padding-bottom: 40rpx;
}
/* ==================== 页面标题区域 ==================== */
.header-section {
background-color: #fff;
padding: 32rpx 28rpx 24rpx;
margin-bottom: 20rpx;
.header-title {
.title {
font-size: 36rpx;
font-weight: 700;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.subtitle {
font-size: 24rpx;
color: #999;
}
}
}
/* ==================== 项目选择区域 ==================== */
.project-select-section {
background-color: #fff;
margin: 0 20rpx 20rpx;
border-radius: 16rpx;
padding: 28rpx;
box-shadow: 0 2rpxrpx 12rpx rgba(0, 0, 0, 0.05);
.picker-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 24rpx;
background-color: #f8f8f8;
border-radius: 12rpx;
border: 1rpx solid #e8e8e8;
transition: all 0.3s ease;
&:active {
background-color: #f0f0f0;
border-color: #eb2f96;
}
.picker-text {
font-size: 28rpx;
color: #333;
}
}
}
/* ==================== 提示状态容器 ==================== */
.hint-state {
margin: 0 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 80rpx 40rpx;
text-align: center;
box-shadow: 0 2rpxrpx 12rpx rgba(0, 0, 0, 0.05);
.hint-icon {
margin-bottom: 24rpx;
}
.hint-text {
font-size: 28rpx;
color: #999;
}
}
/* ==================== 排名列表区域 ==================== */
.ranking-section {
margin: 0 20rpx;
// 统计卡片
.stats-card {
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 2rpxrpx 12rpx rgba(0, 0, 0, 0.05);
.stat-item {
text-align: center;
.stat-label {
font-size: 24rpx;
color: #999;
display: block;
margin-bottom: 8rpx;
}
.stat-value {
font-size: 32rpx;
font-weight: 700;
color: #eb2f96;
}
}
.stat-divider {
width: 1rpx;
height: 50rpx;
background-color: #eee;
}
}
// 排名列表容器
.ranking-list {
// 排名项
.ranking-item {
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 16rpx;
display: flex;
align-items: center;
gap: 20rpx;
box-shadow: 0 2rpxrpx 12rpx rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
&:active {
transform: scale(0.98);
box-shadow: 0 4rpx 16rpx rgba(235, 47, 150, 0.15);
}
// 前三名特殊样式
&.top-three {
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6rpx;
background: linear-gradient(180deg, #eb2f96 0%, #f759ab 100%);
border-radius: 16rpx 0 0 16rpx;
}
}
// 排名徽章
.rank-badge {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: #f0f0f0;
box-shadow: 0 2rpxrpx 8rpx rgba(0, 0, 0, 0.1);
.rank-number {
font-size: 24rpx;
font-weight: 700;
color: #999;
}
// 前三名特殊颜色
&.rank-1 {
background: linear-gradient(135deg, #ffd700 0%, #ffec3d 100%);
box-shadow: 0 2rpxrpx 8rpx rgba(255, 215, 0, 0.4);
.rank-number {
color: #fff;
font-size: 28rpx;
}
}
&.rank-2 {
background: linear-gradient(135deg, #c0c0c0 0%, #d9d9d9 100%);
box-shadow: 0 2rpxrpx 8rpx rgba(192, 192, 192, 0.4);
.rank-number {
color: #fff;
}
}
&.rank-3 {
background: linear-gradient(135deg, #cd7f32 0%, #e6963d 100%);
box-shadow: 0 2rpxrpx 8rpx rgba(205, 127, 50, 0.4);
.rank-number {
color: #fff;
}
}
}
// 学生头像
.student-avatar {
width: 70rpx;
height: 70rpx;
background: linear-gradient(135deg, #eb2f96 0%, #f759ab 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2rpxrpx 8rpx rgba(235, 47, 150, 0.3);
.avatar-text {
font-size: 28rpx;
font-weight: 700;
color: #fff;
}
}
// 学生信息
.student-info {
flex: 1;
min-width: 0;
.student-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.student-speed {
font-size: 26rpx;
color: #eb2f96;
font-weight: 500;
}
}
// 成绩详情
.speed-detail {
display: flex;
align-items: center;
gap: 16rpx;
flex-shrink: 0;
.detail-text {
font-size: 24rpx;
color: #999;
background-color: #f5f5f5;
padding: 6rpx 12rpx;
border-radius: 6rpx;
}
}
}
}
}
</style>

18
src/pages/dataAnalyze/paragraphAnalyze.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app";
onLoad(() => {
});
onShow(() => {
});
</script>
<style lang="scss">
</style>

470
src/pages/dataAnalyze/timingAnalze.vue Normal file
View File

@@ -0,0 +1,470 @@
<template>
<view class="timing-container">
<!-- 页面标题区域 -->
<view class="header-section">
<view class="header-title">
<text class="title">计时数据</text>
<text class="subtitle">计时项目训练记录统计</text>
</view>
</view>
<!-- 日历组件 -->
<view class="calendar-wrapper">
<uni-calendar
:insert="true"
:lunar="false"
:show-month="true"
:selected="selectedDates"
@monthSwitch="handleMonthSwitch"
@change="handleDateChange">
</uni-calendar>
</view>
<!-- 选中日期数据统计 -->
<!-- 仅在选择了日期时显示统计信息 -->
<view class="date-summary" v-if="selectedDate">
<view class="summary-item">
<text class="summary-label">选中日期</text>
<text class="summary-value">{{ selectedDate }}</text>
</view>
<view class="summary-divider"></view>
<view class="summary-item">
<text class="summary-label">训练人数</text>
<text class="summary-value">{{ tableData.length }}人</text>
</view>
<view class="summary-divider"></view>
<view class="summary-item">
<text class="summary-label">平均速度</text>
<text class="summary-value">{{ averageSpeed }}m/s</text>
</view>
</view>
<!-- 数据表格 -->
<!-- 仅在选择了日期时显示表格 -->
<view class="table-section" v-if="selectedDate">
<sl-table
:columns="columns"
:tableData="tableData"
@cell-click="handleCellClick">
<!-- 空数据插槽 -->
<template #empty>
<view class="empty-container">
<view class="empty-icon">
<u-icon name="file-text" size="80" color="#ccc"></u-icon>
</view>
<text class="empty-text">该日期暂无训练数据</text>
</view>
</template>
</sl-table>
</view>
<!-- 未选择日期提示 -->
<!-- 未选择日期时显示提示信息 -->
<view class="hint-state" v-if="!selectedDate">
<view class="hint-icon">
<u-icon name="calendar" size="80" color="#1890ff"></u-icon>
</view>
<text class="hint-text">请选择日期查看数据</text>
</view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app"
import { Service } from '@/Service/Service'
import { ref, computed } from 'vue'
// ==================== 响应式数据定义 ====================
// 当前年份，用于月份切换时记录当前年份
const currentYear = ref(new Date().getFullYear())
// 当前月份（1-12），用于月份切换时记录当前月份
const currentMonth = ref(new Date().getMonth() + 1)
// 当前选中的日期，格式为 'YYYY-MM-DD'
// 空字符串表示未选择日期
const selectedDate = ref('')
// ==================== 表格配置 ====================
// 表格列定义
// label: 列标题
// prop: 数据项中对应的字段名
// width: 列宽度
const columns = ref([
{
label: '姓名',
prop: 'name',
width: '100px'
},
{
label: '项目名称',
prop: 'projectName',
width: '150px'
},
{
label: '最大速度',
prop: 'maxSpeed',
width: '120px'
},
{
label: '计时数据',
prop: 'timingData',
width: '150px'
}
])
// ==================== TypeScript 接口定义 ====================
// 表格数据项接口定义
// 描述一条计时记录的数据结构
interface TableDataItem {
name: string // 学员姓名
projectName: string // 项目名称（如：100米自由泳）
maxSpeed: number // 最大速度，单位：m/s
timingData: string // 计时数据（如：1.23, 1.25, 1.24）
}
// ==================== 响应式数据 - 表格数据 ====================
// 表格数据列表
// 存储当前选中日期的所有计时记录
// 初始状态为空数组，等待用户选择日期后加载数据
const tableData = ref<TableDataItem[]>([])
// ==================== 响应式数据 - 日历标记 ====================
// 日历打点数据
// 用于在日历上标记有训练记录的日期
// date: 日期字符串，格式为 'YYYY-MM-DD'
// info: 显示在日期上的标记信息
const selectedDates = ref([
{ date: '2026-03-12', info: '训练' },
{ date: '2026-03-14', info: '训练' },
{ date: '2026-03-16', info: '训练' },
{ date: '2026-03-19', info: '训练' },
{ date: '2026-03-24', info: '训练' }
])
// ==================== 计算属性 ====================
// 平均速度计算属性
// 计算当前选中日期所有学员的平均最大速度
// 如果没有数据则返回 0
const averageSpeed = computed(() => {
// 如果没有数据，返回 0
if (tableData.value.length === 0) return 0
// 计算所有学员最大速度的总和
const total = tableData.value.reduce((sum, item) => sum + item.maxSpeed, 0)
// 计算平均值，保留两位小数
return (total / tableData.value.length).toFixed(2)
})
// ======================= 模拟数据 ====================
// 模拟的训练数据
// 键为日期字符串，值为该日期的计时记录列表
// 在实际项目中，这里应该从后端 API 获取数据
const mockData: Record<string, TableDataItem[]> = {
'2026-03-12': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.15, timingData: '25.35s, 25.42s, 25.28s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 1.98, timingData: '27.15s, 27.32s, 27.08s' },
{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.22, timingData: '24.68s, 24.75s, 24.62s' }
],
'2026-03-14': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.18, timingData: '25.12s, 25.18s, 25.08s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.02, timingData: '26.85s, 26.92s, 26.78s' },
{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.92, timingData: '27.95s, 28.12s, 27.88s' },
{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.25, timingData: '24.52s, 24.58s, 24.48s' }
],
'2026-03-16': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.12, timingData: '25.55s, 25.62s, 25.48s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.05, timingData: '26.72s, 26.85s, 26.68s' }
],
'2026-03-19': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.20, timingData: '24.98s, 25.05s, 24.92s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.08, timingData: '26.45s, 26.52s, 26.38s' },
{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.95, timingData: '27.75s, 27.88s, 27.65s' },
{ name: '王小明', projectName: '50米自由泳', maxSpeed: 2.28, timingData: '24.35s, 24.42s, 24.28s' },
{ name: '陈小刚', projectName: '50米自由泳', maxSpeed: 1.88, timingData: '28.25s, 28.38s, 28.15s' }
],
'2026-03-24': [
{ name: '张小明', projectName: '50米自由泳', maxSpeed: 2.15, timingData: '25.30s, 25.38s, 25.25s' },
{ name: '李小红', projectName: '50米自由泳', maxSpeed: 2.10, timingData: '26.25s, 26.32s, 26.18s' },
{ name: '赵小芳', projectName: '50米自由泳', maxSpeed: 1.98, timingData: '27.65s, 27.78s, 27.55s' }
]
}
// ==================== 生命周期钩子 ====================
// 页面加载时触发
// 在页面初始化时执行，只执行一次
onLoad(() => {
// 加载当前月份的数据
loadData()
})
// 页面显示时触发
// 每次页面从后台切换到前台时执行
// 可用于刷新页面显示的数据
onShow(() => {
// TODO: 如果需要在页面显示时刷新数据，可以在这里添加逻辑
// 例如：调用接口获取最新数据
})
// ==================== 业务逻辑方法 ====================
/**
* 加载数据
* 调用后端 API 获取数据
* 当前为模拟数据，实际开发中应替换为真实 API 调用
*/
const loadData = () => {
// TODO: 调用后端 API 获取数据
// 示例代码：
// Service.Request('/api/timing/data', 'GET', {
// year: currentYear.value,
// month: currentMonth.value
// }).then(res => {
// // 处理返回的数据
// })
}
/**
* 处理表格单元格点击事件
* @param event 点击事件对象，包含行索引、列索引、单元格数据等信息
*/
const handleCellClick = (event: any) => {
// 在控制台输出点击事件信息，用于调试
console.log('表格单元格点击事件:', event)
// TODO: 根据业务需求处理单元格点击
// 例如：点击某行可以查看详细信息，点击某列可以进行排序等
}
/**
* 处理日历月份切换事件
* 当用户切换日历的月份时触发
* @param e 切换事件对象，包含 year 和 month 属性
*/
const handleMonthSwitch = (e: any) => {
// 更新当前年份
currentYear.value = e.year
// 更新当前月份
currentMonth.value = e.month
// 重新加载数据
// 获取切换后月份的训练记录和日历标记
loadData()
// 清空选中的日期
// 因为切换了月份，之前选择的日期可能不再显示
selectedDate.value = ''
// 清空表格数据
tableData.value = []
}
/**
* 处理日历日期选择事件
* 当用户点击日历上的某个日期时触发
* @param e 选择事件对象，fulldate 属性包含完整的日期字符串
*/
const handleDateChange = (e: any) => {
// 获取选择的完整日期，格式为 'YYYY-MM-DD'
const date = e.fulldate
// 更新选中的日期
selectedDate.value = date
// 根据选择的日期加载对应的训练数据
// 检查模拟数据中是否存在该日期的数据
if (mockData[date]) {
// 如果存在，加载数据
tableData.value = mockData[date]
} else {
// 如果不存在，清空数据（表格将显示空状态）
tableData.value = []
}
// TODO: 实际项目中应该调用 API 获取该日期的计时数据
// 示例代码：
// Service.Request('/api/timing/detail', 'GET', {
// date: date
// }).then(res => {
// // 处理返回的数据并更新表格
// tableData.value = res.data
// })
}
</script>
<style lang="scss" scoped>
// 页面背景色设置
page {
background-color: #f5f5f5;
}
// 页面容器
.timing-container {
min-height: 100vh;
padding-bottom: 40rpx;
}
/* ==================== 页面标题区域 ==================== */
.header-section {
background-color: #fff;
padding: 32rpx 28rpx 24rpx;
margin-bottom: 20rpx;
.header-title {
.title {
font-size: 36rpx;
font-weight: 700;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.subtitle {
font-size: 24rpx;
color: #999;
}
}
}
/* ==================== 日历组件包装 ==================== */
.calendar-wrapper {
background-color: #fff;
margin-bottom: 20rpx;
padding: 20rpx 0;
}
/* ==================== 日期数据统计卡片 ==================== */
.date-summary {
background-color: #fff;
margin: 0 20rpx 20rpx;
border-radius: 16rpx;
padding: 24rpx;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
// 统计项
.summary-item {
text-align: center;
// 标签文字
.summary-label {
font-size: 24rpx;
color: #999;
display: block;
margin-bottom: 8rpx;
}
// 数值文字
.summary-value {
font-size: 32rpx;
font-weight: 700;
color: #1890ff;
}
}
// 分隔线
.summary-divider {
width: 1rpx;
height: 50rpx;
background-color: #eee;
}
}
/* ==================== 表格区域 ==================== */
.table-section {
margin: 0 20rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
/* ==================== 空状态容器 ==================== */
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 40rpx;
// 空状态图标
.empty-icon {
margin-bottom: 24rpx;
}
// 空状态文字
.empty-text {
font-size: 28rpx;
color: #999;
}
}
/* ==================== 提示状态容器 ==================== */
// 用于在用户未选择日期时显示提示
.hint-state {
margin: 0 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 80rpx 40rpx;
text-align: center;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
// 提示图标
.hint-icon {
margin-bottom: 24rpx;
}
// 提示文字
.hint-text {
font-size: 28rpx;
color: #999;
}
}
/* ==================== sl-table 样式覆盖 ==================== */
// 表格容器
::v-deep .sl-table {
width: 100%;
}
// 表头背景色 - 使用蓝色渐变（计时功能的主色调）
::v-deep .sl-table__header {
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%) !important;
}
// 表头单元格样式
::v-deep .sl-table__header__cell {
color: #fff !important;
font-weight: 700;
font-size: 28rpx;
}
// 表格单元格样式
::v-deep .sl-table__body__cell {
font-size: 26rpx;
color: #333;
padding: 24rpx 16rpx;
}
// 偶数行背景色
::v-deep .sl-table__body__row:nth-child(even) {
background-color: #fafafa !important;
}
// 奇数行背景色
::v-deep .sl-table__body__row:nth-child(odd) {
background-color: #fff !important;
}
</style>

62
src/pages/index/index.vue
View File

@@ -27,11 +27,67 @@
<text class="timer-time">00:00''00</text>
</view>
<view class="timer-control">
<u-icon name="play-circle" size="30" color="#1890ff" ></u-icon>
</view>
</view>
</view>
<!-- 计时器模块 -->
<view class="timer-card">
<view class="timer-header">
<text class="timer-title">分段模式</text>
<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
<text class="task-count">1个任务</text>
</view>
</view>
<view @click="Service.GoPage('/pages/userFunc/segmentation')" class="timer-content">
<view class="timer-circle">
<view class="circle-progress">
<view class="progress-ring">
<view class="ring-inner">
<u-icon name="clock" size="32" color="#1890ff"></u-icon>
</view>
</view>
</view>
</view>
<view class="timer-info">
<text class="timer-name">自由泳500米</text>
<text class="timer-time">00:00''00</text>
</view>
</view>
</view>
<!-- 计时器模块 -->
<view class="timer-card">
<view class="timer-header">
<text class="timer-title">包干模式</text>
<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
<text class="task-count">1个任务</text>
</view>
</view>
<view @click="Service.GoPage('/pages/userFunc/project')" class="timer-content">
<view class="timer-circle">
<view class="circle-progress">
<view class="progress-ring">
<view class="ring-inner">
<u-icon name="clock" size="32" color="#1890ff"></u-icon>
</view>
</view>
</view>
</view>
<view class="timer-info">
<text class="timer-name">自由泳500米</text>
<text class="timer-time">00:00''00</text>
</view>
</view>
</view>
</view>
<!-- 空状态 -->

286
src/pages/index/user.vue
View File

@@ -11,7 +11,6 @@
<view class="user-info">
<text class="user-nickname">游泳爱好者</text>
<view class="user-phone-wrapper">
<u-icon name="phone" size="14" color="rgba(255,255,255,0.7)"></u-icon>
<text class="user-phone">138****8888</text>
</view>
</view>
@@ -23,19 +22,27 @@
<!-- 统计数据区域 -->
<view class="stats-section">
<view class="stats-card">
<view class="stat-item">
<text class="stat-value">12</text>
<text class="stat-label">我的项目</text>
<view class="stat-item" >
<view class="stat-info">
<text class="stat-value">12</text>
<text class="stat-label">我的项目</text>
</view>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-value">8</text>
<text class="stat-label">记录数</text>
<view class="stat-item" >
<view class="stat-info">
<text class="stat-value">8</text>
<text class="stat-label">记录数</text>
</view>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-value">8</text>
<text class="stat-label">学员数</text>
<view class="stat-item" >
<view class="stat-info">
<text class="stat-value">8</text>
<text class="stat-label">学员数</text>
</view>
</view>
</view>
</view>
@@ -44,45 +51,60 @@
<view class="menu-section">
<view class="menu-card">
<view class="menu-item" @click="Service.GoPage('/pages/userFunc/projectList')">
<view class="menu-icon project-icon">
<u-icon name="list" size="26" color="#fff"></u-icon>
<view class="menu-icon-bg project-icon-bg">
<u-icon name="list" size="28" color="#fff"></u-icon>
</view>
<view class="menu-content">
<text class="menu-title">项目管理</text>
<view class="menu-header">
<text class="menu-title">项目管理</text>
<view class="menu-tag project-tag">
<text class="tag-text">常用</text>
</view>
</view>
<text class="menu-desc">管理训练项目和设置</text>
</view>
<view class="menu-arrow">
<u-icon name="arrow-right" size="18" color="#ccc"></u-icon>
<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
</view>
</view>
<view class="menu-divider"></view>
<view class="menu-item" @click="Service.GoPage('/pages/userFunc/student')">
<view class="menu-icon academy-icon">
<u-icon name="grid" size="26" color="#fff"></u-icon>
<view class="menu-icon-bg academy-icon-bg">
<u-icon name="grid" size="28" color="#fff"></u-icon>
</view>
<view class="menu-content">
<text class="menu-title">学员管理</text>
<view class="menu-header">
<text class="menu-title">学员管理</text>
<view class="menu-tag academy-tag">
<text class="tag-text">核心</text>
</view>
</view>
<text class="menu-desc">管理学员信息和课程</text>
</view>
<view class="menu-arrow">
<u-icon name="arrow-right" size="18" color="#ccc"></u-icon>
<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
</view>
</view>
<view class="menu-divider"></view>
<view class="menu-item" @click="Service.GoPage('/pages/userFunc/analyze')" >
<view class="menu-icon analysis-icon">
<u-icon name="order" size="26" color="#fff"></u-icon>
<view class="menu-item" @click="Service.GoPage('/pages/userFunc/analyze')">
<view class="menu-icon-bg analysis-icon-bg">
<u-icon name="order" size="28" color="#fff"></u-icon>
</view>
<view class="menu-content">
<text class="menu-title">数据分析</text>
<view class="menu-header">
<text class="menu-title">数据分析</text>
<view class="menu-tag analysis-tag">
<text class="tag-text">智能</text>
</view>
</view>
<text class="menu-desc">查看训练数据和统计</text>
</view>
<view class="menu-arrow">
<u-icon name="arrow-right" size="18" color="#ccc"></u-icon>
<u-icon name="arrow-right" size="16" color="#bbb"></u-icon>
</view>
</view>
</view>
@@ -138,7 +160,7 @@
align-items: center;
gap: 20rpx;
box-shadow: 0 12rpx 32rpx rgba(24, 144, 255, 0.35),
0 4rpx 12rpx rgba(24, 144, 255, 0.2);
0 4rpx 12rpx rgba(24, 144, 255, 0.2);
position: relative;
overflow: hidden;
@@ -250,39 +272,78 @@
.stats-card {
background-color: #fff;
border-radius: 24rpx;
padding: 30rpx 20rpx;
border-radius: 28rpx;
padding: 36rpx 24rpx;
display: flex;
align-items: center;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.stat-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
cursor: pointer;
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
}
}
.stat-icon-bg {
width: 68rpx;
height: 68rpx;
border-radius: 18rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
&.project-stat {
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
}
&.record-stat {
background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
}
&.student-stat {
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
}
}
.stat-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
justify-content: center;
gap: 4rpx;
}
.stat-value {
font-size: 40rpx;
font-weight: 700;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-value {
font-size: 42rpx;
font-weight: 700;
background: linear-gradient(135deg, #333 0%, #666 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.stat-label {
font-size: 24rpx;
color: #999;
font-weight: 500;
}
.stat-label {
font-size: 24rpx;
color: #999;
font-weight: 500;
}
.stat-divider {
width: 1rpx;
height: 60rpx;
height: 80rpx;
background: linear-gradient(180deg, transparent 0%, #e8e8e8 50%, transparent 100%);
}
}
@@ -294,108 +355,159 @@
.menu-card {
background-color: #fff;
border-radius: 24rpx;
padding: 10rpx 0;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
border-radius: 28rpx;
padding: 8rpx 0;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.menu-item {
display: flex;
align-items: center;
padding: 32rpx 30rpx;
transition: all 0.25s ease;
padding: 36rpx 32rpx;
transition: all 0.3s ease;
position: relative;
&::after {
&::before {
content: '';
position: absolute;
left: 30rpx;
right: 30rpx;
bottom: 0;
left: 0;
right: 0;
top: 0;
height: 100%;
background: linear-gradient(90deg, rgba(24, 144, 255, 0.05) 0%, transparent 100%);
background: linear-gradient(90deg, rgba(24, 144, 255, 0.06) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.25s ease;
transition: opacity 0.3s ease;
pointer-events: none;
}
&:active {
background-color: #fafafa;
&::after {
&::before {
opacity: 1;
}
}
}
.menu-icon {
width: 88rpx;
height: 88rpx;
border-radius: 20rpx;
.menu-icon-bg {
width: 84rpx;
height: 84rpx;
border-radius: 22rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
position: relative;
&.project-icon {
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
&::after {
content: '';
position: absolute;
top: 6rpx;
right: 6rpx;
width: 18rpx;
height: 18rpx;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
&.academy-icon {
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
&.project-icon-bg {
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
}
&.analysis-icon {
background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
&.academy-icon-bg {
background: linear-gradient(135deg, #52c41a 0%, #73d13d 50%, #389e0d 100%);
}
&.settings-icon {
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
&.analysis-icon-bg {
background: linear-gradient(135deg, #faad14 0%, #ffc53d 50%, #d48806 100%);
}
&.about-icon {
background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
&.settings-icon-bg {
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #096dd9 100%);
}
&.about-icon-bg {
background: linear-gradient(135deg, #722ed1 0%, #9254de 50%, #531dab 100%);
}
}
.menu-content {
flex: 1;
}
.menu-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 6rpx;
display: block;
.menu-header {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 8rpx;
}
.menu-title {
font-size: 34rpx;
font-weight: 600;
color: #333;
}
.menu-tag {
padding: 4rpx 12rpx;
border-radius: 16rpx;
font-size: 20rpx;
font-weight: 500;
&.project-tag {
background: linear-gradient(135deg, rgba(24, 144, 255, 0.12) 0%, rgba(24, 144, 255, 0.08) 100%);
color: #1890ff;
}
.menu-desc {
font-size: 24rpx;
color: #999;
&.academy-tag {
background: linear-gradient(135deg, rgba(82, 196, 26, 0.12) 0%, rgba(82, 196, 26, 0.08) 100%);
color: #52c41a;
}
&.analysis-tag {
background: linear-gradient(135deg, rgba(250, 173, 20, 0.12) 0%, rgba(250, 173, 20, 0.08) 100%);
color: #faad14;
}
.tag-text {
font-size: 20rpx;
font-weight: 500;
}
}
.menu-desc {
font-size: 24rpx;
color: #999;
line-height: 1.4;
}
.menu-arrow {
transition: transform 0.3s ease;
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.menu-item:active {
.menu-icon {
transform: scale(0.95);
.menu-icon-bg {
transform: scale(0.92) translateY(2rpx);
}
.menu-arrow {
transform: translateX(6rpx);
background: rgba(24, 144, 255, 0.1);
transform: scale(1.1);
}
}
.menu-divider {
height: 1rpx;
background: linear-gradient(90deg, transparent 0%, #f0f0f0 20%, #f0f0f0 80%, transparent 100%);
margin: 0 30rpx;
background: linear-gradient(90deg, transparent 0%, #f0f0f0 15%, #f0f0f0 85%, transparent 100%);
margin: 0 32rpx;
}
}
</style>

457
src/pages/userFunc/analyze.vue
View File

@@ -8,71 +8,78 @@
</view>
</view>
<!-- 统计数据卡片 -->
<view class="stats-section">
<view class="stats-card">
<view class="stat-item">
<text class="stat-value">{{ projects.length }}</text>
<text class="stat-label">项目总数</text>
<!-- 功能入口卡片列表 -->
<view class="function-list">
<!-- 包干数据 -->
<view class="function-card package-card" @click="Service.GoPage('/pages/dataAnalyze/baoganAnalyze')">
<view class="card-icon package-icon">
<u-icon name="grid" size="36" color="#fff"></u-icon>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-value">{{ totalStudents }}</text>
<text class="stat-label">学员总数</text>
<view class="card-info">
<text class="card-title">包干数据</text>
<text class="card-desc">查看包干项目训练记录</text>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-value">{{ totalRecords }}</text>
<text class="stat-label">记录次数</text>
<view class="card-arrow">
<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
</view>
</view>
</view>
<!-- 项目列表区域 -->
<view class="projects-section">
<view class="section-header">
<text class="section-title">项目列表</text>
<text class="section-count">{{ projects.length }}个项目</text>
</view>
<view v-if="projects.length === 0" class="empty-state">
<view class="empty-icon">
<u-icon name="chart" size="64" color="#ddd"></u-icon>
<!-- 计时数据 -->
<view class="function-card timing-card" @click="Service.GoPage('/pages/dataAnalyze/timingAnalze')">
<view class="card-icon timing-icon">
<u-icon name="clock" size="36" color="#fff"></u-icon>
</view>
<view class="card-info">
<text class="card-title">计时数据</text>
<text class="card-desc">查看计时项目训练记录</text>
</view>
<view class="card-arrow">
<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
</view>
<text class="empty-text">暂无数据</text>
<text class="empty-desc">创建项目后这里会显示数据分析</text>
</view>
<view v-else class="projects-list">
<view v-for="(project, index) in projects" :key="project.id" class="project-card"
@click="Service.GoPage('/pages/userFunc/dataAnalyze')">
<view class="project-header">
<view class="project-mode" :class="getModeClass(project.mode)">
<text class="mode-text">{{ project.mode }}</text>
</view>
<view class="project-time">
<u-icon name="clock" size="14" color="#999"></u-icon>
<text class="time-text">{{ project.createTime }}</text>
</view>
</view>
<!-- 曲线走势图 -->
<view class="function-card chart-card" @click="Service.GoPage('/pages/dataAnalyze/Curve')">
<view class="card-icon chart-icon">
<u-icon name="calendar" size="36" color="#fff"></u-icon>
</view>
<view class="card-info">
<text class="card-title">曲线走势图</text>
<text class="card-desc">查看学员成绩趋势变化</text>
</view>
<view class="project-info">
<text class="project-name">{{ project.name }}</text>
<view class="project-stats">
<view class="stat-badge">
<u-icon name="account" size="14" color="#1890ff"></u-icon>
<text class="badge-text">{{ project.studentCount }}位学员</text>
</view>
<view v-if="project.recordCount > 0" class="stat-badge record-badge">
<u-icon name="checkmark-circle" size="14" color="#52c41a"></u-icon>
<text class="badge-text">{{ project.recordCount }}次记录</text>
</view>
</view>
</view>
<view class="card-arrow">
<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
</view>
</view>
<view class="project-arrow">
<u-icon name="arrow-right" size="18" color="#ccc"></u-icon>
</view>
<!-- 分段数据 -->
<view class="function-card segment-card" @click="goToSegment">
<view class="card-icon segment-icon">
<u-icon name="list" size="36" color="#fff"></u-icon>
</view>
<view class="card-info">
<text class="card-title">分段数据</text>
<text class="card-desc">查看分段训练记录</text>
</view>
<view class="card-arrow">
<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
</view>
</view>
<!-- 成绩排名 -->
<view class="function-card ranking-card" @click="Service.GoPage('/pages/dataAnalyze/grades')">
<view class="card-icon ranking-icon">
<u-icon name="integral" size="36" color="#fff"></u-icon>
</view>
<view class="card-info">
<text class="card-title">成绩排名</text>
<text class="card-desc">查看学员成绩排名情况</text>
</view>
<view class="card-arrow">
<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
</view>
</view>
</view>
@@ -82,70 +89,14 @@
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app"
import { Service } from '@/Service/Service'
import { ref, computed, } from 'vue'
import { ref } from 'vue'
// 定义项目类型
interface Project {
id : string
name : string
mode : '计时' | '包干' | '分段'
createTime : string
studentCount : number
recordCount : number
}
// 项目列表数据
const projects = ref<Project[]>([
{
id: '001',
name: '自由泳50米',
mode: '计时',
createTime: '2024-01-15 14:30',
studentCount: 8,
recordCount: 24
},
{
id: '002',
name: '蛙泳100米',
mode: '包干',
createTime: '2024-01-14 10:15',
studentCount: 6,
recordCount: 18
},
{
id: '003',
name: '仰泳200米',
mode: '分段',
createTime: '2024-01-13 16:45',
studentCount: 5,
recordCount: 20
},
{
id: '004',
name: '蝶泳50米',
mode: '计时',
createTime: '2024-01-12 09:20',
studentCount: 4,
recordCount: 12
},
{
id: '005',
name: '混合泳100米',
mode: '包干',
createTime: '2024-01-11 15:00',
studentCount: 7,
recordCount: 21
}
])
// 计算统计数据
const totalStudents = computed(() => {
return projects.value.reduce((sum, p) => sum + p.studentCount, 0)
})
const totalRecords = computed(() => {
return projects.value.reduce((sum, p) => sum + p.recordCount, 0)
})
// 功能入口数据统计
const packageCount = ref(18)
const timingCount = ref(36)
const chartCount = ref(12)
const segmentCount = ref(24)
const rankingCount = ref(15)
onLoad(() => {
@@ -155,14 +106,29 @@
})
// 获取模式对应的样式类
const getModeClass = (mode : string) => {
const classMap : Record<string, string> = {
'计时': 'mode-timing',
'包干': 'mode-package',
'分段': 'mode-segment'
}
return classMap[mode] || ''
// 跳转到包干数据
const goToPackageData = () => {
Service.GoPage('/pages/userFunc/project')
}
// 跳转到计时数据
const goToTimingData = () => {
Service.Msg('计时数据功能开发中')
}
// 跳转到曲线走势图
const goToChart = () => {
Service.GoPage('/pages/userFunc/dataAnalyze')
}
// 跳转到分段数据
const goToSegment = () => {
Service.GoPage('/pages/userFunc/segmentation')
}
// 跳转到成绩排名
const goToRanking = () => {
Service.Msg('成绩排名功能开发中')
}
</script>
@@ -197,106 +163,13 @@
}
}
/* 统计数据区域 */
.stats-section {
margin-bottom: 24rpx;
.stats-card {
background-color: #fff;
border-radius: 24rpx;
padding: 30rpx 20rpx;
display: flex;
align-items: center;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.stat-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8rpx;
.stat-value {
font-size: 44rpx;
font-weight: 700;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 24rpx;
color: #999;
font-weight: 500;
}
}
.stat-divider {
width: 1rpx;
height: 60rpx;
background: linear-gradient(180deg, transparent 0%, #e8e8e8 50%, transparent 100%);
}
}
/* 项目列表区域 */
.projects-section {
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.section-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
}
.section-count {
font-size: 24rpx;
color: #999;
background-color: #f5f5f5;
padding: 6rpx 16rpx;
border-radius: 16rpx;
}
}
.empty-state {
background-color: #fff;
border-radius: 24rpx;
padding: 100rpx 40rpx;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
.empty-icon {
margin-bottom: 24rpx;
opacity: 0.6;
}
.empty-text {
font-size: 30rpx;
font-weight: 600;
color: #666;
margin-bottom: 12rpx;
}
.empty-desc {
font-size: 24rpx;
color: #999;
}
}
}
.projects-list {
.project-card {
/* 功能入口卡片列表 */
.function-list {
.function-card {
background-color: #fff;
border-radius: 20rpx;
padding: 28rpx 24rpx;
margin-bottom: 16rpx;
padding: 32rpx 28rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
@@ -311,7 +184,6 @@
top: 0;
bottom: 0;
width: 6rpx;
background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
@@ -325,101 +197,90 @@
}
}
.project-header {
position: absolute;
top: 20rpx;
right: 24rpx;
&.package-card::before {
background: linear-gradient(180deg, #faad14 0%, #ffc53d 100%);
}
&.timing-card::before {
background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
}
&.chart-card::before {
background: linear-gradient(180deg, #52c41a 0%, #73d13d 100%);
}
&.segment-card::before {
background: linear-gradient(180deg, #722ed1 0%, #9254de 100%);
}
&.ranking-card::before {
background: linear-gradient(180deg, #eb2f96 0%, #f759ab 100%);
}
.card-icon {
width: 80rpx;
height: 80rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
gap: 12rpx;
justify-content: center;
flex-shrink: 0;
margin-right: 24rpx;
.project-mode {
padding: 6rpx 14rpx;
border-radius: 12rpx;
font-size: 22rpx;
font-weight: 600;
&.mode-timing {
background-color: #e6f7ff;
color: #1890ff;
}
&.mode-package {
background-color: #fff7e6;
color: #faad14;
}
&.mode-segment {
background-color: #f6ffed;
color: #52c41a;
}
.mode-text {
font-size: 22rpx;
font-weight: 600;
}
&.package-icon {
background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
box-shadow: 0 4rpx 12rpx rgba(250, 173, 20, 0.3);
}
.project-time {
display: flex;
align-items: center;
gap: 6rpx;
&.timing-icon {
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
}
.time-text {
font-size: 22rpx;
color: #999;
}
&.chart-icon {
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
}
&.segment-icon {
background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
box-shadow: 0 4rpx 12rpx rgba(114, 46, 209, 0.3);
}
&.ranking-icon {
background: linear-gradient(135deg, #eb2f96 0%, #f759ab 100%);
box-shadow: 0 4rpx 12rpx rgba(235, 47, 150, 0.3);
}
}
.project-info {
.card-info {
flex: 1;
padding-right: 60rpx;
margin-right: 20rpx;
.project-name {
.card-title {
font-size: 32rpx;
font-weight: 600;
font-weight: 700;
color: #333;
display: block;
margin-bottom: 16rpx;
margin-bottom: 8rpx;
}
.project-stats {
display: flex;
gap: 12rpx;
flex-wrap: wrap;
.stat-badge {
display: flex;
align-items: center;
gap: 6rpx;
padding: 8rpx 14rpx;
background-color: #f5f5f5;
border-radius: 12rpx;
&.record-badge {
background-color: #f6ffed;
}
.badge-text {
font-size: 22rpx;
color: #666;
font-weight: 500;
}
}
.card-desc {
font-size: 24rpx;
color: #999;
display: block;
}
}
.project-arrow {
position: absolute;
right: 24rpx;
top: 50%;
transform: translateY(-50%);
.card-arrow {
flex-shrink: 0;
transition: transform 0.3s ease;
}
&:active .project-arrow {
transform: translateY(-50%) translateX(6rpx);
&:active .card-arrow {
transform: translateX(6rpx);
}
}
}

573
src/pages/userFunc/project.vue
View File

@@ -20,10 +20,10 @@
<view class="timers-grid">
<view v-for="(timer, index) in timers" :key="timer.id" class="timer-card-wrapper">
<view class="timer-circle">
<view class="timer-circle" @click="openTimerDetail(timer)">
<!-- 删除按钮 -->
<view class="delete-btn-wrapper">
<view class="delete-btn" @click="deleteTimer(timer, index)">
<view class="delete-btn" @click.stop="deleteTimer(timer, index)">
<u-icon name="trash" size="16" color="#fff"></u-icon>
</view>
</view>
@@ -42,11 +42,19 @@
<text class="rest-value">{{ formatRestTime(timer.displayRestTime) }}</text>
</view>
<view class="timer-controls">
<u-icon name="reload" size="32" color="#22a6f2" @click="resetTimer(timer)"></u-icon>
<u-icon v-if="timer.status !== 'completed'" :name="timer.status === 'running' ? 'pause-circle' : 'play-circle'" size="32" color="#22a6f2"
@click="toggleTimer(timer)"></u-icon>
<u-icon v-if="timer.status !== 'completed'" name="checkmark-circle" size="32" color="#52c41a" @click="completeTimer(timer)"></u-icon>
<view class="timer-controls">
<view class="" @click.stop="recordTimer(timer)">
<u-icon name="edit-pen" size="32" color="#22a6f2"></u-icon>
</view>
<view v-if="timer.status !== 'completed'" @click.stop="toggleTimer(timer)" class="">
<u-icon
:name="timer.status === 'running' ? 'pause-circle' : 'play-circle'" size="32"
color="#22a6f2"></u-icon>
</view>
<view v-if="timer.status !== 'completed'" @click.stop="completeTimer(timer)" class="">
<u-icon name="checkmark-circle" size="32"
color="#52c41a"></u-icon>
</view>
<u-icon v-else name="checkmark-circle" size="32" color="#52c41a"></u-icon>
</view>
</view>
@@ -74,6 +82,57 @@
</button>
</view>
</view>
<!-- 底部弹出框 - 秒表详情 -->
<u-popup v-model:show="showTimerDetail" mode="bottom" :round="20" :closeable="true" closeOnClickOverlay>
<view class="timer-detail-popup">
<!-- 姓名显示 -->
<view class="detail-name">{{ selectedTimer?.studentName || '计时器' }}</view>
<!-- 秒表显示 -->
<view class="stopwatch-display">
<text class="stopwatch-time">{{ formatStopwatchTime(selectedTimer?.currentTime || 0) }}</text>
<text class="stopwatch-millis">{{ formatMillis(selectedTimer?.currentTime || 0) }}</text>
</view>
<!-- 休息时间显示 -->
<view class="stopwatch-rest" v-if="selectedTimer?.displayRestTime > 0 || selectedTimer?.status === 'paused'">
<text class="rest-label">休息时间</text>
<text class="rest-time-value">{{ formatRestTime(selectedTimer?.displayRestTime || 0) }}</text>
</view>
<!-- 记录列表 -->
<scroll-view scroll-y class="records-list"
v-if="selectedTimer?.records && selectedTimer.records.length > 0">
<view v-for="(record, idx) in selectedTimer.records" :key="idx" class="record-item">
<view class="record-info">
<text class="record-index">记录 {{ selectedTimer.records.length - idx }}</text>
<text class="record-time">{{ formatFullTime(record.time) }}</text>
</view>
<view v-if="record.restTime > 0" class="record-rest">
<text class="rest-tag">休息</text>
<text class="rest-value">{{ formatRestTime(record.restTime) }}</text>
</view>
</view>
</scroll-view>
<!-- 按钮组 -->
<view class="detail-buttons">
<view class="detail-btn detail-btn-reset" @click="resetSelectedTimer">
<u-icon name="reload" size="24" color="#fff"></u-icon>
<text class="btn-label">重置</text>
</view>
<view class="detail-btn detail-btn-main" @click="toggleSelectedTimer">
<u-icon :name="selectedTimer?.status === 'running' ? 'pause' : 'play-right'" size="32" color="#fff"></u-icon>
<text class="btn-label">{{ selectedTimer?.status === 'running' ? '暂停' : '开始' }}</text>
</view>
<view class="detail-btn detail-btn-record" @click="recordLap" :class="{ disabled: selectedTimer?.status !== 'running' }">
<u-icon name="edit-pen" size="24" :color="selectedTimer?.status === 'running' ? '#fff' : '#bfbfbf'"></u-icon>
<text class="btn-label">记录</text>
</view>
</view>
</view>
</u-popup>
</view>
</template>
@@ -81,14 +140,21 @@
import { ref, onUnmounted, computed } from 'vue'
import { Service } from '@/Service/Service'
interface RecordItem {
time : number
restTime : number
}
interface TimerItem {
id: string
currentTime: number
status: 'idle' | 'running' | 'paused' | 'completed'
studentName: string
totalRestTime: number
pauseStartTime: number
displayRestTime: number
id : string
currentTime : number
status : 'idle' | 'running' | 'paused' | 'completed'
studentName : string
totalRestTime : number
pauseStartTime : number
displayRestTime : number
lastRecordRestTime : number
records ?: RecordItem[]
}
// 计划时长（秒）
@@ -98,13 +164,18 @@
const studentNames = ['张三', '李四', '王五', '赵六', '钱七', '孙八']
// 计时器列表
const timers = ref<TimerItem[]>([
{ id: '1', currentTime: 0, status: 'idle', studentName: studentNames[0], totalRestTime: 0, pauseStartTime: 0, displayRestTime: 0 },
{ id: '2', currentTime: 0, status: 'idle', studentName: studentNames[1], totalRestTime: 0, pauseStartTime: 0, displayRestTime: 0 }
{ id: '1', currentTime: 0, status: 'idle', studentName: studentNames[0], totalRestTime: 0, pauseStartTime: 0, displayRestTime: 0, lastRecordRestTime: 0, records: [] },
{ id: '2', currentTime: 0, status: 'idle', studentName: studentNames[1], totalRestTime: 0, pauseStartTime: 0, displayRestTime: 0, lastRecordRestTime: 0, records: [] }
])
// 底部弹出框相关
const showTimerDetail = ref(false)
const selectedTimer = ref<TimerItem | null>(null)
// 计时器间隔 - 主计时器
const timerIntervals = ref<Map<string, { interval: number, startTime: number }>>(new Map())
const timerIntervals = ref<Map<string, { interval : number, startTime : number }>>(new Map())
// 休息时间计时器
const restTimerIntervals = ref<Map<string, number>>(new Map())
@@ -114,7 +185,7 @@
})
// 格式化计划时间显示
const formatPlanTime = (seconds: number): string => {
const formatPlanTime = (seconds : number) : string => {
const hours = Math.floor(seconds / 3600)
const mins = Math.floor((seconds % 3600) / 60)
if (hours > 0) {
@@ -124,7 +195,7 @@
}
// 格式化时间显示
const formatTime = (seconds: number): string => {
const formatTime = (seconds : number) : string => {
const hours = Math.floor(seconds / 3600)
const mins = Math.floor((seconds % 3600) / 60)
const secs = Math.floor(seconds % 60)
@@ -132,7 +203,7 @@
}
// 格式化持续时间
const formatDuration = (seconds: number): string => {
const formatDuration = (seconds : number) : string => {
const hours = Math.floor(seconds / 3600)
const mins = Math.floor((seconds % 3600) / 60)
let result = ''
@@ -149,12 +220,33 @@
}
// 格式化休息时间
const formatRestTime = (seconds: number): string => {
const formatRestTime = (seconds : number) : string => {
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}
// 格式化秒表显示 (MM:SS)
const formatStopwatchTime = (seconds : number) : string => {
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}
// 格式化毫秒显示
const formatMillis = (seconds : number) : string => {
const millis = Math.floor((seconds % 1) * 100)
return `.${millis.toString().padStart(2, '0')}`
}
// 格式化完整时间 (MM:SS.xx)
const formatFullTime = (seconds : number) : string => {
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
const millis = Math.floor((seconds % 1) * 100)
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${millis.toString().padStart(2, '0')}`
}
// 添加计时器
const addTimer = () => {
const nextIndex = timers.value.length % studentNames.length
@@ -165,13 +257,15 @@
studentName: studentNames[nextIndex],
totalRestTime: 0,
pauseStartTime: 0,
displayRestTime: 0
displayRestTime: 0,
lastRecordRestTime: 0,
records: []
})
Service.Msg('添加成功', 'success')
}
// 删除计时器
const deleteTimer = (timer: TimerItem, index: number) => {
const deleteTimer = (timer : TimerItem, index : number) => {
uni.showModal({
title: '确认删除',
content: `确定要删除 ${timer.studentName || '计时器 ' + (index + 1)} 吗？`,
@@ -193,12 +287,15 @@
}
// 开始主计时器
const startTimer = (timer: TimerItem) => {
const startTimer = (timer : TimerItem) => {
if (timer.status === 'running') return
// 停止休息计时器，保存当前休息时间
if (timer.status === 'paused') {
stopRestTimer(timer)
// 计算这次暂停的休息时间间隔，累加到lastRecordRestTime
const currentPauseRestTime = timer.displayRestTime - timer.totalRestTime
timer.lastRecordRestTime += currentPauseRestTime
}
timer.status = 'running'
@@ -213,7 +310,7 @@
}
// 停止单个主计时器
const stopSingleTimer = (timer: TimerItem) => {
const stopSingleTimer = (timer : TimerItem) => {
if (timer.status !== 'running') return
timer.status = 'paused'
@@ -224,12 +321,12 @@
timerIntervals.value.delete(timer.id)
}
// 开始休息计时器，从总休息时间继续
// 开始休息计时器，从总休息时间继续，自动计算休息时间间隔
startRestTimer(timer)
}
// 开始休息计时器
const startRestTimer = (timer: TimerItem) => {
const startRestTimer = (timer : TimerItem) => {
timer.pauseStartTime = Date.now()
const interval = setInterval(() => {
@@ -241,7 +338,7 @@
}
// 停止休息计时器
const stopRestTimer = (timer: TimerItem) => {
const stopRestTimer = (timer : TimerItem) => {
const interval = restTimerIntervals.value.get(timer.id)
if (interval) {
clearInterval(interval)
@@ -281,7 +378,7 @@
}
// 切换计时器状态
const toggleTimer = (timer: TimerItem) => {
const toggleTimer = (timer : TimerItem) => {
if (timer.status === 'completed') return
if (timer.status === 'running') {
stopSingleTimer(timer)
@@ -291,7 +388,7 @@
}
// 完成计时器
const completeTimer = (timer: TimerItem) => {
const completeTimer = (timer : TimerItem) => {
// 如果正在暂停中，保存休息时间
if (timer.status === 'paused') {
stopRestTimer(timer)
@@ -307,8 +404,22 @@
Service.Msg('已完成，所有计时器已暂停', 'success')
}
// 记录计时
const recordTimer = (timer : TimerItem) => {
if (timer.status !== 'running') {
Service.Msg('请在运行中记录')
return
}
if (!timer.records) {
timer.records = []
}
timer.records.push({ time: timer.currentTime, restTime: timer.lastRecordRestTime })
timer.lastRecordRestTime = 0
Service.Msg('已记录')
}
// 重置计时器
const resetTimer = (timer: TimerItem) => {
const resetTimer = (timer : TimerItem) => {
stopSingleTimer(timer)
stopRestTimer(timer)
timer.currentTime = 0
@@ -316,9 +427,68 @@
timer.totalRestTime = 0
timer.displayRestTime = 0
timer.pauseStartTime = 0
timer.lastRecordRestTime = 0
timer.records = []
Service.Msg('已重置')
}
// 打开计时器详情
const openTimerDetail = (timer : TimerItem) => {
selectedTimer.value = timer
showTimerDetail.value = true
}
// 记录圈数
const recordLap = () => {
if (!selectedTimer.value) {
Service.Msg('未选择计时器')
return
}
// 如果是暂停状态，需要先保存当前的休息时间
if (selectedTimer.value.status === 'paused') {
stopRestTimer(selectedTimer.value)
const currentRestTime = selectedTimer.value.displayRestTime - selectedTimer.value.totalRestTime
selectedTimer.value.lastRecordRestTime += currentRestTime
selectedTimer.value.totalRestTime = selectedTimer.value.displayRestTime
}
// 如果不是运行状态，提示需要先开始
if (selectedTimer.value.status !== 'running') {
Service.Msg('请先开始计时器')
return
}
// 创建记录数组
if (!selectedTimer.value.records) {
selectedTimer.value.records = []
}
// 保存当前休息时间到记录
selectedTimer.value.records.push({
time: selectedTimer.value.currentTime,
restTime: selectedTimer.value.lastRecordRestTime
})
// 重置上次记录的休息时间
selectedTimer.value.lastRecordRestTime = 0
Service.Msg('已记录')
}
// 切换选中的计时器
const toggleSelectedTimer = () => {
if (selectedTimer.value) {
toggleTimer(selectedTimer.value)
}
}
// 重置选中的计时器
const resetSelectedTimer = () => {
if (selectedTimer.value) {
resetTimer(selectedTimer.value)
}
}
// 提交数据
const submitData = () => {
// 先暂停所有计时器
@@ -362,24 +532,38 @@
/* 卡片区域 */
.card-section {
background-color: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.section-title {
font-size: 28rpx;
font-size: 30rpx;
font-weight: 600;
color: #333;
margin-bottom: 24rpx;
color: #262626;
margin-bottom: 28rpx;
position: relative;
padding-left: 20rpx;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6rpx;
height: 28rpx;
background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
border-radius: 3rpx;
}
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
margin-bottom: 32rpx;
.section-title {
margin-bottom: 0;
@@ -388,13 +572,20 @@
.add-btn {
display: flex;
align-items: center;
gap: 8rpx;
gap: 10rpx;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
padding: 12rpx 24rpx;
border-radius: 30rpx;
padding: 14rpx 28rpx;
border-radius: 32rpx;
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.2);
}
.add-text {
font-size: 24rpx;
font-size: 26rpx;
color: #fff;
font-weight: 500;
}
@@ -404,14 +595,45 @@
/* 计划时长显示 */
.plan-duration-display {
text-align: center;
padding: 30rpx;
background-color: #f5f5f5;
border-radius: 16rpx;
padding: 40rpx 30rpx;
background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
border-radius: 20rpx;
border: 2rpx solid #bae7ff;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: linear-gradient(
45deg,
transparent 40%,
rgba(255, 255, 255, 0.3) 50%,
transparent 60%
);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.duration-value {
font-size: 36rpx;
font-weight: 600;
color: #333;
font-size: 42rpx;
font-weight: 700;
color: #1890ff;
position: relative;
z-index: 1;
font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
}
}
@@ -607,4 +829,257 @@
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
}
}
/* 计时器卡片可点击 */
.timer-circle {
cursor: pointer;
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
}
}
/* 底部弹出框样式 - 简洁版 */
.timer-detail-popup {
padding: 50rpx 40rpx;
padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
min-height: 450rpx;
max-height: 75vh;
display: flex;
flex-direction: column;
}
/* 详情姓名 */
.detail-name {
text-align: center;
font-size: 32rpx;
font-weight: 500;
color: #8c8c8c;
margin-bottom: 40rpx;
letter-spacing: 2rpx;
}
/* 秒表显示 */
.stopwatch-display {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 50rpx;
}
.stopwatch-time {
font-size: 100rpx;
font-weight: 300;
color: #1a1a1a;
font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
letter-spacing: 2rpx;
}
.stopwatch-millis {
font-size: 48rpx;
font-weight: 300;
color: #bfbfbf;
font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
margin-left: 4rpx;
}
/* 休息时间显示 */
.stopwatch-rest {
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
margin-bottom: 40rpx;
padding: 16rpx 32rpx;
background-color: #fff7e6;
border-radius: 16rpx;
.rest-label {
font-size: 26rpx;
color: #fa8c16;
font-weight: 500;
}
.rest-time-value {
font-size: 32rpx;
color: #fa8c16;
font-weight: 600;
font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
}
}
/* 记录列表 */
.records-list {
flex: 1;
max-height: 280rpx;
margin-bottom: 40rpx;
background-color: #fafafa;
border-radius: 16rpx;
padding: 0 20rpx;
}
.record-item {
padding: 20rpx 24rpx;
margin-bottom: 12rpx;
background-color: #fff;
border-radius: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.08);
}
}
.record-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8rpx;
}
.record-index {
font-size: 24rpx;
color: #8c8c8c;
font-weight: 400;
background: linear-gradient(135deg, #f0f0f0 0%, #fafafa 100%);
padding: 4rpx 14rpx;
border-radius: 8rpx;
}
.record-time {
font-size: 32rpx;
font-weight: 600;
color: #262626;
font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
}
.record-rest {
display: flex;
align-items: center;
gap: 12rpx;
margin-top: 8rpx;
}
.rest-tag {
font-size: 20rpx;
color: #fff;
font-weight: 500;
background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
padding: 4rpx 14rpx;
border-radius: 8rpx;
}
.rest-value {
font-size: 24rpx;
color: #fa8c16;
font-weight: 600;
font-family: 'DIN Alternate', 'Helvetica Neue', monospace;
}
/* 详情按钮 - 符合项目整体风格的圆形按钮 */
.detail-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 50rpx;
}
.detail-btn {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6rpx;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
pointer-events: none;
}
&:active {
transform: scale(0.95);
}
.btn-label {
font-size: 22rpx;
font-weight: 500;
}
}
/* 重置按钮 - 项目蓝色渐变风格 */
.detail-btn-reset {
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.4);
&:active {
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
}
.btn-label {
color: #fff;
}
}
/* 主按钮（开始/暂停）- 项目橙色渐变风格（与计时器卡片一致） */
.detail-btn-main {
width: 160rpx;
height: 160rpx;
border-radius: 80rpx;
background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
box-shadow: 0 8rpx 24rpx rgba(250, 140, 22, 0.4);
gap: 8rpx;
&:active {
box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3);
}
.btn-label {
color: #fff;
font-size: 26rpx;
font-weight: 600;
}
}
/* 记录按钮 - 项目绿色渐变风格 */
.detail-btn-record {
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
box-shadow: 0 8rpx 24rpx rgba(82, 196, 26, 0.4);
&:active {
box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
}
.btn-label {
color: #fff;
}
}
/* 记录按钮禁用状态 */
.detail-btn-record.disabled {
background: #d9d9d9;
box-shadow: none;
pointer-events: none;
.btn-label {
color: #8c8c8c;
}
}
</style>

174
src/pages/userFunc/projectList.vue
View File

@@ -2,7 +2,7 @@
<view class="project-list-container">
<!-- 页面标题区域 -->
<view class="header-section">
<view class="header-title" style="display: flex; align-items: center; justify-content: space-between;" >
<view class="header-title" style="display: flex; align-items: center; justify-content: space-between;">
<text class="title">项目列表</text>
<text class="subtitle">{{ projects.length }}个项目</text>
</view>
@@ -19,60 +19,55 @@
</view>
<view v-else class="projects-list">
<view v-for="(project, index) in projects" :key="project.id" class="project-card" @click="viewProjectDetail(project)">
<view class="project-header">
<view class="project-mode" :class="getModeClass(project.mode)">
<text class="mode-text">{{ project.mode }}</text>
</view>
<view class="project-time">
<u-icon name="clock" size="14" color="#999"></u-icon>
<text class="time-text">{{ project.createTime }}</text>
</view>
<view v-for="(project, index) in projects" :key="project.id" class="project-card"
@click="viewProjectDetail(project)">
<view class="project-delete" @click.stop="deleteProject(project, index)">
<u-icon name="trash" size="18" color="#ff4d4f"></u-icon>
</view>
<view class="project-info">
<text class="project-name">{{ project.name }}</text>
<view class="project-title-row">
<text class="project-name">{{ project.name }}</text>
<view class="project-mode" :class="getModeClass(project.mode)">
<text class="mode-text">{{ project.mode }}</text>
</view>
</view>
<view class="project-stats">
<view class="stat-badge">
<u-icon name="account" size="14" color="#1890ff"></u-icon>
<text class="badge-text">{{ project.studentCount }}位学员</text>
</view>
<view v-if="project.recordCount > 0" class="stat-badge record-badge">
<u-icon name="checkmark-circle" size="14" color="#52c41a"></u-icon>
<text class="badge-text">{{ project.recordCount }}条记录</text>
</view>
</view>
</view>
<view class="project-arrow">
<u-icon name="arrow-right" size="18" color="#ccc"></u-icon>
<view class="project-footer">
<view class="">
</view>
<view class="project-time">
<u-icon name="clock" size="14" color="#999"></u-icon>
<text class="time-text">{{ project.createTime }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 底部添加按钮 -->
<view class="bottom-add-btn">
<button class="add-btn" @click="addProject">
<u-icon name="plus" size="24" color="#fff"></u-icon>
<text class="btn-text">添加项目</text>
</button>
</view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app"
import { onShow, onLoad } from "@dcloudio/uni-app"
import { Service } from '@/Service/Service'
import { ref } from "vue"
// 定义项目类型
interface Project {
id: string
name: string
mode: '计时' | '包干' | '分段'
createTime: string
studentCount: number
recordCount: number
id : string
name : string
mode : '计时' | '包干' | '分段'
createTime : string
studentCount : number
recordCount : number
}
// 项目列表数据
@@ -128,8 +123,8 @@
})
// 获取模式对应的样式类
const getModeClass = (mode: string): string => {
const classMap: Record<string, string> = {
const getModeClass = (mode : string) : string => {
const classMap : Record<string, string> = {
'计时': 'mode-timing',
'包干': 'mode-package',
'分段': 'mode-segment'
@@ -138,10 +133,18 @@
}
// 查看项目详情
const viewProjectDetail = (project: Project) => {
const viewProjectDetail = (project : Project) => {
Service.Msg(`查看「${project.name}」详情`)
}
// 删除项目
const deleteProject = (project : Project, index : number) => {
Service.Confirm(`确定要删除「${project.name}」吗？`, () => {
projects.value.splice(index, 1)
Service.Msg('删除成功')
})
}
// 添加项目
const addProject = () => {
Service.GoPage('/pages/userFunc/setCourse')
@@ -236,8 +239,6 @@
border-radius: 20rpx;
padding: 28rpx 24rpx;
margin-bottom: 16rpx;
display: flex;
align-items: center;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
@@ -264,19 +265,50 @@
}
}
.project-header {
.project-delete {
position: absolute;
top: 20rpx;
right: 24rpx;
right: 20rpx;
width: 44rpx;
height: 44rpx;
border-radius: 50%;
background: linear-gradient(135deg, #fff1f0 0%, #ffccc7 100%);
display: flex;
align-items: center;
gap: 12rpx;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(255, 77, 79.3);
transition: all 0.3s ease;
z-index: 2;
&:active {
transform: scale(0.9);
background: linear-gradient(135deg, #ffccc7 0%, #ffa39e 100%);
}
}
.project-info {
padding-right: 80rpx;
.project-title-row {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 16rpx;
flex-wrap: wrap;
}
.project-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.project-mode {
padding: 6rpx 14rpx;
border-radius: 12rpx;
font-size: 22rpx;
font-weight: 600;
flex-shrink: 0;
&.mode-timing {
background-color: #e6f7ff;
@@ -299,30 +331,6 @@
}
}
.project-time {
display: flex;
align-items: center;
gap: 6rpx;
.time-text {
font-size: 22rpx;
color: #999;
}
}
}
.project-info {
flex: 1;
padding-right: 60rpx;
.project-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 16rpx;
}
.project-stats {
display: flex;
gap: 12rpx;
@@ -349,16 +357,40 @@
}
}
.project-arrow {
position: absolute;
right: 24rpx;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease;
.project-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
padding-top: 16rpx;
border-top: 1rpx solid #f0f0f0;
.project-time {
display: flex;
align-items: center;
gap: 6rpx;
.time-text {
font-size: 22rpx;
color: #999;
}
}
.project-arrow {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
}
&:active .project-arrow {
transform: translateY(-50%) translateX(6rpx);
transform: translateX(6rpx);
background-color: rgba(24, 144, 255, 0.1);
}
}
}

2
src/pages/userFunc/segmentation.vue
View File

@@ -51,7 +51,7 @@
<text class="segment-label">第{{ segIndex + 1 }}段</text>
<text class="segment-time">{{ segment.time ? formatTime(segment.time) : '--:--.--' }}</text>
</view>
<view class="segment-item empty">
<view v-if="student.segments.length<4" class="segment-item empty">
<text class="segment-label">第{{ student.segments.length + 1 }}段</text>
<text class="segment-time">--:--.--</text>
</view>

226
src/pages/userFunc/student.vue
View File

@@ -21,9 +21,29 @@
<view v-else class="students-list">
<view v-for="(student, index) in students" :key="student.id" class="student-card">
<view class="student-info">
<view class="student-number">{{ student.number }}</view>
<view class="student-avatar">
<text class="avatar-text">{{ student.name.charAt(0) }}</text>
</view>
<view class="student-details">
<text class="student-name">{{ student.name }}</text>
<view class="detail-row">
<text class="student-name">{{ student.name }}</text>
<view class="student-gender" :class="student.gender === '男' ? 'male' : 'female'">
<u-icon :name="student.gender === '男' ? 'man' : 'woman'" size="14"></u-icon>
{{ student.gender }}
</view>
</view>
<view class="detail-row">
<text class="detail-label">年龄：</text>
<text class="detail-value">{{ student.age }}岁</text>
</view>
<view v-if="student.school" class="detail-row">
<text class="detail-label">学校：</text>
<text class="detail-value">{{ student.school }}</text>
</view>
<view v-if="student.address" class="detail-row">
<text class="detail-label">住址：</text>
<text class="detail-value address-text">{{ student.address }}</text>
</view>
</view>
</view>
<view class="student-actions">
@@ -56,14 +76,35 @@
</view>
</view>
<view class="modal-content">
<view class="form-group">
<text class="form-label">序号</text>
<input class="form-input" v-model="formData.number" placeholder="请输入序号" type="text" />
</view>
<view class="form-group">
<text class="form-label">学员姓名</text>
<input class="form-input" v-model="formData.name" placeholder="请输入学员姓名" type="text" />
</view>
<view class="form-group">
<text class="form-label">性别</text>
<view class="gender-selector">
<view class="gender-option" :class="{ active: formData.gender === '男' }" @click="formData.gender = '男'">
<u-icon name="man" size="18" :color="formData.gender === '男' ? '#1890ff' : '#999'"></u-icon>
<text>男</text>
</view>
<view class="gender-option" :class="{ active: formData.gender === '女' }" @click="formData.gender = '女'">
<u-icon name="woman" size="18" :color="formData.gender === '女' ? '#fa8c16' : '#999'"></u-icon>
<text>女</text>
</view>
</view>
</view>
<view class="form-group">
<text class="form-label">年龄</text>
<input class="form-input" v-model="formData.age" placeholder="请输入年龄" type="number" />
</view>
<view class="form-group">
<text class="form-label">学校（选填）</text>
<input class="form-input" v-model="formData.school" placeholder="请输入学校名称" type="text" />
</view>
<view class="form-group">
<text class="form-label">家庭住址（选填）</text>
<input class="form-input" v-model="formData.address" placeholder="请输入家庭住址" type="text" />
</view>
</view>
<view class="modal-footer">
<button class="modal-cancel-btn" @click="closeModal">取消</button>
@@ -84,16 +125,19 @@
// 定义学员类型
interface Student {
id : string
number : string
name : string
gender : string
age : string
school : string
address : string
}
// 学员列表
const students = ref<Student[]>([
{ id: '001', number: '01', name: '张三' },
{ id: '002', number: '02', name: '李四' },
{ id: '003', number: '03', name: '王五' },
{ id: '004', number: '04', name: '赵六' }
{ id: '001', name: '张三', gender: '男', age: '12', school: '第一小学', address: '北京市朝阳区' },
{ id: '002', name: '李四', gender: '女', age: '13', school: '', address: '' },
{ id: '003', name: '王五', gender: '男', age: '11', school: '第二小学', address: '' },
{ id: '004', name: '赵六', gender: '女', age: '12', school: '', address: '上海市浦东新区' }
])
// 弹窗状态
@@ -103,8 +147,11 @@
// 表单数据
const formData = ref({
id: '',
number: '',
name: ''
name: '',
gender: '男',
age: '',
school: '',
address: ''
})
// 当前编辑的学员
@@ -123,8 +170,11 @@
editingStudent.value = student
formData.value = {
id: student.id,
number: student.number,
name: student.name
name: student.name,
gender: student.gender,
age: student.age,
school: student.school,
address: student.address
}
showEditModal.value = true
}
@@ -136,20 +186,23 @@
editingStudent.value = null
formData.value = {
id: '',
number: '',
name: ''
name: '',
gender: '男',
age: '',
school: '',
address: ''
}
}
// 保存学员
const saveStudent = () => {
if (!formData.value.number.trim()) {
Service.Msg('请输入序号')
if (!formData.value.name.trim()) {
Service.Msg('请输入学员姓名')
return
}
if (!formData.value.name.trim()) {
Service.Msg('请输入学员姓名')
if (!formData.value.age.trim()) {
Service.Msg('请输入年龄')
return
}
@@ -157,8 +210,11 @@
// 添加新学员
const newStudent : Student = {
id: Date.now().toString().slice(-6),
number: formData.value.number.trim(),
name: formData.value.name.trim()
name: formData.value.name.trim(),
gender: formData.value.gender,
age: formData.value.age.trim(),
school: formData.value.school.trim(),
address: formData.value.address.trim()
}
students.value.push(newStudent)
Service.Msg('添加成功', 'success')
@@ -168,8 +224,11 @@
if (index !== -1) {
students.value[index] = {
...students.value[index],
number: formData.value.number.trim(),
name: formData.value.name.trim()
name: formData.value.name.trim(),
gender: formData.value.gender,
age: formData.value.age.trim(),
school: formData.value.school.trim(),
address: formData.value.address.trim()
}
Service.Msg('修改成功', 'success')
}
@@ -267,10 +326,10 @@
.student-card {
background-color: #fff;
border-radius: 20rpx;
padding: 28rpx 24rpx;
padding: 24rpx;
margin-bottom: 16rpx;
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
@@ -282,36 +341,82 @@
.student-info {
display: flex;
align-items: center;
align-items: flex-start;
gap: 20rpx;
flex: 1;
.student-number {
width: 64rpx;
height: 64rpx;
background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
color: #1890ff;
font-size: 28rpx;
font-weight: 700;
border-radius: 14rpx;
.student-avatar {
width: 72rpx;
height: 72rpx;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.15);
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.25);
flex-shrink: 0;
.avatar-text {
color: #fff;
font-size: 32rpx;
font-weight: 700;
}
}
.student-details {
.student-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 6rpx;
flex: 1;
.detail-row {
display: flex;
align-items: center;
gap: 8rpx;
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
}
.student-id {
.student-name {
font-size: 32rpx;
font-weight: 700;
color: #333;
}
.student-gender {
display: flex;
align-items: center;
gap: 4rpx;
font-size: 24rpx;
font-weight: 500;
padding: 4rpx 12rpx;
border-radius: 12rpx;
&.male {
color: #1890ff;
background-color: #e6f7ff;
}
&.female {
color: #fa8c16;
background-color: #fff7e6;
}
}
.detail-label {
font-size: 24rpx;
color: #999;
flex-shrink: 0;
}
.detail-value {
font-size: 26rpx;
color: #666;
&.address-text {
font-size: 24rpx;
color: #888;
}
}
}
}
@@ -319,6 +424,8 @@
.student-actions {
display: flex;
gap: 12rpx;
flex-shrink: 0;
margin-top: 4rpx;
.action-btn {
width: 64rpx;
@@ -448,6 +555,37 @@
box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.15);
}
}
.gender-selector {
display: flex;
gap: 20rpx;
.gender-option {
flex: 1;
height: 88rpx;
background-color: #f5f5f5;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
font-size: 28rpx;
color: #666;
transition: all 0.25s ease;
border: 2rpx solid transparent;
&:active {
transform: scale(0.96);
}
&.active {
font-weight: 600;
background-color: #e6f7ff;
border-color: #1890ff;
color: #1890ff;
}
}
}
}
/* 弹窗按钮 */

86
src/pages/userFunc/swiming.vue
View File

@@ -24,9 +24,9 @@
</view>
<view class="athletes-list">
<view v-for="(athlete, index) in athletes" :key="athlete.id" class="athlete-item"
<view v-for="(athlete, index) in athletes" :key="athlete.id" @longpress="deleStu(athlete.id)" class="athlete-item"
:class="{ finished: athlete.finished, fastest: athlete.isFastest }">
<view class="athlete-number">{{ athlete.number }}</view>
<view class="athlete-number">{{ index+1 }}</view>
<view class="athlete-info">
<text class="athlete-name">{{ athlete.name }}</text>
<text class="athlete-lane">{{ athlete.lane }}</text>
@@ -91,7 +91,8 @@
</view>
</view>
<view class="modal-content">
<view class="stopwatch-option" :class="{ active: stopwatchMode === 'interval' }" @click="stopwatchMode = 'interval'">
<view class="stopwatch-option" :class="{ active: stopwatchMode === 'interval' }"
@click="stopwatchMode = 'interval'">
<view class="option-radio">
<view v-if="stopwatchMode === 'interval'" class="option-dot"></view>
</view>
@@ -140,6 +141,11 @@
<button class="modal-confirm-btn" @click="addNewStudent">添加</button>
</view>
</view>
<!-- 悬浮保存按钮 -->
<view class="float-save-btn" style="color: #fff; font-size: 24rpx;" @click="saveData">
保存
</view>
</view>
</template>
@@ -149,14 +155,14 @@
// 定义选手类型
interface Athlete {
id: string
number: string
name: string
lane: string
time: number
bestTime: number | null
finished: boolean
isFastest: boolean
id : string
number : string
name : string
lane : string
time : number
bestTime : number | null
finished : boolean
isFastest : boolean
}
// 选手列表
@@ -170,8 +176,8 @@
// 计时器状态
const isRunning = ref(false)
const currentTime = ref(0)
let timerInterval: number | null = null
let startTime: number = 0
let timerInterval : number | null = null
let startTime : number = 0
// 当前要记录的选手索引
const currentAthleteIndex = ref(0)
@@ -195,8 +201,26 @@
return athletes.value.filter(a => a.finished)
})
const deleStu = (id:any) => {
uni.showModal({
title: '提示', // 对话框标题
content: '是否删除该学生', // 显示的内容
showCancel: true, // 是否显示取消按钮
success: function (res) {
if (res.confirm) {
let index= athletes.value.findIndex((item)=>{
return item.id==id
})
athletes.value.splice(index,1)
} else if (res.cancel) {
}
}
});
}
// 格式化时间显示
const formatTime = (seconds: number): string => {
const formatTime = (seconds : number) : string => {
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
const ms = Math.floor((seconds % 1) * 100)
@@ -280,7 +304,7 @@
}
// 重置选手时间
const resetAthleteTime = (athlete: Athlete) => {
const resetAthleteTime = (athlete : Athlete) => {
athlete.time = 0
athlete.finished = false
athlete.isFastest = false
@@ -291,7 +315,7 @@
}
// 处理选手第一个按钮点击
const handleAthleteFirstButton = (athlete: Athlete, index: number) => {
const handleAthleteFirstButton = (athlete : Athlete, index : number) => {
// 如果是一起出发模式，记录该选手时间
if (stopwatchMode.value === 'together') {
if (athlete.finished) {
@@ -392,7 +416,7 @@
}
const newNumber = (athletes.value.length + 1).toString().padStart(2, '0')
const newAthlete: Athlete = {
const newAthlete : Athlete = {
id: Date.now().toString(),
number: newNumber,
name: newStudentName.value.trim(),
@@ -408,6 +432,18 @@
closeAddStudentModal()
}
// 保存数据
const saveData = () => {
const data = {
athletes: athletes.value,
currentTime: currentTime.value,
stopwatchMode: stopwatchMode.value,
intervalTime: intervalTime.value
}
Service.SetStorageCache('swimTimingData', data)
Service.Msg('保存成功', 'success')
}
// 页面卸载时清理计时器
onUnmounted(() => {
if (timerInterval) {
@@ -836,4 +872,20 @@
color: #333;
}
}
/* 悬浮保存按钮 */
.float-save-btn {
position: fixed;
right: 40rpx;
bottom: 160rpx;
width: 100rpx;
height: 100rpx;
background: linear-gradient(135deg, #1890ff, #40a9ff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.4);
z-index: 100;
}
</style>

BIN
src/static/tab/01.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
src/static/tab/02.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/static/tab/03.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
src/static/tab/04.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/static/tab/05.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/static/tab/06.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.0 KiB

BIN
src/static/tab/07.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

BIN
src/static/tab/08.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/static/tab/09.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/static/tab/10.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.1 KiB

101
src/uni_modules/sl-table/DYNAMIC_SLOT_COMPATIBILITY.md Normal file
View File

@@ -0,0 +1,101 @@
# Vue2 动态插槽名兼容性解决方案
## 问题描述
在Vue2环境中使用动态插槽名 `:name="dynamicSlotName"` 时，可能会遇到以下错误：
```
v-slot 不支持动态插槽名，请设置 scopedSlotsCompiler 为 augmented
```
## 解决方案
### 方案1：配置Vue编译器（推荐）
在项目根目录创建或修改 `vue.config.js`：
```javascript
module.exports = {
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
},
// 设置scopedSlotsCompiler为augmented
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.scopedSlotsCompiler = 'augmented'
return options
})
}
}
```
### 方案2：代码层面解决（已实现）
sl-table组件已经修改为兼容写法：
```vue
<!-- 修改前（有问题） -->
<slot :name="cell.slot" :row="tableData[cell.rowIndex]" :cell="cell">
<!-- 修改后（兼容） -->
<template v-for="slotName in slotList" :key="slotName">
<slot
v-if="cell.slot === slotName"
:name="slotName"
:row="tableData[cell.rowIndex]"
:cell="cell">
</slot>
</template>
```
### 方案3：uni-app项目配置
如果是uni-app项目，在 `manifest.json` 中添加：
```json
{
"h5": {
"devServer": {
"disableHostCheck": true
}
},
"mp-weixin": {
"setting": {
"urlCheck": false
}
}
}
```
## 使用示例
### Vue2环境
```vue
<template>
<sl-table :columns="columns" :tableData="data">
<template slot="customSlot" slot-scope="{ row, cell }">
<view>{{ row.name }}</view>
</template>
</sl-table>
</template>
```
### 微信小程序环境
```vue
<template>
<sl-table columns="{{columns}}" tableData="{{data}}">
<template slot="customSlot" slot-scope="{{slotData}}">
<view>{{slotData.row.name}}</view>
</template>
</sl-table>
</template>
```
## 注意事项
1. 确保Vue版本为2.6+
2. 如果使用方案1，需要重启开发服务器
3. 方案2已经内置在组件中，无需额外配置
4. 微信小程序环境建议使用方案2的代码兼容方式

55
src/uni_modules/sl-table/changelog.md Normal file
View File

@@ -0,0 +1,55 @@
## 1.5.7（2026-01-30）
修复已知bug
## 1.5.6（2026-01-30）
修复已知bug
## 1.5.5（2026-01-06）
修复微信小程序兼容样式问题
## 1.5.4（2025-12-29）
修复已知bug
## 1.5.3（2025-12-23）
修复bug
## 1.5.2（2025-12-19）
表头排序：新增表头排序功能
## 1.5.1（2025-12-10）
优化
## 1.5（2025-12-10）
1.单选/多选：新增单选和多选功能，支持受控模式（selectedRows）
2.序号列：新增行号列功能（showRowIndex），支持自定义配置
## 1.4.1（2025-12-10）
动态合并单元格：支持竖向动态合并单元格
## 1.4（2025-12-04）
- ✅ **动态横向合并单元格**: 横向列合并单元格
## 1.3.6（2025-11-24）
修复bug，添加第一页的完成加载方法
## 1.3.5（2025-11-24）
修复bug
## 1.3.4（2025-11-24）
修改示例
## 1.3.3（2025-11-24）
- ✅ empty插槽：支持空数据插槽配置
- ✅ 更新columns表头样式配置项和tableData单元格样式配置项
## 1.3.2（2025-11-14）
修复已知bug
## 1.3.1（2025-11-14）
✅ 多级表头：支持到三级表头
## 1.3.0（2025-11-14）
- ✅ **新增横向滚动支持**：表格支持横向滚动，自动处理宽度计算
- ✅ **新增固定列功能**：支持左侧和右侧固定列
- ✅ **固定列阴影效果**：滚动时固定列显示阴影提示
- ✅ **百分比宽度优化**：百分比宽度自动转换为px，确保精确显示
- ✅ **性能优化**：优化追加数据时的渲染性能，使用样式缓存机制
- ✅ **加载更多优化**：加载更多提示固定在可视区域，不随横向滚动
## 1.2.2（2025-11-13）
固定高度场景下表头不参与滚动，新增上拉加载能力
## 1.2.1（2025-09-22）
修复已知bug
## 1.2.0（2025-09-11）
1.新增微信小程序适配支持
## 1.1.2（2025-08-08）
更新readme.md文件
## 1.1.1（2025-08-08）
修复bug
## 1.1.0（2025-08-08）
适配vue3
## 1.0.1（2025-03-03）
修改组件结构

853
src/uni_modules/sl-table/components/sl-table/header/index.vue Normal file
View File

@@ -0,0 +1,853 @@
<template>
<view class="header-container">
<view :style="[getGridStyle]" class="header-grid">
<!-- 选择列 -->
<view
v-if="selection"
class="header-item selection-header"
:style="[getSelectionHeaderStyle]"
@click.stop="handleSelectAllClick"
>
<view
class="header-item-label selection-label"
@click.stop="handleSelectAllClick"
>
<checkbox
style="transform: scale(0.7)"
v-if="selection === 'multiple'"
:checked="isAllSelected"
:indeterminate="indeterminate"
color="#1890ff"
@click.stop="handleSelectAllClick"
/>
<text v-else>—</text>
</view>
</view>
<!-- 行号列 -->
<view
v-if="showRowIndex"
class="header-item row-index-header"
:style="[getRowIndexHeaderStyle]"
>
<view class="header-item-label">{{
(rowIndexConfig && rowIndexConfig.label) || "序号"
}}</view>
</view>
<!-- 数据列 -->
<view
v-for="(header, index) in gridCell"
:key="index"
:class="[
'header-item',
header.fixed === 'left' && scrollLeft_b > 0
? 'fixed-left-box-shadow'
: '',
header.fixed === 'right' && scrollLeft_b < allWidth - containerWidth
? 'fixed-right-box-shadow'
: '',
header.isLastColumn ? 'last-header-item' : '',
]"
:style="[cellStyles(index)]"
>
<view class="header-item-label">
<view class="label-text">{{ header.label }}</view>
<view
v-if="header.sort"
class="sort-wrapper"
:class="{
'sort-active': isCurrentSortColumn(header),
'sort-asc':
isCurrentSortColumn(header) &&
getCurrentSortOrder(header) === 'asc',
'sort-desc':
isCurrentSortColumn(header) &&
getCurrentSortOrder(header) === 'desc',
}"
@click.stop="handleSortChange(header)"
>
<view class="sort-icon">
<view
class="sort-icon-up"
:class="{
active:
isCurrentSortColumn(header) &&
getCurrentSortOrder(header) === 'asc',
}"
></view>
<view
class="sort-icon-down"
:class="{
active:
isCurrentSortColumn(header) &&
getCurrentSortOrder(header) === 'desc',
}"
></view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* 表头组件
* 支持最多三级表头
* @author shiliu
*
* @props {columns} 表头数据列表
*
* @tips 示例数据：columns: [
{
label: '分类',
children: [],
prop: 'type',
width:'40%',
},
{
label: '总实收营业额（元）',
width:'30%',
children: [
{ label: '数值（占比）', prop: 'totalPercent', slot: 'customSlot',width:'100%', },
]
},
{
label: '总毛利额（元）',
width:'30%',
children: [
{ label: '数值（占比）', prop: 'name',width:'100%' },
]
},
],
*
*/
// Vue版本检测工具函数
const isVue2 = () => {
const Vue =
(typeof window !== "undefined" && window.Vue) ||
(typeof global !== "undefined" && global.Vue);
return Vue && Vue.version && Vue.version.startsWith("2.");
};
export default {
name: "DataTableHeader",
props: {
columns: {
type: Array,
default: () => [],
},
flattenColumns: {
type: Array,
default: () => [],
},
containerWidth: {
type: Number,
default: 0,
},
scrollLeft_b: {
type: Number,
default: 0,
},
allWidth: {
type: Number,
default: 0,
},
selection: {
type: [String, Boolean],
default: false,
},
isAllSelected: {
type: Boolean,
default: false,
},
indeterminate: {
type: Boolean,
default: false,
},
showRowIndex: {
type: Boolean,
default: false,
},
rowIndexConfig: {
type: Object,
default: () => ({
width: "60px",
label: "序号",
fixed: "left",
}),
},
debug: {
type: Boolean,
default: false,
},
defaultSort: {
type: Object,
default: () => {},
},
},
data() {
return {
timer: null,
// scrollLeft: 0
};
},
destroyed() {
this.timer && clearTimeout(this.timer);
this.timer = null;
},
computed: {
sortField() {
return this.defaultSort?.prop || "";
},
sortOrder() {
return this.defaultSort?.order || "";
},
getGridStyle() {
// 使用 flattenColumns（包含选择列）
const columnWidths = this.flattenColumns
.map((col) => {
const width = col.width || "1fr";
// 如果是百分比，转换为px
if (
typeof width === "string" &&
width.endsWith("%") &&
this.containerWidth > 0
) {
const percent = parseFloat(width);
if (!isNaN(percent)) {
return `${(this.containerWidth * percent) / 100}px`;
}
}
return width;
})
.join(" ");
return {
display: "grid",
gridTemplateColumns: columnWidths,
width: "100%",
};
},
getSelectionHeaderStyle() {
// 获取最大层级，选择列需要跨所有层级
const getMaxLevel = (cols, currentLevel = 1) => {
let max = currentLevel;
cols.forEach((item) => {
if (item.children?.length) {
const childLevel = getMaxLevel(item.children, currentLevel + 1);
max = Math.max(max, childLevel);
}
});
return max;
};
const maxLevel = getMaxLevel(this.columns, 1);
return {
gridColumn: "1",
gridRow: `1 / span ${maxLevel}`,
position: "sticky",
left: "0",
zIndex: 1001,
backgroundColor: "#F5F6FA",
};
},
getRowIndexHeaderStyle() {
// 获取最大层级，行号列需要跨所有层级
const getMaxLevel = (cols, currentLevel = 1) => {
let max = currentLevel;
cols.forEach((item) => {
if (item.children?.length) {
const childLevel = getMaxLevel(item.children, currentLevel + 1);
max = Math.max(max, childLevel);
}
});
return max;
};
const maxLevel = getMaxLevel(this.columns, 1);
// 找到行号列在 flattenColumns 中的索引
const rowIndexColIndex = this.flattenColumns.findIndex(
(col) => col.isRowIndex
);
// 计算左侧偏移量
let leftOffset = "auto";
if (rowIndexColIndex >= 0 && this.rowIndexConfig?.fixed === "left") {
// 使用 getStickyOffset 方法计算正确的偏移量
leftOffset = this.getStickyOffset(rowIndexColIndex, "left", 1);
}
// 计算右侧偏移量
let rightOffset = "auto";
if (rowIndexColIndex >= 0 && this.rowIndexConfig?.fixed === "right") {
rightOffset = this.getStickyOffset(rowIndexColIndex, "right", 1);
}
// 确定 gridColumn 位置
let gridColumn = "1";
if (this.selection && rowIndexColIndex >= 0) {
// 如果启用了选择列，行号列应该在第二列
gridColumn = "2";
} else if (rowIndexColIndex >= 0) {
// 如果没有选择列，行号列在第一列
gridColumn = "1";
}
// zIndex 层级：选择列(1001) > 行号列(1002) > 数据列(1000)
// 确保行号列不会被数据列覆盖
const zIndexValue = this.rowIndexConfig?.fixed ? 1002 : 1;
return {
gridColumn: gridColumn,
gridRow: `1 / span ${maxLevel}`,
position: this.rowIndexConfig?.fixed ? "sticky" : "static",
left: leftOffset,
right: rightOffset,
zIndex: zIndexValue,
backgroundColor: "#F5F6FA",
};
},
gridCell() {
// 递归计算最大层级
const getMaxLevel = (cols, currentLevel = 1) => {
let max = currentLevel;
cols.forEach((item) => {
if (item.children?.length) {
const childLevel = getMaxLevel(item.children, currentLevel + 1);
max = Math.max(max, childLevel);
}
});
return max;
};
const maxLevel = getMaxLevel(this.columns, 1);
// 递归计算列的实际跨度（计算所有叶子节点的数量）
const getColspan = (item) => {
if (!item.children?.length) {
return 1;
}
return item.children.reduce((sum, child) => sum + getColspan(child), 0);
};
// 计算最底层的列数（所有叶子节点的数量）
const getTotalCols = (cols) => {
return cols.reduce((sum, item) => {
if (!item.children?.length) {
return sum + 1;
}
return sum + getTotalCols(item.children);
}, 0);
};
const totalCols = getTotalCols(this.columns);
// 初始化cells数组，为每一层创建足够的单元格
let cells = Array(maxLevel)
.fill()
.map(() =>
Array(totalCols)
.fill(null)
.map(() => ({}))
);
// 填充实际的单元格数据
const fillCells = (columns, level, startIndex) => {
let currentIndex = startIndex;
columns.forEach((item) => {
const colspan = getColspan(item);
if (!item.children?.length) {
// 没有子列，需要计算rowspan（跨到最底层）
const rowspan = maxLevel - level;
cells[level][currentIndex] = {
...item,
rowspan: rowspan,
colspan: 1,
display: true,
rowIndex: level,
colIndex: currentIndex,
};
// 填充下方被合并的行
for (let i = 1; i < rowspan; i++) {
if (level + i < maxLevel) {
cells[level + i][currentIndex] = {
...cells[level + i][currentIndex],
display: false,
rowIndex: level,
colIndex: currentIndex,
};
}
}
// 移动到下一个索引
currentIndex++;
} else {
// 有子列，需要合并列
cells[level][currentIndex] = {
...item,
rowspan: 1,
colspan: colspan,
display: true,
rowIndex: level,
colIndex: currentIndex,
};
// 填充右侧被合并的列
for (let i = 1; i < colspan; i++) {
cells[level][currentIndex + i] = {
...cells[level][currentIndex + i],
display: false,
rowIndex: level,
colIndex: currentIndex + i,
};
}
// 递归处理子列
item.children.forEach((child) => {
currentIndex = fillCells([child], level + 1, currentIndex);
});
}
});
return currentIndex;
};
fillCells(this.columns, 0, 0);
const flattened = cells.flat().filter((cell) => cell && cell.display);
flattened.forEach((cell) => {
if (!cell) return;
const colIndex = cell.colIndex ?? 0;
const span = cell.colspan ?? 1;
// 调整 colIndex 以匹配 flattenColumns 中的实际索引
// flattenColumns 的顺序：选择列(0) + 行号列(1) + 数据列(2+)
let adjustedColIndex = colIndex;
if (this.selection) {
adjustedColIndex += 1; // 加上选择列
}
if (this.showRowIndex) {
adjustedColIndex += 1; // 加上行号列
}
cell.colIndex = adjustedColIndex;
// 判断是否是最后一列
if (colIndex + span >= totalCols) {
cell.isLastColumn = true;
}
});
console.log(flattened);
return flattened;
},
flattenColumnList() {
const result = [];
const flatten = (cols, parent) => {
cols.forEach((col) => {
if (col.children && col.children.length) {
flatten(col.children, col);
} else {
if (parent?.width && col?.width) {
let pWidth = Number(parent.width.split("%")[0]) * 0.01;
let cWidth = Number(col.width.split("%")[0]) * 0.01;
result.push({
...col,
width: pWidth * cWidth * 100 + "%",
});
} else {
result.push(col);
}
// result.push(col)
}
});
};
flatten(this.columns, null);
return result;
},
cellStyles() {
return function (index) {
const styles = {};
this.gridCell.forEach((cell, index) => {
styles[index] = this.getCellStyle(cell, cell.colIndex);
});
return styles[index];
};
},
},
methods: {
parseWidth(widthStr) {
if (!widthStr) {
return {
percent: 0,
px: 0,
valid: false,
};
}
const normalized = String(widthStr).trim();
const numericValue = parseFloat(normalized);
if (Number.isNaN(numericValue)) {
return {
percent: 0,
px: 0,
valid: false,
};
}
if (normalized.endsWith("%")) {
return {
percent: numericValue,
px: 0,
valid: true,
};
}
if (normalized.endsWith("rpx")) {
if (typeof uni !== "undefined" && typeof uni.upx2px === "function") {
return {
percent: 0,
px: uni.upx2px(numericValue),
valid: true,
};
}
return {
percent: 0,
px: numericValue,
valid: true,
};
}
if (normalized.endsWith("px")) {
return {
percent: 0,
px: numericValue,
valid: true,
};
}
return {
percent: 0,
px: 0,
valid: false,
};
},
getStickyOffset(colIndex, direction = "left", colspan = 1) {
const columns = this.flattenColumns || [];
if (!columns.length) return "0px";
let percent = 0;
let px = 0;
if (direction === "left") {
for (let i = 0; i < colIndex; i++) {
const colWidth = columns[i]?.width;
if (!colWidth) continue;
// 如果是百分比，需要转换为px（使用容器宽度）
if (
typeof colWidth === "string" &&
colWidth.endsWith("%") &&
this.containerWidth > 0
) {
const percentValue = parseFloat(colWidth);
if (!isNaN(percentValue)) {
px += (this.containerWidth * percentValue) / 100;
}
} else {
const { percent: p, px: x } = this.parseWidth(colWidth);
percent += p;
px += x;
}
}
} else {
for (let i = colIndex + colspan; i < columns.length; i++) {
const colWidth = columns[i]?.width;
if (!colWidth) continue;
// 如果是百分比，需要转换为px（使用容器宽度）
if (
typeof colWidth === "string" &&
colWidth.endsWith("%") &&
this.containerWidth > 0
) {
const percentValue = parseFloat(colWidth);
if (!isNaN(percentValue)) {
px += (this.containerWidth * percentValue) / 100;
}
} else {
const { percent: p, px: x } = this.parseWidth(colWidth);
percent += p;
px += x;
}
}
}
if (percent && px) {
return `calc(${percent}% + ${px}px)`;
}
if (percent) {
return `${percent}%`;
}
return `${px}px`;
},
handleScroll(e) {
//添加防抖
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(() => {
let scrollLeft = e.detail.scrollLeft;
this.$emit("scroll", scrollLeft);
}, 100);
},
// 计算每个label的高度
getCellStyle(cell, colIndex) {
// colIndex 已经是调整后的索引（在 gridCell 中已经考虑了选择列和行号列）
// 直接使用 colIndex 作为 flattenColumns 中的索引
const actualColIndex = colIndex;
const columnMeta = this.flattenColumns[actualColIndex] || {};
const baseWidth = columnMeta.width;
let width = baseWidth;
// 处理列合并的宽度
if (cell.colspan > 1) {
const colWidths = [];
for (let i = 0; i < cell.colspan; i++) {
const actualIndex = actualColIndex + i;
colWidths.push(this.flattenColumns[actualIndex]?.width || "100px");
}
width =
colWidths.reduce((sum, w) => {
const numWidth = parseInt(w);
return sum + (isNaN(numWidth) ? 100 : numWidth);
}, 0) + "px";
}
// 判断是否是 fixed='right' 的列
const isFixedRight =
cell.fixed === "right" || columnMeta.fixed === "right";
// 判断是否是挨着 fixed='right' 列最近的左侧列
const isAdjacentToFixedRight =
this.isAdjacentToFixedRight(actualColIndex);
this.debug && console.log(cell);
return {
// width: width,
flex: baseWidth ? "none" : "1",
display: cell.display ? "flex" : "none",
color: cell.textColor || "#333",
fontWeight: cell.bold ? "bold" : "normal",
gridRow: `span ${cell.rowspan}`,
gridColumn: `span ${cell.colspan}`,
position: cell.fixed ? "sticky" : "static",
left:
cell.fixed === "left"
? this.getStickyOffset(actualColIndex, "left", cell.colspan)
: "auto",
right:
cell.fixed === "right"
? this.getStickyOffset(actualColIndex, "right", cell.colspan)
: "auto",
zIndex: cell.fixed ? 1000 : 1,
backgroundColor: "#F5F6FA",
borderLeft: isFixedRight ? "1px solid #E7EAF2" : undefined,
borderRight: isAdjacentToFixedRight ? "none" : undefined,
...(cell.headerStyle || {}),
};
},
// 判断当前列是否是挨着 fixed='right' 列最近的左侧列
isAdjacentToFixedRight(colIndex) {
const nextColIndex = colIndex + 1;
if (nextColIndex >= this.flattenColumns.length) {
return false;
}
const currentCol = this.flattenColumns[colIndex] || {};
const nextCol = this.flattenColumns[nextColIndex] || {};
// 当前列不是 fixed，且下一列是 fixed='right'
return !currentCol.fixed && nextCol.fixed === "right";
},
// 处理全选点击
handleSelectAllClick() {
if (this.selection === "multiple") {
this.$emit("select-all", !this.isAllSelected);
}
},
/**
* 判断当前列是否是排序列
* @param {Object} header 表头配置
* @returns {Boolean}
*/
isCurrentSortColumn(header) {
return this.sortField === header.prop && this.sortOrder;
},
/**
* 获取当前列的排序顺序
* @param {Object} header 表头配置
* @returns {String} 'asc' | 'desc' | ''
*/
getCurrentSortOrder(header) {
if (this.isCurrentSortColumn(header)) {
return this.sortOrder;
}
return "";
},
/**
* 处理排序变化
* @param {Object} header 表头配置
*/
handleSortChange(header) {
if (!header.sort || !header.prop) {
return;
}
let newOrder = "desc"; // 默认降序
// 如果当前列已经是排序列
if (this.isCurrentSortColumn(header)) {
// 切换排序顺序：desc -> asc -> desc
if (this.sortOrder === "desc") {
newOrder = "asc";
} else if (this.sortOrder === "asc") {
newOrder = "desc";
}
}
// 触发排序变化事件
this.$emit("sort-change", {
prop: header.prop,
order: newOrder,
});
},
},
};
</script>
<style lang="scss">
.header-container {
display: flex;
// width: max-content;
background-color: #f5f6fa;
// border-top: 1px solid #E7EAF2;
// border-left: 1px solid #E7EAF2;
box-sizing: border-box;
position: sticky;
top: 0;
left: 0;
z-index: 3;
.header-grid {
display: grid;
}
.header-item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
border-right: 1px solid #e7eaf2;
border-bottom: 1px solid #e7eaf2;
box-sizing: border-box;
position: relative;
.header-item-label {
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f6fa;
padding: 8px;
font-size: 10px;
color: #1a1a1a;
text-align: center;
word-break: break-all;
box-sizing: border-box;
position: relative;
& + .header-item-label {
border-top: 1px solid #e7eaf2;
}
.label-text {
flex: 1;
text-align: center;
}
.sort-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-left: 4px;
cursor: pointer;
user-select: none;
padding: 2px;
transition: all 0.2s;
&:hover {
opacity: 0.8;
}
&.sort-active {
.sort-icon {
opacity: 1;
}
}
.sort-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 12px;
height: 14px;
opacity: 0.4;
transition: opacity 0.2s;
.sort-icon-up,
.sort-icon-down {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
transition: border-color 0.2s;
}
.sort-icon-up {
border-bottom: 5px solid #c0c4cc;
margin-bottom: 2px;
&.active {
border-bottom-color: #1890ff;
}
}
.sort-icon-down {
border-top: 5px solid #c0c4cc;
&.active {
border-top-color: #1890ff;
}
}
}
&.sort-asc .sort-icon,
&.sort-desc .sort-icon {
opacity: 1;
}
}
}
.flex {
display: flex;
border-top: 1px solid #e7eaf2; // 添加边框以确保对齐
}
.flex .header-item-label {
flex: 1;
& + .header-item-label {
border-left: 1px solid #e7eaf2;
}
}
&.last-header-item {
border-right: none;
}
&.selection-header {
cursor: pointer;
.selection-label {
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>

1822
src/uni_modules/sl-table/components/sl-table/sl-table.vue Normal file
View File

File diff suppressed because it is too large Load Diff

182
src/uni_modules/sl-table/examples/miniprogram-example.vue Normal file
View File

@@ -0,0 +1,182 @@
<!-- Vue2 使用示例（兼容微信小程序） -->
<template>
<view class="example-container">
<view class="example-title">Vue2兼容示例</view>
<!-- 基础表格 -->
<view class="section">
<view class="section-title">基础表格</view>
<sl-table
:columns="basicColumns"
:tableData="basicData"
@cell-click="handleCellClick"
/>
</view>
<!-- 合并单元格表格 -->
<view class="section">
<view class="section-title">合并单元格表格</view>
<sl-table
:columns="mergeColumns"
:tableData="mergeData"
@cell-click="handleCellClick"
>
<!-- Vue2插槽写法（兼容微信小程序） -->
<template slot="customSlot" slot-scope="{ row, cell }">
<view class="custom-slot">
<text class="highlight">{{ row.customField }}</text>
</view>
</template>
<template slot="customSlot2" slot-scope="{ row, cell }">
<view class="custom-slot">
<text class="highlight">{{ row.customField }}</text>
</view>
</template>
</sl-table>
</view>
</view>
</template>
<script>
export default {
name: 'Vue2Example',
data() {
return {
// 基础表格配置
basicColumns: [
{
label: '姓名',
prop: 'name',
width: '30%'
},
{
label: '年龄',
prop: 'age',
width: '20%'
},
{
label: '职位',
prop: 'position',
width: '25%'
},
{
label: '部门',
prop: 'department',
width: '25%'
}
],
basicData: [
{ name: '张三', age: 28, position: '前端工程师', department: '技术部' },
{ name: '李四', age: 32, position: '后端工程师', department: '技术部' },
{ name: '王五', age: 29, position: '产品经理', department: '产品部' },
{ name: '赵六', age: 35, position: '设计师', department: '设计部' }
],
// 合并表格配置
mergeColumns: [
{
label: '基本信息',
width: '40%',
children: [
{ label: '姓名', prop: 'name', width: '50%' },
{ label: '年龄', prop: 'age', width: '50%' }
]
},
{
label: '工作信息',
width: '60%',
children: [
{ label: '职位', prop: 'position', width: '50%' },
{ label: '自定义', prop: 'customField', slot: 'customSlot', width: '25%' },
{ label: '自定义', prop: 'customField', slot: 'customSlot2', width: '25%' },
]
}
],
mergeData: [
{
name: '张三',
age: {
value: '28岁',
rowspan: 2,
backgroundColor: '#e8f4fd',
textColor: '#1890ff'
},
position: '前端工程师',
customField: '优秀员工'
},
{
name: '李四',
age: {
display: false // 被合并的单元格
},
position: '后端工程师',
customField: '技术专家'
},
{
name: {
value: '王五',
backgroundColor: '#fff2e8',
textColor: '#fa8c16',
bold: true
},
age: '29岁',
position: '产品经理',
customField: '产品达人'
}
]
}
},
methods: {
handleCellClick(event) {
console.log('Vue2 - 单元格点击事件:', event)
this.$emit('cell-clicked', event)
}
},
// 微信小程序兼容说明：
// 1. slot用法：使用 slot="slotName" slot-scope="{ row, cell }" 而不是 #slotName
// 2. 数据绑定：微信小程序中使用 {{}} 语法
// 3. 事件绑定：微信小程序中使用 bind:eventName 语法
// 4. 样式绑定：组件内部已优化，:style="method()" 改为计算属性
// 5. 动态插槽：组件内部已优化，避免动态插槽名问题
// 6. 组件注册：微信小程序中使用 Page() 函数而不是 export default
}
</script>
<style lang="scss" scoped>
.example-container {
padding: 20px;
.example-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
color: #1890ff;
}
.section {
margin-bottom: 30px;
.section-title {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
}
.custom-slot {
display: flex;
align-items: center;
justify-content: center;
.highlight {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
}
}
}
</style>

303
src/uni_modules/sl-table/examples/vue2-example.vue Normal file
View File

@@ -0,0 +1,303 @@
<!-- Vue2 使用示例（兼容微信小程序） -->
<template>
<view class="example-container">
<view class="example-title">Vue2兼容示例</view>
<!-- 基础表格 -->
<view class="section">
<view class="section-title">基础表格</view>
<sl-table
:columns="basicColumns"
:tableData="basicData"
@cell-click="handleCellClick"
/>
</view>
<!-- 固定列表格 -->
<view class="section">
<view class="section-title">固定列表格（支持横向滚动）</view>
<sl-table
:columns="fixedColumns"
:tableData="fixedData"
@cell-click="handleCellClick"
/>
</view>
<!-- 合并单元格表格 -->
<view class="section">
<view class="section-title">合并单元格表格</view>
<sl-table
:columns="mergeColumns"
:tableData="mergeData"
@cell-click="handleCellClick"
>
<!-- Vue2插槽写法（兼容微信小程序） -->
<template slot="customSlot" slot-scope="{ row, cell }">
<view class="custom-slot">
<text class="highlight">{{ row.customField }}</text>
</view>
</template>
</sl-table>
</view>
<!-- 上拉加载表格 -->
<view class="section">
<view class="section-title">上拉加载表格</view>
<sl-table
:columns="basicColumns"
:tableData="loadMoreData"
:enableLoadMore="true"
@load-more="handleLoadMore"
@cell-click="handleCellClick"
/>
</view>
<!-- 空数据插槽 -->
<view class="section">
<view class="section-title">空数据插槽</view>
<sl-table
:columns="basicColumns"
:tableData="[]"
@cell-click="handleCellClick"
>
<template slot="empty">
<view class="empty-container">
<text class="empty-icon">📭</text>
<text class="empty-text">暂无数据，请稍后再试</text>
</view>
</template>
</sl-table>
</view>
</view>
</template>
<script>
export default {
name: 'Vue2Example',
data() {
return {
// 基础表格配置
basicColumns: [
{
label: '姓名',
prop: 'name',
width: '30%'
},
{
label: '年龄',
prop: 'age',
width: '20%'
},
{
label: '职位',
prop: 'position',
width: '25%'
},
{
label: '部门',
prop: 'department',
width: '25%'
}
],
basicData: [
{ name: '张三', age: 28, position: '前端工程师', department: '技术部' },
{ name: '李四', age: 32, position: '后端工程师', department: '技术部' },
{ name: '王五', age: 29, position: '产品经理', department: '产品部' },
{ name: '赵六', age: 35, position: '设计师', department: '设计部' }
],
// 固定列表格配置
fixedColumns: [
{
label: '姓名',
prop: 'name',
width: '100px',
fixed: 'left'
},
{
label: '年龄',
prop: 'age',
width: '80px'
},
{
label: '职位',
prop: 'position',
width: '150px'
},
{
label: '部门',
prop: 'department',
width: '120px'
},
{
label: '邮箱',
prop: 'email',
width: '200px'
},
{
label: '操作',
prop: 'action',
width: '100px',
fixed: 'right'
}
],
fixedData: [
{ name: '张三', age: 28, position: '前端工程师', department: '技术部', email: 'zhangsan@example.com', action: '编辑' },
{ name: '李四', age: 32, position: '后端工程师', department: '技术部', email: 'lisi@example.com', action: '编辑' },
{ name: '王五', age: 29, position: '产品经理', department: '产品部', email: 'wangwu@example.com', action: '编辑' }
],
// 合并表格配置
mergeColumns: [
{
label: '基本信息',
width: '40%',
children: [
{ label: '姓名', prop: 'name', width: '50%' },
{ label: '年龄', prop: 'age', width: '50%' }
]
},
{
label: '工作信息',
width: '60%',
children: [
{ label: '职位', prop: 'position', width: '50%' },
{ label: '自定义', prop: 'customField', slot: 'customSlot', width: '50%' }
]
}
],
mergeData: [
{
name: '张三',
age: {
value: '28岁',
rowspan: 2,
cellStyle: {
backgroundColor: '#e8f4fd',
color: '#1890ff'
}
},
position: '前端工程师',
customField: '优秀员工'
},
{
name: '李四',
age: {
display: false // 被合并的单元格
},
position: '后端工程师',
customField: '技术专家'
},
{
name: {
value: '王五',
cellStyle: {
backgroundColor: '#fff2e8',
color: '#fa8c16',
fontWeight: 'bold'
}
},
age: '29岁',
position: '产品经理',
customField: '产品达人'
}
],
// 上拉加载数据
loadMoreData: [
{ name: '张三', age: 28, position: '前端工程师', department: '技术部' },
{ name: '李四', age: 32, position: '后端工程师', department: '技术部' },
{ name: '王五', age: 29, position: '产品经理', department: '产品部' }
],
loadMorePage: 1
}
},
methods: {
handleCellClick(event) {
console.log('Vue2 - 单元格点击事件:', event)
uni.showToast({
title: `点击了第${event.rowIndex + 1}行第${event.colIndex + 1}列`,
icon: 'none'
})
},
handleLoadMore({ pageNum, done }) {
console.log('Vue2 - 上拉加载，当前页码:', pageNum)
// 模拟异步加载数据
setTimeout(() => {
const newData = [
{ name: `新用户${pageNum}-1`, age: 25, position: '测试工程师', department: '技术部' },
{ name: `新用户${pageNum}-2`, age: 27, position: 'UI设计师', department: '设计部' }
]
this.loadMoreData.push(...newData)
// 模拟加载到第3页后结束
const isLastPage = pageNum >= 3
done(isLastPage)
}, 1000)
}
},
// 微信小程序兼容说明：
// 1. slot用法：使用 slot="slotName" slot-scope="{ row, cell }" 而不是 #slotName
// 2. 数据绑定：微信小程序中使用 {{}} 语法
// 3. 事件绑定：微信小程序中使用 bind:eventName 语法
// 4. 样式绑定：组件内部已优化，:style="method()" 改为计算属性
// 5. 动态插槽：组件内部已优化，避免动态插槽名问题
// 6. 组件注册：微信小程序中使用 Page() 函数而不是 export default
}
</script>
<style lang="scss" scoped>
.example-container {
padding: 20px;
.example-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
color: #1890ff;
}
.section {
margin-bottom: 30px;
.section-title {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
}
.custom-slot {
display: flex;
align-items: center;
justify-content: center;
.highlight {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
}
}
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
.empty-icon {
font-size: 48px;
margin-bottom: 10px;
}
.empty-text {
font-size: 14px;
color: #999;
}
}
}
</style>

297
src/uni_modules/sl-table/examples/vue3-example.vue Normal file
View File

@@ -0,0 +1,297 @@
<!-- Vue3 使用示例 -->
<template>
<view class="example-container">
<view class="example-title">Vue3兼容示例</view>
<!-- 基础表格 -->
<view class="section">
<view class="section-title">基础表格</view>
<sl-table
:columns="basicColumns"
:tableData="basicData"
@cell-click="handleCellClick"
/>
</view>
<!-- 固定列表格 -->
<view class="section">
<view class="section-title">固定列表格（支持横向滚动）</view>
<sl-table
:columns="fixedColumns"
:tableData="fixedData"
@cell-click="handleCellClick"
/>
</view>
<!-- 合并单元格表格 -->
<view class="section">
<view class="section-title">合并单元格表格</view>
<sl-table
:columns="mergeColumns"
:tableData="mergeData"
@cell-click="handleCellClick"
>
<!-- Vue3风格的自定义插槽 -->
<template #customSlot="{ row, cell }">
<view class="custom-slot">
<text class="highlight">{{ row.customField }}</text>
</view>
</template>
</sl-table>
</view>
<!-- 上拉加载表格 -->
<view class="section">
<view class="section-title">上拉加载表格</view>
<sl-table
:columns="basicColumns"
:tableData="loadMoreData"
:enableLoadMore="true"
@load-more="handleLoadMore"
@cell-click="handleCellClick"
/>
</view>
<!-- 空数据插槽 -->
<view class="section">
<view class="section-title">空数据插槽</view>
<sl-table
:columns="basicColumns"
:tableData="[]"
@cell-click="handleCellClick"
>
<template #empty>
<view class="empty-container">
<text class="empty-icon">📭</text>
<text class="empty-text">暂无数据，请稍后再试</text>
</view>
</template>
</sl-table>
</view>
</view>
</template>
<script>
export default {
name: 'Vue3Example',
// Vue3的emits声明
emits: ['cell-clicked'],
data() {
return {
// 基础表格配置
basicColumns: [
{
label: '姓名',
prop: 'name',
width: '30%'
},
{
label: '年龄',
prop: 'age',
width: '20%'
},
{
label: '职位',
prop: 'position',
width: '25%'
},
{
label: '部门',
prop: 'department',
width: '25%'
}
],
basicData: [
{ name: '张三', age: 28, position: '前端工程师', department: '技术部' },
{ name: '李四', age: 32, position: '后端工程师', department: '技术部' },
{ name: '王五', age: 29, position: '产品经理', department: '产品部' },
{ name: '赵六', age: 35, position: '设计师', department: '设计部' }
],
// 固定列表格配置
fixedColumns: [
{
label: '姓名',
prop: 'name',
width: '100px',
fixed: 'left'
},
{
label: '年龄',
prop: 'age',
width: '80px'
},
{
label: '职位',
prop: 'position',
width: '150px'
},
{
label: '部门',
prop: 'department',
width: '120px'
},
{
label: '邮箱',
prop: 'email',
width: '200px'
},
{
label: '操作',
prop: 'action',
width: '100px',
fixed: 'right'
}
],
fixedData: [
{ name: '张三', age: 28, position: '前端工程师', department: '技术部', email: 'zhangsan@example.com', action: '编辑' },
{ name: '李四', age: 32, position: '后端工程师', department: '技术部', email: 'lisi@example.com', action: '编辑' },
{ name: '王五', age: 29, position: '产品经理', department: '产品部', email: 'wangwu@example.com', action: '编辑' }
],
// 合并表格配置
mergeColumns: [
{
label: '基本信息',
width: '40%',
children: [
{ label: '姓名', prop: 'name', width: '50%' },
{ label: '年龄', prop: 'age', width: '50%' }
]
},
{
label: '工作信息',
width: '60%',
children: [
{ label: '职位', prop: 'position', width: '50%' },
{ label: '自定义', prop: 'customField', slot: 'customSlot', width: '50%' }
]
}
],
mergeData: [
{
name: '张三',
age: {
value: '28岁',
rowspan: 2,
cellStyle: {
backgroundColor: '#e8f4fd',
color: '#1890ff'
}
},
position: '前端工程师',
customField: '优秀员工'
},
{
name: '李四',
age: {
display: false // 被合并的单元格
},
position: '后端工程师',
customField: '技术专家'
},
{
name: {
value: '王五',
cellStyle: {
backgroundColor: '#fff2e8',
color: '#fa8c16',
fontWeight: 'bold'
}
},
age: '29岁',
position: '产品经理',
customField: '产品达人'
}
],
// 上拉加载数据
loadMoreData: [
{ name: '张三', age: 28, position: '前端工程师', department: '技术部' },
{ name: '李四', age: 32, position: '后端工程师', department: '技术部' },
{ name: '王五', age: 29, position: '产品经理', department: '产品部' }
],
loadMorePage: 1
}
},
methods: {
handleCellClick(event) {
console.log('Vue3 - 单元格点击事件:', event)
uni.showToast({
title: `点击了第${event.rowIndex + 1}行第${event.colIndex + 1}列`,
icon: 'none'
})
},
handleLoadMore({ pageNum, done }) {
console.log('Vue3 - 上拉加载，当前页码:', pageNum)
// 模拟异步加载数据
setTimeout(() => {
const newData = [
{ name: `新用户${pageNum}-1`, age: 25, position: '测试工程师', department: '技术部' },
{ name: `新用户${pageNum}-2`, age: 27, position: 'UI设计师', department: '设计部' }
]
this.loadMoreData.push(...newData)
// 模拟加载到第3页后结束
const isLastPage = pageNum >= 3
done(isLastPage)
}, 1000)
}
}
}
</script>
<style lang="scss" scoped>
.example-container {
padding: 20px;
.example-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
color: #52c41a;
}
.section {
margin-bottom: 30px;
.section-title {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
}
.custom-slot {
display: flex;
align-items: center;
justify-content: center;
.highlight {
background: linear-gradient(45deg, #52c41a, #1890ff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
}
}
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
.empty-icon {
font-size: 48px;
margin-bottom: 10px;
}
.empty-text {
font-size: 14px;
color: #999;
}
}
}
</style>

86
src/uni_modules/sl-table/package.json Normal file
View File

@@ -0,0 +1,86 @@
{
"id": "sl-table",
"displayName": "可合并单元格表格",
"version": "1.5.7",
"description": "自定义合并单元格和多级表头，支持多个自定义slot插槽，表头支持配置宽度百分比，支持vue3",
"keywords": [
"合并单元格",
"表格",
"多级表头"
],
"repository": "",
"engines": {
"HBuilderX": "^4.36"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "610947208"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "u",
"app-uvue": "u",
"app-harmony": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "u",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

441
src/uni_modules/sl-table/readme.md Normal file
View File

@@ -0,0 +1,441 @@
# sl-table
一个支持Vue2和Vue3的高性能表格组件
## 特性
- ✅ **Vue2/Vue3兼容**: 同时支持Vue2和Vue3环境
- ✅ **表头合并**: 支持多级表头和单元格合并
- ✅ **单元格合并**: 支持行合并和列合并
- ✅ **自定义插槽**: 支持单元格自定义内容
- ✅ **响应式**: 自适应不同屏幕尺寸
- ✅ **虚拟滚动**: 支持大量数据的分页加载
- ✅ **样式自定义**: 支持自定义单元格样式
- ✅ **横向滚动**: 支持表格横向滚动，自动处理宽度计算
- ✅ **固定列**: 支持左侧和右侧固定列，滚动时显示阴影提示
- ✅ **动态合并单元格**: 横竖向列合并单元格
- ✅ **单选/多选**: 支持单选和多选表格行
## 兼容性
| Vue版本 | 支持状态 | 说明 |
|---------|----------|------|
| Vue 2.6+ | ✅ 完全支持 | 使用Options API |
| Vue 3.0+ | ✅ 完全支持 | 使用Options API，兼容Composition API |
| 平台 | 支持状态 | 说明 |
|------|----------|------|
| H5 | ✅ 完全支持 | 所有功能正常 |
| 微信小程序 | ✅ 完全支持 | 插槽需要提前注册 |
| App | ✅ 完全支持 | 所有功能正常 |
## 安装
```bash
# 将sl-table文件夹复制到项目的uni_modules目录下，插件中有examples文件夹，可查看示例
```
## 基础用法
### Vue3风格（推荐）
```vue
<template>
<sl-table
:columns="columns"
:tableData="tableData"
@cell-click="handleCellClick"
:enableLoadMore="true"
selection="multiple"
:showRowIndex="true"
@load-more="handleLoadMore"
:selectedRows="selectedRows"
@selection-change="handleSelectionChange"
>
<!-- Vue3自定义插槽 -->
<template #customSlot="{ row, cell }">
<view class="custom-content">
{{ row.customField }}
</view>
</template>
<template #empty>
<view class="empty-content">
暂无数据插槽展示
</view>
</template>
</sl-table>
</template>
```
### Vue2风格
```vue
<template>
<sl-table
:columns="columns"
:tableData="tableData"
@cell-click="handleCellClick"
:enableLoadMore="true"
selection="multiple"
@load-more="handleLoadMore"
:selectedRows="selectedRows"
@selection-change="handleSelectionChange"
>
<!-- VUE2自定义插槽 -->
<template #customSlot="{ row, cell }">
<view class="custom-slot">
<text class="highlight">{{ row.customField }}</text>
</view>
</template>
</sl-table>
</template>
<script>
export default {
//```你的代码```
methods:{
handleLoadMore({pageNum,done}){
//进行分页获取
let isLastPage = true //是否是最后一页
done(isLastPage) //结束后一定要执行这个方法，isLastPage默认为false
},
handleSelectionChange(e) {
console.log('选择变化', e)
}
}
}
</script>
```
### 固定列
支持左侧和右侧固定列，在横向滚动时固定列会保持可见，并显示阴影提示：
```javascript
columns: [
{
label: '姓名',
prop: 'name',
width: '100px',
fixed: 'left' // 固定在左侧
},
{
label: '年龄',
prop: 'age',
width: '80px'
// 不固定，可横向滚动
},
{
label: '操作',
prop: 'action',
width: '100px',
fixed: 'right' // 固定在右侧
}
]
```
**固定列特性**：
- 支持 `fixed: 'left'` 左侧固定
- 支持 `fixed: 'right'` 右侧固定
- 横向滚动时，固定列会显示阴影效果，提示用户有固定列存在
- 左侧固定列在滚动后显示右侧阴影
- 右侧固定列在未滚动到最右时显示左侧阴影
### 横向滚动
表格支持横向滚动，当列宽度总和超过容器宽度时自动启用：
```javascript
columns: [
{
label: '列1',
prop: 'col1',
width: '200px' // 固定宽度
},
{
label: '列2',
prop: 'col2',
width: '30%' // 百分比宽度，会自动转换为px
},
{
label: '列3',
prop: 'col3',
width: '1fr' // 自适应宽度
}
]
```
**宽度说明**：
- 支持 `px`、`rpx`、`%` 等单位
- 百分比宽度会根据容器实际宽度自动转换为 `px`
- 未设置宽度时默认使用 `1fr` 自适应
### 微信小程序插槽注册
在微信小程序中使用自定义插槽时，需要在组件中提前注册插槽：
```vue
<script>
export default {
data() {
return {
columns: [
{
label: '姓名',
prop: 'name',
width: '30%',
fixed: 'left',
headerStyle:{
backgroundColor: '#f0f0f0',
color: '#333',
fontWeight: 'bold',
},
},
{
label: '自定义',
prop: 'custom',
slot: 'customSlot', // 使用注册的插槽
width: '70%'
}
],
tableData: [
{ name: '张三', custom: 'custom data' },
{ name: '李四', custom: 'another data' }
]
}
}
}
</script>
```
<script>
export default {
data() {
return {
columns: [
{
label: '姓名',
prop: 'name',
width: '30%',
fixed: 'left',
headerStyle:{
backgroundColor: '#f0f0f0',
color: '#333',
fontWeight: 'bold',
},
},
{
label: '信息',
width: '70%',
children: [
{
label: '年龄',
prop: 'age',
width: '50%'
},
{
label: '自定义',
prop: 'custom',
slot: 'customSlot',
width: '50%'
}
]
}
],
tableData: [
{
name: '张三',
age: 25,
custom: 'custom data'
},
{
name: '李四',
age: 30,
custom: 'another data'
}
]
}
},
methods: {
handleCellClick(event) {
console.log('单元格点击:', event)
}
}
}
</script>
```
## 高级用法
### 单元格合并
```javascript
tableData: [
{
name: '张三',
info: {
value: '合并单元格',
rowspan: 2, // 跨2行
colspan: 1, // 跨1列
cellStyle:{
backgroundColor: '#f0f0f0',
color: '#333',
fontWeight: 'bold',
}
}
},
{
name: '李四',
info: {
display: false // 被合并的单元格设为不显示
}
}
]
```
### 自定义样式
```javascript
tableData: [
{
name: {
value: '重要数据',
cellStyle:{
backgroundColor: '#f0f0f0',
color: '#333',
fontWeight: 'bold',
}
}
}
]
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| columns | 表头配置 | Array | [] |
| tableData | 表格数据 | Array | [] |
| enableLoadMore | 是否开启上拉加载 | Boolean | false |
| useDynamicMergeCellsCol | 是否使用动态横向合并单元格 | Boolean | false |
| useDynamicMergeCellsRow | 是否使用动态竖向合并单元格 | Boolean | false |
| selection | 选择模式：'single' 单选，'multiple' 多选，false 不启用选择 | String\|Boolean | false |
| selectedRows | 已选中的行数据（受控模式），支持传入行数据对象数组、索引数组或键值数组 | Array | [] |
| rowKey | 行的唯一标识字段，如果不提供则使用行索引 | String | null |
| showRowIndex | 是否在表格左侧显示行号列（从1开始） | Boolean | false |
| rowIndexConfig | 行号列配置，如 { width: '60px', label: '序号', fixed: 'left' } | Object | { width: '60px', label: '序号', fixed: 'left' } |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| cell-click | 单元格点击事件 | { rowIndex, colIndex, value, cell } |
| load-more | 上拉加载事件 | {pageNum,done} |
| selection-change | 选择变化事件 | { selectedRowKeys: Array, selectedRows: Array } |
| sort-change | 选择变化事件 | { prop: String, order: String } |
### Columns配置
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| label | 表头显示文本 | String | - |
| prop | 对应数据字段 | String | - |
| width | 列宽度（支持px、rpx、%、1fr） | String | '1fr' |
| fixed | 固定列（'left' 或 'right'） | String | - |
| slot | 自定义插槽名 | String | - |
| children | 子列配置 | Array | - |
| headerStyle | 表头样式 | Object | {} |
| sort | 是否排序 | Boolean | false |
### 单元格数据配置
> **注意**：以下带删除线的配置项已废弃，请使用 `cellStyle` 对象来设置单元格样式。
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| value | 显示值 | Any | - |
| rowspan | 行合并数 | Number | 1 |
| colspan | 列合并数 | Number | 1 |
| ~~display~~ | ~~是否显示~~ | ~~Boolean~~ | ~~true~~ |
| ~~backgroundColor~~ | ~~背景色~~ | ~~String~~ | ~~'#fff'~~ |
| ~~textColor~~ | ~~文字颜色~~ | ~~String~~ | ~~'#1A1A1A'~~ |
| ~~bold~~ | ~~是否加粗~~ | ~~Boolean~~ | ~~false~~ |
| cellStyle | 单元格样式 | Object | {} |
## 兼容性处理
组件内部会自动检测Vue版本并进行相应的兼容性处理：
- **生命周期钩子**: 同时支持Vue2的`destroyed`和Vue3的`unmounted`
- **事件声明**: Vue3环境下自动添加`emits`声明
- **响应式数据**: 兼容两个版本的响应式系统
## 注意事项
1. 在uni-app项目中使用时，确保已正确配置easycom
2. **插槽语法**：
- 请使用 `<template #name="props">` 语法
- 自定义插槽的作用域数据在两个版本中保持一致
3. **微信小程序特殊要求**：
- 使用自定义插槽时，必须在组件中提前注册
- 不支持动态插槽，所有插槽都需要在sl-table页面中静态注册
4. 样式使用scss编写，确保项目支持scss编译
5. 组件会自动检测Vue版本并适配相应的插槽渲染方式
## 更新日志
### v1.5.2
- ✅ 表头排序：新增表头排序功能
### v1.5
- ✅ 单选/多选：新增单选和多选功能，支持受控模式（selectedRows）
- ✅ 序号列：新增行号列功能（showRowIndex），支持自定义配置
### v1.4.1
- ✅ 动态合并单元格：支持竖向动态合并单元格
### v1.4
- ✅ 动态合并单元格：支持横向动态合并单元格
### v1.3.3
- ✅ empty插槽：支持空数据插槽配置
- ✅ 更新columns表头样式配置项和tableData单元格样式配置项
### v1.3.1
- ✅ 多级表头：支持到三级表头
### v1.3.0
- ✅ **新增横向滚动支持**：表格支持横向滚动，自动处理宽度计算
- ✅ **新增固定列功能**：支持左侧和右侧固定列
- ✅ **固定列阴影效果**：滚动时固定列显示阴影提示
- ✅ **百分比宽度优化**：百分比宽度自动转换为px，确保精确显示
- ✅ **性能优化**：优化追加数据时的渲染性能，使用样式缓存机制
- ✅ **加载更多优化**：加载更多提示固定在可视区域，不随横向滚动
### v1.2.2
- ✅ 表格体验优化：固定高度场景下表头不参与滚动
- ✅ 功能升级：新增上拉加载能力（需手动引入uni-load-more）
### v1.2.0
- ✅ 新增微信小程序适配支持
- ✅ 优化插槽注册机制
- ✅ 完善小程序平台兼容性
### v1.1.0
- ✅ 新增Vue2/Vue3兼容性支持
- ✅ 优化生命周期钩子处理
- ✅ 改进事件系统兼容性
### v1.0.0
- ✅ 基础表格功能
- ✅ 表头合并支持
- ✅ 单元格合并支持
- ✅ 自定义插槽支持

161
src/uni_modules/sl-table/test/slot-test.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<view class="test-container">
<view class="test-title">插槽兼容性测试</view>
<view class="vue-version">
当前Vue版本: {{ vueVersion }}
</view>
<!-- 测试表格 -->
<sl-table
:columns="testColumns"
:tableData="testData"
@cell-click="handleCellClick"
>
<!-- Vue2语法 -->
<template slot="vue2Slot" slot-scope="slotProps">
<view class="vue2-slot">
<text style="color: #1890ff; font-weight: bold;">Vue2插槽: {{ slotProps.row.vue2Data }}</text>
</view>
</template>
<!-- Vue3语法 -->
<template #vue3Slot="slotProps">
<view class="vue3-slot">
<text style="color: #52c41a; font-weight: bold;">Vue3插槽: {{ slotProps.row.vue3Data }}</text>
</view>
</template>
<!-- 通用插槽 -->
<template slot="universalSlot" slot-scope="slotProps">
<view class="universal-slot">
<view style="display: flex; align-items: center; justify-content: center;">
<text style="background: #f0f0f0; padding: 4px 8px; border-radius: 4px;">
通用: {{ slotProps.row.universalData }}
</text>
</view>
</view>
</template>
</sl-table>
<!-- 调试信息 -->
<view class="debug-info">
<view class="debug-title">调试信息:</view>
<view>$slots: {{ JSON.stringify(Object.keys($slots || {})) }}</view>
<view>$scopedSlots: {{ JSON.stringify(Object.keys($scopedSlots || {})) }}</view>
</view>
</view>
</template>
<script>
import { getVueVersion } from '../utils/vue-compat.js'
export default {
name: 'SlotTest',
data() {
return {
vueVersion: getVueVersion(),
testColumns: [
{
label: '基础列',
prop: 'name',
width: '25%'
},
{
label: 'Vue2插槽',
prop: 'vue2Data',
slot: 'vue2Slot',
width: '25%'
},
{
label: 'Vue3插槽',
prop: 'vue3Data',
slot: 'vue3Slot',
width: '25%'
},
{
label: '通用插槽',
prop: 'universalData',
slot: 'universalSlot',
width: '25%'
}
],
testData: [
{
name: '测试行1',
vue2Data: 'Vue2数据1',
vue3Data: 'Vue3数据1',
universalData: '通用数据1'
},
{
name: '测试行2',
vue2Data: 'Vue2数据2',
vue3Data: 'Vue3数据2',
universalData: '通用数据2'
},
{
name: '测试行3',
vue2Data: 'Vue2数据3',
vue3Data: 'Vue3数据3',
universalData: '通用数据3'
}
]
}
},
mounted() {
console.log('Vue版本:', this.vueVersion)
console.log('$slots:', this.$slots)
console.log('$scopedSlots:', this.$scopedSlots)
},
methods: {
handleCellClick(event) {
console.log('插槽测试 - 单元格点击:', event)
}
}
}
</script>
<style lang="scss" scoped>
.test-container {
padding: 20px;
.test-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.vue-version {
font-size: 14px;
color: #666;
margin-bottom: 20px;
text-align: center;
}
.vue2-slot, .vue3-slot, .universal-slot {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.debug-info {
margin-top: 20px;
padding: 10px;
background: #f5f5f5;
border-radius: 4px;
.debug-title {
font-weight: bold;
margin-bottom: 5px;
}
view {
font-size: 12px;
margin-bottom: 2px;
word-break: break-all;
}
}
}
</style>

139
src/uni_modules/sl-table/utils/vue-compat.js Normal file
View File

@@ -0,0 +1,139 @@
/**
* Vue2/Vue3 兼容性工具
* @author shiliu
*
* 提供Vue2和Vue3之间的兼容性处理
*/
// 检测Vue版本
export const getVueVersion = () => {
// 尝试获取Vue实例
const Vue = (typeof window !== 'undefined' && window.Vue) ||
(typeof global !== 'undefined' && global.Vue) ||
(typeof self !== 'undefined' && self.Vue)
if (Vue && Vue.version) {
return Vue.version
}
// 如果无法直接获取，尝试通过其他方式检测
try {
// Vue3的特征检测
if (typeof createApp !== 'undefined') {
return '3.x'
}
// Vue2的特征检测
if (typeof Vue !== 'undefined' && Vue.config) {
return '2.x'
}
} catch (e) {
// 忽略错误
}
return 'unknown'
}
// 检测是否为Vue2
export const isVue2 = () => {
const version = getVueVersion()
return version.startsWith('2.')
}
// 检测是否为Vue3
export const isVue3 = () => {
const version = getVueVersion()
return version.startsWith('3.')
}
// 兼容性生命周期钩子映射
export const lifecycleHooks = {
// Vue2 -> Vue3 映射
beforeDestroy: 'beforeUnmount',
destroyed: 'unmounted'
}
// 获取当前环境支持的生命周期钩子
export const getLifecycleHook = (hookName) => {
if (isVue3() && lifecycleHooks[hookName]) {
return lifecycleHooks[hookName]
}
return hookName
}
// 兼容性事件处理
export const createCompatEmit = (instance) => {
if (isVue2()) {
// Vue2使用$emit
return (event, ...args) => {
instance.$emit(event, ...args)
}
} else {
// Vue3使用emit函数
return (event, ...args) => {
instance.emit(event, ...args)
}
}
}
// 兼容性响应式数据处理
export const createCompatReactive = (data) => {
if (isVue2()) {
// Vue2直接返回数据对象
return data
} else {
// Vue3可能需要reactive包装（在组合式API中）
// 但在选项式API中，data函数返回的对象会自动变成响应式
return data
}
}
// 检查组件是否需要emits声明
export const needsEmitsDeclaration = () => {
return isVue3()
}
// 生成兼容的组件选项
export const createCompatOptions = (options) => {
const compatOptions = { ...options }
if (isVue3()) {
// Vue3需要emits声明
if (!compatOptions.emits && options.methods) {
// 自动检测可能的emit事件
const emits = []
const methods = options.methods
Object.keys(methods).forEach(methodName => {
const methodStr = methods[methodName].toString()
// 简单的正则匹配$emit调用
const emitMatches = methodStr.match(/\$emit\(['"`]([^'"`]+)['"`]/g)
if (emitMatches) {
emitMatches.forEach(match => {
const eventName = match.match(/\$emit\(['"`]([^'"`]+)['"`]/)[1]
if (!emits.includes(eventName)) {
emits.push(eventName)
}
})
}
})
if (emits.length > 0) {
compatOptions.emits = emits
}
}
}
return compatOptions
}
export default {
getVueVersion,
isVue2,
isVue3,
lifecycleHooks,
getLifecycleHook,
createCompatEmit,
createCompatReactive,
needsEmitsDeclaration,
createCompatOptions
}

30
src/uni_modules/uni-calendar/changelog.md Normal file
View File

@@ -0,0 +1,30 @@
## 1.4.12（2024-09-21）
- 修复 calendar在选择日期范围后重新选择日期需要点两次的Bug
## 1.4.11（2024-01-10）
- 修复 回到今天时，月份显示不一致问题
## 1.4.10（2023-04-10）
- 修复 某些情况 monthSwitch 未触发的Bug
## 1.4.9（2023-02-02）
- 修复 某些情况切换月份错误的Bug
## 1.4.8（2023-01-30）
- 修复 某些情况切换月份错误的Bug [详情](https://ask.dcloud.net.cn/question/161964)
## 1.4.7（2022-09-16）
- 优化 支持使用 uni-scss 控制主题色
## 1.4.6（2022-09-08）
- 修复 表头年月切换，导致改变当前日期为选择月1号，且未触发change事件的Bug
## 1.4.5（2022-02-25）
- 修复 条件编译 nvue 不支持的 css 样式的Bug
## 1.4.4（2022-02-25）
- 修复 条件编译 nvue 不支持的 css 样式的Bug
## 1.4.3（2021-09-22）
- 修复 startDate、 endDate 属性失效的Bug
## 1.4.2（2021-08-24）
- 新增 支持国际化
## 1.4.1（2021-08-05）
- 修复 弹出层被 tabbar 遮盖的Bug
## 1.4.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.3.16（2021-05-12）
- 新增 组件示例地址
## 1.3.15（2021-02-04）
- 调整为uni_modules目录规范

544
src/uni_modules/uni-calendar/components/uni-calendar/calendar.js Normal file
View File

@@ -0,0 +1,544 @@
/**
* @1900-2100区间内的公历、农历互转
* @charset UTF-8
* @github https://github.com/jjonline/calendar.js
* @Author Jea杨(JJonline@JJonline.Cn)
* @Time 2014-7-21
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
/* eslint-disable */
var calendar = {
/**
* 农历1900-2100的润大小信息表
* @Array Of Property
* @return Hex
*/
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
/** Add By JJonline@JJonline.Cn**/
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
0x0d520], // 2100
/**
* 公历每个月份的天数普通表
* @Array Of Property
* @return Number
*/
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
/**
* 天干地支之天干速查表
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
* @return Cn string
*/
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
/**
* 天干地支之地支速查表
* @Array Of Property
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
* @return Cn string
*/
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
/**
* 天干地支之地支速查表<=>生肖
* @Array Of Property
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
* @return Cn string
*/
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
/**
* 24节气速查表
* @Array Of Property
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
* @return Cn string
*/
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
/**
* 1900-2100各年的24节气日期速查表
* @Array Of Property
* @return 0x string For splice
*/
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
/**
* 数字转中文速查表
* @Array Of Property
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
* @return Cn string
*/
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
/**
* 日期转农历称呼速查表
* @Array Of Property
* @trans ['初','十','廿','卅']
* @return Cn string
*/
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
/**
* 月份转农历称呼速查表
* @Array Of Property
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
* @return Cn string
*/
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
/**
* 返回农历y年一整年的总天数
* @param lunar Year
* @return Number
* @eg:var count = calendar.lYearDays(1987) ;//count=387
*/
lYearDays: function (y) {
var i; var sum = 348
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
return (sum + this.leapDays(y))
},
/**
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
* @param lunar Year
* @return Number (0-12)
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
*/
leapMonth: function (y) { // 闰字编码 \u95f0
return (this.lunarInfo[y - 1900] & 0xf)
},
/**
* 返回农历y年闰月的天数 若该年没有闰月则返回0
* @param lunar Year
* @return Number (0、29、30)
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
*/
leapDays: function (y) {
if (this.leapMonth(y)) {
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
}
return (0)
},
/**
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
* @param lunar Year
* @return Number (-1、29、30)
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
*/
monthDays: function (y, m) {
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
},
/**
* 返回公历(!)y年m月的天数
* @param solar Year
* @return Number (-1、28、29、30、31)
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
*/
solarDays: function (y, m) {
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var ms = m - 1
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
} else {
return (this.solarMonth[ms])
}
},
/**
* 农历年份转换为干支纪年
* @param lYear 农历年的年份数
* @return Cn string
*/
toGanZhiYear: function (lYear) {
var ganKey = (lYear - 3) % 10
var zhiKey = (lYear - 3) % 12
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
},
/**
* 公历月、日判断所属星座
* @param cMonth [description]
* @param cDay [description]
* @return Cn string
*/
toAstro: function (cMonth, cDay) {
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
},
/**
* 传入offset偏移量返回干支
* @param offset 相对甲子的偏移量
* @return Cn string
*/
toGanZhi: function (offset) {
return this.Gan[offset % 10] + this.Zhi[offset % 12]
},
/**
* 传入公历(!)y年获得该年第n个节气的公历日期
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
* @return day Number
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
*/
getTerm: function (y, n) {
if (y < 1900 || y > 2100) { return -1 }
if (n < 1 || n > 24) { return -1 }
var _table = this.sTermInfo[y - 1900]
var _info = [
parseInt('0x' + _table.substr(0, 5)).toString(),
parseInt('0x' + _table.substr(5, 5)).toString(),
parseInt('0x' + _table.substr(10, 5)).toString(),
parseInt('0x' + _table.substr(15, 5)).toString(),
parseInt('0x' + _table.substr(20, 5)).toString(),
parseInt('0x' + _table.substr(25, 5)).toString()
]
var _calday = [
_info[0].substr(0, 1),
_info[0].substr(1, 2),
_info[0].substr(3, 1),
_info[0].substr(4, 2),
_info[1].substr(0, 1),
_info[1].substr(1, 2),
_info[1].substr(3, 1),
_info[1].substr(4, 2),
_info[2].substr(0, 1),
_info[2].substr(1, 2),
_info[2].substr(3, 1),
_info[2].substr(4, 2),
_info[3].substr(0, 1),
_info[3].substr(1, 2),
_info[3].substr(3, 1),
_info[3].substr(4, 2),
_info[4].substr(0, 1),
_info[4].substr(1, 2),
_info[4].substr(3, 1),
_info[4].substr(4, 2),
_info[5].substr(0, 1),
_info[5].substr(1, 2),
_info[5].substr(3, 1),
_info[5].substr(4, 2)
]
return parseInt(_calday[n - 1])
},
/**
* 传入农历数字月份返回汉语通俗表示法
* @param lunar month
* @return Cn string
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
*/
toChinaMonth: function (m) { // 月 => \u6708
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
var s = this.nStr3[m - 1]
s += '\u6708'// 加上月字
return s
},
/**
* 传入农历日期数字返回汉字表示法
* @param lunar day
* @return Cn string
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
*/
toChinaDay: function (d) { // 日 => \u65e5
var s
switch (d) {
case 10:
s = '\u521d\u5341'; break
case 20:
s = '\u4e8c\u5341'; break
case 30:
s = '\u4e09\u5341'; break
default :
s = this.nStr2[Math.floor(d / 10)]
s += this.nStr1[d % 10]
}
return (s)
},
/**
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
* @param y year
* @return Cn string
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
*/
getAnimal: function (y) {
return this.Animals[(y - 4) % 12]
},
/**
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
* @param y solar year
* @param m solar month
* @param d solar day
* @return JSON object
* @eg:console.log(calendar.solar2lunar(1987,11,01));
*/
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
// 年份限定、上限
if (y < 1900 || y > 2100) {
return -1// undefined转换为数字变为NaN
}
// 公历传参最下限
if (y == 1900 && m == 1 && d < 31) {
return -1
}
// 未传参 获得当天
if (!y) {
var objDate = new Date()
} else {
var objDate = new Date(y, parseInt(m) - 1, d)
}
var i; var leap = 0; var temp = 0
// 修正ymd参数
var y = objDate.getFullYear()
var m = objDate.getMonth() + 1
var d = objDate.getDate()
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
for (i = 1900; i < 2101 && offset > 0; i++) {
temp = this.lYearDays(i)
offset -= temp
}
if (offset < 0) {
offset += temp; i--
}
// 是否今天
var isTodayObj = new Date()
var isToday = false
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
isToday = true
}
// 星期几
var nWeek = objDate.getDay()
var cWeek = this.nStr1[nWeek]
// 数字表示周几顺应天朝周一开始的惯例
if (nWeek == 0) {
nWeek = 7
}
// 农历年
var year = i
var leap = this.leapMonth(i) // 闰哪个月
var isLeap = false
// 效验闰月
for (i = 1; i < 13 && offset > 0; i++) {
// 闰月
if (leap > 0 && i == (leap + 1) && isLeap == false) {
--i
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
} else {
temp = this.monthDays(year, i)// 计算农历普通月天数
}
// 解除闰月
if (isLeap == true && i == (leap + 1)) { isLeap = false }
offset -= temp
}
// 闰月导致数组下标重叠取反
if (offset == 0 && leap > 0 && i == leap + 1) {
if (isLeap) {
isLeap = false
} else {
isLeap = true; --i
}
}
if (offset < 0) {
offset += temp; --i
}
// 农历月
var month = i
// 农历日
var day = offset + 1
// 天干地支处理
var sm = m - 1
var gzY = this.toGanZhiYear(year)
// 当月的两个节气
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
// 依据12节气修正干支月
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
if (d >= firstNode) {
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
}
// 传入的日期的节气与否
var isTerm = false
var Term = null
if (firstNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 2]
}
if (secondNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 1]
}
// 日柱 当月一日与 1900/1/1 相差天数
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
var gzD = this.toGanZhi(dayCyclical + d - 1)
// 该日期所属的星座
var astro = this.toAstro(m, d)
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
},
/**
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
* @param y lunar year
* @param m lunar month
* @param d lunar day
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
* @return JSON object
* @eg:console.log(calendar.lunar2solar(1987,9,10));
*/
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
var isLeapMonth = !!isLeapMonth
var leapOffset = 0
var leapMonth = this.leapMonth(y)
var leapDay = this.leapDays(y)
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
var day = this.monthDays(y, m)
var _day = day
// bugFix 2016-9-25
// if month is leap, _day use leapDays method
if (isLeapMonth) {
_day = this.leapDays(y, m)
}
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
// 计算农历的时间差
var offset = 0
for (var i = 1900; i < y; i++) {
offset += this.lYearDays(i)
}
var leap = 0; var isAdd = false
for (var i = 1; i < m; i++) {
leap = this.leapMonth(y)
if (!isAdd) { // 处理闰月
if (leap <= i && leap > 0) {
offset += this.leapDays(y); isAdd = true
}
}
offset += this.monthDays(y, i)
}
// 转换闰月农历 需补充该年闰月的前一个月的时差
if (isLeapMonth) { offset += day }
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
var cY = calObj.getUTCFullYear()
var cM = calObj.getUTCMonth() + 1
var cD = calObj.getUTCDate()
return this.solar2lunar(cY, cM, cD)
}
}
export default calendar

12
src/uni_modules/uni-calendar/components/uni-calendar/i18n/en.json Normal file
View File

@@ -0,0 +1,12 @@
{
"uni-calender.ok": "ok",
"uni-calender.cancel": "cancel",
"uni-calender.today": "today",
"uni-calender.MON": "MON",
"uni-calender.TUE": "TUE",
"uni-calender.WED": "WED",
"uni-calender.THU": "THU",
"uni-calender.FRI": "FRI",
"uni-calender.SAT": "SAT",
"uni-calender.SUN": "SUN"
}

8
src/uni_modules/uni-calendar/components/uni-calendar/i18n/index.js Normal file
View File

@@ -0,0 +1,8 @@
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}

12
src/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hans.json Normal file
View File

@@ -0,0 +1,12 @@
{
"uni-calender.ok": "确定",
"uni-calender.cancel": "取消",
"uni-calender.today": "今日",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六"
}

12
src/uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hant.json Normal file
View File

@@ -0,0 +1,12 @@
{
"uni-calender.ok": "確定",
"uni-calender.cancel": "取消",
"uni-calender.today": "今日",
"uni-calender.SUN": "日",
"uni-calender.MON": "一",
"uni-calender.TUE": "二",
"uni-calender.WED": "三",
"uni-calender.THU": "四",
"uni-calender.FRI": "五",
"uni-calender.SAT": "六"
}

187
src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}"
@click="choiceDate(weeks)">
<view class="uni-calendar-item__weeks-box-item">
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text" :class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.date}}</text>
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}">{{todayText}}</text>
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--extra':weeks.extraInfo.info,
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.extraInfo.info}}</text>
</view>
</view>
</template>
<script>
import { initVueI18n } from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
const { t } = initVueI18n(i18nMessages)
export default {
emits:['change'],
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
lunar: {
type: Boolean,
default: false
}
},
computed: {
todayText() {
return t("uni-calender.today")
},
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
}
}
}
</script>
<style lang="scss" scoped>
$uni-font-size-base:14px;
$uni-text-color:#333;
$uni-font-size-sm:12px;
$uni-color-error: #e43d33;
$uni-opacity-disabled: 0.3;
$uni-text-color-disable:#c0c0c0;
$uni-primary: #2979ff !default;
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
}
.uni-calendar-item__weeks-box-text {
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm;
color: $uni-text-color;
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 100rpx;
height: 100rpx;
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $uni-color-error;
}
.uni-calendar-item--disable {
background-color: rgba(249, 249, 249, $uni-opacity-disabled);
color: $uni-text-color-disable;
}
.uni-calendar-item--isDay-text {
color: $uni-primary;
}
.uni-calendar-item--isDay {
background-color: $uni-primary;
opacity: 0.8;
color: #fff;
}
.uni-calendar-item--extra {
color: $uni-color-error;
opacity: 0.8;
}
.uni-calendar-item--checked {
background-color: $uni-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--multiple {
background-color: $uni-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--before-checked {
background-color: #ff5a5f;
color: #fff;
}
.uni-calendar-item--after-checked {
background-color: #ff5a5f;
color: #fff;
}
</style>

567
src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue Normal file
View File

@@ -0,0 +1,567 @@
<template>
<view class="uni-calendar">
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
<view class="uni-calendar__header-btn-box" @click="close">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}</text>
</view>
<view class="uni-calendar__header-btn-box" @click="confirm">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</text>
</view>
</view>
<view class="uni-calendar__header">
<view class="uni-calendar__header-btn-box" @click.stop="pre">
<view class="uni-calendar__header-btn uni-calendar--left"></view>
</view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
</picker>
<view class="uni-calendar__header-btn-box" @click.stop="next">
<view class="uni-calendar__header-btn uni-calendar--right"></view>
</view>
<text class="uni-calendar__backtoday" @click="backToday">{{todayText}}</text>
</view>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
</view>
<view class="uni-calendar__weeks">
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{monText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
</view>
</view>
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import Calendar from './util.js';
import CalendarItem from './uni-calendar-item.vue'
import { initVueI18n } from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
const { t } = initVueI18n(i18nMessages)
/**
* Calendar 日历
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
* @property {String} date 自定义当前时间，默认为今天
* @property {Boolean} lunar 显示农历
* @property {String} startDate 日期选择范围-开始日期
* @property {String} endDate 日期选择范围-结束日期
* @property {Boolean} range 范围选择
* @property {Boolean} insert = [true|false] 插入模式,默认为false
* @value true 弹窗模式
* @value false 插入模式
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
* @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
* @property {Boolean} showMonth 是否选择月份为背景
* @event {Function} change 日期改变，`insert :ture` 时生效
* @event {Function} confirm 确认选择`insert :false` 时生效
* @event {Function} monthSwitch 切换月份时触发
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
*/
export default {
components: {
CalendarItem
},
emits:['close','confirm','change','monthSwitch'],
props: {
date: {
type: String,
default: ''
},
selected: {
type: Array,
default () {
return []
}
},
lunar: {
type: Boolean,
default: false
},
startDate: {
type: String,
default: ''
},
endDate: {
type: String,
default: ''
},
range: {
type: Boolean,
default: false
},
insert: {
type: Boolean,
default: true
},
showMonth: {
type: Boolean,
default: true
},
clearDate: {
type: Boolean,
default: true
}
},
data() {
return {
show: false,
weeks: [],
calendar: {},
nowDate: '',
aniMaskShow: false
}
},
computed:{
/**
* for i18n
*/
okText() {
return t("uni-calender.ok")
},
cancelText() {
return t("uni-calender.cancel")
},
todayText() {
return t("uni-calender.today")
},
monText() {
return t("uni-calender.MON")
},
TUEText() {
return t("uni-calender.TUE")
},
WEDText() {
return t("uni-calender.WED")
},
THUText() {
return t("uni-calender.THU")
},
FRIText() {
return t("uni-calender.FRI")
},
SATText() {
return t("uni-calender.SAT")
},
SUNText() {
return t("uni-calender.SUN")
},
},
watch: {
date(newVal) {
// this.cale.setDate(newVal)
this.init(newVal)
},
startDate(val){
this.cale.resetSatrtDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
endDate(val){
this.cale.resetEndDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
selected(newVal) {
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
this.weeks = this.cale.weeks
}
},
created() {
this.cale = new Calendar({
selected: this.selected,
startDate: this.startDate,
endDate: this.endDate,
range: this.range,
})
this.init(this.date)
},
methods: {
// 取消穿透
clean() {},
bindDateChange(e) {
const value = e.detail.value + '-1'
this.setDate(value)
const { year,month } = this.cale.getDate(value)
this.$emit('monthSwitch', {
year,
month
})
},
/**
* 初始化日期显示
* @param {Object} date
*/
init(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date)
},
/**
* 打开日历弹窗
*/
open() {
// 弹窗模式并且清理数据
if (this.clearDate && !this.insert) {
this.cale.cleanMultipleStatus()
// this.cale.setDate(this.date)
this.init(this.date)
}
this.show = true
this.$nextTick(() => {
setTimeout(() => {
this.aniMaskShow = true
}, 50)
})
},
/**
* 关闭日历弹窗
*/
close() {
this.aniMaskShow = false
this.$nextTick(() => {
setTimeout(() => {
this.show = false
this.$emit('close')
}, 300)
})
},
/**
* 确认按钮
*/
confirm() {
this.setEmit('confirm')
this.close()
},
/**
* 变化触发
*/
change() {
if (!this.insert) return
this.setEmit('change')
},
/**
* 选择月份触发
*/
monthSwitch() {
let {
year,
month
} = this.nowDate
this.$emit('monthSwitch', {
year,
month: Number(month)
})
},
/**
* 派发事件
* @param {Object} name
*/
setEmit(name) {
let {
year,
month,
date,
fullDate,
lunar,
extraInfo
} = this.calendar
this.$emit(name, {
range: this.cale.multipleStatus,
year,
month,
date,
fulldate: fullDate,
lunar,
extraInfo: extraInfo || {}
})
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate(weeks) {
if (weeks.disable) return
this.calendar = weeks
// 设置多选
this.cale.setMultiple(this.calendar.fullDate)
this.weeks = this.cale.weeks
this.change()
},
/**
* 回到今天
*/
backToday() {
const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}`
const date = this.cale.getDate(new Date())
const todayYearMonth = `${date.year}-${date.month}`
this.init(date.fullDate)
if(nowYearMonth !== todayYearMonth) {
this.monthSwitch()
}
this.change()
},
/**
* 上个月
*/
pre() {
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
this.setDate(preDate)
this.monthSwitch()
},
/**
* 下个月
*/
next() {
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
this.setDate(nextDate)
this.monthSwitch()
},
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.cale.getInfo(date)
}
}
}
</script>
<style lang="scss" scoped>
$uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
$uni-border-color: #EDEDED;
$uni-text-color: #333;
$uni-bg-color-hover:#f1f1f1;
$uni-font-size-base:14px;
$uni-text-color-placeholder: #808080;
$uni-color-subtitle: #555555;
$uni-text-color-grey:#999;
.uni-calendar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--mask-show {
opacity: 1
}
.uni-calendar--fixed {
position: fixed;
/* #ifdef APP-NVUE */
bottom: 0;
/* #endif */
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(460px);
/* #ifndef APP-NVUE */
bottom: calc(var(--window-bottom));
z-index: 99;
/* #endif */
}
.uni-calendar--ani-show {
transform: translateY(0);
}
.uni-calendar__content {
background-color: #fff;
}
.uni-calendar__header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-calendar--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
}
.uni-calendar__backtoday {
position: absolute;
right: 0;
top: 25rpx;
padding: 0 5px;
padding-left: 10px;
height: 25px;
line-height: 25px;
font-size: 12px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
color: $uni-text-color;
background-color: $uni-bg-color-hover;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.uni-calendar__header-btn-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.uni-calendar__header-btn {
width: 10px;
height: 10px;
border-left-color: $uni-text-color-placeholder;
border-left-style: solid;
border-left-width: 2px;
border-top-color: $uni-color-subtitle;
border-top-style: solid;
border-top-width: 2px;
}
.uni-calendar--left {
transform: rotate(-45deg);
}
.uni-calendar--right {
transform: rotate(135deg);
}
.uni-calendar__weeks {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-calendar__weeks-item {
flex: 1;
}
.uni-calendar__weeks-day {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
height: 45px;
border-bottom-color: #F5F5F5;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-calendar__weeks-day-text {
font-size: 14px;
}
.uni-calendar__box {
position: relative;
}
.uni-calendar__box-bg {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: $uni-text-color-grey;
opacity: 0.1;
text-align: center;
/* #ifndef APP-NVUE */
line-height: 1;
/* #endif */
}
</style>

360
src/uni_modules/uni-calendar/components/uni-calendar/util.js Normal file
View File

@@ -0,0 +1,360 @@
import CALENDAR from './calendar.js'
class Calendar {
constructor({
date,
selected,
startDate,
endDate,
range
} = {}) {
// 当前日期
this.date = this.getDate(new Date()) // 当前初入日期
// 打点信息
this.selected = selected || [];
// 范围开始
this.startDate = startDate
// 范围结束
this.endDate = endDate
this.range = range
// 多选状态
this.cleanMultipleStatus()
// 每周日期
this.weeks = {}
// this._getWeek(this.date.fullDate)
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.selectDate = this.getDate(date)
this._getWeek(this.selectDate.fullDate)
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
before: '',
after: '',
data: []
}
}
/**
* 重置开始日期
*/
resetSatrtDate(startDate) {
// 范围开始
this.startDate = startDate
}
/**
* 重置结束日期
*/
resetEndDate(endDate) {
// 范围结束
this.endDate = endDate
}
/**
* 获取任意时间
*/
getDate(date, AddDayCount = 0, str = 'day') {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
switch (str) {
case 'day':
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
break
case 'month':
if (dd.getDate() === 31 && AddDayCount>0) {
dd.setDate(dd.getDate() + AddDayCount)
} else {
const preMonth = dd.getMonth()
dd.setMonth(preMonth + AddDayCount) // 获取AddDayCount天后的日期
const nextMonth = dd.getMonth()
// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
if(AddDayCount<0 && preMonth!==0 && nextMonth-preMonth>AddDayCount){
dd.setMonth(nextMonth+(nextMonth-preMonth+AddDayCount))
}
// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
if(AddDayCount>0 && nextMonth-preMonth>AddDayCount){
dd.setMonth(nextMonth-(nextMonth-preMonth-AddDayCount))
}
}
break
case 'year':
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
break
}
const y = dd.getFullYear()
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
/**
* 获取上月剩余天数
*/
_getLastMonthDays(firstDay, full) {
let dateArr = []
for (let i = firstDay; i > 0; i--) {
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
dateArr.push({
date: beforeDate,
month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true
})
}
return dateArr
}
/**
* 获取本月天数
*/
_currentMonthDys(dateData, full) {
let dateArr = []
let fullDate = this.date.fullDate
for (let i = 1; i <= dateData; i++) {
let nowDate = full.year + '-' + (full.month < 10 ?
full.month : full.month) + '-' + (i < 10 ?
'0' + i : i)
// 是否今天
let isDay = fullDate === nowDate
// 获取打点信息
let info = this.selected && this.selected.find((item) => {
if (this.dateEqual(nowDate, item.date)) {
return item
}
})
// 日期禁用
let disableBefore = true
let disableAfter = true
if (this.startDate) {
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
disableBefore = this.dateCompare(this.startDate, nowDate)
}
if (this.endDate) {
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
disableAfter = this.dateCompare(nowDate, this.endDate)
}
let multiples = this.multipleStatus.data
let checked = false
let multiplesStatus = -1
if (this.range) {
if (multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, nowDate)
})
}
if (multiplesStatus !== -1) {
checked = true
}
}
let data = {
fullDate: nowDate,
year: full.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !(disableBefore && disableAfter),
isDay
}
if (info) {
data.extraInfo = info
}
dateArr.push(data)
}
return dateArr
}
/**
* 获取下月天数
*/
_getNextMonthDays(surplus, full) {
let dateArr = []
for (let i = 1; i < surplus + 1; i++) {
dateArr.push({
date: i,
month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true
})
}
return dateArr
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = new Date()
}
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
return dateInfo
}
/**
* 比较时间大小
*/
dateCompare(startDate, endDate) {
// 计算截止时间
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
if (startDate <= endDate) {
return true
} else {
return false
}
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
// 计算截止时间
before = new Date(before.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
after = new Date(after.replace('-', '/').replace('-', '/'))
if (before.getTime() - after.getTime() === 0) {
return true
} else {
return false
}
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll(begin, end) {
var arr = []
var ab = begin.split('-')
var ae = end.split('-')
var db = new Date()
db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date()
de.setFullYear(ae[0], ae[1] - 1, ae[2])
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
for (var k = unixDb; k <= unixDe;) {
k = k + 24 * 60 * 60 * 1000
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
}
return arr
}
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
let {
before,
after
} = this.multipleStatus
if (!this.range) return
if (before && after) {
this.multipleStatus.before = fullDate
this.multipleStatus.after = ''
this.multipleStatus.data = []
} else {
if (!before) {
this.multipleStatus.before = fullDate
} else {
this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
}
}
}
this._getWeek(fullDate)
}
/**
* 获取每周数据
* @param {Object} dateData
*/
_getWeek(dateData) {
const {
year,
month
} = this.getDate(dateData)
let firstDay = new Date(year, month - 1, 1).getDay()
let currentDay = new Date(year, month, 0).getDate()
let dates = {
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
nextMonthDays: [], // 下个月开始几天
weeks: []
}
let canlender = []
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
let weeks = {}
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
for (let i = 0; i < canlender.length; i++) {
if (i % 7 === 0) {
weeks[parseInt(i / 7)] = new Array(7)
}
weeks[parseInt(i / 7)][i % 7] = canlender[i]
}
this.canlender = canlender
this.weeks = weeks
}
//静态方法
// static init(date) {
// if (!this.instance) {
// this.instance = new Calendar(date);
// }
// return this.instance;
// }
}
export default Calendar

86
src/uni_modules/uni-calendar/package.json Normal file
View File

@@ -0,0 +1,86 @@
{
"id": "uni-calendar",
"displayName": "uni-calendar 日历",
"version": "1.4.12",
"description": "日历组件",
"keywords": [
"uni-ui",
"uniui",
"日历",
"",
"打卡",
"日历选择"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

103
src/uni_modules/uni-calendar/readme.md Normal file
View File

@@ -0,0 +1,103 @@
## Calendar 日历
> **组件名：uni-calendar**
> 代码块： `uCalendar`
日历组件
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)
> - 仅支持自定义组件模式
> - `date`属性传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
> - 弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<view>
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
@change="change"
/>
</view>
```
### 通过方法打开日历
需要设置 `insert` 为 `false`
```html
<view>
<uni-calendar
ref="calendar"
:insert="false"
@confirm="confirm"
/>
<button @click="open">打开日历</button>
</view>
```
```javascript
export default {
data() {
return {};
},
methods: {
open(){
this.$refs.calendar.open();
},
confirm(e) {
console.log(e);
}
}
};
```
## API
### Calendar Props
| 属性名 | 类型 | 默认值| 说明 |
| - | - | - | - |
| date | String |- | 自定义当前时间，默认为今天 |
| lunar | Boolean | false | 显示农历 |
| startDate | String |- | 日期选择范围-开始日期 |
| endDate | String |- | 日期选择范围-结束日期 |
| range | Boolean | false | 范围选择 |
| insert | Boolean | false | 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式 |
|clearDate |Boolean |true |弹窗模式是否清空上次选择内容 |
| selected | Array |- | 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] |
|showMonth | Boolean | true | 是否显示月份为背景 |
### Calendar Events
| 事件名 | 说明 |返回值|
| - | - | - |
| open | 弹出日历组件，`insert :false` 时生效|- |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar)