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 @@ ...@@ -38,20 +38,10 @@
38 ? 'bg-green-500 text-white' 38 ? 'bg-green-500 text-white'
39 : 'bg-gray-100 text-gray-500' 39 : 'bg-gray-100 text-gray-500'
40 ]"> 40 ]">
41 - <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"> 41 + <van-icon v-if="checkInType.id === 'reflection'" name="coupon-o" size="1.5rem"/>
42 - <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" /> 42 + <van-icon v-if="checkInType.id === 'reading'" name="edit" size="1.5rem" />
43 - </svg> 43 + <van-icon v-if="checkInType.id === 'exercise'" name="tosend" size="1.5rem" />
44 - <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"> 44 + <van-icon v-if="checkInType.id === 'mix'" name="send-gift-o" size="1.5rem" />
45 - <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
46 - </svg>
47 - <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">
48 - <path d="M12 14l9-5-9-5-9 5 9 5z" />
49 - <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" />
50 - <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" />
51 - </svg>
52 - <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">
53 - <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" />
54 - </svg>
55 </div> 45 </div>
56 <span class="text-xs">{{ checkInType.name }}</span> 46 <span class="text-xs">{{ checkInType.name }}</span>
57 </button> 47 </button>
...@@ -84,6 +74,10 @@ ...@@ -84,6 +74,10 @@
84 import { ref } from 'vue' 74 import { ref } from 'vue'
85 import { showToast } from 'vant' 75 import { showToast } from 'vant'
86 import { checkInTypes } from '@/utils/mockData' 76 import { checkInTypes } from '@/utils/mockData'
77 +import { useRoute, useRouter } from 'vue-router'
78 +
79 +const route = useRoute()
80 +const router = useRouter()
87 81
88 const props = defineProps({ 82 const props = defineProps({
89 show: { 83 show: {
...@@ -101,7 +95,12 @@ const isCheckingIn = ref(false) ...@@ -101,7 +95,12 @@ const isCheckingIn = ref(false)
101 const checkInSuccess = ref(false) 95 const checkInSuccess = ref(false)
102 96
103 const handleCheckInSelect = (type) => { 97 const handleCheckInSelect = (type) => {
104 - selectedCheckIn.value = type 98 + if (type.id === 'mix') {
99 + router.push({
100 + path: '/checkin/index',
101 + })
102 + }
103 + selectedCheckIn.value = type;
105 } 104 }
106 105
107 const handleCheckInSubmit = async () => { 106 const handleCheckInSubmit = async () => {
......
...@@ -206,8 +206,9 @@ export const userProfile = { ...@@ -206,8 +206,9 @@ export const userProfile = {
206 export const checkInTypes = [ 206 export const checkInTypes = [
207 { id: 'reading', name: '课程打卡', icon: 'book', path: '/checkin/reading' }, 207 { id: 'reading', name: '课程打卡', icon: 'book', path: '/checkin/reading' },
208 { id: 'exercise', name: '签到打卡', icon: 'running', path: '/checkin/exercise' }, 208 { id: 'exercise', name: '签到打卡', icon: 'running', path: '/checkin/exercise' },
209 - { id: 'study', name: '团队打卡', icon: 'graduation-cap', path: '/checkin/study' }, 209 + // { id: 'study', name: '团队打卡', icon: 'graduation-cap', path: '/checkin/study' },
210 - { id: 'reflection', name: '学习打卡', icon: 'pencil-alt', path: '/checkin/writing' } 210 + { id: 'reflection', name: '学习打卡', icon: 'pencil-alt', path: '/checkin/writing' },
211 + { id: 'mix', name: '图文打卡', icon: 'pencil-alt', path: '/checkin/index' }
211 ]; 212 ];
212 213
213 // Community posts data 214 // Community posts data
......
1 <!-- 1 <!--
2 * @Date: 2025-03-20 19:55:21 2 * @Date: 2025-03-20 19:55:21
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-05-21 16:44:26 4 + * @LastEditTime: 2025-06-03 14:26:36
5 * @FilePath: /mlaj/src/views/HomePage.vue 5 * @FilePath: /mlaj/src/views/HomePage.vue
6 * @Description: 美乐爱觉教育首页组件 6 * @Description: 美乐爱觉教育首页组件
7 * 7 *
...@@ -106,20 +106,10 @@ ...@@ -106,20 +106,10 @@
106 ? 'bg-green-500 text-white' 106 ? 'bg-green-500 text-white'
107 : 'bg-gray-100 text-gray-500' 107 : 'bg-gray-100 text-gray-500'
108 ]"> 108 ]">
109 - <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"> 109 + <van-icon v-if="checkInType.id === 'reflection'" name="coupon-o" size="1.5rem"/>
110 - <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" /> 110 + <van-icon v-if="checkInType.id === 'reading'" name="edit" size="1.5rem" />
111 - </svg> 111 + <van-icon v-if="checkInType.id === 'exercise'" name="tosend" size="1.5rem" />
112 - <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"> 112 + <van-icon v-if="checkInType.id === 'mix'" name="send-gift-o" size="1.5rem" />
113 - <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
114 - </svg>
115 - <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">
116 - <path d="M12 14l9-5-9-5-9 5 9 5z" />
117 - <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" />
118 - <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" />
119 - </svg>
120 - <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">
121 - <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" />
122 - </svg>
123 </div> 113 </div>
124 <span class="text-xs">{{ checkInType.name }}</span> 114 <span class="text-xs">{{ checkInType.name }}</span>
125 </button> 115 </button>
...@@ -662,6 +652,11 @@ const scrollToSlide = (index) => { ...@@ -662,6 +652,11 @@ const scrollToSlide = (index) => {
662 652
663 // 打卡功能：处理打卡类型选择 653 // 打卡功能：处理打卡类型选择
664 const handleCheckInSelect = (checkInType) => { 654 const handleCheckInSelect = (checkInType) => {
655 + if (checkInType.id === 'mix') {
656 + $router.push({
657 + path: '/checkin/index',
658 + })
659 + }
665 selectedCheckIn.value = checkInType // 更新选中的打卡类型 660 selectedCheckIn.value = checkInType // 更新选中的打卡类型
666 checkInContent.value = '' // 清空打卡内容 661 checkInContent.value = '' // 清空打卡内容
667 } 662 }
......
1 <!-- 1 <!--
2 * @Date: 2025-06-03 09:41:41 2 * @Date: 2025-06-03 09:41:41
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-03 09:54:20 4 + * @LastEditTime: 2025-06-03 14:28:51
5 * @FilePath: /mlaj/src/views/checkin/upload/file.vue 5 * @FilePath: /mlaj/src/views/checkin/upload/file.vue
6 * @Description: 音视频文件上传组件 6 * @Description: 音视频文件上传组件
7 --> 7 -->
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
19 multiple 19 multiple
20 accept="audio/*,video/*" 20 accept="audio/*,video/*"
21 result-type="file" 21 result-type="file"
22 + upload-icon="plus"
22 > 23 >
23 <template #upload-text> 24 <template #upload-text>
24 <div class="text-center"> 25 <div class="text-center">
...@@ -32,10 +33,11 @@ ...@@ -32,10 +33,11 @@
32 </div> 33 </div>
33 34
34 <!-- 文字留言区域 --> 35 <!-- 文字留言区域 -->
35 - <div class="mb-4"> 36 + <div class="mb-4 border">
36 <van-field 37 <van-field
37 v-model="message" 38 v-model="message"
38 rows="4" 39 rows="4"
40 + autosize
39 type="textarea" 41 type="textarea"
40 placeholder="请输入打卡留言" 42 placeholder="请输入打卡留言"
41 /> 43 />
......
...@@ -25,10 +25,11 @@ ...@@ -25,10 +25,11 @@
25 </div> 25 </div>
26 26
27 <!-- 文字留言区域 --> 27 <!-- 文字留言区域 -->
28 - <div class="mb-4"> 28 + <div class="mb-4 border">
29 <van-field 29 <van-field
30 v-model="message" 30 v-model="message"
31 rows="4" 31 rows="4"
32 + autosize
32 type="textarea" 33 type="textarea"
33 placeholder="请输入打卡留言" 34 placeholder="请输入打卡留言"
34 /> 35 />
......