<template> <div class="emojiRoot"> <div @click="choosePhoto" class="flex flex-col items-center"> <div class="w-[106rpx] h-[106rpx] bg-[#F9F9F9] rounded-[60rpx] flex-center"> <tm-image :width="53" :height="44" :src="photoAlbum"></tm-image> </div> <div class="mt-[6rpx] text-[#666666] text-[24rpx]">照片</div> </div> <div @click="takePhoto" class="flex flex-col items-center"> <div class="w-[106rpx] h-[106rpx] bg-[#F9F9F9] rounded-[60rpx] flex-center"> <tm-image :width="53" :height="44" :src="photoGraph"></tm-image> </div> <div class="mt-[6rpx] text-[#666666] text-[24rpx]">拍摄</div> </div> <div @click="chooseFile" class="flex flex-col items-center"> <div class="w-[106rpx] h-[106rpx] bg-[#F9F9F9] rounded-[60rpx] flex-center"> <tm-image :width="53" :height="44" :src="folder"></tm-image> </div> <div class="mt-[6rpx] text-[#666666] text-[24rpx]">文件</div> </div> </div> </template> <script setup> import { ref, reactive, defineProps, defineEmits } from "vue" import dayjs from "dayjs"; import { beautifyTime } from '@/utils/datetime' import { useDialogueListStore, useDialogueStore, useUserStore } from '@/store' import { useSessionMenu } from '@/hooks' import photoAlbum from '@/static/image/chatList/photoAlbum.png' import photoGraph from '@/static/image/chatList/photoGraph.png' import folder from '@/static/image/chatList/folder.png' import { uploadImg } from '@/api/chat' import { uniqueId } from '@/utils' const props = defineProps({ sendUserInfo: { type: Object, default: {}, required: true } }); const dialogueListStore = useDialogueListStore() const dialogueStore = useDialogueStore() const userStore = useUserStore() const emit = defineEmits(['selectImg','updateUploadProgress']) const onProgressFn = (progress, file,id) => { emit('updateUploadProgress', id, progress.loaded / progress.total * 100) } const onUploadImage = (file) => { return new Promise((resolve) => { let image = new Image() image.src = URL.createObjectURL(file) image.onload = () => { const form = new FormData() form.append('file', file) form.append("source", "fonchain-chat"); form.append("urlParam", `width=${image.width}&height=${image.height}`); let randomId = uniqueId() dialogueListStore.addDialogueRecord([ { avatar: userStore.avatar, created_at: dayjs().format('YYYY-MM-DD HH:mm:ss'), extra: { height: image.height, name: "", size: 0, url: image.src, width: image.width }, float: "right", isCheck: false, is_mark: 0, is_read: 0, is_revoke: 0, msg_id: randomId, msg_type: 3, nickname: userStore.nickname, receiver_id: dialogueStore.talk.receiver_id, sequence: -1, talk_type: dialogueStore.talk.talk_type, user_id: userStore.uid, uploadCurrent: 0 } ], 'add') uploadImg(form, (e, file) => onProgressFn(e, file, randomId)).then(({ status, data, msg }) => { if (status == 0) { // message.success('上传成功') resolve({ url: data.ori_url, size: file.size, width: image.width, height: image.height }) } else { resolve('') message.error(msg) } }) } }) } const choosePhoto = () => { uni.chooseImage({ sourceType: ['album'], success: async (res) => { console.log(res.tempFiles); res.tempFiles.forEach(async item => { if (item.type.indexOf('image/') === 0) { console.log("进入图片") let data = await onUploadImage(item) // return false; emit('selectImg', data) // if (src) { // quill.insertEmbed(index, 'image', src) // quill.setSelection(index + 1) // } // return } if (item.type.indexOf('video/') === 0) { console.log("进入视频") let fn = emitCall('video_event', item, () => { }) emit('editor-event', fn) } }) }, fail: (err) => { console.log(err); message.error(err) } }) } const takePhoto = () => { } const chooseFile = () => { } </script> <style lang="scss" scoped> .emojiRoot { width: 100%; height: 232rpx; padding: 20rpx 130rpx 0 130rpx; display: flex; justify-content: space-between; align-items: flex-start; } </style>