wydy/wy-mobile/pages/vote-notice - 副本.vue

<template>
  <view class="vote-notice-page">
  

    <!-- 主体内容区 -->
    <view class="notice-content">
      <view class="notice-title">业主投票须知</view>
      
      <view class="notice-list">
        <view class="notice-item">
          <view class="item-num">1.</view>
          <view class="item-text">1户1票，多投无效。</view>
        </view>

        <view class="notice-item">
          <view class="item-num">2.</view>
          <view class="item-text">需持证业主身份证后四位提交投票（用于身份核验，确保投票有效性）。</view>
        </view>

        <view class="notice-item">
          <view class="item-num">3.</view>
          <view class="item-text">征求意见共有4个选项（续签、公开招标、弃权、其他），<span class="text-warning">只能选择一个选项进行投票</span>，多选视为无效票。</view>
        </view>

        <view class="notice-item">
          <view class="item-num">4.</view>
          <view class="item-text">
            根据《中华人民共和国民法典》相关规定：
            <view class="law-rule">
				<view class="result-desc">
					1. 依据《中华人民共和国民法典》第二百七十八条（业主共同决定事项）、第九百四十七条第一款（物业服务合同终止与续签）规定；<br>
				</view>
				<view class="result-desc">
					 2. 表决生效条件：需经专有部分面积占比三分之二以上的业主且人数占比三分之二以上的业主参与表决；<br>
				</view>
              <view class="result-desc">
				   3. 结果判定：<br>
                - 若经参与专有部分面积过半数的业主且参与表决人数过半数的业主同意，则表明广大业主同意与原物业公司续签合同；<br>
                - 反之，由业主委员会（物业管理委员会）牵头公开招标确定优质物业公司。
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部确认按钮（带倒计时） -->
      <view 
        class="confirm-btn" 
        @click="handleConfirm"
        :class="{ disabled: !isBtnActive }"
        :disabled="!isBtnActive"
      >
        {{ isBtnActive ? '已阅读并理解投票须知' : `请阅读须知（${countDown}秒）` }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'VoteNotice',
  data() {
    return {
      countDown: 3, // 倒计时秒数
      isBtnActive: false, // 按钮是否可点击
      timer: null // 定时器对象
    }
  },
  onLoad() {
    // 页面加载后启动倒计时
    this.startCountDown();
  },
  onUnload() {
    // 页面卸载时清除定时器，防止内存泄漏
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 启动倒计时
    startCountDown() {
      // 初始状态按钮不可点击
      this.isBtnActive = false;
      
      // 启动定时器
      this.timer = setInterval(() => {
        this.countDown--;
        
        // 倒计时结束
        if (this.countDown <= 0) {
          clearInterval(this.timer);
          this.isBtnActive = true; // 激活按钮
          this.countDown = 0; // 确保显示为0
        }
      }, 1000); // 每秒执行一次
    },

    // 返回上一页
    handleBack() {
      uni.navigateBack({ delta: 1 });
    },

    // 确认已阅读（仅在按钮激活时可触发）
    handleConfirm() {
      if (!this.isBtnActive) return;
      
      // 存储已阅读状态
      uni.setStorageSync('hasReadVoteNotice', 'true');
      
      // 跳转至投票页面（替换为实际路径）
      uni.reLaunch({
        url: '/pages/vote'
      });
    }
  }
}
</script>

<style scoped>
/* 基础样式与之前保持一致，新增以下样式 */
.confirm-btn {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #2d8cf0;
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
  /* 禁止选中文字 */
  user-select: none;
  -webkit-user-select: none;
}

/* 按钮禁用状态样式 */
.confirm-btn.disabled {
  background-color: #c0c4cc;
  color: #fff;
  cursor: not-allowed;
}

/* 其他原有样式保持不变 */
.vote-notice-page {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
/*  padding-bottom: 30px; */
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding: 0 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.nav-back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.nav-empty {
  width: 40px;
  height: 40px;
}

.notice-content {
  width: 100%;
  margin: auto;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 15px;

}

.notice-title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.notice-list {
  margin-bottom: 30px;
}
.notice-item {
  display: flex;
  margin-bottom: 10px;
  line-height: 1.6;
  align-items: baseline;
}
.item-num {
  width: 10px;
  height: 10px;
/*  border-radius: 50%;
  background-color: #2d8cf0; */
  color: #333;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}
.item-text {
  font-size: 15px;
  color: #444;
  flex: 1;
}
.text-warning {
  color: #f56c6c;
  font-weight: 500;
}
.law-rule {
  margin-top: 8px;
  padding-left: 15px;
  font-size: 14px;
  color: #555;
  border-left: 2px solid #eee;
}
.result-desc {
  margin-top: 5px;
  /* padding-left: 15px; */
}
</style>