@hlw-uni/mp-vue 2.3.6 → 2.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "2.3.6",
+    "version": "2.3.7",
     "description": "hlw-uni工具集",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

package/src/components/hlw-page/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <view :class="[fontSizeClass, fontFamilyClass]">
+    <view :class="[fontSizeClass, fontFamilyClass]" :style="pageStyle">
         <hlw-nav-bar v-if="props.isNav" 
                      :is-back="props.isBack" 
                      :title="title" 
@@ -41,7 +41,7 @@
  * ```
  */
 import { useTheme } from "@/core";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 const { fontSizeClass, fontFamilyClass } = useTheme();
 
 const props = defineProps({
@@ -84,6 +84,27 @@ const props = defineProps({
 });
 
 const title = ref(props.title);
+
+const navbarHeight = computed(() => {
+    if (!props.isNav) return 0;
+    const statusBarHeight = uni.getSystemInfoSync()?.statusBarHeight || 0;
+    let headerHeight = 44;
+    try {
+        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+        if (menuButtonInfo && typeof menuButtonInfo.bottom === "number" && menuButtonInfo.bottom > 0) {
+            headerHeight = menuButtonInfo.bottom - statusBarHeight + 6;
+        }
+    } catch (e) {
+        console.warn(e);
+    }
+    return statusBarHeight + headerHeight;
+});
+
+const pageStyle = computed(() => {
+    return {
+        "--navbar-height": `${navbarHeight.value}px`,
+    };
+});
 </script>
 
 <style lang="scss">

package/src/components/hlw-reward-ad/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="hlw-reward-ad" @tap="open">
+    <view v-if="unitId" class="hlw-reward-ad" @tap="open">
         <slot />
     </view>
 </template>
@@ -19,7 +19,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "onHandle", res: HlwRewardAdResult): void;
+    (e: "close", res: HlwRewardAdResult): void;
 }>();
 
 // 点击锁定状态，防止连续多次点击重复触发广告
@@ -28,6 +28,7 @@ const isClicked = ref(false);
 async function playRewardAdFlow(): Promise<void> {
     // 弹出全局模态 Loading 状态
     let hidden = false;
+    // @ts-ignore
     hlw.$msg.showLoading("正在拉起广告");
 
     // 设置 8 秒防超时定时器，如果 8 秒后还没有关闭加载提示，则强制关闭
@@ -39,6 +40,7 @@ async function playRewardAdFlow(): Promise<void> {
         if (hidden) return;
         hidden = true;
         clearTimeout(timer);
+        // @ts-ignore
         hlw.$msg.hideLoading();
     }
 
@@ -56,12 +58,12 @@ async function playRewardAdFlow(): Promise<void> {
         destroyRewardAd(props.unitId);
 
         if (res.success && res.isEnded) {
-            emit("onHandle", {
+            emit("close", {
                 success: true,
                 isEnded: true,
             });
         } else if (res.err) {
-            emit("onHandle", {
+            emit("close", {
                 success: false,
                 isEnded: false,
                 loadFailed: true,
@@ -74,7 +76,7 @@ async function playRewardAdFlow(): Promise<void> {
                 // 如果用户点击继续观看，递归执行广告流程
                 await playRewardAdFlow();
             } else {
-                emit("onHandle", {
+                emit("close", {
                     success: false,
                     isEnded: false,
                 });
@@ -84,7 +86,7 @@ async function playRewardAdFlow(): Promise<void> {
         hide();
         destroyRewardAd(props.unitId);
         console.error("[HlwRewardAd] Failed to show reward ad:", e);
-        emit("onHandle", {
+        emit("close", {
             success: false,
             isEnded: false,
             loadFailed: true,
@@ -114,7 +116,7 @@ async function open() {
  * adRef.value?.open();
  */
 defineExpose({
-    open
+    open,
 });
 
 onUnmounted(() => {

package/src/components/hlw-video/index.vue

@@ -0,0 +1,46 @@
+<template>
+    <video
+        :src="props.src"
+        class="hlw-video-element"
+        autoplay
+        loop
+        muted
+        :controls="false"
+        :show-play-btn="false"
+        :enable-play-gesture="true"
+        object-fit="contain"
+        :style="{ height: videoHeight }"
+        @loadedmetadata="onVideoLoadedMetadata"
+    />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({ name: "HlwVideo" });
+
+interface Props {
+    /** 视频源 URL */
+    src: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    src: "",
+});
+
+const videoHeight = ref("450rpx");
+
+function onVideoLoadedMetadata(e: any) {
+    const { width, height } = e.detail || {};
+    if (width && height) {
+        videoHeight.value = `${(height / width) * 750}rpx`;
+    }
+}
+</script>
+
+<style scoped>
+.hlw-video-element {
+    width: 100%;
+    display: block;
+}
+</style>