mtsd/sqxp-wx/pages/client/product/detail.vue

<template>
  <view class="product-detail-page client-theme">
    <view v-if="pageLoading" class="page-loading-wrap">
      <ClientSkeleton variant="detail" :rows="3" />
    </view>
    <template v-else>
    <view class="detail-fixed-top">
    <!-- 轮播图 -->
    <swiper
      v-if="bannerList.length > 0"
      class="banner-swiper"
      :indicator-dots="bannerList.length > 1"
      :autoplay="bannerList.length > 0"
      :interval="3000"
      :circular="bannerList.length > 1"
    >
      <swiper-item v-for="(banner, index) in bannerList" :key="index">
        <ClientImageLoader
          v-if="banner.mediaType === 'image'"
          :src="banner.fileUrl"
          mode="aspectFill"
          class="banner-image"
        />
        <video v-else :src="banner.fileUrl" controls class="banner-video" />
      </swiper-item>
    </swiper>
    <view v-else class="banner-empty">
      <text class="banner-empty-text">暂无轮播图</text>
    </view>

    <!-- 商品基本信息 -->
    <view class="product-info">
      <view class="price-row">
        <text class="price">¥{{ formatPrice(product?.price) }}</text>
        <text class="unit">/{{ product?.unitName }}</text>
      </view>
      <view class="name-row">
        <text class="name">{{ product?.name }}</text>
      </view>
      <view class="sku-row" v-if="product?.skuCode">
        <text class="sku-label">SKU:</text>
        <text class="sku-code">{{ product.skuCode }}</text>
      </view>
    </view>
    </view>

    <scroll-view scroll-y class="detail-scroll-area" :show-scrollbar="true">
      <view class="detail-scroll-inner">
    <!-- 商品参数 -->
    <view class="params-section" v-if="parameterValues.length > 0">
      <view class="section-title">商品参数</view>
      <view class="params-list">
        <view v-for="param in parameterValues" :key="param.parameterId" class="param-item">
          <text class="param-name">{{ param.parameterName }}</text>
          <text class="param-value">{{ param.paramValue }}</text>
        </view>
      </view>
    </view>

    <!-- 商品详情（富文本） -->
    <view class="detail-section" v-if="detailContent">
      <view class="section-title">商品详情</view>
      <view class="rich-content">
        <rich-text :nodes="detailContent"></rich-text>
      </view>
    </view>

    <!-- 详情图片/视频（运营端配置的详情媒体，展示在富文本下方） -->
    <view class="detail-section" v-if="detailMediaList.length > 0">
      <view class="section-title">详情图片/视频</view>
      <view class="detail-media-list">
        <view v-for="(m, idx) in detailMediaList" :key="m.id || `dm-${idx}`" class="detail-media-item">
          <ClientImageLoader
            v-if="m.contentType === 'image'"
            :src="m.fileUrl"
            mode="widthFix"
            class="detail-media-img"
          />
          <video v-else :src="m.fileUrl" :poster="ossImg(m.thumbnailUrl || '')" controls class="detail-media-video" />
          <text v-if="m.description" class="detail-media-desc">{{ m.description }}</text>
        </view>
      </view>
    </view>

    <!-- 商品评价 -->
    <view class="review-section">
      <view class="section-title" @click="goToReviewList">
        <text>商品评价</text>
        <view class="more-btn">
          <text class="count">({{ reviewStats?.totalCount || 0 }})</text>
          <text class="arrow">›</text>
        </view>
      </view>

      <!-- 评分概览 -->
      <view class="review-overview" v-if="reviewStats">
        <view class="avg-rating">
          <text class="score">{{ reviewStats.avgRating?.toFixed(1) }}</text>
          <text class="label">分</text>
        </view>
        <view class="rating-distribution">
          <view v-for="i in 5" :key="i" class="rating-row">
            <text class="star">{{ 6 - i }}星</text>
            <view class="bar-wrapper">
              <view class="bar" :style="{ width: getBarWidth(6 - i) }"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 评价列表（最新3条） -->
      <view class="review-list" v-if="reviewList.length > 0">
        <view v-for="review in reviewList.slice(0, 3)" :key="review.id" class="review-item">
          <view class="review-header">
            <view class="user-info">
              <text class="username">{{ review.isAnonymous ? '匿名用户' : review.userName }}</text>
              <van-rate :value="review.rating" readonly size="12" />
            </view>
          </view>
          <view class="review-content">
            <text v-if="review.ratingTags" class="tags">{{ formatTags(review.ratingTags) }}</text>
            <text class="content">{{ review.content }}</text>
          </view>
          <view class="review-media" v-if="review.mediaList?.length">
            <ClientImageLoader
              v-for="media in review.mediaList.slice(0, 3)"
              :key="media.id"
              :src="media.fileUrl"
              mode="aspectFill"
              class="media-thumb"
            />
          </view>
          <view class="review-footer">
            <text class="time">{{ formatTime(review.createAt) }}</text>
            <view class="like-btn">
              <text>👍</text>
              <text>{{ review.likeCount || 0 }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="no-review">
        <text>暂无评价</text>
      </view>
    </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-icons">
        <view class="icon-item" hover-class="icon-item--pressed" :hover-stay-time="100" @click="goToHome">
          <text class="icon">🏠</text>
          <text class="icon-text">首页</text>
        </view>
        <view class="icon-item" hover-class="icon-item--pressed" :hover-stay-time="100" @click="goToCart">
          <text class="icon">🛒</text>
          <text class="icon-text">购物车</text>
          <view v-if="cartCount > 0" class="badge">{{ cartCount > 99 ? '99+' : cartCount }}</view>
        </view>
      </view>
      <view class="action-btns">
        <view class="add-cart-btn" hover-class="bar-btn--pressed" :hover-stay-time="100" @click="handleAddToCart">加入购物车</view>
        <view class="buy-btn" hover-class="bar-btn--pressed" :hover-stay-time="100" @click="handleBuyNow">立即购买</view>
      </view>
    </view>

    <!-- 数量选择弹窗 -->
    <ClientTabBar :active="tabBarActive" />

    <van-popup v-model="showQuantityPopup" position="bottom" round>
      <view class="quantity-popup">
        <view class="product-row">
          <ClientImageLoader :src="product?.imageUrl || ''" class="popup-image" />
          <view class="popup-info">
            <text class="popup-name">{{ product?.name }}</text>
            <text class="popup-price">¥{{ formatPrice(product?.price) }}</text>
          </view>
        </view>
        <view class="quantity-row">
          <text class="quantity-label">购买数量</text>
          <view class="quantity-control">
            <view class="qty-btn" @click="decreaseQty">-</view>
            <input v-model="quantity" type="number" class="qty-input" />
            <view class="qty-btn" @click="increaseQty">+</view>
          </view>
        </view>
        <view class="confirm-btn" @click="confirmAction">{{ actionType === 'cart' ? '加入购物车' : '立即购买' }}</view>
      </view>
    </van-popup>
    </template>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useCartStore } from '@/stores/cart'
