H5-Spu-detail/src/components/pdd-detail.vue

<template>
  <div id="app" class="product-page">
  
    <div style="padding-bottom: 100px;">
      <!-- 商品图片 -->
      <el-carousel class="product-img">
        <el-carousel-item v-for="item in spuInfo.goodsGalleryUrls" :key="item">
          <img :src="item" style="width: 100%;height: 100%;">
        </el-carousel-item>
      </el-carousel>
      <!-- <img :src="spuInfo.goodsImageUrl" class="product-img" alt="iPhone 15 Pro Max"> -->

      <!-- 标签与商品名 -->
      <div class="tag-bar">
        <span class="product-name">{{ spuInfo.goodsName }}</span>
      </div>

      <!-- 优惠信息 -->
      <div class="promo-bar">
        <span class="coupon-tag" v-if="spuInfo.hasCoupon">{{ spuInfo.couponDiscount }}元券</span>
        <span class="promo-text">
          <span v-for="(item, index) in spuInfo.unifiedTags" :key="index">
            {{ item }} <!-- 展示数组中的每个标签文本 -->
            <!-- 给除最后一个外的标签添加 | 分隔符 -->
            <span v-if="index < spuInfo.unifiedTags.length - 1"> | </span>
          </span></span>
      </div>
      <!-- 价格与销量 -->
      <div class="price-info">
        <div class="price">¥{{ spuInfo.minGroupPrice }} <span style="font-size:12px;color:#999;">券后价</span>
          <div class="yyh" v-if="parseInt(spuInfo.couponDiscount) > 0">
            已优惠{{ spuInfo.couponDiscount }}元
          </div>
        </div>
        <div class="sales">销量 {{ spuInfo.salesTip }}</div>
      </div>

      <!-- 店铺信息 -->
      <div class="shop-section" v-if="spuInfo.mallName">
        <div class="shop-logo"><img :src="spuInfo.mallImgUrl" style="width: 30px;height: 30px;"></div>
        <div class="shop-info">
          <div class="shop-name">
            <el-tag type="danger" size="mini">{{ spuInfo.merchantType == 3 ? '旗舰店' : spuInfo.merchantType == 4 ? '专卖店' :
              spuInfo.merchantType == 5 ? '专营店' : '' }}</el-tag>
            {{ spuInfo.mallName }}
          </div>
          <div class="shop-tags">
            <span>描述相符 {{ spuInfo.descTxt }}</span>
            <span>服务态度 {{ spuInfo.servTxt }}</span>
            <span>发货速度 {{ spuInfo.lgstTxt }}</span>
          </div>
        </div>
      </div>

      <!-- 商品描述 -->
      <div class="desc-section">
        <div class="desc-title">商品描述</div>
        <div class="desc-content">
          {{ spuInfo.goodsDesc }}
        </div>
      </div>
    </div>
    <!-- 底部操作栏 -->
    <div class="bottom-bar">
      <!-- <div class="bar-left">
        <span>推广可赚 <span style="color: red; font-size: 18px;">¥{{ spuInfo.predictPromotionRate }}</span> </span>
      </div> -->
      <div class="bar-btn btn-buy" @click="openAPP">APP打开</div>
      <!-- <div class="bar-btn btn-promote">立即推广</div> -->
    </div>
  </div>
</template>

