recycle-front/pages/subcomponent/promotion_info.vue

<template>
  <view class="info-page">
    <!-- 顶部区域 -->
    <view class="header">
      <!-- 顶部导航栏 -->
      <view class="nav-bar">
        <view class="back-icon" @tap="navigateBack">
          <uni-icons type="left" size="20"></uni-icons>
        </view>
        <view class="title">回收侠·推客联盟</view>
      </view>

      <!-- 特点标签 -->
      <view class="feature-tags">
        <view class="tag">
          <text class="iconfont check">✓</text>
          <text>收益高</text>
        </view>
        <view class="tag">
          <text class="iconfont check">✓</text>
          <text>品类全</text>
        </view>
        <view class="tag">
          <text class="iconfont check">✓</text>
          <text>到账快</text>
        </view>
        <view class="tag">
          <text class="iconfont check">✓</text>
          <text>城市多</text>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <view class="page-title">了解推广官</view>

      <!-- 免费申请区块 -->
      <view class="section">
        <view class="section-header">
          <text class="title">申请推广官</text>
          <text class="tag free">免费</text>
        </view>
        <view class="description">
          免费申请，轻松成为推广官。该类型推广官可获得基础佣金，适合初次尝试推广业务的用户。
        </view>
        <view class="points">
          <view class="point">
            <text class="point-title">佣金奖励：</text>
            <text class="point-content">说明推广官成功推广后可获得的佣金比例或计算方式，如每成功回收一件旧衣可获得一定金额的佣金，或根据回收订单的总金额按一定比例提成。</text>
          </view>
          <view class="point">
            <text class="point-title">推广资源：</text>
            <text class="point-content">介绍平台为推广官提供的推广资源，如专属的推广链接、二维码、宣传海报等，以及如何使用这些资源进行推广。</text>
          </view>
          <view class="point">
            <text class="point-title">培训支持：</text>
            <text class="point-content">提及平台会为推广官提供培训资料或线上培训课程，帮助推广官更好地了解平台的业务和推广技巧。</text>
          </view>
        </view>
      </view>

      <!-- 付费升级区块 -->
      <view class="section">
        <view class="section-header">
          <text class="title">升级推广官</text>
          <text class="tag paid">付费（Y66）</text>
        </view>
        <view class="description">
          付费升级，成为更高等级的推广官。升级后，推广官将享受更高额度的佣金及相关权益，适合具备一定推广经验且希望进一步提升收益的用户。
        </view>
        <view class="points">
          <view class="point">
            <text class="point-title">佣金奖励：</text>
            <text class="point-content">说明推广官成功推广后可获得的佣金比例或计算方式，如每成功回收一件旧衣可获得一定金额的佣金，或根据回收订单的总金额按一定比例提成。</text>
          </view>
          <view class="point">
            <text class="point-title">推广资源：</text>
            <text class="point-content">介绍平台为推广官提供的推广资源，如专属的推广链接、二维码、宣传海报等，以及如何使用这些资源进行推广。</text>
          </view>
          <view class="point">
            <text class="point-title">培训支持：</text>
            <text class="point-content">提及平台会为推广官提供培训资料或线上培训课程，帮助推广官更好地了解平台的业务和推广技巧。</text>
          </view>
        </view>
      </view>

      <!-- 底部说明 -->
      <view class="bottom-note">
        推广官需严格遵守平台规定开展推广活动，平台将依据推广效果给予相应佣金。期待您的加入，与我们共创环保回收新未来。
      </view>

      <!-- 二维码区域 -->
      <view class="qrcode-area">
        <image class="qrcode" src="/static/logo.png" mode="aspectFit"/>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <button class="btn apply-btn" @tap="apply">申请推广官</button>
      <button class="btn upgrade-btn" @tap="upgrade">升级推广官</button>
    </view>
  </view>
</template>

<script>
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'

export default {
  mixins: [pullRefreshMixin],
  methods: {
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      uni.stopPullRefresh()
    },
    navigateBack() {
      uni.navigateBack()
    },
    apply(){
      uni.navigateTo({
        url: '/pages/component/apply'
      })
    },
    upgrade(){
      uni.navigateTo({
        url: '/pages/component/upgrad'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.info-page {
  min-height: 100vh;
  background: linear-gradient(to right,#9be48f,#42dfc2);
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

.header {
  background: linear-gradient(to right,#9be48f,#42dfc2);
  // padding: 0 30rpx;
  padding-bottom: 20rpx;
  .nav-bar {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    height: 88rpx;
    padding-top: var(--status-bar-height);

    .title {
      font-family: DingTalk JinBuTi;
      font-weight: 400;
      font-style: italic;
      font-size: 50rpx;
      line-height: 100%;
      letter-spacing: 0%;
      vertical-align: bottom;
      color: #333;
      margin-left: 10%;
    }

    .back-icon, .more-icon {
      width: 88rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 40rpx;
        color: #333;
      }
    }
  }

  .feature-tags {
    display: flex;
    justify-content: space-between;
	width: 90%;
	margin: 0 auto;
    margin-top: 10rpx;
    border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 20rpx;
	background: linear-gradient(to right,#9be48f,#42dfc2);
    .tag {
      // background: rgba(255, 255, 255, 0.8);
      border-radius: 30rpx;
      padding: 12rpx 24rpx;
      display: flex;
      align-items: center;

      .check {
        color: #4CAF50;
        margin-right: 8rpx;
        font-size: 24rpx;
      }

      text {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
}

.content {
  padding: 30rpx;
  box-sizing: border-box;
  background: linear-gradient(to bottom,#eaffe6,6%,#fcfffb);
  border-radius: 40rpx;
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }

  .section {
    // background: rgba(255, 255, 255, 0.9);
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .tag {
        margin-left: 20rpx;
        padding: 4rpx 16rpx;
        border-radius: 8rpx;
        font-size: 24rpx;

        &.free {
          background: #fff0d2;
          color: #df8155;
          border: 1px solid #de835a;
        }

        &.paid {
          background: #fff0d2;
          color: #df8155;
		  border: 1px solid #de835a;
        }
      }
    }

    .description {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 13px;
      line-height: 140%;
      letter-spacing: 0%;
      color: #666;
      line-height: 1.6;
      margin-bottom: 30rpx;
    }

    .points {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 13px;
		line-height: 140%;
		letter-spacing: 0%;
      .point {
        margin-bottom: 24rpx;

        &:last-child {
          margin-bottom: 0;
        }


        .point-content {
          font-size: 26rpx;
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }

  .bottom-note {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 13px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #666;
    line-height: 1.6;
    text-align: center;
    margin: 30rpx 0;
  }
}

.qrcode-area {
  display: flex;
  justify-content: center;
  margin: 40rpx 0;

  .qrcode {
    width: 240rpx;
    height: 240rpx;
    background: #fff;
    padding: 20rpx;
    border-radius: 20rpx;
  }
}

.bottom-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 40rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44rpx;
    font-size: 32rpx;
    margin: 0 10rpx;
    border: none;

    &.apply-btn {
      background: #f5f5f5;
      // color: #666;
    }

    &.upgrade-btn {
      background: linear-gradient(to right,#9be48f,#42dfc2);
      color: #fff;
    }
  }
}
</style>