book-hi/App.vue

<script>
export default {
    globalData: {
        // 胶囊距上距离
        menuTop: 0,
        // 导航栏高度
        navBarHeight: 0,
        // 胶囊距右方间距（方保持左、右间距一致）
        menuRight: 0,
        // 胶囊距底部间距（保持底部间距一致）
        menuBotton: 0,
        // 胶囊高度（自定义内容可与胶囊高度保证一致）
        menuHeight: 0,
        // 状态栏高度
        statusBarHeight: 0,
        // 安全距离
        safeAreaHeight: 0,
        // 胶囊宽度
        menuWidth: 0,
        // 窗口宽度
        windowWidth: 0,
        // 窗口宽度高度
        windowHeight: 0,
        // 常规子页面可操作区域高度
        pageContentHeight: 0,
    },
    onLaunch(options) {
        const that = this;
        // 获取系统信息
        const systemInfo = uni.getSystemInfoSync();
        // 胶囊按钮位置信息
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        console.log(menuButtonInfo);
        // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
        that.globalData.menuTop = menuButtonInfo.top - systemInfo.statusBarHeight;
        that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
        that.globalData.menuWidth = menuButtonInfo.width;
        that.globalData.navBarHeight =
            (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
        that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
        that.globalData.menuHeight = menuButtonInfo.height;
        that.globalData.statusBarHeight = systemInfo.statusBarHeight;
        that.globalData.safeAreaHeight = systemInfo.safeAreaInsets.bottom;
        that.globalData.windowWidth = systemInfo.windowWidth;
        that.globalData.windowHeight = systemInfo.windowHeight;
        that.globalData.pageContentHeight =
            systemInfo.windowHeight -
            (that.globalData.navBarHeight + that.globalData.menuTop + that.globalData.menuBotton);

        const inviteCode = options.inviteCode || "";
        this.slientLogin(inviteCode);
    },
    methods: {
        slientLogin(inviteCode) {
            uni.login({
                success(res) {
                    uni.$u.http
                        .post("/user/wxLogin", {
                            code: res.code,
                            inviteCode,
                        })
                        .then((response) => {
                            if (response.code == 200) {
                                uni.setStorageSync("token", response.data.token);
                            }
                        });
                },
                fail: (err) => {
                    console.log(err, "wx.login登录失败");
                },
            });
        },
    },
};
</script>

<style lang="scss">
// ===
// === 注意：此处导入的css，会作用于全部.vue文件，请适量导入
// ===
body {
    font-family: PingFang-SC-Regular, PingFang-SC;
}

page {
    background-color: $app-theme-bg-gray-deep-color;
}

@import "uview-ui/index.scss";
@import "./static/css/common.scss";

/* 解决小程序和app滚动条的问题 */
/* #ifdef MP-WEIXIN || APP-PLUS */
::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
}

/* #endif */

/* 解决H5 的问题 */
/* #ifdef H5 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
}

/* #endif */

.shu-elip-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shu-elip-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

// 导出 scss 变量用于在 script 下使用
.price_color {
    color: $app-theme-text-money-color;
}

.color_blue {
    color: $app-theme-blue;
}

.btnGroup {
    display: flex;
    align-items: center;

    .btn {
        margin: 0 10rpx;
    }
}

.mallbtn {
    min-width: 200rpx;
    line-height: 66rpx;
    padding: 0 20rpx;
    border-radius: 36rpx;
    color: #ffffff;
    margin-right: 20rpx;
    text-align: center;
    flex: 1;
    padding: 0 30rpx;
}

.soldOutBtn {
    @extend .mallbtn;
    background-color: $app-theme-nobuy-bg-color;
}

.joinCartBtn {
    @extend .mallbtn;
    background-color: $app-theme-joincart-bg-color;
}

.buyBtn {
    @extend .mallbtn;
    background-color: $app-theme-buybtn-bg-color;
}
</style>