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

<template>
  <view class="product-view-page client-theme client-subpage">
    <view v-if="loading" class="loading">
      <ClientSkeleton variant="detail" :rows="2" />
    </view>
    <view v-else-if="!product" class="empty">商品不存在</view>
    <view v-else class="product-view-inner">
      <view class="client-subpage-hero product-view-hero">
        <text class="client-subpage-hero__title">商品详情</text>
        <text class="client-subpage-hero__sub">{{ product.name }}</text>
      </view>
      <view class="detail-fixed-top">
        <swiper
          v-if="bannerList.length > 0"
          class="banner-swiper"
          :indicator-dots="bannerList.length > 1"
          :autoplay="true"
          :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">/{{ formatMeasureText(product.measureValue, product.unitName) }}</text>
          </view>
          <text class="name">{{ product.name }}</text>
          <text class="spec">{{ formatMeasureText(product.measureValue, product.unitName) }}</text>
        </view>
      </view>

      <scroll-view scroll-y class="detail-scroll-area" :show-scrollbar="true">
        <view class="detail-scroll-inner">
          <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="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="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>
      </scroll-view>
    </view>

    <view v-if="product" class="bottom-bar">
      <view class="action-left" @click="goToCart">
        <text class="cart-icon">🛒</text>
        <view v-if="cartCount > 0" class="badge">{{ cartCount > 99 ? '99+' : cartCount }}</view>
      </view>
      <view class="action-btns">
        <view class="add-cart-btn" @click="openQuantityPopup('cart')">加入购物车</view>
        <view class="buy-btn" @click="openQuantityPopup('buy')">立即购买</view>
      </view>
    </view>

    <ClientTabBar :active="tabBarActive" />

    <van-popup :show="showQuantityPopup" position="bottom" round @update:show="showQuantityPopup = $event">
      <view class="quantity-popup">
        <view class="product-row">
          <ClientImageLoader :src="product?.imageUrl || IMG_DEFAULT_PRODUCT" class="popup-image" mode="aspectFill" />
          <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>
  </view>
</template>



<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { request, parseResponseJson } from '@/utils/request'
import { useCartStore } from '@/stores/cart'
import { formatYuan } from '@/utils/format'
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 { IMG_DEFAULT_PRODUCT } from '@/utils/staticAsset'
import { withOssVersion } from '@/utils/ossCache'

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

const loading = ref(false)
const product = ref(null)
const bannerList = ref([])
const parameterValues = ref([])
const detailContent = ref('')
const detailMediaList = ref([])

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

const tabBarActive = ref('home')

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

function formatMeasureText(measureValue, unitName) {
  const unitText = (unitName || '').trim()
  if (measureValue == null || measureValue === '') {
    return unitText ? `- ${unitText}` : '-'
  }
  const num = Number(measureValue)
  if (!Number.isNaN(num)) {
    const measureText = String(num).replace(/\.?0+$/, '')
    return unitText ? `${measureText} ${unitText}` : measureText
  }
  const measureText = String(measureValue).trim()
  return unitText ? `${measureText} ${unitText}` : measureText || '-'
}

async function loadProductDetail(productId) {
  loading.value = true
  try {
    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' })
      product.value = null
      return
    }
    product.value = body.data.product || body.data || null
    bannerList.value = Array.isArray(body.data.banners) ? body.data.banners : []
    parameterValues.value = Array.isArray(body.data.parameterValues) ? body.data.parameterValues : []
    detailContent.value = product.value?.detailContent || ''
    detailMediaList.value = Array.isArray(body.data.detailMedia)
      ? body.data.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
        }))
      : []
  } finally {
    loading.value = false
  }
}

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

function openQuantityPopup(type) {
  actionType.value = type
  quantity.value = 1
  showQuantityPopup.value = true
}

function decreaseQty() {
  const q = Number(quantity.value) || 1
  if (q > 1) quantity.value = q - 1
}

function increaseQty() {
  const q = Number(quantity.value) || 1
  quantity.value = q + 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' })
    showQuantityPopup.value = false
    return
  }
  showQuantityPopup.value = false
  uni.navigateTo({ url: `/pages/client/order/create/create?productId=${product.value.id}&quantity=${q}` })
}

onLoad((options) => {
  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)
  }

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

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

  cartCount.value = cartStore.totalCount
  void loadProductDetail(productId)
})
</script>



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

.product-view-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  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: 24rpx;
}

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

.empty {
  padding: 40rpx;
  text-align: center;
  color: var(--c-muted);
  font-size: 26rpx;
}

.banner-swiper {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  background: #fff;

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

.banner-empty {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  background: #f8fcfa;
  display: flex;
  align-items: center;
  justify-content: center;

  .banner-empty-text {
    font-size: 28rpx;
    color: #9ba8a2;
  }
}

.product-info {
  margin-top: 12rpx;
  background: var(--c-card);
  padding: 20rpx;
  border: 1rpx solid var(--c-border);
  border-radius: var(--c-radius-card);
  margin-left: 32rpx;
  margin-right: 32rpx;

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

  .price {
    font-size: 44rpx;
    color: var(--c-danger);
    font-weight: 700;
  }

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

  .name {
    display: block;
    font-size: 32rpx;
    color: var(--c-text);
    font-weight: 600;
  }

  .spec {
    display: block;
    margin-top: 10rpx;
    font-size: 26rpx;
    color: var(--c-muted);
  }
}

.section-title {
  padding: 18rpx 24rpx;
  font-size: 28rpx;
  color: var(--c-text);
  font-weight: 700;
  background: transparent;
}

.detail-section {
  margin-top: 12rpx;
  background: var(--c-card);
  border: 1rpx solid var(--c-border);
  border-radius: var(--c-radius-card);
  overflow: hidden;
  margin-left: 32rpx;
  margin-right: 32rpx;

  .rich-content {
    padding: 0 24rpx 20rpx;
    font-size: 28rpx;
    line-height: 1.6;
    color: #33423c;
  }

  .detail-media-list {
    padding-bottom: 8rpx;
  }

  .detail-media-item {
    border-top: 1rpx solid rgba(220, 235, 228, 0.65);
  }

  .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 24rpx 24rpx;
    font-size: 24rpx;
    color: var(--c-muted);
    line-height: 1.5;
  }
}

.params-section {
  margin-top: 12rpx;
  background: var(--c-card);
  border: 1rpx solid var(--c-border);
  border-radius: var(--c-radius-card);
  overflow: hidden;
  margin-left: 32rpx;
  margin-right: 32rpx;

  .params-list {
    padding: 0 24rpx 20rpx;
  }

  .param-item {
    display: flex;
    padding: 10rpx 0;
    border-bottom: 1rpx solid rgba(220, 235, 228, 0.65);

    &:last-child {
      border-bottom: none;
    }
  }

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

  .param-value {
    flex: 1;
    font-size: 26rpx;
    color: var(--c-text);
  }
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(100rpx + env(safe-area-inset-bottom, 0px));
  z-index: 520;
  background: transparent;
  border-top: none;
  padding: 0 32rpx 14rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  box-sizing: border-box;
}

.bottom-bar::before {
  content: '';
  position: absolute;
  left: 32rpx;
  right: 32rpx;
  bottom: 14rpx;
  height: 116rpx;
  border-radius: 36rpx;
  background: linear-gradient(145deg, #ffffff, #f5fbf8);
  border: 1rpx solid #d9ebe3;
  box-shadow: var(--c-shadow-soft);
}

.action-left {
  position: relative;
  width: 92rpx;
  height: 92rpx;
  border-radius: 46rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 10rpx;

  .cart-icon {
    font-size: 44rpx;
  }

  .badge {
    position: absolute;
    top: -6rpx;
    right: -6rpx;
    min-width: 32rpx;
    height: 32rpx;
    padding: 0 6rpx;
    background: #ee0a24;
    color: #fff;
    font-size: 20rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.action-btns {
  position: relative;
  flex: 1;
  display: flex;
  height: 80rpx;
  border-radius: 40rpx;
  overflow: hidden;
  margin-right: 10rpx;
}

.add-cart-btn, .buy-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.add-cart-btn {
  background: #fff7e6;
  color: #ff976a;
}

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

.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: #303133;
        margin-bottom: 12rpx;
      }

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

  .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: #303133;
    }

    .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: 90rpx;
        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">
/* 与首页一致：禁止页面级滚动，仅中间 scroll-view 滚动 */
page {
  height: 100%;
  overflow: hidden;
  background-color: #f5f8f7;
}
</style>