CourseReviewsPage.vue
2.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!--
* @Date: 2025-03-21 11:33:26
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-21 16:02:21
* @FilePath: /mlaj/src/views/courses/CourseReviewsPage.vue
* @Description: 文件描述
-->
<template>
<AppLayout title="全部评价">
<div class="px-4 py-3">
<!-- Overall Rating -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<div class="text-2xl font-bold mr-2">4.9</div>
<van-rate v-model="overallRating" readonly :size="20" color="#ffd21e" void-icon="star" void-color="#eee" />
</div>
<div class="text-gray-500 text-sm">126条评论</div>
</div>
<!-- Reviews List -->
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div v-for="(review, index) in reviews" :key="index" class="mb-4 pb-4 border-b border-gray-100 last:border-0">
<div class="flex justify-between items-center mb-2">
<div class="flex items-center flex-1 min-w-0 mr-2">
<div class="flex-grow">
<span class="font-medium text-sm block">{{ review.username }}</span>
</div>
</div>
<van-rate v-model="review.rating" readonly :size="20" color="#ffd21e" void-icon="star" void-color="#eee" />
</div>
<p class="text-gray-600 text-sm mb-2">{{ review.content }}</p>
<div class="text-gray-400 text-xs">{{ review.date }}</div>
</div>
</van-list>
</div>
</AppLayout>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import AppLayout from '@/components/layout/AppLayout.vue'
import { Rate, List } from 'vant'
const route = useRoute()
const overallRating = ref(4.9)
const loading = ref(false)
const finished = ref(false)
const reviews = ref([])
// Mock data for demonstration
const mockReviews = [
{
username: '王小明',
avatar: '',
rating: 5,
content: '课程内容非常实用，老师讲解清晰，帮助我和孩子度过了考前紧张期。',
date: '2024-06-15'
},
{
username: '李晓华',
avatar: '',
rating: 4.5,
content: '老师提供的减压方法很有效，孩子学习状态明显改善，感谢这个课程！',
date: '2024-06-10'
},
// Add more mock reviews here
]
const onLoad = () => {
// Simulate async data loading
setTimeout(() => {
const newReviews = mockReviews.map(review => ({
...review,
avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${Math.random()}`
}))
reviews.value.push(...newReviews)
loading.value = false
// Set finished when no more data
if (reviews.value.length >= 20) {
finished.value = true
}
}, 1000)
}
</script>