YXGJ/pages/index/modules/bottomSuspensionFrame.vue

<template>
    <swiper class="box" :current-item-id="current" circular vertical disable-touch>
        <swiper-item class="swiper-item" item-id="index">
            <view class="item" v-for="item in index" :key="item.name"
                @click="item.name == showPageName ? update() : onClick('index', item.name)">
                <u-loading-icon v-if="item.loading" mode="circle" />
                <text v-else :style="{ fontWeight: item.name == showPageName ? 'bold' : 'normal' }">
                    {{ item.name }}
                </text>
            </view>
            <image class="image" src="/static/c+selected.svg" mode="widthFix"
                @click="onClick('cloud', cloudLastPage || '资料库')" />
        </swiper-item>
        <swiper-item class="swiper-item" item-id="cloud">
            <image class="image" src="/static/c+unselected.svg" mode="widthFix"
                @click="onClick('index', indexLastPage || '首页')" />
            <view class="item" v-for="item in cloud" :key="item.name"
                @click="item.name == showPageName ? update() : onClick('cloud', item.name)">
                <u-loading-icon v-if="item.loading" mode="circle" />
                <text v-else :style="{ fontWeight: item.name == showPageName ? 'bold' : 'normal' }">
                    {{ item.name }}
                </text>
            </view>
        </swiper-item>
    </swiper>
</template>

<script>
export default {
    data() {
        return {
            current: "index",
            showPageName: "",
            indexLastPage: '',
            cloudLastPage: '',
            index: [{
                name: "首页"
            }, {
                name: "活动"
            }, {
                name: "案例"
            }, {
                name: "视频"
            }],
            cloud: [{
                name: "资料库"
            }, {
                name: "商学院"
            }, {
                name: "单品"
            }, {
                name: "首页"
            }],
            countDown: null,
        }
    },
    props: {
        onChange: {
            type: Function
        }
    },
    mounted() {
        // #ifdef !MP-WEIXIN
        this.onClick(this.$parent.$parent.swiperItemID, this.$parent.$parent.page)
        // #endif
    },
    methods: {
        onClick(current, name, update = false) {
            const item = this[current].find(v => v.name == name),
                that = this;
            if (typeof item.loading != 'boolean' || update) {
                item.loading = true;
                update = true;
            }
            this[current + 'LastPage'] = name;
            this.current = current;
            this.showPageName = name;
            this.$emit("onChange", {
                current, name, update, callBack
            })
            function callBack(loading = false) {
                item.loading = loading;
                that[current] = JSON.parse(JSON.stringify(that[current]));
            }
        },
        update() {
            if (this.countDown) {
                this.onClick(this.current, this.showPageName, true)
            } else {
                this.countDown = setTimeout(() => {
                    clearTimeout(this.countDown)
                    this.countDown = null;
                }, 300)
            }
        },
    },
}
</script>

<style lang="scss">
.box {
    position: fixed;
    width: 355px;
    height: 50px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 50px;
    left: 10px;
    bottom: 20px;

    .swiper-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 355px;
        height: 50px;
        padding: 0 30px;
        box-sizing: border-box;

        .item {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 16px;
            color: #666666;
            padding: 10px;
        }

        .image {
            width: 40px;
            padding: 4px;
        }
    }

}
</style>