flyx/components/rule-pop/rule-pop.vue
2025-02-26 13:43:05 +08:00

145 lines
2.5 KiB
Vue

<!--
* @Date: 2023-07-10 17:16:57
* @LastEditTime: 2024-01-29 17:21:42
* @Description: content
-->
<template>
<uni-popup ref="_rule_pop" type="center" maskBackgroundColor="rgba(0,0,0,0.9)" @change="popChange">
<view class="_rule_pop common_bg">
<view class="_rule_pop_title">{{ ruleData.title }}</view>
<scroll-view scroll-y class="_rule_pop_bd" :class="{'has-check': noticeCheck}">
<view v-html="ruleData.content"></view>
</scroll-view>
<view v-if="noticeCheck" class="check-btn" @click="todayHide = !todayHide">
<view class="icon">
<image v-if="todayHide" :src="$img1('common/check_act.png')" lazy-load></image>
<image v-else :src="$img1('common/check.png')" lazy-load></image>
</view>
今日不再提醒
</view>
<view class="close icon" @click="close">
<image :src="$img1('common/close.png')" lazy-load></image>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
props: {
noticeCheck: {
type: Boolean,
default: false
}
},
data() {
return {
ruleData: '',
todayHide: false
}
},
mounted() {
console.log(this.noticeCheck)
},
methods: {
popChange({
show
}) {
if (!show) {
if (this.todayHide) {
uni.setStorageSync('_last_notice_date', this.$c.getDateTime())
}
}
},
close() {
this.$refs._rule_pop.close()
},
open(opt) {
this.ruleData = opt
this.$refs._rule_pop.open()
},
async getRule(id, title = '') {
let res = await this.$c.getRule(id, true)
this.open({
title: title,
content: res.data
})
}
}
}
</script>
<style lang="scss">
._rule_pop {
width: 610rpx;
height: 820rpx;
box-sizing: border-box;
padding: 0 40rpx 0;
background: #3B3941;
border-radius: 30rpx;
._rule_pop_title {
padding: 40rpx 0;
text-align: center;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
font-family: YouSheBiaoTiHei;
}
._rule_pop_bd {
height: 670rpx;
font-size: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #dddddd;
&.has-check {
height: 620rpx;
}
}
.check-btn {
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0 0;
.icon {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
image {
width: 100%;
height: 100%;
}
}
font-size: 24rpx;
color: #888;
}
.close {
width: 48rpx;
height: 48rpx;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 150%);
}
}
</style>