ReviewPopup.vue
2.1 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
92
93
94
95
96
97
98
<!--
* @Date: 2025-03-24 16:57:55
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-24 17:17:44
* @FilePath: /mlaj/src/components/ui/ReviewPopup.vue
* @Description: 文件描述
-->
<template>
<van-popup
:show="show"
@update:show="emit('update:show', $event)"
position="bottom"
round
>
<div class="p-4">
<div class="text-lg font-bold text-center mb-4">课程评价</div>
<div class="flex justify-center mb-4">
<van-rate
v-model="rating"
:size="24"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
</div>
<van-field
v-model="content"
rows="3"
type="textarea"
placeholder="请输入您的评价内容"
class="mb-4"
/>
<div class="flex justify-end">
<van-button
round
type="default"
style="margin-right: 0.5rem"
@click="handleCancel"
>取消</van-button
>
<van-button round type="primary" color="#4CAF50" @click="handleSubmit"
>提交评价</van-button
>
</div>
</div>
</van-popup>
<van-toast v-model:show="show_toast">
<template #message>
{{ message }}
</template>
</van-toast>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
show: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:show", "submit"]);
const rating = ref(5);
const content = ref("");
const handleCancel = () => {
emit("update:show", false);
rating.value = 5;
content.value = "";
};
const show_toast = ref(false);
const message = ref("");
const handleSubmit = () => {
if (rating.value === 0) {
show_toast.value = true;
message.value = "请选择评分";
return;
}
if (!content.value.trim()) {
show_toast.value = true;
message.value = "请输入评论内容";
return;
}
emit("submit", {
rating: rating.value,
content: content.value.trim(),
});
show_toast.value = true;
message.value = "评论提交成功";
handleCancel();
};
</script>