import { useUserStore } from '@/stores/user'
import { request, parseResponseJson } from '@/utils/request'
import { formatYuan } from '@/utils/format'
import { fetchProductReviews, fetchReviewStatistics } from '@/api/reviewApi'
import ClientTabBar from '@/components/client/client-tab-bar.vue'
import ClientSkeleton from '@/components/client/client-skeleton.vue'
import ClientImageLoader from '@/components/client/client-image-loader.vue'
import { withOssVersion } from '@/utils/ossCache'

const userStore = useUserStore()
const cartStore = useCartStore()

let productId = ''
const product = ref(null)
const bannerList = ref([])
const parameterValues = ref([])
const detailContent = ref('')
const detailMediaList = ref([])
const reviewList = ref([])
const reviewStats = ref(null)
const pageLoading = ref(true)

const showQuantityPopup = ref(false)
const quantity = ref(1)
const actionType = ref('cart')

const cartCount = ref(0)

const tabBarActive = ref('home')

const formatPrice = (yuan) => formatYuan(yuan ?? 0)
const ossImg = withOssVersion

function formatTime(time) {
  if (!time) return ''
  return String(time).slice(0, 10)
}

function formatTags(tags) {
  if (!tags) return ''
  return String(tags)
    .split(',')
    .map((t) => `#${String(t).trim()}`)
    .join(' ')
}

function getBarWidth(star) {
  const total = reviewStats.value?.totalCount || 1
  const count = reviewStats.value?.ratingDistribution?.[String(star)] || 0
  return `${(count / total) * 100}%`
}

function goToHome() {
  uni.switchTab({ url: '/pages/client/home/home' })
}

function goToCart() {
  uni.switchTab({ url: '/pages/client/cart/cart' })
}

function goToReviewList() {
  if (!productId) return
  uni.navigateTo({
    url: `/pages/client/review/list?productId=${productId}&product=${encodeURIComponent(JSON.stringify(product.value || {}))}`
  })
}

