Investment-data-system/src/views/components/image/userPicture.vue

<!-- 图库列表 -->
<template>
  <div class="g-components-image-user-picture">
    <div class="title-box g_flex_row_between">
      <div class="g_fs_14 g_c_0 title g_pl_8">用户图库</div>
      <div class="g_fs_14 g_c_6 edit g_pr_8 g_cursor_point" @click="handleOpenEditModal">编辑</div>
    </div>
    <div class="panel g_flex_row_start g_pl_11 g_pb_11" style="min-height:calc(100% - 32px)">
      <div v-if="imageList.length > 0" class="g_flex_row_start_c">
        <div class="g_w_80 g_h_80 g_flex_c item" v-for="(item,index) in imageList" :key="index">
          <div v-if="item.type == 'img'" class="g_border_e g_flex_c g_w_78 g_h_78" style="border-radius: 4px;">
            <a-image :width="70" :height="70" :src="item.thumbUrl" style="border-radius: 4px;" />
          </div>
          <div v-else-if="item.type == 'mp4'" @click="handleOpenVideoModal(item)" class="g_border_e g_flex_c flex_c g_w_78 g_h_78 g_bg_0 g_cursor_point" style="border-radius: 4px;">
            <!-- <video :width="70" :height="70" @click="handleOpenVideoModal(item)" :src="item.thumbUrl" style="border-radius: 4px;" /> -->
            <i class="iconfont icon-kaishi g_c_c g_fsi_20"></i>
          </div>
        </div>
      </div>
      <div v-if="imageList.length == 0">
        <div class="g_w_80 g_h_80 g_flex_c item">
          <div class="g_border_e g_flex_c g_w_78 g_h_78" style="border-radius: 4px;">
            <a-image :width="70" :height="70" src="http://matripe.oss-cn-beijing.aliyuncs.com/defaultMountain.png" style="border-radius: 4px;" />
          </div>
        </div>
      </div>
    </div>

    <a-modal v-model:open="imageModel.isShow" title="用户图库" width="640px" centered :destroyOnClose="true" :forceRender="true">
      <div class="g_pt_30 modal-box">
        <a-form :model="imageModel" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" autocomplete="off" style="width: 80%;" class="g_ml_51">
          <a-form-item label="附件" name="remark">
            <div class="picture-box">
              <annexPanel :list="imageList" from="user" @submitEvent="getFilelist" @removeEvent="handleRemove" accept="image/png, image/jpg, image/jpeg, video/mp4" />
            </div>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-button @click="handleCloseImage">关闭</a-button>
      </template>
    </a-modal>
    <!-- 视频预览 -->
    <videoPreview :videoModal="videoModal" />
  </div>
</template>

<script setup>
/* 用户图库
 * @params   list 图片数组
 * @params   userid 用户id
 * @params   from 来源。字符串 默认为default，调用指定接口
 * @function submitEvent  上传成功事件
 * 							list:图片数组,
 *							id:当前上传成功的id,
 *           				annex:annex的成功回调。
 * @function removeEvent 删除按钮事件
 * 					    返回对象格式。内容为图片信息
 * @function closeModel 关闭弹窗事件
 */
import { ref, onMounted, getCurrentInstance, watch, defineEmits, defineProps } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { uploadImage } from '../../../api/base.js'
import { delivryUploadUserImage, delivryDelUserImage } from '../../../api/other/delivery.js'
import annexPanel from '../upload/annex.vue'
import videoPreview from './videoPreview.vue'

/* #################### 初始化事件 #################### */
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G
const emits = defineEmits(['submitEvent', 'removeEvent', 'closeModel'])
const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return []
    },
  },
  from: {
    type: String,
    default: () => {
      return 'default'
    },
  },
  userid: {
    type: Number,
    default: () => {
      return 0
    },
  },
})

onMounted(() => {
  console.log('mounted 用户图库：', props.list)
  imageList.value = props.list
  imageList.value.forEach((item) => {
    if (item.url.indexOf('mp4') > -1) {
      item.type = 'mp4'
    } else {
      item.type = 'img'
    }
  })
  console.log('mounted 用户图库：', imageList.value)
})
watch(props.list, (val) => {
  console.log('watch 用户图库：', val)
  imageList.value = val
})
watch(props.userid, (val) => {
  console.log('props.userid', val)
  props.userid = val.content
})
/**
 * 视频预览相关
 */
const videoModal = ref({
  isShow: false,
  url: '',
})
const handleOpenVideoModal = ($data) => {
  // 打开视频弹窗
  console.log($data)
  videoModal.value.url = $data.url
  videoModal.value.isShow = true
}
/**
 * 视频预览相关 end
 */
const imageList = ref([])
const imageModel = ref({
  isShow: false,
})
const handleOpenEditModal = () => {
  // 打开编辑弹窗
  imageModel.value.isShow = true
}

const getFilelist = (e) => {
  console.log(props)
  if (props.from == 'default') {
    delivryUploadUserImage({
      fkId: props.userid,
      url: e.image,
      type: 20,
      recordState: 1,
    }).then((imageRes) => {
      imageList.value[imageList.value.length - 1].id = imageRes.data.img.id
      emits('submitEvent', {
        list: imageList.value,
        id: imageRes.data.img.id,
        annex: e,
      })
    })
  } else {
    emits('submitEvent', {
      list: imageList.value,
      id: '',
      annex: e,
    })
  }
}
const handleRemove = ($data) => {
  emits('removeEvent', $data)
}

const handleCloseImage = () => {
  imageModel.value.isShow = false
  emits('closeModel')
}
</script>

<style lang="less" scoped>
.g-components-image-user-picture {
  width: 288px;
  border: 1px solid #eee;
  border-radius: 4px;
  .title-box {
    background-color: #f3f3f3;
    line-height: 32px;
    .edit {
      text-decoration: underline;
    }
  }
  .item {
    margin-top: 11px;
    margin-right: 11px;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}
/deep/ :where(.css-dev-only-do-not-override-185kyl0).ant-empty .ant-empty-image {
  height: 56px !important;
}
</style>