rtim/pages/points/shopDetail.vue

<template>
  <view class="shop-detail-container">
    <!-- 顶部透明导航栏悬浮在轮播图上，滚动时变为有背景的固定导航栏 -->
    <view class="nav-float-header" :style="{ backgroundColor: `rgba(255, 255, 255, ${navOpacity})` }">
      <view class="nav-btn-group">
        <view class="nav-btn" @click="goBack">
          <u-icon name="arrow-left" size="20" color="#333"></u-icon>
        </view>
        <view class="nav-btn" @click="goHome">
          <u-icon name="home" size="20" color="#333"></u-icon>
        </view>
      </view>
      <!-- <view class="nav-btn single-btn" @click="handleShare">
        <u-icon name="share" size="20" color="#333"></u-icon>
      </view> -->
    </view>

    <!-- 顶部轮播图 -->
    <view class="banner-wrap">
      <swiper class="banner-swiper" @change="onSwiperChange" :circular="true">
        <swiper-item v-for="(item, index) in bannerList" :key="index" @click="previewImage(index)">
          <image class="banner-img" :src="item" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
      <!-- 自定义指示器 -->
      <view class="custom-indicator" v-if="bannerList.length > 0">
        {{ currentSwiper + 1 }}/{{ bannerList.length }}
      </view>
    </view>

    <!-- 商品信息卡片 -->
    <view class="product-info-card">
      <view class="price-row">
        <view class="price-left">
          <text class="price-label">到手价</text>
          <text class="price-symbol">￥</text>
          <text class="price-main">{{ formatPrice(productInfo.couponPrice).intPart }}</text>
          <text class="price-decimal">{{ formatPrice(productInfo.couponPrice).decPart }}</text>
          <text class="price-original" v-if="productInfo.price">￥{{ productInfo.price }}</text>
        </view>
        <view class="sales-vol">已售{{ productInfo.monthlySales || 0 }}件</view>
      </view>

      <view class="subsidy-tag" v-if="productInfo.commissionAmount">
        <text>已补贴 ￥{{ productInfo.commissionAmount }}</text>
      </view>

      <view class="product-title-wrap">
        <image v-if="getPlatformImage(productInfo.platform)" class="platform-icon"
          :src="getPlatformImage(productInfo.platform)" mode="aspectFit"></image>
        <text class="product-title">{{ productInfo.title }}</text>
      </view>
    </view>

    <!-- 店铺信息卡片 -->
    <view class="shop-info-card" v-if="productInfo.shopName">
      <view class="shop-icon-wrap">
        <image src="/static/image/points/avatar_shop.png" class="w88 h88"></image>
      </view>
      <text class="shop-name">{{ productInfo.shopName }}</text>
    </view>

    <!-- 图文详情区域 -->
    <view class="detail-section" v-if="productInfo.detailUrl">
      <view class="section-title">图文详情</view>
      <view class="detail-content">
        <image class="detail-img" v-for="(item, index) in handleDetailURL(productInfo.detailUrl)" :key="index"
          :src="item" mode="widthFix"></image>
      </view>
    </view>

    <!-- 底部安全留白 -->
    <view class="bottom-spacer"></view>

    <!-- 底部固定操作栏 -->
    <view class="bottom-action-bar">
      <view class="action-icons">
        <view class="icon-item" @click="toggleFavorite">
          <u-icon :name="isFavorite ? 'star-fill' : 'star'" size="24" :color="isFavorite ? '#FF5A1F' : '#333'"></u-icon>
          <text class="icon-text">收藏</text>
        </view>
        <view class="icon-item" @click="getShareLink('shortUrl')">
          <u-icon name="file-text" size="24" color="#333"></u-icon>
          <text class="icon-text">复制口令</text>
        </view>
      </view>

      <view class="action-btns">
        <button class="btn-share" @click="getShareLink('promotionUrl')">分享赚 ￥{{ productInfo.commissionAmount || 0
        }}</button>
        <button class="btn-buy" @tap="handleOpenUrl">下单省 ￥{{ productInfo.commissionAmount || 0 }}</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getProductDetail, getIsCollection, getShareLink, checkAuthStatus, getAuthLink } from '@/api/makeMoney.js'