<script>
import { goodsDetail, getAppLatestVersion } from '@/api/index.js'
export default {
  name: 'pdd-detail',
  data() {
    return {
      androidLinkurl: "https://oss.qianzhi-y.com/appapk/qianzhiyun_V1.0.0_release.apk",
      spuInfo: {},
      query: {
        platform: "",
        shareUserId: "",
        token: "",
        goodsSign: ""
      }
    }
  },
  mounted() {
    this.getAppdownloadUrl()
    this.query.platform = this.GetQueryString("platform")
    this.query.shareUserId = this.GetQueryString("shareUserId")
    this.query.token = this.GetQueryString("token")
    this.query.goodsSign = this.GetQueryString("goodsSign")
    this.getgoodDetail()
  },
  methods: {
    getAppdownloadUrl() {
      getAppLatestVersion().then(res => {
        this.androidLinkurl = res.data.downloadUrl
      })
    },
    getgoodDetail() {
      goodsDetail({
        goodsSign: this.query.goodsSign,
        needSkuInfo: true
      }).then(res => {
        this.spuInfo = res.data
      })
    },
    openAPP() {
      const that = this;
      // 1. 解析用户代理，判断设备类型
      const ua = navigator.userAgent;
      const isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1; // 安卓终端
      // 新增：标记是否已唤起APP（核心修复）
      let isAppInvoked = false;

      // 2. 安卓端唤醒逻辑（核心优化）
      if (isAndroid) {
        // 记录唤醒开始时间
        const loadStartTime = new Date().getTime();
        // APP Scheme 唤起链接（带参数）
        const schemeUrl = "com.benefit.workbox://promotion-goods" + location.search;
        // ========== 关键优化1：监听页面隐藏事件（唤起APP会触发） ==========
        // 当页面被隐藏（切换到APP），标记为已唤起
        const onPageHide = () => {
          isAppInvoked = true;
          // 移除监听，避免重复触发
          document.removeEventListener('visibilitychange', onPageHide);
          window.removeEventListener('pagehide', onPageHide);
        };
        // 监听页面隐藏（兼容不同浏览器）
        document.addEventListener('visibilitychange', onPageHide);
        window.addEventListener('pagehide', onPageHide);

        // ========== 关键优化2：简化唤起方式（避免重复触发） ==========
        // 仅用iframe唤起（去掉location.href兜底，减少误触发）
        const iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = schemeUrl;
        document.body.appendChild(iframe);
        // 用完销毁iframe
        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 2000);

        // ========== 关键优化3：精准检测唤起状态 ==========
        setTimeout(() => {
          const currentTime = new Date().getTime();
          const timeDiff = currentTime - loadStartTime;

          // 只有「未标记唤起」且「时间差小于阈值」，才跳转下载
          if (!isAppInvoked && timeDiff < 5000) { // 阈值从10000缩短到5000，更精准
            // 校验下载链接是否有效，避免报错
            if (that.androidLinkurl && that.androidLinkurl.trim()) {
              const a = document.createElement('a');
              a.target = '_blank';
              a.href = that.androidLinkurl;
              a.click();
            } else {
              console.error('安卓下载链接未配置');
            }
          } else {
            // 唤起成功，清空标记
            isAppInvoked = false;
            // 移除监听
            document.removeEventListener('visibilitychange', onPageHide);
            window.removeEventListener('pagehide', onPageHide);
          }
        }, 2000); // 检测延迟从1000延长到2000，给APP唤起足够时间
      } else {
        this.$message({
          message: '暂不支持苹果端,请在安卓端打开',
          type: 'warning'
        })
      }
    },
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.product-page {
  /* max-width: 375px; */
  margin: 0 0px;
  padding: 0px;
  background: #fff;
  min-height: 100vh;
}

/* 顶部导航栏 */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.nav-back {
  font-size: 20px;
  color: #333;
}

.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: #ff2f2f;
}

.nav-actions {
  display: flex;
  gap: 12px;
}

/* 商品图片 */
.product-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  background: #f8f8f8;
}

/* 标签栏 */
.tag-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
}

.tag {
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  min-width: 60px;
  text-align: center;
}

.tag-subsidy {
  background: #ff4444;
}

.tag-flash {
  background: #ff6600;
}

.product-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  /* padding: 0 16px; */
}

/* 优惠信息 */
.promo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff9f9;
}

.coupon-tag {
  background: #ff4444;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  min-width: 60px;
}

.promo-text {
  font-size: 12px;
  color: #666;
}

/* 佣金与价格 */
.price-section {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.commission {
  font-size: 14px;
  color: #666;
}

.commission-value {
  color: #ff4444;
  font-size: 18px;
  font-weight: 600;
}

.upgrade-btn {
  background: #ff4444;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.price-info {
  padding: 0 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yyh {
  font-size: 12px;
  background: red;
  color: white;
  border-radius: 7px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px 5px;
  height: 23px;
  margin-left: 10px;
}

.price {
  font-size: 18px;
  color: #ff4444;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.sales {
  font-size: 14px;
  color: #666;
}

/* 规格选择 */
.spec-section {
  padding: 12px 16px;
  border-top: 8px solid #f5f5f5;
}

.spec-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.spec-option {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.spec-option.active {
  border-color: #ff4444;
  color: #ff4444;
  background: #fff5f5;
}

/* 店铺信息 */
.shop-section {
  padding: 12px 16px;
  border-top: 8px solid #f5f5f5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-info {
  flex: 1;
}

.shop-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.shop-tags {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

/* 商品描述 */
.desc-section {
  padding: 12px 16px;
  border-top: 8px solid #f5f5f5;
}

.desc-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.desc-content {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* max-width: 375px; */
  margin: 0 auto;
  display: flex;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 8px;
}

.bar-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 12px;
  color: #666;
}

.bar-btn {
  flex: 2;
  padding: 10px;
  border-radius: 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  /* 点击效果核心属性 */
  touch-action: manipulation;
  /* 阻止移动端双击缩放，提升点击响应 */
  user-select: none;
  /* 禁止文字选中 */
  cursor: pointer;
  transition: all 0.2s ease;
  /* 过渡动画，让效果更丝滑 */
  transform: scale(1);
  /* 初始缩放 */
  box-shadow: 0 2px 8px rgba(244, 51, 60, 0.3);
  /* 初始阴影 */
}

.btn-buy {
  background: #ff9900;
  color: #fff;
  margin-right: 8px;
}

.btn-promote {
  background: #ff2f2f;
  color: #fff;
}

/deep/ .el-carousel__indicators {
  display: flex;
}
</style>