dootask/resources/assets/js/components/PreviewImage/state.vue

<template>
    <PreviewImage v-model="show" :index="previewImageIndex" :list="previewImageList"/>
</template>

<script>
import {mapState} from "vuex";
import PreviewImage from "./index";
import {languageName} from "../../language";

export default {
    name: 'PreviewImageState',
    components: {PreviewImage},
    computed: {
        ...mapState([
            'previewImageIndex',
            'previewImageList',
        ]),
    },
    data() {
        return {
            show: false,
        }
    },
    watch: {
        show(v) {
            if (v) {
                this.$store.state.previewImageIndex = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1)
            } else {
                this.$store.state.previewImageIndex = 0;
                this.$store.state.previewImageList = [];
            }
        },
        previewImageList(l) {
            if (l.length > 0) {
                if ($A.isMobileApp || $A.isElectron) {
                    let position = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1)
                    let paths = l.map(item => {
                        if ($A.isJson(item)) {
                            return item.src;
                        }
                        return item
                    })
                    let max = 50;
                    if (paths.length > max) {
                        const newPaths = [];
                        let i = 0;
                        while (newPaths.length < max && i < max) {
                            let front = position - i;
                            let behind = position + i + 1;
                            if (front >= 0) {
                                newPaths.unshift(paths[front]);
                            }
                            if (behind < paths.length) {
                                newPaths.push(paths[behind]);
                            }
                            i++;
                        }
                        position = newPaths.findIndex(item => item === paths[position]);
                        paths = newPaths;
                    }
                    const videoPath = paths.find(src => {
                        return /\.mp4$/i.test(src)
                    });
                    if (videoPath) {
                        this.videoPreview(videoPath);
                    } else {
                        this.imagePreview(position, paths);
                    }
                } else {
                    this.show = true;
                }
            }
        }
    },
    methods: {
        videoPreview(path) {
            if ($A.isMobileApp) {
                $A.nativeAppSendMessage({
                    language: $A.nativeAppConvertLanguage(),
                    action: 'videoPreview',
                    path
                });
            } else if ($A.isElectron) {
                this.$Electron.sendMessage('openMediaViewer', {
                    type: 'video',
                    lang: languageName,
                    video: path,
                })
            }
        },
        imagePreview(index, paths) {
            if ($A.isMobileApp) {
                $A.nativeAppSendMessage({
                    language: $A.nativeAppConvertLanguage(),
                    action: 'picturePreview',
                    position: index,
                    paths
                });
            } else if ($A.isElectron) {
                this.$Electron.sendMessage('openMediaViewer', {
                    type: 'image',
                    lang: languageName,
                    currentIndex: index,
                    images: paths,
                })
            }
        }
    }
};
</script>