export default {
  data() {
    return {
      currentSwiper: 0,
      isFavorite: false,
      navOpacity: 0, // 导航栏背景透明度
      id: '',//346  337
      bannerList: [],
      productInfo: {}, // 存放商品详情数据


    };
  },
  onPageScroll(e) {
    // 监听页面滚动，实现导航栏背景渐变效果
    // 假设滚动 150px 时背景完全不透明
    let opacity = e.scrollTop / 150;
    if (opacity > 1) {
      opacity = 1;
    } else if (opacity < 0) {
      opacity = 0;
    }
    this.navOpacity = opacity;
  },
  onLoad(option) {
    this.id = option.id
    // this.openApp('https://mos.m.taobao.com/inviter/register?inviterCode=7MHVXE&src=pub&app=common&rtag=4055653333')
    this.getProductDetails()
  },
  computed: {
    formatPrice() {
      return (price) => {
        if (!price) return { intPart: '0', decPart: '.00' };
        const priceStr = Number(price).toFixed(2);
        const parts = priceStr.split('.');
        return {
          intPart: parts[0],
          decPart: '.' + parts[1]
        };
      };
    }
  },
  methods: {
    handleDetailURL(url) {
      if (!url) return []
      return url.split(',')
    },
    openApp(schemeUrl) {
      const packagekey = {
        'taobao': 'com.taobao.taobao',
        'jd': 'com.jingdong.app.mall',
        'pdd': 'com.xunmeng.pinduoduo',
        'douyin': 'com.ss.android.ugc.aweme',
        'cps_douyin': 'com.ss.android.ugc.aweme',
        'cps_taobao': 'com.taobao.taobao',
      }
      // #ifdef APP-PLUS
      plus.runtime.openURL(
        schemeUrl,
        () => {
          uni.showModal({
            title: '提示',
            content: `App打开失败，是否用浏览器打开？`,
            success: (res) => {
              if (res.confirm) plus.runtime.openURL(schemeUrl);
            }
          });
        },
        packagekey[this.productInfo.platform]
      );
      // #endif

      // #ifdef H5
      // H5环境下直接使用浏览器打开链接
      window.open(schemeUrl, '_blank');
      // #endif
    },




    handleOpenUrl() {
      const platform = this.productInfo.platform
      if (platform.includes('taobao')) {
        return this.checkAuthStatus()
      }
      this.getToLink()

    },
    async getToLink() {
      uni.showLoading()
      const { code, message, data } = await getShareLink(this.id)
      uni.hideLoading()
      if (code == 200) {
        if (!data.promotionUrl) {
          uni.showToast({
            icon: 'none',
            title: '未获取到链接',
          });
        }
        this.openApp(data.promotionUrl)
      } else {
        uni.showToast({
          icon: 'none',
          title: message,
        });
      }
    },
    async checkAuthStatus() {
      uni.showLoading()
      const { code, message, data } = await checkAuthStatus(this.productInfo.platform)
      console.log("--checkAuthStatus--", data)
      uni.hideLoading()
      if (code == 200) {
        if (!data.isAuth) {
          this.getAuthLink()
        } else {
          this.getToLink()
        }
      } else {
        uni.showToast({
          icon: 'none',
          title: message,
        });
      }
    },
    async getAuthLink() {
      uni.showLoading()
      const { code, message, data } = await getAuthLink(this.productInfo.platform)
      uni.hideLoading()
      if (code == 200) {
        if (!data.url) {
          uni.showToast({
            icon: 'none',
            title: '未获取到授权链接',
          });
          return
        }
        return this.openApp(data.url)
      } else {
        uni.showToast({
          icon: 'none',
          title: message,
        });
      }
    },
    getPlatformImage(platform) {
      if (!platform) return '';
      const platformMap = {
        'douyin': '/static/image/points/douyin.png',
        'taobao': '/static/image/points/taobao.png',
        'pdd': '/static/image/points/pinduoduo.png',
        'cps_douyin': '/static/image/points/douyin.png',
        'cps_taobao': '/static/image/points/taobao.png',
      };
      return platformMap[platform] || '';
    },
    getProductDetails() {
      getProductDetail(this.id).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.productInfo = res.data || {};
          this.isFavorite = this.productInfo.isCollection == 1
          // 处理轮播图数据，以逗号分隔的字符串转为数组
          if (this.productInfo.imageUrls) {
            this.bannerList = this.productInfo.imageUrls.split(',').filter(url => url.trim());
          } else if (this.productInfo.imageUrl) {
            this.bannerList = [this.productInfo.imageUrl];
          }
        } else {
          uni.showToast({
            icon: 'none',
            title: res.msg,
          });
        }
      })
    },
    goBack() {
      uni.navigateBack();
    },
    goHome() {
      uni.switchTab({
        url: '/pages_im/pages/conversation/conversationList/index' // 假设主页路径，根据实际项目调整
      });
    },
    onSwiperChange(e) {
      this.currentSwiper = e.detail.current;
    },
    previewImage(index) {
      if (this.bannerList.length > 0) {
        uni.previewImage({
          urls: this.bannerList,
          current: index
        });
      }
    },
    handleShare() {
      console.log('点击分享');
    },
    toggleFavorite() {

      getIsCollection(this.id).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.isFavorite = !this.isFavorite;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    async getShareLink(type) {
      const { code, message, data } = await getShareLink(this.id)
      if (code != 200) {
        uni.showToast({
          title: message,
          icon: 'none'
        });
        return
      }
      if (!data[type]) {
        uni.showToast({
          title: '未获取到链接',
          icon: 'none'
        });
        return
      }
      uni.setClipboardData({
        data: data[type] || '',
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      });

    }
  }
};
</script>

