consumer-app/pages/profileSub/pointsMemberRules.vue

<template>
  <view class="rules-page">
    <view class="header-fixed-wrapper" :style="{ height: headerHeight + 'px' }">
      <NavHeader title="积分会员制度" />
    </view>
    <view class="main-wrap" :style="{ paddingTop: headerHeight + 'px' }">
    <scroll-view class="content-scroll" scroll-y="true">
      <!-- 一、会员等级与积分门槛 -->
      <view class="section">
        <view class="section-title">一、会员等级与积分门槛</view>

        <view class="table">
          <view class="tr th">
            <view class="td col-1">等级</view>
            <view class="td col-2">所需积分</view>
            <view class="td col-3">等级名称</view>
          </view>
          <view class="tr" v-for="row in levelRows" :key="row.level">
            <view class="td col-1">{{ row.level }}</view>
            <view class="td col-2">{{ row.points }}</view>
            <view class="td col-3">{{ row.name }}</view>
          </view>
        </view>

        <view class="tips">
          <text class="tips-text">
            升级规则：会员积分达到相应门槛后，系统在24小时内升级，并享受新等级的全部权益。
          </text>
        </view>
      </view>

      <!-- 二、行为奖励 -->
      <view class="section">
        <view class="section-title">二、行为奖励</view>

        <view class="table">
          <view class="tr th">
            <view class="td col-a">行为</view>
            <view class="td col-b">奖励积分</view>
            <view class="td col-c">频率/限制</view>
          </view>
          <view class="tr" v-for="row in rewardRows" :key="row.action">
            <view class="td col-a">{{ row.action }}</view>
            <view class="td col-b">{{ row.points }}</view>
            <view class="td col-c">{{ row.limit }}</view>
          </view>
        </view>
      </view>

      <!-- 三、会员权益 -->
      <view class="section">
        <view class="section-title">三、会员权益</view>

        <view class="table">
          <view class="tr th">
            <view class="td col-lv">等级</view>
            <view class="td col-ben">享受权益</view>
          </view>
          <view class="tr" v-for="row in benefitRows" :key="row.level">
            <view class="td col-lv">{{ row.level }}</view>
            <view class="td col-ben">{{ row.benefits }}</view>
          </view>
        </view>

        <view class="bullet">
          <view class="bullet-item">• 首批次注册会员并完善个人信息前100者，送精美小礼品；</view>
          <view class="bullet-item">• 率先升级为中级会员前30名者，邀请前来公司参与活动(含精美礼品)；</view>
          <view class="bullet-item">• 率先升级为高级会员前10名者，享受xx地区一日游(车费、餐费)；</view>
        </view>
      </view>
    </scroll-view>
    </view>
  </view>
</template>

<script>
import NavHeader from "@/components/NavHeader/NavHeader.vue";

export default {
  components: { NavHeader },
  data() {
    return {
      statusBarHeight: 0,
      levelRows: [
        { level: "初级", points: "0", name: "筑巢会员" },
        { level: "中级", points: "1000", name: "安居会员" },
        { level: "高级", points: "5000", name: "共富会员" },
      ],
      rewardRows: [
        { action: "签到", points: "2分", limit: "一天一次" },
        { action: "吃饭消费", points: "3分", limit: "不限次" },
        { action: "保险修车", points: "100分", limit: "不限次" },
        { action: "完善个人信息", points: "100分", limit: "一次" },
        { action: "评价", points: "2分", limit: "一天5次" },
        { action: "完成首单", points: "30分", limit: "一次" },
        { action: "分享链接", points: "10分", limit: "一天5次" },
        { action: "推荐新用户", points: "50分", limit: "不限次" },
        { action: "参与社区发帖", points: "2分", limit: "一天5次" },
      ],
      benefitRows: [
        {
          level: "初级会员",
          benefits:
            "工会合作餐厅吃饭最低价，修车9.5折，保险(华生诚泰)9折，租房优惠权益，三家医院绿色通道。",
        },
        {
          level: "中级会员",
          benefits:
            "工会合作餐厅吃饭最低价，修车9折，保险(华盛诚泰)8折，租房优惠权益，三家医院绿色通道。",
        },
        {
          level: "高级会员",
          benefits:
            "工会合作餐厅吃饭最低价，修车8.5折，保险(华生诚泰)8折，租房优惠权益，三家医院绿色通道。",
        },
      ],
    };
  },
  computed: {
    headerHeight() {
      return this.statusBarHeight + 44;
    },
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },
};
</script>

<style lang="scss" scoped>
.rules-page {
  height: 100vh;
  background: radial-gradient(0% 0% at 0% 0%, #ffffff 0%, #e2e8f1 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header-fixed-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: radial-gradient(0% 0% at 0% 0%, #ffffff 0%, #e2e8f1 100%);
}

.main-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.content-scroll {
  flex: 1;
  height: 0;
  padding: 20rpx 24rpx 40rpx;
  box-sizing: border-box;
  background: radial-gradient(0% 0% at 0% 0%, #ffffff 0%, #e2e8f1 100%);
}

.section {
  margin-bottom: 28rpx;
}

.section-title {
  font-family: PingFang-SC, PingFang-SC;
  font-weight: 700;
  font-size: 30rpx;
  color: #111111;
  margin: 10rpx 0 16rpx;
}

.table {
  border: 1rpx solid #d9d9d9;
  border-radius: 8rpx;
  overflow: hidden;
  background: #ffffff;
}

.tr {
  display: flex;
  border-bottom: 1rpx solid #d9d9d9;
}
.tr:last-child {
  border-bottom: none;
}

.th {
  background: #f3f3f3;
}

.td {
  padding: 16rpx 12rpx;
  font-family: PingFang-SC, PingFang-SC;
  font-size: 24rpx;
  color: #333333;
  line-height: 1.4;
  border-right: 1rpx solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.td:last-child {
  border-right: none;
}

/* 表1列宽 */
.col-1 {
  width: 22%;
}
.col-2 {
  width: 28%;
}
.col-3 {
  width: 50%;
}

/* 表2列宽 */
.col-a {
  width: 34%;
}
.col-b {
  width: 22%;
}
.col-c {
  width: 44%;
}

/* 表3列宽 */
.col-lv {
  width: 28%;
}
.col-ben {
  width: 72%;
  justify-content: flex-start;
  text-align: left;
}

.tips {
  margin-top: 12rpx;
}
.tips-text {
  font-family: PingFang-SC, PingFang-SC;
  font-size: 22rpx;
  color: #2f6fd6;
  line-height: 1.6;
}

.bullet {
  margin-top: 14rpx;
}
.bullet-item {
  font-family: PingFang-SC, PingFang-SC;
  font-size: 22rpx;
  color: #1a1a1a;
  line-height: 1.7;
}
</style>