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

<template>
  <u-popup v-model="showPopup" mode="center" border-radius="24" width="650rpx" bgColor="transparent">
    <view class="popup-container">
      <image src="/static/img/activity/bg2.png" class="bg-img"></image>
      <view
        class="content-container"
        hover-class="none"
        hover-stop-propagation="false"
      >
        <!-- 顶部黄色手掌图标和标题 -->
        <view class="header">
          <!-- <image src="/static/img/activity/hand.png" class="hand-icon"></image> -->
          <view class="title-text">你真的太幸运了</view>
          <view class="title-text">恭喜你获得限时加价权益</view>
        </view>

        <!-- 绿色价格信息区域 -->
        <view class="price-section">
          <view class="price-row">
            <text class="price-label">此书预估书款</text>
            <text class="price-value">¥ {{ bookInfo.recyclePrice }}</text>
          </view>
          <view class="price-row">
            <text class="price-label">助力成功提升至</text>
            <text class="price-value increased">¥ {{ upselledMoney }}</text>
            <image
              class="up-icon"
              src="/static/img/activity/up2.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="small-text"
            >实际金额以最终审核书款为准，活动时间3/25至4/30</view
          >
        </view>

        <!-- 分享助力区域 -->
        <view class="share-section">
          <view class="share-text">分享一位好友助力</view>
          <view class="add-button">
            <image
              class="hand-icon"
              src="/static/img/activity/invite.png"
              mode="widthFix"
            ></image>
          </view>
        </view>

        <!-- 分享按钮 -->
        <view class="action-buttons">
          <u-button
            type="primary"
            class="share-button"
            @click="shareAction"
            open-type="share"
            >立即分享</u-button
          >
          <u-button
            :custom-style="{
              marginTop: '20rpx',
              color: '#09bb07',
              borderColor: '#09bb07',
            }"
            plain
            class="scan-button"
            @click="scanAction"
            >扫码助力</u-button
          >
        </view>
      </view>

      <!-- 关闭按钮 -->
      <view class="close-button" @click="closePopup">
        <image src="/static/img/activity/close2.png" mode="widthFix"></image>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      bookInfo: {},
    };
  },
  computed: {
    upselledMoney() {
      return (this.bookInfo.recyclePrice + this.bookInfo.upsellMoney).toFixed(2);
    },
  },
  methods: {
    open(data) {
      this.bookInfo = data;
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
    },
    shareAction() {
      this.$emit("share");
    },
    scanAction() {
      this.$emit("scan");
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-container {
  position: relative;
  padding: 30rpx;
  box-sizing: border-box;
  padding-bottom: 50rpx;
  .bg-img {
    position: absolute;
    top: -0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .content-container {
    position: relative;
    z-index: 1;
  }
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0 10rpx;

  .title-text {
    font-size: 38rpx;
    font-weight: bold;
    color: #000;
    margin-bottom: 10rpx;
  }

  .subtitle-text {
    font-size: 32rpx;
    color: #000;
  }

  .hand-icon {
    width: 140rpx;
    height: 140rpx;
    position: relative;
    top: -30rpx;
  }
}

.price-section {
  background-color: #09bb07;
  border-radius: 16rpx;
  padding: 20rpx 30rpx;
  margin: 20rpx 0;

  .price-row {
    display: flex;
    align-items: center;

    .price-label {
      color: #ffffff;
      font-size: 30rpx;
    }

    .price-value {
      color: #ffeb3b;
      font-size: 30rpx;
      font-weight: bold;
      margin-left: 10rpx;
    }

    .increased {
      font-size: 42rpx;
    }

    .up-icon {
      width: 30rpx;
      height: 30rpx;
      margin-left: 5rpx;
    }
  }

  .small-text {
    color: #ffffff;
    font-size: 22rpx;
    margin-top: 10rpx;
  }
}

.share-section {
  background-color: #e8f8e8;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 20rpx 0;

  .share-text {
    color: #09bb07;
    font-size: 32rpx;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .add-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .hand-icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
}

.action-buttons {
  margin-top: 30rpx;

  .share-button {
    height: 90rpx;
    background-color: #09bb07 !important;
    border-color: #09bb07 !important;
    margin-bottom: 40rpx;
    font-size: 32rpx;
  }

  .scan-button {
    height: 90rpx;
    font-size: 32rpx;
  }
}

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

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