function handleAddToCart() {
  actionType.value = 'cart'
  quantity.value = 1
  showQuantityPopup.value = true
}

function handleBuyNow() {
  actionType.value = 'buy'
  quantity.value = 1
  showQuantityPopup.value = true
}

function decreaseQty() {
  if (quantity.value > 1) quantity.value -= 1
}

function increaseQty() {
  quantity.value += 1
}

async function confirmAction() {
  const q = Math.max(1, Number(quantity.value) || 1)
  quantity.value = q
  if (!product.value?.id) return

  if (actionType.value === 'cart') {
    await cartStore.addToCart(product.value, q)
    cartCount.value = cartStore.totalCount
    uni.showToast({ title: '已加入购物车', icon: 'success' })
  } else {
    uni.navigateTo({
      url: `/pages/client/order/create/create?productId=${encodeURIComponent(productId)}&quantity=${q}`
    })
  }
  showQuantityPopup.value = false
}

async function loadProductDetail() {
  if (!productId) return
  const res = await request({ url: `/mini/client/products/${productId}`, method: 'GET' })
  const body = parseResponseJson(res)
  if (body.code !== 200 || !body.data) {
    uni.showToast({ title: body.message || '加载失败', icon: 'none' })
    return
  }
  const d = body.data || {}
  const p = d.product || {}
  product.value = { ...(product.value || {}), ...p }
  bannerList.value = Array.isArray(d.banners) ? d.banners : []
  parameterValues.value = Array.isArray(d.parameterValues) ? d.parameterValues : []
  detailContent.value = p.detailContent || ''
  detailMediaList.value = Array.isArray(d.detailMedia)
    ? d.detailMedia.map((item) => ({
        id: item.id,
        contentType: item.contentType || item.content_type || 'image',
        fileUrl: item.fileUrl || item.file_url || '',
        thumbnailUrl: item.thumbnailUrl || item.thumbnail_url,
        description: item.description,
        sortOrder: item.sortOrder ?? item.sort_order ?? 0
      }))
    : []
}

async function loadReviews() {
  if (!productId) return
  const data = await fetchProductReviews(productId, { page: 1, pageSize: 3 })
  reviewList.value = Array.isArray(data?.list) ? data.list : []
}

async function loadReviewStats() {
  if (!productId) return
  reviewStats.value = await fetchReviewStatistics(productId)
}

async function loadPageData() {
  try {
    await Promise.all([loadProductDetail(), loadReviews(), loadReviewStats()])
    cartCount.value = cartStore.totalCount
  } finally {
    pageLoading.value = false
  }
}

onLoad((options) => {
  pageLoading.value = true
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn) return uni.reLaunch({ url: '/pages/login/login' })
  if (!userStore.isClient) {
    uni.showToast({ title: '请使用客户账号登录', icon: 'none' })
    return setTimeout(() => userStore.navigateToHome(), 1200)
  }

  productId = options?.productId || ''
  if (!productId) {
    pageLoading.value = false
    uni.showToast({ title: '缺少商品ID', icon: 'none' })
    return
  }

  const ft = options?.fromTab
  if (ft === 'home' || ft === 'order' || ft === 'cart' || ft === 'profile') {
    tabBarActive.value = ft
  }

  void loadPageData()
})

onMounted(() => {
  cartCount.value = cartStore.totalCount
})
</script>



