ruo-shan-cloud-pharmacy/miniprogram/components/navigation-bar/navigation-bar.ts

interface NavigationBarComponent {
    data: {
        displayStyle: string;
        ios?: boolean;
        innerPaddingRight?: string;
        leftWidth?: string;
        safeAreaTop?: string;
        delta?: any;
        animated?: any;
    };
    setData: (
        data: Partial<NavigationBarComponent["data"]>,
        callback?: () => void
    ) => void;
    triggerEvent: <DetailType = any>(
        name: string,
        detail?: DetailType,
        options?: WechatMiniprogram.Component.TriggerEventOption
    ) => void;
    _showChange: (show: boolean) => void;
    back: () => void;
    handleBack: () => void;
}

Component({
    options: {
        multipleSlots: true, // 在组件定义时的选项中启用多slot支持
    },
    /**
     * 组件的属性列表
     */
    properties: {
        extClass: {
            type: String,
            value: "",
        },
        title: {
            type: String,
            value: "",
        },
        background: {
            type: String,
            value: "",
        },
        color: {
            type: String,
            value: "",
        },
        back: {
            type: Boolean,
            value: true,
        },
        loading: {
            type: Boolean,
            value: false,
        },
        homeButton: {
            type: Boolean,
            value: false,
        },
        animated: {
            // 显示隐藏的时候opacity动画效果
            type: Boolean,
            value: true,
        },
        show: {
            // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
            type: Boolean,
            value: true,
            observer: "_showChange",
        },
        // back为true的时候，返回的页面深度
        delta: {
            type: Number,
            value: 1,
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        displayStyle: "",
    },
    lifetimes: {
        attached(this: NavigationBarComponent) {
            const rect = wx.getMenuButtonBoundingClientRect();
            wx.getSystemInfo({
                success: (res) => {
                    const isAndroid = res.platform === "android";
                    const isDevtools = res.platform === "devtools";
                    this.setData({
                        ios: !isAndroid,
                        innerPaddingRight: `padding-right: ${res.windowWidth - rect.left
                            }px`,
                        leftWidth: `width: ${res.windowWidth - rect.left}px`,
                        safeAreaTop:
                            isDevtools || isAndroid
                                ? `height: calc(var(--height) + ${res.safeArea.top
                                }px); padding-top: ${res.safeArea.top || 24}px`
                                : ``,
                    });
                },
            });
        },
    },
    /**
     * 组件的方法列表
     */
    methods: {
        _showChange(this: NavigationBarComponent, show: boolean) {
            const animated = this.data.animated;
            let displayStyle = "";
            if (animated) {
                displayStyle = `opacity: ${show ? "1" : "0"};transition:opacity 0.5s;`;
            } else {
                displayStyle = `display: ${show ? "" : "none"}`;
            }
            this.setData({
                displayStyle,
            });
        },
        back(this: NavigationBarComponent) {
            this.triggerEvent("handleBack", { delta: 1 });
            const data = this.data;
            const pages = getCurrentPages();

             //通过链接进入，或只有一个栈时，点击返回是没有用的，直接返回首页
            if (pages.length <= 1) {
                wx.switchTab({ url: "/pages/tab-bar/medicine-box/index" });
                return;
            }

            if (data.delta) {
                wx.navigateBack({
                    delta: data.delta,
                });
            } else {
                wx.switchTab({ url: "/pages/tab-bar/medicine-box/index" });
            }
            this.triggerEvent("back", { delta: data.delta }, {});
        },
    },
});