assess-app/page_task/task_details/module/send_chat.vue

<template>
	<view class="text-color-12">
		<view class="p-30">
			<textarea class="sys-from-background-color r-20 textarea p-20" name="" id="" cols="30" rows="10"
				v-model="msgData.msg" :maxlength="999" :placeholder="placeholder"></textarea>
			<view class="size-26 m-t20 sys-weight-600">上传图片</view>
			<view class="image-content">
				<view class="image-box m-t20 r-10 m-r20" :key="pIndex" @click.stop="showImg(msgData.msg_img,pIndex)"
					v-for="(msgImg,pIndex) in msgData.msg_img">
					<image class="image-item wh-110" :src="msgImg.type===1?msgImg.url:getVideoImg(msgImg.url)"
						mode="aspectFill">
					</image>
					<image class="wh-45 video-icon" src="/static/img/task/play.png" mode="aspectFill"
						@click.stop="showVideoImg(msgImg.url)" v-if="msgImg.type === 2">
					</image>
					<image class="delete-iocn wh-25" src="/page_task/static/img/information/hint-subtract.png" mode=""
						@click.stop="shutImg(pIndex)"></image>
				</view>
				<view class="add-image column-c justify-center m-t20" @click.stop="showUploadingImg(true)">
					<image class="wh-45" src="/page_task/static/img/task-details/Maskoup.png" mode=""></image>
					<text class="size-24 text-color-666">视频/图片</text>
				</view>
			</view>
			<view class="size-26 m-tb20 sys-weight-600">上传附件</view>
			<view class="">
				<view class="sys-from-background-color row-justify-sb center p-20 m-b16 r-20"
					v-for="(file,fileIndex) in msgData.file_list" :key="fileIndex">
					<view class="row-c">
						<image class="wh-60 m-r20" src="/page_task/static/img/task-details/icon-pdf.png"
							v-if="file.file_type===1" mode="aspectFill"></image>
						<image class="wh-60 m-r20" src="/page_task/static/img/task-details/icon-word.png"
							v-else-if="file.file_type===2" mode="aspectFill"> </image>
						<image class="wh-60 m-r20" src="/page_task/static/img/task-details/icon-excel.png" v-else
							mode="aspectFill"> </image>
						<text class="size-24 text-color-666"> {{file.name}}</text>
					</view>
					<image class="delete-iocn wh-25" src="/page_task/static/img/information/hint-subtract.png"
						@click.stop="delFile(delFile)" mode=""></image>
				</view>
				<view class="sys-from-background-color row-c p-20 r-20" @click.stop="uploadingFile(5)">
					<image class="wh-80 m-r20" src="/page_task/static/img/task-details/add-file.png" mode="aspectFill">
					</image>
					<view class="column">
						<text class="select-file size-24">选择文件</text>
						<text class="size-24 text-color-666">支持上传文件：pdf、word、excel、ppt</text>
					</view>
				</view>
			</view>
		</view>
		<EnButton v-if="is_button" @onSubmit="clickBut"></EnButton>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-block">
				<view class="popup-row" @click="uploadingFile(1)">拍照</view>
				<view class="popup-row" @click="uploadingFile(2)">选择照片</view>
				<view class="popup-row" @click="uploadingFile(3)">录像</view>
				<view class="popup-row" @click="uploadingFile(4)">选择视频</view>
				<view class="popup-row" @click="showUploadingImg(false)">取消</view>
			</view>
		</uni-popup>
    <uni-popup ref="videoPopup" @change="closeVideoImg">
      <view class="video-box" v-if="videoUrl">
        <video class="myVideo" :src="videoUrl" :autoplay="true"></video>
      </view>
    </uni-popup>
	</view>
</template>

