assess-app/page_subpack/transition/components/add-file.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-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_subpack/static/img/task-details/icon-pdf.png"
                   v-if="file.file_type===1" mode="aspectFill"></image>
            <image class="wh-60 m-r20" src="/page_subpack/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_subpack/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_subpack/static/img/task-details/hint-subtract.png"
                 @click.stop="delFile(fileIndex)" mode=""></image>
        </view>
        <view class="sys-from-background-color row-c p-20 r-20" @click.stop="uploadingWord()">
          <image class="wh-80 m-r20" src="/page_subpack/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</text>
          </view>
        </view>
      </view>
    </view>
    <EnButton  @onSubmit="clickBut"></EnButton>

  </view>
</template>

<script>
import tools from "@/service/tools";
import txUploadFile from "@/service/txOssSts";
import {addTransferPdf} from "@/api/transfer";

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:'',
      isAjax: false,
    }
  },

  methods: {


    clickBut() {
      if (this.isAjax) {
        return;
      }
      addTransferPdf(this.msgData).then((res) => {
        if (res.code === 1) {
          tools.success(res.msg)
          this.$emit('newMsg')
          this.msgData.msg=''
          this.msgData.file_list=[]
        } else {
          tools.error(res.msg)
          this.isAjax = false;
        }

      })
    },
    delFile(fileIndex) {
      this.msgData.file_list.splice(fileIndex, 1)
      this.fileNum = -1
    },

    uploadingWord() {
      tools.showLoading()
      wx.chooseMessageFile({
        count: 5, //默认100
        type: 'file', //默认100
        extension: ['pdf'],
        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
                  })
                  this.msgData.file_list.push({
                    'name': tempFilePath.name,
                    'file_type': tools.getFileType(data .Location),
                    'url': data.Location
                  })
                }
              })
            })
           tools.hideLoading()
          } else {
            tools.error("请选择上传文件")
            tools.hideLoading()
          }
        },
        fail: (e) => {
          tools.hideLoading()
        }
      });

    },

  }
}
</script>

<style lang="scss" scoped>
.nav {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 30rpx 0 15rpx;
  background: #fff;
}
.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>