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="留个言吧"></textarea>
			<view class="size-26 m-t20 sys-weight-600">上传图片</view>
			<view class="image-content">
				<view class="image-box"  :key="index" @click="showImg(msgData.msg_img,pIndex)"
              v-for="(msgImg,pIndex) in msgData.msg_img">
					<image class="image-item wh-110 m-t20 r-10 m-r20" :src="msgImg.type===1?msgImg.url:getVideoImg(msgImg.url)" mode="aspectFill">
					</image>
					<image class="delete-iocn wh-25" src="/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="/static/img/task-details/Mask oup.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="/static/img/task-details/icon-word.png" mode="aspectFill">
						</image>
						<text class="size-24 text-color-666"> {{file.name}}</text>
					</view>
					<image class="delete-iocn wh-25" src="/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="/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>
	</view>
</template>

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

  export default {
		props: {
			is_button: {
				type: Boolean,
				default: false
			}

		},
		data() {
			return {
        msgData: {
          business_id: '',
          msg: '',
          reply_id: 0,
          msg_img: [],
          file_list: [],
        },
      }
		},
    watch: {
      'msgData':{
        handler() {
          this.$emit('input',this.msgData)
        },
        deep: true
      }
    },
		methods: {
      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;
			}

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

		.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>