<style lang="scss" scoped>
.shop-detail-container {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 悬浮导航栏 */
.nav-float-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 80rpx 30rpx 20rpx;
  /* 适配状态栏高度 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  box-sizing: border-box;
}

.nav-btn-group {
  display: flex;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 30rpx;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-btn-group .nav-btn:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-float-header>.nav-btn {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 轮播图区域 */
.banner-wrap {
  position: relative;
  width: 100%;
  height: 750rpx;
  /* 1:1 比例 */
}

.banner-swiper {
  width: 100%;
  height: 100%;
}

.banner-img {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05)), linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05));
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.custom-indicator {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

/* 商品信息卡片 */
.product-info-card {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16rpx;
}

.price-left {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 24rpx;
  color: #FF5A1F;
  margin-right: 8rpx;
}

.price-symbol {
  font-size: 28rpx;
  color: #FF5A1F;
  font-weight: bold;
}

.price-main {
  font-size: 48rpx;
  color: #FF5A1F;
  font-weight: bold;
}

.price-decimal {
  font-size: 28rpx;
  color: #FF5A1F;
  font-weight: bold;
}

.price-original {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 16rpx;
}

.sales-vol {
  font-size: 24rpx;
  color: #999;
}

.subsidy-tag {
  display: inline-block;
  font-size: 22rpx;
  color: #FF5A1F;
  border: 2rpx solid #FF5A1F;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
  margin-bottom: 20rpx;
  background-color: #FFF2ED;
}

.product-title-wrap {
  display: flex;
  align-items: flex-start;
}

.platform-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
  margin-top: 6rpx;
  flex-shrink: 0;
}

.product-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
  flex: 1;
}

/* 店铺信息卡片 */
.shop-info-card {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.shop-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  background-color: #F5F6F8;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}

.shop-name {
  font-size: 28rpx;
  color: #333;
}

/* 图文详情区域 */
.detail-section {
  background-color: #fff;
  padding: 30rpx 0;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  padding: 0 30rpx 20rpx;
}

.detail-content {
  width: 100%;
}

.detail-img {
  width: 100%;
  display: block;
}

/* 底部安全留白 */
.bottom-spacer {
  height: 120rpx;
}

/* 底部固定操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 40rpx);
  height: 110rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
  box-sizing: content-box;
  z-index: 99;
}

.action-icons {
  display: flex;
  width: 240rpx;
  justify-content: space-around;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon-text {
  font-size: 20rpx;
  color: #666;
  margin-top: 6rpx;
}

.action-btns {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.btn-share,
.btn-buy {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  font-weight: bold;
  padding: 0 20rpx;
  margin: 0;
  border-radius: 0;
}

.btn-share {
  background-color: #fff;
  color: #FF5A1F;
  border: 2rpx solid #FF5A1F;
  border-radius: 40rpx 0 0 40rpx;
  border-right: none;
  flex: 1;
  text-align: center;
}

.btn-buy {
  background: linear-gradient(90deg, #FF7E53 0%, #FF5A1F 100%);
  color: #fff;
  border-radius: 0 40rpx 40rpx 0;
  flex: 1;
  text-align: center;
}

button::after {
  border: none;
}
</style>