<template>
|
<u-popup :show="value" mode="bottom" @open="handleOpen" @close="handleClose" closeOnClickOverlay>
|
<view class="comment-popup">
|
<u-textarea v-model="commentContent" placeholder="请输入内容" count :focus="isFocus" :cursor-spacing="150"
|
style="background-color: #999999;"></u-textarea>
|
|
<view class="comment-btn-view">
|
<view class="comment-btn-icon">
|
<u-icon name="@" size="60" color="#999999"></u-icon>
|
<u-icon name="/static/common/smile.png" size="60" color="#999999"></u-icon>
|
<u-icon name="photo" size="60" color="#999999" @click="chooseImage"></u-icon>
|
<u-icon name="plus-circle" size="60" color="#999999"></u-icon>
|
</view>
|
<view class="comment-btn">
|
<u-button :disabled="!canSend" type="error" shape="circle" text="发送" size="mini"
|
@click="sendComment"></u-button>
|
</view>
|
</view>
|
|
<!-- 只有在图片选择后才显示上传组件 -->
|
<view class="comment-image-upload" v-if="fileList.length > 0">
|
<u-upload :file-list="fileList" name="file" :auto-upload="false" :max-count="9" @afterRead="afterRead"
|
@delete="handleDelete" upload-text="上传图片" width="150" height="150" :cursor-spacing="150"
|
multiple="true"></u-upload>
|
</view>
|
|
</view>
|
</u-popup>
|
</template>
|
|
<script>
|
export default {
|
name: "CommentPopup",
|
props: {
|
value: Boolean
|
},
|
data() {
|
return {
|
commentContent: "",
|
isFocus: false,
|
focusLock: false,
|
fileList: [],
|
uploadUrl: "https://your-api.com/upload", // 替换为你的上传接口
|
};
|
},
|
watch: {
|
value(newVal) {
|
if (!newVal) {
|
this.isFocus = false;
|
}
|
}
|
},
|
computed: {
|
canSend() {
|
return this.commentContent.trim() !== '' || this.fileList.length > 0;
|
}
|
},
|
methods: {
|
handleOpen() {
|
if (this.focusLock) return;
|
this.focusLock = true;
|
setTimeout(() => {
|
this.isFocus = true;
|
this.focusLock = false;
|
}, 300);
|
},
|
handleClose() {
|
this.isFocus = false;
|
this.$emit("input", false);
|
},
|
|
|
chooseImage() {
|
uni.chooseImage({
|
count: 9 - this.fileList.length,
|
sizeType: ["original", "compressed"],
|
sourceType: ["album", "camera"],
|
success: (res) => {
|
console.log("选择的图片路径:", res.tempFilePaths);
|
res.tempFilePaths.forEach(filePath => {
|
const fileItem = {
|
url: filePath,
|
status: 'ready'
|
};
|
this.fileList.push(fileItem);
|
this.uploadImage(filePath); // 调用上传
|
});
|
},
|
fail: (err) => {
|
console.log("选择失败", err);
|
}
|
});
|
},
|
uploadImage(filePath) {
|
uni.uploadFile({
|
url: this.uploadUrl,
|
filePath,
|
name: 'file',
|
success: (res) => {
|
console.log('上传成功', res);
|
// 你可以解析返回值，并更新 fileList 中对应的项
|
},
|
fail: (err) => {
|
console.error('上传失败', err);
|
}
|
});
|
},
|
afterRead(file) {
|
// 理论上这个不会触发了，因为你已经自己上传了
|
},
|
handleDelete(index, file) {
|
this.fileList.splice(index, 1);
|
},
|
sendComment() {
|
if (!this.canSend) return;
|
|
console.log("发送评论:", this.commentContent);
|
console.log("附带图片：", this.fileList.map(f => f.url));
|
|
// 这里处理评论内容和图片上传路径的提交逻辑
|
// 例如向后端接口提交
|
|
// 清空状态
|
this.commentContent = "";
|
this.fileList = [];
|
this.handleClose();
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.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;
|
}
|
|
.horizontal-scroll {
|
white-space: nowrap;
|
overflow-x: auto;
|
padding: 10rpx 0;
|
}
|
|
.scroll-content {
|
display: inline-block;
|
}
|
</style>
|
