assess-app/pages/task/module/add-msg.vue

<template>
  <view class="msg-box">
    <view class="leave-message-box" >
      <view class="">
        <textarea v-model="msgData.msg" placeholder="留个言吧" :maxlength="999" auto-height />
      </view>
      <view class="img-box">
        <view class="credentials-img" @click="showImg(msgData.msg_img,pIndex)"
              v-for="(msgImg,pIndex) in msgData.msg_img">
          <image class="credentials-imgs" :src="msgImg.type===1?msgImg.url:getVideoImg(msgImg.url)" @error="" mode="aspectFill"></image>
          <image v-if="msgImg.type===2"  class="video-img" src="@/static/task/video-img.png" mode=""></image>
          <image @click.stop="shutImg(pIndex)" class="gb-img" src="@/static/login/gb.png" mode=""></image>

        </view>
        <view class="credentials-img">
          <image class="img-box-img" @click="showUploadingImg(true)" src="/pages-task/static/add-client/scmb.png" mode=""></image>
        </view>

      </view>
      <view class="file-box">
        <view class="file-list">
          <view class="file-item" v-for="(file,fileIndex) in msgData.file_list">
            <view class="file-img">
              <image src="/static/task/file-icon.png"></image>
              <view class="img-icon" v-if="file.file_type===1">PDF</view>
              <view class="img-icon icon-four" v-else-if="file.file_type===2">Word</view>
              <view class="img-icon icon-two" v-else>XLS</view>
            </view>
            <view class="file-text">
              {{file.name}}
            </view>
            <view class="file-set" @click.stop="setFile(fileIndex)">
              <image src="/static/task/file-icon.png"></image>
              <view class="but-list" :class="{'but-list-show':fileNum===fileIndex}">
                <view class="but-item" @click.stop="editFile">重命名</view>
                <view class="but-item" @click.stop="delFile(fileIndex)">删除</view>
              </view>
            </view>
          </view>
        </view>

        <view class="add-file" @click="uploadingFile(5)">
          <view class="add-img">
            <image src="@/static/task/add-file.png"></image>
          </view>
          <view class="add-text">
            上传附件文档
          </view>
        </view>

      </view>
    </view>

    <uni-popup ref="editPopup" type="bottom">
      <view class="popup-edit">
        <view class="edit-nav">
          修改文件名
        </view>
          <en-input label="文件名" placeholder="请输入文件名" v-model="fileName"></en-input>
          <button class="edit-but" @click="setFileName">保存</button>
      </view>
    </uni-popup>

    <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 txUploadFile from "@/common/js/txOssSts";
import tools from "@/common/js/tools";
import EnInput from "@/components/en-from/en-input/en-input";

export default {
  name: "add-msg",
  components: {EnInput},
  props: {
    value:{
      default:{
        business_id: '',
        reply_id: 0,
        'msg': '',
        'msg_img': [],
        'file_list': [],
      }
    }
  },
  data() {
    return {
      fileNum:-1,
      msgData:{
        'msg': '',
        'msg_img': [],
        'file_list': [],
      },
      fileName:'',
    }
  },
  watch: {
    'msgData':{
      handler() {
        this.$emit('input',this.msgData)
      },
      deep: true
    }
  },
  mounted() {
    this.msgData=this.value
  },
  methods: {
    setFile(fileIndex){
      this.fileNum=fileIndex
    },
    setFileName(){
      if( this.fileName===''){
        tools.error('请输入文件名称')
        return
      }
      this.msgData.file_list[this.fileNum].name=this.fileName
      this.$refs.editPopup.close();
      this.fileNum=-1
    },
    editFile(){
      this.fileName=this.msgData.file_list[this.fileNum].name;
      this.$refs.editPopup.open("bottom");
    },
    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)
    },
    showImg(item, index) {

    },
    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 scoped lang="scss">
.msg-box{
  .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);
      }
    }
  }
  .popup-edit{
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    overflow: hidden;
    background-color: #fff;
    padding: 20rpx;
    min-height: 50vh;
    position: relative;
    .edit-nav {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      padding: 30rpx 0 15rpx;
      background: #fff;
    }
    .edit-but{
      margin-top: 20rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 32rpx;
      background: #3169FA;
      color: #fff;
      position: absolute;
      bottom: 20rpx;
      width: calc(100vw - 20rpx);
    }
  }
  .leave-message-box {
    width: 100%;
    height: auto;
    padding: 36rpx 30rpx 52rpx;
    box-sizing: border-box;
    background: #fff;

    .img-box {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      padding: 40rpx 0 0 0;

      .credentials-img {
        width: calc((100vw - 92rpx)/3);
        height: calc((100vw - 92rpx)/3);
        margin-right:16rpx;
        position: relative;
        .credentials-imgs {
          width: calc((100vw - 92rpx)/3);
          height: calc((100vw - 92rpx)/3);
          display: block;
        }
        .video-img{
          position: absolute;
          top:calc(50% - 28rpx);
          left:calc(50% - 28rpx);
          width: 56rpx;
          height: 56rpx;
        }
        .gb-img {
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 2;
        }
        .img-box-img {
          width: calc((100vw - 92rpx)/3);
          height: calc((100vw - 92rpx)/3);
        }
      }
      .credentials-img:nth-of-type(3n+0){
        margin-right:0;
      }
      .credentials-img:nth-of-type(n+4){
        margin-top:16rpx;
      }



    }
    .file-box{
      .file-list{
        .file-item{
          height:72rpx;
          padding: 39rpx 2rpx;
          display: flex;
          justify-content: left;
          .file-img{
            height: 72rpx;
            width: 72rpx;
            position: relative;
            .img-icon{
              position: absolute;
              left: 0;
              top: 37rpx;
              width: 32rpx;
              height: 20rpx;
              background: #F24949;
              font-weight: 600;
              color: #FFFFFF;
              font-size: 12rpx;
              line-height: 20rpx;
              text-align: center;
            }
            .icon-two{
              background: #00BF72;
            }
            .icon-three{
              background: #F9742C;
            }
            .icon-four{
              background: #0083FB;
            }
            image{
              height: 72rpx;
              width: 72rpx;
            }
          }
          .file-text{
            margin-left: 24rpx;
            width: calc(100vw - 214rpx);
            height: 72rpx;
            line-height: 72rpx;
            color: #333333;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .file-set{
            margin-top:21rpx ;
            width: 30rpx;
            position: relative;
            image{
              width: 30rpx;
              height: 30rpx;
            }

            .but-list{
              display: none;
              position: absolute;
              width: 168rpx;
              height: 204rpx;
              left: -200rpx;
              top: 15rpx;
              background: rgba(51,51,51,0.39);
              border-radius: 8rpx;
              padding-left: 32rpx;
              .but-item{
                height: 102rpx;
                line-height: 102rpx;
                font-size: 32rpx;
                color: #FFFFFF;
              }
            }
            .but-list-show{
              display: block;
            }
          }
        }
      }
      .add-file{
        height:72rpx;
        padding: 39rpx 2rpx;
        display: flex;
        justify-content: left;
        .add-img{
          height: 72rpx;
          width: 72rpx;
          image{
            height: 72rpx;
            width: 72rpx;
          }
        }
        .add-text{
          height: 72rpx;
          line-height: 72rpx;
          color: #333333;
          margin-left: 16rpx;
        }
      }
    }
  }
}

</style>