<style lang="scss" scoped>
.product-detail-page {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  padding-bottom: calc(280rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(280rpx + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.page-loading-wrap {
  flex: 1;
  min-height: 0;
}

.detail-fixed-top {
  flex-shrink: 0;
}

.detail-scroll-area {
  flex: 1;
  min-height: 0;
  height: 0;
  background: var(--c-bg);
}

.detail-scroll-inner {
  padding-bottom: 40rpx;
}

/* 对齐 sanqiang-client-product-detail-ui-demo.html：banner 区边距与圆角 */
.banner-swiper {
  width: auto;
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 24rpx 32rpx 0;
  border-radius: 28rpx;
  overflow: hidden;
  border: 1rpx solid var(--c-border);
  background: linear-gradient(145deg, #f4fbf8, #dff2e9);
  box-sizing: border-box;

  .banner-image, .banner-video {
    width: 100%;
    height: 100%;
  }
}

.banner-empty {
  width: auto;
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 24rpx 32rpx 0;
  border-radius: 28rpx;
  border: 1rpx solid var(--c-border);
  background: linear-gradient(145deg, #f4fbf8, #dff2e9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  .banner-empty-text {
    font-size: 26rpx;
    color: var(--c-muted);
  }
}

.product-info {
  padding: 24rpx;
  background: var(--c-card);
  border: 1rpx solid var(--c-border);
  border-radius: 28rpx;
  margin: 24rpx 32rpx;
  box-sizing: border-box;

  .price-row {
    display: flex;
    align-items: baseline;
    gap: 8rpx;
    margin-bottom: 16rpx;

    .price {
      font-size: 56rpx;
      color: var(--c-danger);
      font-weight: 700;
      line-height: 1.1;
    }

    .unit {
      font-size: 24rpx;
      color: var(--c-muted);
    }
  }

  .name-row {
    margin-bottom: 12rpx;

    .name {
      font-size: 32rpx;
      color: var(--c-text);
      font-weight: 600;
      line-height: 1.4;
    }
  }

  .sku-row {
    display: flex;
    align-items: center;

    .sku-label {
      font-size: 24rpx;
      color: var(--c-muted);
      margin-right: 8rpx;
    }

    .sku-code {
      font-size: 24rpx;
      color: var(--c-text);
    }
  }
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 24rpx 16rpx;
  font-size: 30rpx;
  color: var(--c-text);
  font-weight: 600;
  background: transparent;
  margin-bottom: 0;
  border-bottom: 1rpx solid #edf5f1;
  box-sizing: border-box;
}

.params-section {
  background: var(--c-card);
  margin: 0 32rpx 24rpx;
  border: 1rpx solid var(--c-border);
  border-radius: 28rpx;
  overflow: hidden;
  box-sizing: border-box;

  .params-list {
    padding: 8rpx 24rpx 24rpx;

    .param-item {
      display: grid;
      grid-template-columns: 184rpx 1fr;
      gap: 16rpx;
      align-items: start;
      padding: 16rpx 0;
      border-top: 1rpx solid #edf5f1;
      box-sizing: border-box;

      &:first-child {
        border-top: none;
        padding-top: 8rpx;
      }

      .param-name {
        width: auto;
        font-size: 26rpx;
        color: var(--c-muted);
      }

      .param-value {
        min-width: 0;
        font-size: 26rpx;
        color: var(--c-text);
        word-break: break-word;
      }
    }
  }
}

.detail-section {
  background: var(--c-card);
  margin: 0 32rpx 24rpx;
  border: 1rpx solid var(--c-border);
  border-radius: 28rpx;
  overflow: hidden;
  box-sizing: border-box;

  .rich-content {
    margin: 0 24rpx 24rpx;
    padding: 20rpx;
    font-size: 26rpx;
    line-height: 1.6;
    color: #33423c;
    background: #f8fcfa;
    border: 1rpx solid #e8f3ee;
    border-radius: 20rpx;
    box-sizing: border-box;
  }

  .detail-media-list {
    padding: 0 24rpx 16rpx;
  }

  .detail-media-item {
    margin-top: 16rpx;
    border-radius: 20rpx;
    overflow: hidden;
    border: 1rpx solid var(--c-border);
    background: #f8fcfa;
  }

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

  .detail-media-video {
    width: 100%;
    height: 420rpx;
    display: block;
    background: #000;
  }

  .detail-media-desc {
    display: block;
    padding: 16rpx 20rpx 20rpx;
    font-size: 24rpx;
    color: var(--c-muted);
    line-height: 1.5;
  }
}

.review-section {
  background: var(--c-card);
  margin: 0 32rpx 24rpx;
  border: 1rpx solid var(--c-border);
  border-radius: 28rpx;
  overflow: hidden;
  box-sizing: border-box;

  .section-title {
    .more-btn {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: var(--c-muted);
      font-weight: 400;

      .arrow {
        margin-left: 8rpx;
        font-size: 28rpx;
      }
    }
  }

  .review-overview {
    display: flex;
    padding: 0 24rpx 20rpx;

    .avg-rating {
      display: flex;
      align-items: baseline;
      padding-right: 24rpx;
      border-right: 1rpx solid #edf5f1;

      .score {
        font-size: 48rpx;
        color: var(--c-barley-yellow);
        font-weight: 700;
      }

      .label {
        font-size: 24rpx;
        color: var(--c-muted);
        margin-left: 8rpx;
      }
    }

    .rating-distribution {
      flex: 1;
      margin-left: 24rpx;

      .rating-row {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;

        .star {
          font-size: 22rpx;
          color: #606266;
          width: 60rpx;
        }

        .bar-wrapper {
          flex: 1;
          height: 12rpx;
          background: #ebeef5;
          border-radius: 6rpx;
          margin: 0 12rpx;
          overflow: hidden;

          .bar {
            height: 100%;
            background: var(--c-barley-yellow);
            border-radius: 6rpx;
          }
        }
      }
    }
  }

  .review-list {
    padding: 0 24rpx 20rpx;

    .review-item {
      padding: 16rpx 0;
      border-top: 1rpx solid #f5f7fa;

      .review-header {
        margin-bottom: 12rpx;

        .user-info {
          display: flex;
          align-items: center;
          gap: 16rpx;

          .username {
            font-size: 26rpx;
            color: var(--c-text);
          }
        }
      }

      .review-content {
        .tags {
          display: inline-block;
          font-size: 24rpx;
          color: var(--c-brand-green);
          background: var(--c-brand-green-soft);
          padding: 4rpx 12rpx;
          border-radius: 999rpx;
          margin-right: 12rpx;
        }

        .content {
          font-size: 26rpx;
          color: #606266;
          line-height: 1.5;
        }
      }

      .review-media {
        display: flex;
        gap: 12rpx;
        margin-top: 12rpx;

        .media-thumb {
          width: 128rpx;
          height: 128rpx;
          border-radius: 16rpx;
          border: 1rpx solid var(--c-border);
        }
      }

      .review-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12rpx;

        .time {
          font-size: 22rpx;
          color: #c0c4cc;
        }

        .like-btn {
          display: flex;
          align-items: center;
          gap: 6rpx;
          font-size: 22rpx;
          color: #909399;
        }
      }
    }
  }

  .no-review {
    padding: 40rpx;
    text-align: center;
    color: #909399;
    font-size: 26rpx;
  }
}

/* 对齐 demo .bar：顶部分割 + 图标区 + 双按钮 */
.bottom-bar {
  position: fixed;
  bottom: calc(100rpx + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 520;
  display: flex;
  align-items: center;
  min-height: 112rpx;
  padding: 20rpx 24rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: #fff;
  border-top: 1rpx solid var(--c-border);
  gap: 16rpx;

  .action-icons {
    display: flex;
    gap: 8rpx;
    flex-shrink: 0;

    .icon-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 80rpx;
      padding: 4rpx 8rpx;

      .icon {
        font-size: 36rpx;
        line-height: 1;
      }

      .icon-text {
        font-size: 22rpx;
        color: var(--c-muted);
        margin-top: 4rpx;
      }

      .badge {
        position: absolute;
        top: -4rpx;
        right: 4rpx;
        min-width: 28rpx;
        height: 28rpx;
        padding: 0 6rpx;
        background: var(--c-danger);
        color: #fff;
        font-size: 18rpx;
        border-radius: 14rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .action-btns {
    flex: 1;
    display: flex;
    gap: 16rpx;
    min-width: 0;

    .add-cart-btn, .buy-btn {
      flex: 1;
      min-height: 84rpx;
      border-radius: 42rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 600;
    }

    .add-cart-btn {
      background: var(--c-accent-orange);
      color: #fff;
    }

    .buy-btn {
      background: var(--c-brand-green);
      color: #fff;
    }
  }
}

.icon-item--pressed {
  opacity: 0.85;
}

.bar-btn--pressed {
  opacity: 0.92;
}

.quantity-popup {
  padding: 30rpx;

  .product-row {
    display: flex;
    margin-bottom: 30rpx;

    .popup-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
      background: #f5f7fa;
    }

    .popup-info {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .popup-name {
        font-size: 28rpx;
        color: var(--c-text);
        margin-bottom: 12rpx;
      }

      .popup-price {
        font-size: 36rpx;
        color: var(--c-danger);
        font-weight: bold;
      }
    }
  }

  .quantity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-top: 1rpx solid #ebeef5;

    .quantity-label {
      font-size: 28rpx;
      color: var(--c-text);
    }

    .quantity-control {
      display: flex;
      align-items: center;

      .qty-btn {
        width: 60rpx;
        height: 60rpx;
        background: #f5f7fa;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        color: #606266;
      }

      .qty-input {
        width: 80rpx;
        height: 60rpx;
        text-align: center;
        font-size: 28rpx;
        background: #f5f7fa;
        margin: 0 12rpx;
        border-radius: 8rpx;
      }
    }
  }

  .confirm-btn {
    height: 88rpx;
    line-height: 88rpx;
    background: var(--c-brand-green);
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    border-radius: 44rpx;
    margin-top: 30rpx;
  }
}
</style>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f5f8f7;
}
</style>