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

176
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);
}
}
}
@@ -401,4 +433,4 @@
}
}
}
</style>
</style>