<template>
  <view class="main">
    <view class="contentItem">
      <view class="itemTitle">
        <!-- <image class="pointIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/firstPoints.svg" /> -->
        <span class="titleText">会员权益设计</span>
      </view>

      <view class="itemContent">
        <view class="smallTitle">
          <span class="label" style="color: #784300;font-weight: 600;">普通会员</span>
          <image class="labelIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/normalUser.svg" />
        </view>
        <view class="value"> 享受基础服务折扣，如餐饮、购物等； </view>
        <view class="line"></view>
        <view class="smallTitle">
          <span class="label" style="color: #17416C;font-weight: 600">银卡会员</span>
          <image class="labelIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/silverCard.svg" />
        </view>
        <view class="value">
          在普通会员基础上提高相应折扣，提供更高商品折扣及个性化服务，如休息室使用、定点服务区咖啡品尝等。
        </view>
      </view>

      <!-- <view class="itemContent" style="margin-top: 24rpx">
        <view class="smallTitle">
          <span class="label">银卡会员</span>
          <image class="labelIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/silverCard.svg" />
        </view>
        <view class="value">
          在普通会员基础上提高相应折扣，提供更高商品折扣及个性化服务，如休息室使用、定点服务区咖啡品尝等。
        </view>
      </view> -->
    </view>

    <view class="contentItem" style="margin-top: 32rpx">
      <view class="itemTitle">
        <!-- <image class="pointIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/secondPoint.svg" /> -->
        <span class="titleText">会员积分获取</span>
      </view>

      <view class="table">
        <view class="header">
          <view class="firstCol">积分类型</view>
          <view class="secondCol">获得积分</view>
        </view>
        <view class="row">
          <view class="firstCol">新用户注册</view>
          <view class="secondCol">奖励初始<span class="orange">10</span>个积分</view>
        </view>
        <view class="row">
          <view class="firstCol">餐饮消费</view>
          <view class="secondCol">每消费<span class="orange">1</span>元获得<span class="orange">1</span>个积分</view>
        </view>
        <view class="row">
          <view class="firstCol">购物消费</view>
          <view class="secondCol">每消费<span class="orange">1</span>元获得<span class="orange">1</span>个积分</view>
        </view>
        <view class="row">
          <view class="firstCol">住宿消费</view>
          <view class="secondCol">每消费<span class="orange">100</span>元获得<span class="orange">10</span>个积分</view>
        </view>
        <view class="row">
          <view class="firstCol">导航使用</view>
          <view class="secondCol">通过APP中内嵌导航，每<span class="orange">100</span>公里获得<span class="orange">1</span>个积分</view>
        </view>
        <view class="row">
          <view class="firstCol">充电消费</view>
          <view class="secondCol">通过APP扫码充电每消费<span class="orange">10</span>元获得<span class="orange">1</span>个积分</view>
        </view>
        <view class="row" style="border-bottom: 0;padding-bottom: 0;">
          <view class="firstCol">社区互动</view>
          <view class="secondCol">合理发帖或评价，每<span class="orange">10</span>条获得<span class="orange">1</span>个积分</view>
        </view>
      </view>
    </view>

    <view class="contentItem" style="margin-top: 32rpx">
      <view class="itemTitle">
        <!-- <image class="pointIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/activityPoints.svg" /> -->
        <span class="titleText">活动积分</span>
      </view>
      <view class="contentBox">
        <view class="boxItem">
          <view class="itemLabel">
            <image class="labelIcon" src="/static/home/recommend.svg" />
            会员推荐
          </view>
          <view class="itemValue">成功推荐一名新会员加入，奖励推荐人<span class="light">50</span>个积分。</view>
        </view>

        <view class="line"></view>
        <view class="boxItem">
          <view class="itemLabel">
            <image class="labelIcon" src="/static/home/join.svg" />参与活动
          </view>
          <view class="itemValue">参加服务区内的各类活动（如节庆活动、主题活动等），每次奖励<span class="light">20-50</span>个积分不等。</view>
        </view>
      </view>
    </view>

    <view class="contentItem" style="margin-top: 32rpx">
      <view class="itemTitle">
        <!-- <image class="pointIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/specialIntegral.svg" /> -->
        <span class="titleText">特殊积分</span>
      </view>

      <view class="contentBox">
        <view class="boxItem">
          <view class="itemLabel">
            <image class="labelIcon" src="/static/home/birthdayIcon.svg" />生日礼遇
          </view>
          <view class="itemValue">在会员生日月份，到服务区消费单笔满<span class="light">10</span>元额外赠送</view>
        </view>

        <view class="line"></view>
        <view class="boxItem">
          <view class="itemLabel">
            <image class="labelIcon" src="/static/home/holiday.svg" />节假日优惠
          </view>
          <view class="itemValue">在特定节假日期间，消费可额外得双倍积分。</view>
        </view>
      </view>
    </view>

    <!-- <view class="content">
      <view class="contentLeft">1</view>
      <view class="contentRight">
        <view class="title">会员权益设计</view>
        <view class="smallcontent">
          <view>普通会员：享受基础服务折扣，如餐饮、购物等。</view>
          <view>银卡会员：在普通会员基础上提高相应折扣。</view>
          <view
            >提供更高商品折扣及个性化服务，如休息室使用、定点服务区咖啡品尝等。</view
          >
        </view>
      </view>
    </view>

    <view class="content" style="margin-top: 8rpx">
      <view class="contentLeft">2</view>
      <view class="contentRight">
        <view class="title">会员积分获取</view>
        <view class="smallcontent">
          <view>新用户注册：奖励初始积分10个。</view>
          <view>餐饮消费：每消费1元获得1个积分。</view>
          <view>购物消费：每消费1元获得1个积分。</view>
          <view>住宿消费：每消费100元获得10个积分。</view>
          <view>导航使用：通过APP中内嵌导航，每100公里获得1个积分。</view>
          <view>充电消费：通过APP扫码充电每消费10元获得1个积分。</view>
          <view>社区互动及评价：合理发帖或评价，每10条获得1个积分。</view>
        </view>
      </view>
    </view>

    <view class="content" style="margin-top: 8rpx">
      <view class="contentLeft">3</view>

      <view class="contentRight">
        <view class="title">活动积分</view>
        <view class="smallcontent">
          <view>会员推荐：成功推荐一名新会员加入，奖励推荐人50个积分。</view>
          <view
            >参与活动：参加服务区内的各类活动（如节庆活动、主题活动等），每次奖励20-50个积分不等。</view
          >
        </view>
      </view>
    </view>
    <view class="content" style="margin-top: 8rpx">
      <view class="contentLeft">4</view>
      <view class="contentRight">
        <view class="title">特殊积分</view>
        <view class="smallcontent">
          <view
            >生日礼遇：在会员生日月份，到服务区消费单笔满10元额外赠送50个积分作为生日礼物。</view
          >
          <view>节假日优惠：在特定节假日期间，消费可额外获得双倍积分。</view>
        </view>
      </view>
    </view> -->

    <!-- <view class="title"> 2.会员积分获取：</view>
    <view class="content">
      <view>新用户注册：奖励初始积分10个。</view>
      <view>餐饮消费：每消费1元获得1个积分。</view>
      <view>购物消费：每消费1元获得1个积分。</view>
      <view>住宿消费：每消费100元获得10个积分。</view>
      <view>导航使用：通过APP中内嵌导航，每100公里获得1个积分。</view>
      <view>充电消费：通过APP扫码充电每消费10元获得1个积分。</view>
      <view>社区互动及评价：合理发帖或评价，每10条获得1个积分。</view>
    </view> -->

    <!-- <view class="title"> 3.活动积分：</view>
    <view class="content">
      <view>会员推荐：成功推荐一名新会员加入，奖励推荐人50个积分。</view>
      <view
        >参与活动：参加服务区内的各类活动（如节庆活动、主题活动等），每次奖励20-50个积分不等。</view
      >
    </view> -->

    <!-- <view class="title"> 4.特殊积分：</view>
    <view class="content">
      <view
        >生日礼遇：在会员生日月份，到服务区消费单笔满10元额外赠送50个积分作为生日礼物。</view
      >
      <view>节假日优惠：在特定节假日期间，消费可额外获得双倍积分。</view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginType: "",
    };
  },
  onLoad() {
    let type = uni.getStorageSync("loginType");
    this.loginType = type;
    if (type === "min") {
      this.menu = uni.getMenuButtonBoundingClientRect();
    } else {
      this.menu = systemInfo.safeArea;
    }
    this.$utils.addUserBehaviorNew();
  },
};
</script>


