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

<template>
  <custom-popup
    v-model="showPopup"
    mode="center"
    border-radius="24"
    width="650rpx"
    :bg-color="'transparent'"
  >
    <view class="popup-container">
      <!-- 顶部黄色手掌图标和标题 -->
      <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">
        <button
          class="share-button"
          @click="shareAction"
          open-type="share"
          >立即分享</button
        >
        <button
          class="scan-button"
          @click="scanAction"
          >扫码助力</button
        >
      </view>

      <!-- 关闭按钮 -->
      <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,
      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;
  background: url("https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/bg2.png")
    no-repeat center center;
  background-size: 100% 100%;
}

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

  .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: #39c248;
  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: #39c248;
    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: linear-gradient(to bottom, #47d46c, #24ad3c) !important;
    margin-bottom: 24rpx;
    font-size: 32rpx;
    color: #ffffff;
    border-radius: 10rpx;
    line-height: 90rpx;
  }

  .scan-button {
    height: 90rpx;
    font-size: 32rpx;
    color: #39c248;
    border: 1rpx solid #39c248;
    background-color: transparent;
    border-radius: 10rpx;
    line-height: 90rpx;
  }
  button+button{
    margin-left: 0;
  }
}

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

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