page_pc_stationSocial/src/components/action-list/index.vue

<template>
  <div class="action-container">
    <div class="action-list">
      <el-popover
        v-for="(item, index) in getOptions"
        :key="index"
        placement="top"
        trigger="hover"
        :content="item.content"
        popper-class="custom-popper"
        :close-delay="10"
      >
        <el-upload
          v-if="item.type == 'image'"
          :disabled="disabled"
          action="#"
          accept=".jpg,.png,.svg,.jpeg,.gif,.bmp"
          :file-list="imageList"
          :http-request="uploadImage"
          :show-file-list="false"
          :multiple="true"
          :before-upload="beforeUploadImage"
          slot="reference"
          class="mr16"
        >
          <span class="action-img image"  @click="checkLogin"></span>
        </el-upload>
        <el-upload
          class="mr16"
          v-else-if="item.type == 'attach'"
          :disabled="disabled"
          action="#"
          accept=".pdf,.word,.docx,.ppt,.pptx"
          :file-list="attachList"
          :http-request="uploadFiles"
          :show-file-list="false"
          :multiple="true"
          :before-upload="beforeUploadAttach"
          slot="reference"
        >
          <span class="action-img attach"  @click="checkLogin"></span>
        </el-upload>
        <div v-else-if="item.type == 'rate'" slot="reference">
          <span v-show="isRobot === 2" class="action-img rate mr16" :class="item.type" @click="onClick(item.type)"></span>
        </div>
      </el-popover>
    </div>
    <div v-if="isLink && form !== 'aside'" class="action-customer-container">
      <slot></slot>
      <div class="action-customer-item turn-btn" @click.stop="onTurn('转人工')">转人工</div>
      <div class="action-customer-item" v-for="(item, index) in btn" :key="index"  @click.stop="onTurn(item)">{{item}}</div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { Popover, Upload } from 'element-ui'
import { fileUpload } from '@/api/modules/'
import {mapGetters} from "vuex";

export default {
  name: 'action-container',
  components: {
    [Popover.name]: Popover,
    [Upload.name]: Upload
  },
  props: {
    /**
     * 支持的配置['keyboard', 'sound', 'image', 'attach', 'rate']
     * 键盘：keyboard
     * 语音：sound
     * 图片：image
     * 附件：attach
     * 评分：rate
     */
    options: {
      type: Array,
      default: () => {
        return ['image']
      }
    },
    /**
     * 右侧人工跳转
     */
    isLink: {
      type: Boolean,
      default: false
    },
    isRobot: {
      type: Number,
      default: 0
    },
    btn:{
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      list: this.options,
      imageList: [],
      attachList: [],
      disabled: false
    }
  },
  watch: {
    options (val) {
      this.list = val
    }
  },
  computed: {
    ...mapGetters('user', ['isLogin']),
    getOptions () {
      const list = this.list
      const arr = list.map(v => {
        const temp = {}
        switch (v) {
          case 'keyboard':
            temp.type = 'keyboard'
            temp.content = '键盘'
            break
          case 'sound':
            temp.type = 'sound'
            temp.content = '语音'
            break
          case 'image':
            temp.type = 'image'
            temp.content = '图片'
            break
          case 'attach':
            temp.type = 'attach'
            temp.content = '文件'
            break
          case 'rate':
            temp.type = 'rate'
            temp.content = '评价客服'
            break
        }
        return temp
      })
      return arr
    }
  },
  created() {
    // 是否是iframe侧边栏打开的
    this.form = this.$route.query.from
  },
  methods: {
    onClick (data) {
      this.$emit('action', data)
    },
    onTurn (data) {
      this.$emit('turn', data)
    },
    async uploadImage (file) {
      // this.$emit('upload-image', file.file)
      const params = new FormData()
      params.append('file', file.file)
      const { data } = await fileUpload(params)
      if (data) {
        this.imageList.push(data)
        this.$emit('upload-image', data)
      }
    },
    async uploadFiles (file) {
      const params = new FormData()
      params.append('file', file.file)
      const { data } = await fileUpload(params)
      if (data) {
        this.attachList.push(data)
        this.$emit('upload-attach', data)
      }
    },
    beforeUploadImage (file) {
      const size = file.size / 1024 / 1024
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['jpg', 'jpeg', 'png', 'svg', 'gif', 'bmp']
      if (size > 10) {
        this.$toast('上传失败，文件大小不能超过10M')
        return false
      }
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$toast('上传失败，只能选择图片格式')
        return false
      }
    },
    beforeUploadAttach (file) {
      const size = file.size / 1024 / 1024
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['doc', 'docx', 'pdf', 'ppt', 'pptx']
      if (size > 10) {
        this.$toast('上传失败，文件大小不能超过10M')
        return false
      }
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$toast('上传失败，只能选择PDF、WORD、PPT格式')
        return false
      }
    },
    checkLogin () {
      if (!this.isLogin) {
        this.disabled = true
        this.$emit('close')
        this.$showLoginDialog()
      }
    }
  }
}
</script>

<style lang="scss">
  .custom-popper{
    min-width: 0!important;
    padding: 8px 16px!important;
  }
</style>
<style lang="scss" scoped>
.action-container{
  position: relative;
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;
  padding: 8px 0 16px;
  box-sizing: border-box;
  &::after{
    content: '';
    position: absolute;
    top: 0;
    width: calc(100% + 64px);
    height: 1px;
    background: #DADADA;
    left: -32px;
    right: -32px;
    z-index: 99;
  }
  .action-list{
    display: flex;
    align-items: center;
  }
  &.white{
    background: #fff;
  }
  .action-img{
    display: inline-block;
    width: 24px;
    height: 24px;
    //margin-right: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    &.keyboard{
      background-image: url('~@/assets/image/keyboard.png');
    }
    &.sound{
      background-image: url('~@/assets/image/sound.png');
    }
    &.image{
      background-image: url('~@/assets/image/image.png');
    }
    &.attach{
      background-image: url('~@/assets/image/attach.png');
    }
    &.rate{
      background-image: url('~@/assets/image/rate.png');
    }
  }
  .mr16{
    margin-right: 16px;
  }
  .image:hover{
    background-image: url('~@/assets/image/image_h.png');
  }
  .rate:hover{
      background-image: url('~@/assets/image/rate_h.png');
  }
  .action-customer-container{
    display: flex;
    align-items: center;
  }
  .action-customer-item{
    padding: 3px 9px;
    margin-right: 8px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    background: #fff;
    color: #686868;
    cursor: pointer;
  }
  .turn-btn{
    padding-left: 44px;
    background: url('~@/assets/image/hand-gray.png') no-repeat 8px center #fff;
    background-size: 18px 18px;
    cursor: pointer;
  }
}
::v-deep {
  .el-upload {
    width: 23px;
    height: 23px;
  }
}
</style>