integral-shop/single_uniapp22miao/pages/integral/rules.vue

<template>
  <view class="rules-page">
    <scroll-view class="content" scroll-y>
      <view class="rules-content" v-html="rulesContent"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rulesContent: ''
    }
  },

  onLoad() {
    this.loadRules()
  },

  methods: {
    async loadRules() {
      uni.showLoading({ title: '加载中...' })

      try {
        // TODO: 调用积分规则API
        // const res = await this.$api.integral.getPointsRules()

        // 模拟数据 - 使用HTML格式
        const res = {
          code: 0,
          data: {
            content: this.getDefaultRules()
          }
        }

        if (res.code === 0) {
          this.rulesContent = res.data.content
        }
      } catch (error) {
        console.error('加载积分规则失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
        // 显示默认规则
        this.rulesContent = this.getDefaultRules()
      } finally {
        uni.hideLoading()
      }
    },

    getDefaultRules() {
      return `
        <div class="rules-section">
          <h2 class="section-title">如何获得积分</h2>
          
          <div class="rule-item">
            <h3 class="item-title">📅 每日签到</h3>
            <ul class="item-list">
              <li>连续签到第1天：10积分</li>
              <li>连续签到第2天：20积分</li>
              <li>连续签到第3天：30积分</li>
              <li>连续签到第4天：40积分</li>
              <li>连续签到第5天：50积分</li>
              <li>连续签到第6天：60积分</li>
              <li>连续签到第7天：100积分</li>
            </ul>
            <p class="item-note">注：中断签到后重新开始计算</p>
          </div>

          <div class="rule-item">
            <h3 class="item-title">🛍️ 购物返积分</h3>
            <ul class="item-list">
              <li>消费1元返1积分</li>
              <li>单笔订单最高返500积分</li>
              <li>订单完成后自动到账</li>
              <li>退货退款将扣除对应积分</li>
            </ul>
          </div>

          <div class="rule-item">
            <h3 class="item-title">👥 邀请好友</h3>
            <ul class="item-list">
              <li>成功邀请1位好友注册：50积分</li>
              <li>好友首次下单：额外100积分</li>
              <li>无邀请上限，多邀多得</li>
            </ul>
          </div>

          <div class="rule-item">
            <h3 class="item-title">📤 分享商品</h3>
            <ul class="item-list">
              <li>分享商品到朋友圈：10积分/次</li>
              <li>每日最多获得30积分</li>
            </ul>
          </div>

          <div class="rule-item">
            <h3 class="item-title">🎁 新人奖励</h3>
            <ul class="item-list">
              <li>注册成功：500积分</li>
              <li>首次下单：额外500积分</li>
            </ul>
          </div>
        </div>

        <div class="rules-section">
          <h2 class="section-title">积分使用规则</h2>
          
          <div class="rule-item">
            <ul class="item-list">
              <li>100积分 = 1元</li>
              <li>积分不可提现</li>
              <li>积分有效期：2年</li>
              <li>积分可用于兑换积分商城商品</li>
              <li>兑换订单取消后积分自动退回</li>
              <li>部分商品可能有限购要求</li>
            </ul>
          </div>
        </div>

        <div class="rules-section">
          <h2 class="section-title">注意事项</h2>
          
          <div class="rule-item">
            <ul class="item-list warning">
              <li>严禁通过非法手段刷积分，一经发现将清零并封号</li>
              <li>积分不可转赠他人</li>
              <li>积分过期后自动清零，不予找回</li>
              <li>平台有权根据运营需要调整积分规则</li>
              <li>如有疑问请联系客服</li>
            </ul>
          </div>
        </div>

        <div class="rules-footer">
          <p>本规则最终解释权归平台所有</p>
          <p>更新时间：2025年12月17日</p>
        </div>
      `
    }
  }
}
</script>

<style lang="scss" scoped>
.rules-page {
  min-height: 100vh;
  background-color: #F5F5F5;
}

.content {
  height: 100vh;
}

.rules-content {
  padding: 30rpx;
  
  ::v-deep .rules-section {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }

  ::v-deep .section-title {
    font-size: 36rpx;
    color: #333333;
    font-weight: bold;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #F0F0F0;
  }

  ::v-deep .rule-item {
    margin-bottom: 40rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }

  ::v-deep .item-title {
    font-size: 30rpx;
    color: #333333;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  ::v-deep .item-list {
    padding-left: 40rpx;
    
    li {
      font-size: 28rpx;
      color: #666666;
      line-height: 2;
      list-style: disc;
      margin-bottom: 8rpx;
    }
    
    &.warning li {
      color: #FF4D4F;
    }
  }

  ::v-deep .item-note {
    font-size: 24rpx;
    color: #999999;
    margin-top: 16rpx;
    padding: 16rpx;
    background-color: #FFF9E6;
    border-radius: 8rpx;
  }

  ::v-deep .rules-footer {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
    text-align: center;
    
    p {
      font-size: 24rpx;
      color: #999999;
      line-height: 1.8;
    }
  }
}
</style>