<style scoped lang="less">
.main {
  width: 100vw;
  min-height: 100vh;
  // background: #fff;
  background: #F5F5F5;
  box-sizing: border-box;
  padding: 32rpx;
  // padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS 11.2+ */
  // padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS <11.2 */

  .contentItem {
    width: 100%;

    .itemTitle {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;

      .pointIcon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8rpx;
      }

      .titleText {
        font-family: "PingFangSC";
        font-weight: 600;
        font-size: 32rpx;
        color: #130f05;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .itemContent {
      width: 100%;
      background-color: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 32rpx;

      .smallTitle {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

        .label {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 26rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .labelIcon {
          width: 80rpx;
          height: 32rpx;
          margin-left: 8rpx;
        }
      }

      .value {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 24rpx;
        color: #716f69;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        margin-top: 4rpx;
      }


      .line {
        width: 100%;
        height: 2rpx;
        background-color: #F5F5F5;
        margin: 26rpx 0;
      }
    }

    .table {
      width: 100%;
      background-color: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 30rpx 32rpx;
      // margin-top: 16rpx;

      .header {
        width: 100%;
        box-sizing: border-box;
        // padding: 16rpx 24rpx;
        // background: #fcf9ef;
        border-radius: 6rpx;
        display: flex;
        align-items: center;

        .firstCol {
          width: 150rpx;
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 26rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .secondCol {
          width: calc(100% - 150rpx);
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 26rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          white-space: nowrap;

          .orange {
            color: #FF6200;
          }
        }
      }

      .row {
        width: 100%;
        box-sizing: border-box;
        padding: 24rpx 0;
        border-bottom: 1px solid #f5f6f7;
        display: flex;
        align-items: center;

        .firstCol {
          width: 150rpx;
          font-family: "PingFangSC";
          font-weight: 600;
          font-size: 24rpx;
          color: #000;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .secondCol {
          width: calc(100% - 150rpx);
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 24rpx;
          color: #7F7F7F;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          white-space: nowrap;

          .orange {
            color: #FF6200;
          }
        }
      }
    }

    .contentBox {
      width: 100%;
      margin-top: 16rpx;
      background-color: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 32rpx;

      .boxItem {
        .itemLabel {
          font-family: "PingFangSC";
          font-weight: 600;
          font-size: 26rpx;
          color: #130f05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          display: flex;
          align-items: center;

          .labelIcon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
          }
        }

        .itemValue {
          margin-top: 4rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;

          .light {
            color: #FF6200;
          }
        }
      }

      .line {
        width: 100%;
        height: 2rpx;
        background-color: #F5F5F5;
        margin: 26rpx 0;
      }
    }
  }
}
</style>