feat : 视频提示遮罩的显示.复用之前判断逻辑

pages/index/components/AIMatch.vue

@@ -1,12 +1,6 @@
 <template>
   <view class="container">
-    <!-- 用于承载 PIXI 的 Canvas -->
-    <!-- #ifdef H5 -->
     <view id="matchCanvas" class="match-canvas" @click="handleCanvasClick"></view>
-    <!-- #endif -->
-    <!-- #ifndef H5 -->
-    <canvas type="webgl" id="matchCanvas" canvas-id="matchCanvas" class="match-canvas" />
-    <!-- #endif -->
   </view>
 </template>
 
@@ -390,6 +384,6 @@ onUnmounted(() => {
 }
 .match-canvas {
   width: 100%;
-  height: 350rpx; /* 可根据需求调整高度 */
+  height: 400rpx; /* 可根据需求调整高度 */
 }
 </style>

pages/index/components/index-refactor.vue

@@ -74,7 +74,7 @@
       </view>
     </view>
     <view class="list-card">
-      <image v-if="showVideoTip" @click="showVideoTip = false" class="video-mask" src="@/static/icon/video-mask.png" />
+      <image v-if="maskFirstEntry" @click="closeVideoTip" class="video-mask" src="@/static/icon/video-mask.png" />
       <view class="nav-filter" :class="{ stuck: isSticky }">
         <view class="filter-top" @touchmove.stop.prevent>
           <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
@@ -200,12 +200,12 @@
 
     <!-- 筛选 -->
     <select-filter ref="selectFilterModel"></select-filter>
-    <!-- <view class="maskFristEntry" v-if="maskFristEntry">
+    <!-- <view class="maskFirstEntry" v-if="maskFirstEntry">
             <view class="entry-content">
                 <text class="text1">左滑查看视频</text>
                 <text class="text2">左滑查看视频</text>
                 <view class="goExperience">去体验</view>
-                <view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
+                <view class="maskFirstEntry-Close" @click="closefirstEntry">1</view>
             </view>
         </view> -->
   </scroll-view>
@@ -233,7 +233,8 @@ import AIMatch from "./AIMatch.vue";
 
 const { proxy } = getCurrentInstance();
 
-const showVideoTip = ref(true);
+const maskFirstEntry = ref(true);
+
 const isSticky = ref(false);
 const showScrollBottom = ref(false);
 const scrollTop = ref(0);
@@ -244,7 +245,7 @@ const waterfallsFlowRef = ref(null);
 const loadmoreRef = ref(null);
 const conditionSearch = ref({});
 const waterfallcolumn = ref(2);
-const maskFristEntry = ref(true);
+
 const state = reactive({
   tabIndex: "all",
 });
@@ -273,6 +274,11 @@ const occupations = ["律师", "工程师", "医生", "教师", "设计师", "
 
 const colors = ["#0069FE", "#FF9400", "#FF6969", "#21EA85", "#87E2EC"];
 
+onMounted(() => {
+  let firstEntry = uni.getStorageSync("firstEntry") === false ? false : true; // 默认未读
+  maskFirstEntry.value = firstEntry;
+});
+
 const checkStickyStatus = (e) => {
   scrollTop.value = e.detail.scrollTop;
   nextTick(() => {
@@ -292,6 +298,11 @@ const checkStickyStatus = (e) => {
   });
 };
 
+function closeVideoTip() {
+  uni.setStorageSync("firstEntry", false);
+  maskFirstEntry.value = false;
+}
+
 const handleTagClick = (tagInfo) => {
   console.log("点击的标签信息:", tagInfo);
 };
@@ -574,7 +585,7 @@ defineExpose({ loadData });
 </script>
 
 <style lang="stylus" scoped>
-// .maskFristEntry
+// .maskFirstEntry
 //     position: fixed;
 //     // right: 20rpx;
 //     // bottom: calc(50% - 200rpx);
@@ -589,7 +600,7 @@ defineExpose({ loadData });
 //         top: 40%
 //         transform: translate(-50%, -50%)
 //         flex-direction: column
-//         background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
+//         background: url('@/static/imgs/firstEntry.png') 0 0 no-repeat;
 //         background-size: 100% 100%;
 //         width: 480rpx
 //         height: 584rpx
@@ -612,7 +623,7 @@ defineExpose({ loadData });
 //         .indicateArrow
 //             height: 76rpx
 //             width: 68rpx
-//         .indicatefristEntry
+//         .indicatefirstEntry
 //             width: 244rpx
 //             height: 244rpx
 //         .goExperience
@@ -626,7 +637,7 @@ defineExpose({ loadData });
 //             color: #FFFFFF;
 //             text-align: center;
 //             line-height: 60rpx
-//         .maskFristEntry-Close
+//         .maskFirstEntry-Close
 //             position: absolute;
 //             left: calc(50% - 10rpx);
 //             bottom: -130rpx
@@ -634,7 +645,7 @@ defineExpose({ loadData });
 //             height: 42rpx
 //             background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
 //             border-radius: 50%;
-//         .maskFristEntry-Close::before
+//         .maskFirstEntry-Close::before
 //             position: absolute;
 //             left: calc( 50% - 2rpx)
 //             top: calc( 50% - 10rpx)
@@ -643,7 +654,7 @@ defineExpose({ loadData });
 //             background: #FFFFFF
 //             width: 4rpx
 //             height: 20rpx
-//         .maskFristEntry-Close::after
+//         .maskFirstEntry-Close::after
 //             position: absolute;
 //             left: calc( 50% - 2rpx)
 //             top: calc( 50% - 10rpx)