YXGJ/components/slideshow.vue

<template>
    <view>
        <view v-if="list.length">
            <swiper :style="{
                width: tovw(width),
                height: tovw(height),
            }" :autoplay="autoplay" :interval="interval" circular>
                <swiper-item class="swiper-item" v-for="(item, index) in list" :key="item.list">
                    <u--image @click="onClick(index)" :src="item.cover" :width="tovw(width)" :height="tovw(height)"
                        mode="aspectFill" :lazy-load="true">
                        <template v-slot:loading>
                            <u-loading-icon color="red"></u-loading-icon>
                        </template>
                    </u--image>
                </swiper-item>
            </swiper>
        </view>
        <view style="height: 10px;" v-else-if="empty" />
    </view>
</template>

<script>
import { viewImage } from "../utils/settleFiles";

export default {
    name: 'slideshow',
    props: {
        autoplay: {
            type: Boolean,
            default: true
        },
        interval: {
            type: [Number, String],
            default: 5000
        },
        empty: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            width: 375,
            height: 500,
            list: [],
        }
    },
    methods: {
        getBanners(locations, systemclient = 'marketingtool') {
            return new Promise((resolve, reject) => {
                this.$Http.basic({
                    "id": "20240426154302",
                    "content": {
                        systemclient,
                        locations,
                        date: Date.now()
                    }
                }).then(res => {
                    console.log("获取广告位" + locations, res)
                    resolve(res.msg)
                    if (this.cutoff(res.msg)) return;
                    try {
                        let list = res.data[locations[0]];
                        if (list.length) {
                            if (list[0].dimensional) {
                                let dimensional = list[0].dimensional.split("*")
                                this.width = dimensional[0] - 0;
                                this.height = dimensional[1] - 0;
                            };
                            this.list = list.map(v => {
                                v.cover = this.getSpecifiedImage(v.attinfos[0], 'compressed')
                                return v
                            })
                        }
                    } catch (error) {
                    }
                })
            })
        },
        onClick(index) {
            let item = this.list[index];
            console.log("点击广告图", index, item)
            if (item.hyperlink) {
                uni.navigateTo({
                    url: item.hyperlink,
                    fail: (fail) => {
                        console.log("跳转失败原因", fail)
                        viewImage(item.attinfos[0].url)
                    },
                })
            } else {
                viewImage(item.attinfos[0].url)
            }
        }

    },
}
</script>

<style lang="scss" scoped></style>