feat(noticePop): 首页弹窗逻辑变更

components/noticePopup.vue

@@ -19,7 +19,6 @@
       <u-icon name="close"></u-icon>
     </div>
     <div class="img-auto" v-html="content.content"></div>
-    
   </u-popup>
 </template>
 
@@ -57,8 +56,7 @@ export default {
         })
         .then(res => {
           if (res.code == '200') {
-            let list = JSON.parse(localStorage.getItem('menuList'))
+            const arr = res.data[0]?.publishLocation.split(',') || []
-            let arr = res.data[0]?.publishLocation.split(',') || []
             arr.forEach(items => {
               if (items == this.publishLocationIndex) {
                 this.noticeFlag = true

pages/index/index.vue

@@ -147,20 +147,17 @@
       <cl-tabbar :current="0"></cl-tabbar>
       <div>
         <!-- 公告弹窗 -->
-        <notice-popup
+        <!-- <notice-popup
-          @getTree="getTree"
           :userInfo="userInfo"
           ref="child"
           :publishLocationIndex="10"
-        ></notice-popup>
+        ></notice-popup> -->
-        <!-- 植树弹窗
+
-        <getTree ref="tree"></getTree>
-         -->
         <!-- 站内信弹窗 -->
-        <znNewsPopup
+        <!-- <znNewsPopup
           ref="child2"
           @childMethodTrigger="callChildMethod"
-        ></znNewsPopup>
+        ></znNewsPopup> -->
         <!-- 直推排行弹窗
         <directrank-popup
           @callznMethodTrigger="callznMethod"
@@ -179,6 +176,56 @@
           @confirm="toDel"
           :content="promptMsg"
         ></u-modal>
+
+        <!-- New Notice Popup Modal -->
+        <u-modal
+          :show="showNoticePopup"
+          title="平台公告"
+          :showConfirmButton="false"
+          :showCancelButton="false"
+          :closeOnClickOverlay="canCloseNoticePopup"
+          @close="closeNoticePopup"
+          width="700rpx"
+        >
+          <view class="notice-popup-content-wrapper">
+            <swiper
+              v-if="noticeList.length > 0"
+              class="notice-popup-swiper"
+              :indicator-dots="noticeList.length > 1"
+              indicator-color="rgba(0, 0, 0, .2)"
+              indicator-active-color="#007aff"
+              autoplay
+              circular
+              interval="5000"
+              duration="500"
+            >
+              <swiper-item
+                v-for="(noticeItem, noticeIndex) in noticeList"
+                :key="noticeIndex"
+                class="notice-popup-swiper-item"
+              >
+                <view class="notice-popup-title">{{ noticeItem.title }}</view>
+                <scroll-view scroll-y class="notice-popup-scroll-content">
+                  <rich-text :nodes="noticeItem.content"></rich-text>
+                </scroll-view>
+              </swiper-item>
+            </swiper>
+            <view class="notice-popup-footer">
+              <u-button
+                @click="closeNoticePopup"
+                :disabled="!canCloseNoticePopup"
+                type="primary"
+              >
+                {{
+                  canCloseNoticePopup
+                    ? '关闭'
+                    : `请阅读 (${noticePopupCountdown}s)`
+                }}
+              </u-button>
+            </view>
+          </view>
+        </u-modal>
+        <!-- End of New Notice Popup Modal -->
       </div>
     </view>
   </view>
@@ -231,6 +278,11 @@ export default {
       recommendSpecialAreaList: [],
       banners: [],
       noticeList: [],
+      // Popup related data
+      showNoticePopup: false,
+      noticePopupCountdown: 5,
+      canCloseNoticePopup: false,
+      // End popup related data
       recommendGoodsList: [],
       goodsList: [],
       displayedGoodsList: [],
@@ -466,6 +518,16 @@ export default {
     getNoticeList() {
       ban.getNoticeList({ functionType: 1 }).then(res => {
         this.noticeList = res.rows || []
+        // Logic for showing notice popup once per day
+        if (this.noticeList.length > 0) {
+          const today = new Date().toDateString()
+          const lastShownDate = uni.getStorageSync('noticePopupLastShownDate')
+          if (lastShownDate !== today) {
+            this.showNoticePopup = true
+            this.startNoticePopupTimer()
+            uni.setStorageSync('noticePopupLastShownDate', today)
+          }
+        }
       })
     },
     goNotice(item) {
@@ -714,6 +776,23 @@ export default {
         url: '/pages/index/specialArea/index',
       })
     },
+    // Methods for Notice Popup
+    startNoticePopupTimer() {
+      this.noticePopupCountdown = 5 // Reset countdown
+      this.canCloseNoticePopup = false
+      const timerInterval = setInterval(() => {
+        if (this.noticePopupCountdown > 0) {
+          this.noticePopupCountdown--
+        } else {
+          this.canCloseNoticePopup = true
+          clearInterval(timerInterval)
+        }
+      }, 1000)
+    },
+    closeNoticePopup() {
+      this.showNoticePopup = false
+    },
+    // End Methods for Notice Popup
   },
 }
 </script>
@@ -1626,4 +1705,79 @@ page {
      或者调整recommend-item的padding/margin。
   */
 }
+
+/* New Notice Popup Styles */
+.notice-popup-content-wrapper {
+  padding: 20rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  // max-height: 80vh; /* Ensure popup doesn't get too tall */
+}
+
+.notice-popup-swiper {
+  width: 100%;
+  height: 65vh; /* Adjust height as needed */
+  margin-bottom: 20rpx;
+}
+
+.notice-popup-swiper-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start; /* Align content to the top */
+  box-sizing: border-box;
+  padding: 0 10rpx;
+}
+
+.notice-popup-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+  text-align: center;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.notice-popup-scroll-content {
+  width: 100%;
+  height: calc(65vh - 80rpx); /* Adjust based on title height and padding */
+  box-sizing: border-box;
+  color: #555;
+  font-size: 28rpx;
+  line-height: 1.6;
+}
+
+.notice-popup-footer {
+  margin-top: 20rpx;
+  text-align: center;
+  width: 100%;
+}
+
+.close-notice-button {
+  background-color: #cccccc; /* Disabled color */
+  color: #666666;
+  padding: 18rpx 40rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
+  border: none;
+  width: 80%;
+  transition: background-color 0.3s ease;
+}
+
+.close-notice-button.button-enabled {
+  background-color: #de3932; /* Enabled color (theme red) */
+  color: white;
+  cursor: pointer;
+}
+
+.close-notice-button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+/* End of New Notice Popup Styles */
 </style>