From 500078714411487af00161e01bd7e0b5efdc3414 Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期四, 07 八月 2025 13:32:32 +0800
Subject: [PATCH] add：热门景点
---
components/comment/comment-popup.vue | 244 +++++++++++++++++++++++++++++++-----------------
1 files changed, 158 insertions(+), 86 deletions(-)
diff --git a/components/comment/comment-popup.vue b/components/comment/comment-popup.vue
index 49f9e5d..eccefc0 100644
--- a/components/comment/comment-popup.vue
+++ b/components/comment/comment-popup.vue
@@ -1,20 +1,7 @@
<template>
- <up-popup
- v-model:show="showPopup"
- mode="bottom"
- @open="handleOpen"
- @close="handleClose"
- close-on-click-overlay
- >
+ <up-popup v-model:show="showPopup" mode="bottom" @open="handleOpen" @close="handleClose" close-on-click-overlay>
<view class="comment-popup">
- <up-textarea
- v-model="commentContent"
- placeholder="请输入内容"
- count
- :focus="isFocus"
- :cursor-spacing="200"
-
- />
+ <up-textarea v-model="comment.content" placeholder="请输入内容" count :focus="isFocus" :cursor-spacing="200" />
<view class="comment-btn-view">
<view class="comment-btn-icon">
@@ -24,30 +11,13 @@
<up-icon name="plus-circle" size="60rpx" color="#999999" />
</view>
<view class="comment-btn">
- <up-button
- :disabled="!canSend"
- type="error"
- shape="circle"
- text="发送"
- size="mini"
- @click="sendComment"
- />
+ <up-button :disabled="!canSend" type="error" shape="circle" text="发送" size="mini" @click="sendComment" />
</view>
</view>
<view class="comment-image-upload" v-if="fileList.length > 0">
- <up-upload
- :file-list="fileList"
- name="file"
- :auto-upload="false"
- :max-count="9"
- upload-text="上传图片"
- width="130rpx"
- height="130rpx"
- :cursor-spacing="200"
- multiple
- @delete="handleDelete"
- />
+ <up-upload :file-list="fileList" name="file" :auto-upload="false" :max-count="9" upload-text="上传图片"
+ width="130rpx" height="130rpx" :cursor-spacing="200" multiple @delete="handleDelete" />
</view>
</view>
</up-popup>
@@ -55,26 +25,35 @@
<script setup lang="ts">
import { ref, watch, computed } from 'vue';
-
-interface FileItem {
- url: string;
- status: string;
-}
+import { useGlobal } from '@/composables/useGlobal'
+const { $http, $message, $store } = useGlobal()
+import { CommentDTO, FileItem } from '@/types/index'
const props = defineProps<{
- modelValue: boolean; // 修改这里
+ modelValue: boolean;
+ parentId: string;
+ filmId: string;
}>();
-const emit = defineEmits(['update:modelValue']); // 修改这里
+const emit = defineEmits(['update:modelValue', 'success']); // 修改这里
const showPopup = ref(props.modelValue);
-
-const commentContent = ref('');
const isFocus = ref(false);
const focusLock = ref(false);
const fileList = ref<FileItem[]>([]);
+const pictureList = ref<FileItem[]>([]);
+const comment = ref<CommentDTO>({
+ parentId: props.parentId,
+ filmId: props.filmId,
+ content: '',
+ fileList: [],
+ filmPictures:'',
+})
-const uploadUrl = 'https://your-api.com/upload'; // 替换成你的上传接口地址
+watch(pictureList, (newList) => {
+ comment.value.fileList = newList;
+ comment.value.filmPictures=JSON.stringify(newList);
+}, { immediate: true, deep: true });
// 监听外部传入的 modelValue，同步到内部 showPopup
watch(
@@ -93,7 +72,7 @@
});
const canSend = computed(() => {
- return commentContent.value.trim() !== '' || fileList.value.length > 0;
+ return comment.value.content.trim() !== '' || comment.value.fileList.length > 0;
});
const handleOpen = () => {
@@ -106,43 +85,83 @@
};
const handleClose = () => {
- isFocus.value = false;
- showPopup.value = false;
+ // isFocus.value = false;
+ // showPopup.value = false;
};
const chooseImage = () => {
- uni.chooseImage({
- count: 9 - fileList.value.length,
- sizeType: ['original', 'compressed'],
- sourceType: ['album', 'camera'],
- success: (res) => {
- res.tempFilePaths.forEach((filePath) => {
- const fileItem: FileItem = {
- url: filePath,
- status: 'ready',
- };
- fileList.value.push(fileItem);
- uploadImage(filePath);
- });
- },
- fail: (err) => {
- console.error('选择图片失败:', err);
- },
- });
-};
-const uploadImage = (filePath: string) => {
- uni.uploadFile({
- url: uploadUrl,
- filePath,
- name: 'file',
- success: (res) => {
- console.log('上传成功:', res);
- // 可解析 res 并更新 fileList 中的 fileItem.url 为服务器返回地址
- },
- fail: (err) => {
- console.error('上传失败:', err);
- },
+ uni.chooseImage({
+ count: 9 - fileList.value.length, // 最多可以选择的图片张数，默认9
+ sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
+ sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
+ success: async function (res: any) {
+ let errMsg = res.errMsg;
+ if (errMsg === 'chooseImage:ok') {
+ // 检查文件大小
+ let oversizedFile = res.tempFiles.find(file => file.size > 1024 * 1024 * 5);
+ if (oversizedFile) {
+ $message.confirm('图片最多支持5M大小,超出大小限制');
+ return;
+ }
+
+ // 显示加载提示
+ $message.showLoading();
+
+ // 获取所有文件的 path 数组
+ res.tempFiles.forEach((file) => {
+ const fileItem: FileItem = {
+ name: file.name || '',
+ size:file.size,
+ url: file.path,
+ status: 'ready',
+ };
+ fileList.value.push(fileItem);
+ });
+
+
+
+ // 创建上传请求的数组
+ const uploadPromises = fileList.value.map(tmpfile => {
+ return $http.upload(tmpfile.url)
+ .then(res => {
+ let pic = res.data && res.data.length > 0 && res.data[0].url || '';
+ return pic;
+ })
+ .catch(err => {
+ console.error(err);
+ return null; // 上传失败时返回 null
+ });
+ });
+
+ // 使用 Promise.all 并发上传
+ try {
+ const resImages = await Promise.all(uploadPromises);
+
+ console.log("resImages",resImages)
+
+ // 检查上传结果
+ const successfulImages = resImages.filter(pic => pic !== null);
+ const fileItem: FileItem = {
+ name: '',
+ size:0,
+ url: successfulImages,
+ status: 'ready',
+ };
+ pictureList.value.push(fileItem);
+ console.log('上传成功:', pictureList.value);
+ $message.hideLoading();
+
+ if (successfulImages.length !== fileList.value.length) {
+ // 部分上传失败
+ $message.showToast('部分文件上传失败,请重新尝试！');
+ }
+ } catch (err) {
+ console.error(err);
+ $message.showToast('文件上传失败，请联系管理员');
+ }
+ }
+ }
});
};
@@ -150,16 +169,69 @@
fileList.value.splice(index, 1);
};
-const sendComment = () => {
+// const sendComment = async () => {
+// if (!canSend.value) return;
+
+// try {
+// const res = await $http.request('post', '/api/comment/create', {
+// data: comment.value
+// })
+
+// if (res.code == 0) {
+// emit('success')
+// emit('update:modelValue', false)
+
+// // 清除评论内容
+// comment.value.content = ''
+// fileList.value = []
+// pictureList.value = []
+// } else {
+// $message.showToast('评论失败')
+// }
+// } catch (error) {
+// console.error('评论失败:', error)
+// $message.showToast('评论失败')
+// }
+// }
+const sendComment = async () => {
if (!canSend.value) return;
- console.log('发送评论:', commentContent.value);
- console.log('附带图片:', fileList.value.map((f) => f.url));
+ try {
+ // 构建评论数据
+ const commentData = {
+ ...comment.value,
+ parentId: props.parentId || void 0, // 如果有parentId则使用，没有则为undefined
+ filmId: props.filmId,
+ content: comment.value.content,
+ fileList: comment.value.fileList,
+ filmPictures: comment.value.filmPictures
+ }
+ console.log("commentData",commentData);
+ console.log("当前 parentId:", props.parentId); // 检查是否收到值
+ const res = await $http.request('post', '/api/comment/create', {
+ data: commentData
+ })
+
+ if (res.code == 0) {
+ emit('success')
+ emit('update:modelValue', false)
+
+ // 清除评论内容
+ comment.value.content = ''
+ fileList.value = []
+ pictureList.value = []
+ } else {
+ $message.showToast('评论失败')
+ }
+ } catch (error) {
+ console.error('评论失败:', error)
+ $message.showToast('评论失败')
+ }
+}
- // 提交评论逻辑
- commentContent.value = '';
- fileList.value = [];
- handleClose();
+const submitComment = async () => {
+
+
};
</script>
--
Gitblit v1.9.3