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" @click.stop=""></div>
            <div class="swiper-button-next" @click.stop=""></div>
        </div>
        <div v-if="isEdit" class="add" @click="file.click()" :class="{ disable: images.length >= 9 }">
            <span style="color: #fff" v-if="images.length < 9">{{ $t('components.continueAdd') }}</span
            >&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>{{ $t('components.uploadImg') }}</span>
        </div>
        <div class="tips">{{ $t('components.limitImgLength') }}</div>
        <input ref="file" multiple type="file" style="display: none" accept=".jpg,.png,.jpeg" @change="onChange" />
    </div>

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

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

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

    // let file = e.target.files[0]
    let frist = false
    for (let i = 0; i < files.length; i++) {
        let file = e.target.files[i]

        if (!['png', 'jpg', 'jpeg'].includes(getMime(file.name))) {
            emits('tips', t('components.FileSizeTips', { size: '5', file: 'jpg/png' }))
            continue;
        }
        if (checkSizeLimitFree(file.size, 5)) {
            let reader = new FileReader()
            reader.onload = function () {
                if (images.value.length >= 9) {
                    if (!frist) {
                        frist = true
                        emits('tips', t('components.TipsImgLength'))
                    }
                } else {
                    images.value.push({ src: base64ToDataURL(reader.result), file })
                    notify.value.media['image'] = images.value
                }
            }
            reader.readAsDataURL(file)
        } else {
            emits('tips', t('components.FileSizeTips', { size: '5', file: 'jpg/png' }))
        }
        console.log(images.value.length)
    }

    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
    console.log(swiper)
})
</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>