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 v-if="!sightseer" class="image" src="/static/c+selected.svg" mode="widthFix"
                @click="onClick('cloud', '工作台')" />
        </swiper-item>

        <swiper-item v-if="!sightseer" class="swiper-item" item-id="cloud">
            <image class="image" :src="showPageName == '工作台' ? '/static/c+unselected.svg' : '/static/c+selected.svg'"
                mode="widthFix" @click="onClick('cloud', '工作台')" />
            <block v-for="item in cloud" :key="item.name">
                <block v-if="item.name == '工作台'" />
                <view v-else class="item" @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>
            </block>
        </swiper-item>
    </swiper>
</template>

<script>
export default {
    data() {
        return {
            sightseer: true,
            current: "index",
            showPageName: "",
            indexLastPage: '',
            cloudLastPage: '',
            index: [{
                name: "首页"
            }, {
                name: "活动"
            }, {
                name: "案例"
            }, {
                name: "视频"
            }],
            cloud: [{
                name: "工作台"
            }, {
                name: "资料库"
            }, {
                name: "商学院"
            }, {
                name: "单品"
            }, {
                name: "首页"
            }],
            countDown: null,
        }
    },
    props: {
        onChange: {
            type: Function
        }
    },
    mounted() {
        this.init();
        // #ifdef !MP-WEIXIN
        this.onClick(this.$parent.$parent.swiperItemID, this.$parent.$parent.page)
        // #endif
    },
    methods: {
        init() {
            this.isInitializeLogin(render.bind(this))
            function render() {
                let sightseer = uni.getStorageSync('userMsg').usertype == 99;
                this.sightseer = sightseer;
                console.log('是否游客', sightseer)
                if (sightseer) this.index = this.index.concat({ name: "我的" })
            }
        },
        onClick(current, name, update = false, params = null) {
            if (name == '首页') current = 'index';
            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, params
            })
            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;
    z-index: 3;

    .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>