book-hi/pages/home/components/upsell-rules.vue

<template>
  <custom-popup v-model="showPopup" mode="center" border-radius="24" width="650rpx" :bg-color="'transparent'">
    <view class="rules-container">
      <!-- 标题 -->
      <view class="title-section">
        <view class="title-line"></view>
        <view class="title">活动规则</view>
        <view class="title-line"></view>
      </view>

      <!-- 规则内容 -->
      <view class="rules-content">
        <view class="rule-item"
          >1.活动时间：2025年4月05日至2025年5月30日。</view
        >
        <view class="rule-item"
          >2.活动期间，用户扫描到活动书籍后有幸运机会成为助力"发起者"，成功邀请1位好友进行助力，发起者参与活动的回收书籍，将根据书籍实际审核书款额外获得金额的助力收益。</view
        >
        <view class="rule-item"
          >3.活动期间，每位用户24小时内有一次机会成为助力者。</view
        >
        <view class="rule-item">4.回收助力收益发放时间：</view>
        <view class="rule-item"
          >活动时间内，回收订单提交时，如果助力任务已完成则随订单审核完成结算收益，金额转入用户书嗨余额。</view
        >
        <view class="rule-item"
          >活动时间内，回收订单提交时，如果助力任务未完成，则任务失败，不结算收益。</view
        >
        <view class="rule-item">活动结束前助力任务未完成，没有收益。</view>
        <view class="rule-item"
          >5.卖书的书款和助力收益将一起到账，可以在"我的-订单"中查看明细。</view
        >
      </view>

      <!-- 底部按钮 -->
      <u-button class="return-button" type="primary" @click="closePopup"
        >返回活动</u-button
      >
      
      <!-- 关闭按钮 -->
      <view class="close-button" @click="closePopup">
        <image src="/static/img/activity/close2.png" mode="widthFix"></image>
      </view>
    </view>
  </custom-popup>
</template>

<script>
import customPopup from "../../../components/custom-popup.vue";

export default {
  components: {
    customPopup,
  },
  data() {
    return {
      showPopup: false,
    };
  },
  methods: {
    open() {
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.rules-container {
  padding: 30rpx;
  border-radius: 24rpx;
  position: relative;
  background: url("https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/bg.png")
    no-repeat center center;
  background-size: 100% 100%;
}

.title-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;

  .title-line {
    width: 120rpx;
    height: 2rpx;
    background-color: #09bb07;
  }

  .title {
    font-size: 38rpx;
    font-weight: bold;
    color: #09bb07;
    margin: 0 20rpx;
  }
}

.rules-content {
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;

  .rule-item {
    font-size: 26rpx;
    color: #333;
    line-height: 40rpx;
    margin-bottom: 6rpx;
  }
}

.return-button {
  height: 90rpx;
  background-color: #09bb07 !important;
  border-color: #09bb07 !important;
  font-size: 32rpx;
  border-radius: 100rpx;
  margin-top: 10rpx;
}

.close-button {
  position: absolute;
  bottom: -120rpx;
  left: 50%;
  transform: translateX(-50%);

  image {
    width: 70rpx;
    height: 70rpx;
  }
}
</style>