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 || 0 }}</text>
        </view>
        <view class="price-row">
          <text class="price-label">助力成功提升至</text>
          <text class="price-value increased"
            >¥ {{ bookInfo.upsellMoney || 0 }}</text
          >
          <image
            class="up-icon"
            src="/static/img/activity/up2.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="small-text"
          >实际金额以最终审核书款为准，活动时间{{
            formatDate(bookInfo.startTime)
          }}至{{ formatDate(bookInfo.endTime) }}</view
        >
      </view>

      <!-- 分享助力区域 -->
      <view class="share-section">
        <view class="share-text">分享{{ inviteUsers.length }}位好友助力</view>
        <view class="add-button">
          <block v-for="(item, index) in inviteUsers" :key="index">
            <view class="add-item" v-if="item.imgPath">
              <image
                class="hand-icon"
                :src="item.imgPath"
                mode="widthFix"
              ></image>
              <view class="add-text">{{ formatName(item.nickName) }}</view>
            </view>

            <button v-else open-type="share" data-share-type="upsell" class="hand-btn">
              <image
                class="hand-icon"
                src="/static/img/activity/invite.png"
                mode="widthFix"
              ></image>
            </button>
          </block>
        </view>
      </view>

      <!-- 分享按钮 -->
      <view class="action-buttons">
        <button class="share-button" data-share-type="upsell" @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: {},
      inviteUsers: [],
    };
  },
  methods: {
    open(data) {
      this.showPopup = true;
      this.getIsbnInfo(data.isbn, data.orderId);
    },
    //获取信息
    getIsbnInfo(isbn, orderId) {
      uni.$u.http
        .get(`/token/order/clickUpsellInvite?isbn=${isbn}&orderId=${orderId}`)
        .then((res) => {
          if (res.code == 200) {
            this.bookInfo = res.data;
            let needInviteNum = res.data.canInvite;
            let inviteUsers = res.data.inviteUsers || [];
            let length = inviteUsers.length;
            for (let index = 0; index < needInviteNum - length; index++) {
              inviteUsers.push({
                nickName: "",
                imgPath: "",
              });
            }
            this.inviteUsers = inviteUsers;
            uni.setStorageSync("upsellCodeShare", res.data.upsellCode);
          } else {
            uni.$u.toast(res.msg);
          }
        });
    },
    // 转换时间的方法，将年月日时分秒转换成 3/25 格式
    formatDate(dateString) {
      if (!dateString) return "";

      const date = new Date(dateString);
      const month = date.getMonth() + 1; // 月份从0开始，需要+1
      const day = date.getDate();

      return `${month}/${day}`;
    },

    //格式化 name，长度大于 3，只保留第一个和最后一个字，中间最多使用三个 *代替
    // 长度小于 3，只保留第一个字
    formatName(name) {
      if (!name) return "";
      if (name.length > 2) {
        return name.slice(0, 1) + "*" + name.slice(-1);
      } else {
        return name.slice(0, 1) + "*";
      }
    },

    closePopup() {
      this.showPopup = false;
    },
    shareAction() {
      this.$emit("share", this.bookInfo);
    },
    scanAction() {
      this.$emit("scan", this.bookInfo);
    },
  },
};
</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;
    align-items: center;
    justify-content: center;
    gap: 10rpx;

    .hand-icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
  .hand-btn{
    display: inline-block;
    width: 100rpx !important;
    height: 110rpx;
    background: transparent;
    flex: none;
    padding: 0;
  }

  .add-item {
    position: relative;
    .add-text {
      position: absolute;
      bottom: 2rpx;
      left: 5rpx;
      font-size: 24rpx;
      background: #39c248;
      text-align: center;
      color: #fff;
      padding: 0 10rpx;
      border-radius: 20rpx;
      display: inline-block;
      width: 94rpx;
    }
  }
}

.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>