<script>
	import tools from "@/service/tools";
	import txUploadFile from "@/service/txOssSts";

	export default {
		props: {
			is_button: {
				type: Boolean,
				default: false
			},
			placeholder: {
				default: '留个言吧~~'
			}

		},
		data() {
			return {
				msgData: {
					business_id: '',
					msg: '',
					reply_id: 0,
					msg_img: [],
					file_list: [],
				},
        videoUrl:''
			}
		},
		watch: {
			'msgData': {
				handler() {
					this.$emit('input', this.msgData)
				},
				deep: true
			}
		},
		methods: {
      closeVideoImg(e) {
        if (!e.show) {
          console.log('关闭视频了')
          this.videoUrl = ''
        }
      },
      showVideoImg(url){
        this.videoUrl = url
        this.$refs.videoPopup.open('center')
      },
      showImg(item, index) {
        let imgList=[]
        for (const imgListKey in this.msgData.msg_img) {
          if(this.msgData.msg_img[imgListKey].type===1){
            imgList.push(this.msgData.msg_img[imgListKey].url)
          }
        }
        uni.previewImage({
          urls: imgList,
          current: item.url,
          success: () => {}
        })
      },
			clickBut() {
				console.log('------butClick--------------')
				this.$emit('butClick')
			},
			delFile(fileIndex) {
				this.msgData.file_list.splice(fileIndex, 1)
				this.fileNum = -1
			},
			getVideoImg(url) {
				return tools.getOssVideo(url)
			},
			shutImg(indexT) {
				this.msgData.msg_img.splice(indexT, 1)
			},
			showUploadingImg(showImg) {
				if (showImg) {
					this.$refs.popup.open("bottom");
				} else {
					this.$refs.popup.close();
				}
				tools.hideLoading()
			},
			uploadingFile(fileType) {
				if (fileType < 3) {
					this.uploadingImg(fileType)
				} else if (fileType < 5) {
					this.uploadingVideo(fileType)
				} else {
					this.uploadingWord()
				}
			},
			uploadingWord() {
				tools.showLoading()
				wx.chooseMessageFile({
					count: 5, //默认100
					type: 'file', //默认100
					extension: ['pdf', 'doc', 'docx', 'xlsx', 'xls'],
					success: (res) => {
						console.log('---------------------------------------------');
						console.log(res);
						if (res.tempFiles.length > 0) {
							res.tempFiles.forEach((tempFilePath) => {
								console.log(tempFilePath)
								txUploadFile(tempFilePath.path).then((data) => {
									if (!data) {
										tools.error('图片上传失败')
									} else {
										console.log({
											'name': tempFilePath.name,
											'file_type': tools.getFileType(data
												.Location),
											'url': data.Location
										})
										console.log(
											'---------------------------------------------'
										);
										this.msgData.file_list.push({
											'name': tempFilePath.name,
											'file_type': tools.getFileType(data
												.Location),
											'url': data.Location
										})
									}
								})
							})
							this.showUploadingImg(false);
						} else {
							tools.error("请选择上传文件")
							tools.hideLoading()
						}
					},
					fail: (e) => {
						tools.hideLoading()
					}
				});

			},
			uploadingVideo(sourceType) {
				tools.showLoading()
				uni.chooseVideo({
					sizeType: "compressed",
					sourceType: [sourceType === 3 ? 'camera' : 'album'],
					success: (res) => {
						txUploadFile(res.tempFilePath).then((data) => {
							if (!data) {
								tools.error('视频上传失败')
							} else {
								setTimeout(() => {
									this.msgData.msg_img.push({
										'type': 2,
										'url': data.Location
									})
								}, 1500)
							}
							this.showUploadingImg(false);
						}).catch((e) => {
							tools.hideLoading()
						})
					},
					fail: (e) => {
						tools.hideLoading()
					}
				});
			},
			uploadingImg(sourceType) {
				tools.showLoading()
				uni.chooseMedia({
					mediaType: 'image',
					count: sourceType === 1 ? 1 : 9, //默认9
					sizeType: "compressed",
					sourceType: [sourceType === 1 ? 'camera' : 'album'],
					success: (res) => {
						console.log(res)
						if (res.tempFiles.length > 0) {
							res.tempFiles.forEach((tempFile) => {
								txUploadFile(tempFile.tempFilePath).then((data) => {
									if (!data) {
										tools.error('图片上传失败')
									} else {
										this.msgData.msg_img.push({
											'type': 1,
											'url': data.Location
										})
									}
								})
							})
							this.showUploadingImg(false);
						} else {
							tools.error("请选择上传的图片")
							tools.hideLoading()
						}
					},
					fail: (e) => {
						tools.hideLoading()
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.textarea {
		width: calc(100% - 40rpx);
		max-height: 100rpx;
	}

	.popup-block {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		overflow: hidden;
		background-color: #f5f5f5;

		.popup-row {
			height: 100rpx;
			background-color: #fff;
			text-align: center;
			line-height: 100rpx;
			border-bottom: 2rpx solid #f5f5f5;

			&:nth-child(4) {
				margin-bottom: 20rpx;
			}

			&:last-child {
				height: 112rpx;
				border: none;
				line-height: 112rpx;
			}

			&:active {
				background-color: rgb(244, 244, 244);
			}
		}
	}

	.image-content {
		display: flex;
		flex-wrap: wrap;

		.image-box {
			position: relative;

			.image-item {
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
			}

			.video-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.delete-iocn {
				position: absolute;
				right: -10rpx;
				top: -10rpx;
			}
		}

		.add-image {
			width: 128rpx;
			height: 128rpx;
			border-radius: 10rpx;
			background: #F7F9FE;
			border: 1rpx dashed #999999;
		}
	}

	.select-file {
		width: 132rpx;
		height: 44rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 1rpx solid #DDDDDD;
		line-height: 44rpx;
		text-align: center;
		display: inline-block;
		margin-bottom: 10rpx;
	}
</style>