4dkankan_bim/src/components/form/medias/Image.vue

<template>
    <div class="media-image" v-show="images.length">
        <div class="swiper" ref="swiper$">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in images" :style="`background-image: url(${item.src})`" :key="index"></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div v-if="isEdit" class="add" @click="file.click()" :class="{ disable: images.length >= 9 }">
            继续添加&nbsp;<span>{{ images.length }}</span
            >&nbsp;/&nbsp;9
        </div>
    </div>
    <div v-if="isEdit" class="placeholder" @click="file.click()" v-show="images.length == 0">
        <div class="icon">
            <i class="iconfont icon-add"></i>
            <span>上传图片</span>
        </div>
        <div class="tips">支持JPG、PNG等图片格式，单张不超过5MB，最多支持上传9张。</div>
        <input ref="file" type="file" style="display: none" accept="image/jpg,image/jpeg,image/png" @change="onChange" />
    </div>

    <div class="del-btn" v-if="isEdit" v-show="notify.media?.[notify.type]?.length" @click="delPic">
        <i class="iconfont icon-del"></i>
    </div>
</template>
<script setup>
import { ref, onMounted, inject } from 'vue'
import { checkSizeLimitFree, base64ToDataURL, convertBlob2File, base64ToBlob } from '@/utils/file'
import common from '@/utils/common'
const notify = inject('notify')
const isEdit = inject('isEdit')
const emits = defineEmits(['tips'])

const props = defineProps({
    viewer: {
        type: Boolean,
        default: false,
    },
})

const file = ref(null)
const swiper$ = ref(null)

const images = ref([])
const onChange = e => {
    if (!e.target.files.length) {
        return
    }

    let file = e.target.files[0]

    if (checkSizeLimitFree(file.size, 5)) {
        let reader = new FileReader()
        reader.onload = function () {
            images.value.push({ src: base64ToDataURL(reader.result), file })

            notify.value.media['image'] = images.value
        }
        reader.readAsDataURL(file)
    } else {
        emits('tips', '请上传 5MB 以内的 jpg/png 文件')
    }
    e.target.value = ''
}
const delPic = () => {
    let index = swiper.activeIndex
    images.value.splice(index, 1)
}
let swiper
onMounted(() => {
    swiper = new Swiper(swiper$.value, {
        observer: true,
        navigation: {
            prevEl: swiper$.value.querySelector('.swiper-button-prev'),
            nextEl: swiper$.value.querySelector('.swiper-button-next'),
        },
        on: {
            observerUpdate: function () {
                swiper.slideTo(images.value.length - 1, 0, false)
            },
        },
    })
    images.value = notify.value.media?.image || []

    // if (!notify.value.media) {
    //     notify.value.media = {}
    // }

    // notify.value.media['image'] = images.value
})
</script>
<style lang="scss" scoped>
.del-btn {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
        font-size: 1em;
    }
}
.placeholder {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        span {
            margin-top: 10px;
        }
    }
    .tips {
        font-size: 12px;
        padding: 10px;
        position: absolute;
        bottom: 0;
        width: 100%;
        color: rgba(255, 255, 255, 0.3);
    }
}
.media-image {
    width: 100%;
    height: 100%;
    .swiper {
        width: 100%;
        height: 100%;
        .swiper-slide {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-position: center center;
            background-size: contain;
        }
        .swiper-button-prev,
        .swiper-button-next {
            width: 32px;
            height: 32px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            &::after {
                font-weight: bold;
                font-size: 14px;
            }
        }
    }
    .add {
        cursor: pointer;
        font-size: 12px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000 200%);
        border-radius: 0 0 4px 4px;
        z-index: 10;
        &.disable {
            pointer-events: none;
        }
        span {
            color: #0076f6;
        }
    }
}
</style>