Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7489c47a 1 parent 444b37ef

feat(打卡): 新增图文打卡类型并优化界面 

- 在mockData中添加mix打卡类型
- 替换自定义SVG图标为vant组件图标
- 为文字留言区域添加边框和自动调整高度
- 当选择图文打卡时跳转到对应页面
- 更新文件上传组件的上传图标
Inline Side-by-side
Showing 5 changed files with 33 additions and 35 deletions
......@@ -38,20 +38,10 @@
? 'bg-green-500 text-white'
: 'bg-gray-100 text-gray-500'
]">
<svg v-if="checkInType.id === 'reading'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
<svg v-if="checkInType.id === 'exercise'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<svg v-if="checkInType.id === 'study'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998a12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998a12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
<svg v-if="checkInType.id === 'reflection'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
<van-icon v-if="checkInType.id === 'reflection'" name="coupon-o" size="1.5rem"/>
<van-icon v-if="checkInType.id === 'reading'" name="edit" size="1.5rem" />
<van-icon v-if="checkInType.id === 'exercise'" name="tosend" size="1.5rem" />
<van-icon v-if="checkInType.id === 'mix'" name="send-gift-o" size="1.5rem" />
</div>
<span class="text-xs">{{ checkInType.name }}</span>
</button>
......@@ -84,6 +74,10 @@
import { ref } from 'vue'
import { showToast } from 'vant'
import { checkInTypes } from '@/utils/mockData'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const props = defineProps({
show: {
......@@ -101,7 +95,12 @@ const isCheckingIn = ref(false)
const checkInSuccess = ref(false)
const handleCheckInSelect = (type) => {
selectedCheckIn.value = type
if (type.id === 'mix') {
router.push({
path: '/checkin/index',
})
}
selectedCheckIn.value = type;
}
const handleCheckInSubmit = async () => {
......
......@@ -206,8 +206,9 @@ export const userProfile = {
export const checkInTypes = [
{ id: 'reading', name: '课程打卡', icon: 'book', path: '/checkin/reading' },
{ id: 'exercise', name: '签到打卡', icon: 'running', path: '/checkin/exercise' },
{ id: 'study', name: '团队打卡', icon: 'graduation-cap', path: '/checkin/study' },
{ id: 'reflection', name: '学习打卡', icon: 'pencil-alt', path: '/checkin/writing' }
// { id: 'study', name: '团队打卡', icon: 'graduation-cap', path: '/checkin/study' },
{ id: 'reflection', name: '学习打卡', icon: 'pencil-alt', path: '/checkin/writing' },
{ id: 'mix', name: '图文打卡', icon: 'pencil-alt', path: '/checkin/index' }
];
// Community posts data
......
<!--
* @Date: 2025-03-20 19:55:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-05-21 16:44:26
* @LastEditTime: 2025-06-03 14:26:36
* @FilePath: /mlaj/src/views/HomePage.vue
* @Description: 美乐爱觉教育首页组件
*
......@@ -106,20 +106,10 @@
? 'bg-green-500 text-white'
: 'bg-gray-100 text-gray-500'
]">
<svg v-if="checkInType.id === 'reading'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
<svg v-if="checkInType.id === 'exercise'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<svg v-if="checkInType.id === 'study'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998a12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998a12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
<svg v-if="checkInType.id === 'reflection'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
<van-icon v-if="checkInType.id === 'reflection'" name="coupon-o" size="1.5rem"/>
<van-icon v-if="checkInType.id === 'reading'" name="edit" size="1.5rem" />
<van-icon v-if="checkInType.id === 'exercise'" name="tosend" size="1.5rem" />
<van-icon v-if="checkInType.id === 'mix'" name="send-gift-o" size="1.5rem" />
</div>
<span class="text-xs">{{ checkInType.name }}</span>
</button>
......@@ -662,6 +652,11 @@ const scrollToSlide = (index) => {
// 打卡功能：处理打卡类型选择
const handleCheckInSelect = (checkInType) => {
if (checkInType.id === 'mix') {
$router.push({
path: '/checkin/index',
})
}
selectedCheckIn.value = checkInType // 更新选中的打卡类型
checkInContent.value = '' // 清空打卡内容
}
......
<!--
* @Date: 2025-06-03 09:41:41
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-03 09:54:20
* @LastEditTime: 2025-06-03 14:28:51
* @FilePath: /mlaj/src/views/checkin/upload/file.vue
* @Description: 音视频文件上传组件
-->
......@@ -19,6 +19,7 @@
multiple
accept="audio/*,video/*"
result-type="file"
upload-icon="plus"
>
<template #upload-text>
<div class="text-center">
......@@ -32,10 +33,11 @@
</div>
<!-- 文字留言区域 -->
<div class="mb-4">
<div class="mb-4 border">
<van-field
v-model="message"
rows="4"
autosize
type="textarea"
placeholder="请输入打卡留言"
/>
......
......@@ -25,10 +25,11 @@
</div>
<!-- 文字留言区域 -->
<div class="mb-4">
<div class="mb-4 border">
<van-field
v-model="message"
rows="4"
autosize
type="textarea"
placeholder="请输入打卡留言"
/>
......