<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="commentContent"
|
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';
|
|
interface FileItem {
|
url: string;
|
status: string;
|
}
|
|
const props = defineProps<{
|
modelValue: boolean; // 修改这里
|
}>();
|
|
const emit = defineEmits(['update:modelValue']); // 修改这里
|
|
const showPopup = ref(props.modelValue);
|
|
const commentContent = ref('');
|
const isFocus = ref(false);
|
const focusLock = ref(false);
|
const fileList = ref<FileItem[]>([]);
|
|
const uploadUrl = 'https://your-api.com/upload'; // 替换成你的上传接口地址
|
|
// 监听外部传入的 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 commentContent.value.trim() !== '' || fileList.value.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,
|
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);
|
},
|
});
|
};
|
|
const handleDelete = (index: number) => {
|
fileList.value.splice(index, 1);
|
};
|
|
const sendComment = () => {
|
if (!canSend.value) return;
|
|
console.log('发送评论:', commentContent.value);
|
console.log('附带图片:', fileList.value.map((f) => f.url));
|
|
// 提交评论逻辑
|
commentContent.value = '';
|
fileList.value = [];
|
handleClose();
|
};
|
</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>
|
