<template>
|
<up-popup v-model:show="showPopup" mode="bottom" @open="handleOpen" @close="handleClose" close-on-click-overlay>
|
<view class="comment-popup">
|
<up-textarea v-model="comment.content" placeholder="请输入内容" count :focus="isFocus" :cursor-spacing="200" />
|
|
<view class="comment-btn-view">
|
<view class="comment-btn-icon">
|
<up-icon name="@" size="60rpx" color="#999999" />
|
<up-icon name="/static/common/smile.png" size="60rpx" color="#999999" />
|
<up-icon name="photo" size="60rpx" color="#999999" @click="chooseImage" />
|
<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" />
|
</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" />
|
</view>
|
</view>
|
</up-popup>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, watch, computed } from 'vue';
|
import { useGlobal } from '@/composables/useGlobal'
|
const { $http, $message, $store } = useGlobal()
|
import { CommentDTO, FileItem } from '@/types/index'
|
|
const props = defineProps<{
|
modelValue: boolean;
|
parentId: string;
|
filmId: string;
|
}>();
|
|
const emit = defineEmits(['update:modelValue', 'success']); // 修改这里
|
|
const showPopup = ref(props.modelValue);
|
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:'',
|
})
|
|
watch(pictureList, (newList) => {
|
comment.value.fileList = newList;
|
comment.value.filmPictures=JSON.stringify(newList);
|
}, { immediate: true, deep: true });
|
|
// 监听外部传入的 modelValue，同步到内部 showPopup
|
watch(
|
() => props.modelValue,
|
(newVal) => {
|
showPopup.value = newVal;
|
if (!newVal) {
|
isFocus.value = false;
|
}
|
}
|
);
|
|
// 监听内部 showPopup 变化，通知外部更新 modelValue
|
watch(showPopup, (val) => {
|
emit('update:modelValue', val);
|
});
|
|
const canSend = computed(() => {
|
return comment.value.content.trim() !== '' || comment.value.fileList.length > 0;
|
});
|
|
const handleOpen = () => {
|
if (focusLock.value) return;
|
focusLock.value = true;
|
setTimeout(() => {
|
isFocus.value = true;
|
focusLock.value = false;
|
}, 300);
|
};
|
|
const handleClose = () => {
|
// isFocus.value = false;
|
// showPopup.value = false;
|
};
|
|
const chooseImage = () => {
|
|
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('文件上传失败，请联系管理员');
|
}
|
}
|
}
|
});
|
};
|
|
const handleDelete = (index: number) => {
|
fileList.value.splice(index, 1);
|
};
|
|
// 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;
|
|
try {
|
// 构建评论数据
|
const commentData = {
|
...comment.value,
|
parentId: props.parentId || undefined, // 如果有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('评论失败')
|
}
|
}
|
|
const submitComment = async () => {
|
|
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.comment-popup {
|
padding: 20rpx;
|
}
|
|
.comment-btn-view {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 20rpx;
|
}
|
|
.comment-btn-icon {
|
display: flex;
|
gap: 20rpx;
|
}
|
|
.comment-btn {
|
flex-shrink: 0;
|
}
|
|
.comment-image-upload {
|
margin-top: 20rpx;
|
}
|
</style>
|
