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

<template>
  <u-popup v-model="showPopup" mode="center" border-radius="24" width="650rpx" :mask-close-able="false">
    <view class="popup-container">
      <!-- 背景图片 -->
      <image class="bg-image" src="/static/img/activity/bg.png" mode="aspectFill"></image>
      
      <!-- 内容区域 -->
      <view class="content">
        <!-- 顶部黄色手掌图标和标题 -->
        <view class="header">
          <image class="hand-icon" src="/static/img/activity/invite.png" mode="widthFix"></image>
          <view class="title-text">你真的太幸运了</view>
          <view class="subtitle-text">恭喜你获得限时加价权益</view>
        </view>
        
        <!-- 绿色价格信息区域 -->
        <view class="price-section">
          <view class="price-row">
            <text class="price-label">此书预估书款</text>
            <text class="price-value">¥ 5.6</text>
          </view>
          <view class="price-row">
            <text class="price-label">助力成功提升至</text>
            <text class="price-value increased">¥ 6.5</text>
            <image class="up-icon" src="/static/img/activity/up.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">
            <u-icon name="plus" color="#09BB07" size="46"></u-icon>
            <text class="waiting-text">待邀请</text>
          </view>
        </view>
        
        <!-- 分享按钮 -->
        <view class="action-buttons">
          <u-button type="primary" class="share-button" @click="shareAction">立即分享</u-button>
          <u-button type="info" plain class="scan-button" @click="scanAction">扫码助力</u-button>
        </view>
      </view>
      
      <!-- 关闭按钮 -->
      <view class="close-button" @click="closePopup">
        <image src="/static/img/activity/close.png" mode="widthFix"></image>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    }
  },
  methods: {
    open() {
      this.showPopup = true
    },
    closePopup() {
      this.showPopup = false
    },
    shareAction() {
      this.$emit('share')
    },
    scanAction() {
      this.$emit('scan')
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-radius: 24rpx;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.2; // 降低背景图片透明度，避免遮挡文字
}

.content {
  position: relative;
  z-index: 1;
  padding: 30rpx 20rpx 40rpx;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0 30rpx;
  
  .hand-icon {
    width: 120rpx;
    margin-bottom: 20rpx;
  }
  
  .title-text {
    font-size: 38rpx;
    font-weight: bold;
    color: #000;
    margin-bottom: 10rpx;
  }
  
  .subtitle-text {
    font-size: 32rpx;
    color: #000;
  }
}

.price-section {
  background-color: rgba(9, 187, 7, 0.9); // 增加透明度，确保背景不会过于刺眼
  border-radius: 16rpx;
  padding: 30rpx 40rpx;
  margin: 20rpx 0;
  
  .price-row {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
    
    .price-label {
      color: #FFFFFF;
      font-size: 30rpx;
    }
    
    .price-value {
      color: #FFEB3B;
      font-size: 30rpx;
      font-weight: bold;
      margin-left: auto;
    }
    
    .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: rgba(232, 248, 232, 0.9); // 增加透明度
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 20rpx 0;
  
  .share-text {
    color: #09BB07;
    font-size: 32rpx;
    text-align: center;
    margin-bottom: 30rpx;
    font-weight: 500; // 加粗文字，提高可读性
  }
  
  .add-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .waiting-text {
      color: #09BB07;
      font-size: 26rpx;
      margin-top: 10rpx;
    }
  }
}

.action-buttons {
  margin-top: 30rpx;
  
  .share-button {
    height: 90rpx;
    background-color: #09BB07 !important;
    border-color: #09BB07 !important;
    margin-bottom: 20rpx;
    font-size: 32rpx;
  }
  
  .scan-button {
    height: 90rpx;
    color: #09BB07 !important;
    border-color: #09BB07 !important;
    font-size: 32rpx;
  }
}

.close-button {
  position: absolute;
  bottom: -120rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  
  image {
    width: 70rpx;
    height: 70rpx;
  }
}
</style>