feat(noticePop): 首页弹窗逻辑变更
This commit is contained in:
woody
parent
cd0115a233
commit
b17bd7aa84
|
|
@ -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'))
|
||||
let arr = res.data[0]?.publishLocation.split(',') || []
|
||||
const arr = res.data[0]?.publishLocation.split(',') || []
|
||||
arr.forEach(items => {
|
||||
if (items == this.publishLocationIndex) {
|
||||
this.noticeFlag = true
|
||||
|
|
|
|||
|
|
@ -147,20 +147,17 @@
|
|||
<cl-tabbar :current="0"></cl-tabbar>
|
||||
<div>
|
||||
<!-- 公告弹窗 -->
|
||||
<notice-popup
|
||||
@getTree="getTree"
|
||||
<!-- <notice-popup
|
||||
:userInfo="userInfo"
|
||||
ref="child"
|
||||
:publishLocationIndex="10"
|
||||
></notice-popup>
|
||||
<!-- 植树弹窗
|
||||
<getTree ref="tree"></getTree>
|
||||
-->
|
||||
></notice-popup> -->
|
||||
|
||||
<!-- 站内信弹窗 -->
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue