bandhuBuy-uniapp/src/pages/productDetail/productDetail.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<script lang="ts" setup>
// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { myFavoriteAdd, myFavoriteDel } from '@/api/mine'
import { preOrder as _preOrder } from '@/api/order'
import { carousel, getDetail, pinkList } from '@/api/product'
import { requireLogin } from '@/hooks/usePageAuth'
import { t } from '@/locale'
import { formatNumber } from '@/utils/index'
import { goBack, toPage } from '@/utils/page'
import { toast } from '@/utils/toast'
import CustomTooltip from './components/CustomTooltip.vue'
import NotificationCarousel from './components/NotificationCarousel.vue'

defineOptions({
  name: 'ProductDetail', // 商品详情
})

// 获取屏幕边界到安全区域距离
const systemInfo = uni.getSystemInfoSync()
const safeAreaInsets = systemInfo.safeAreaInsets

// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)
function goHome() {
  uni.switchTab({
    url: '/pages/index/index',
  })
}
// 添加导航栏背景色变量
const navBgColor = ref('transparent')
const changeNavbarThreshold = 300 // 滚动到这个高度时改变导航栏颜色

const showTip = ref(false)

onPageScroll((e) => {
  // 根据滚动高度改变导航栏背景色
  if (e.scrollTop > changeNavbarThreshold) {
    navBgColor.value = '#ffffff'
  }
  else {
    navBgColor.value = 'transparent'
  }
})
const productId = ref('') // 商品id
const isPageLoading = ref(true) // 页面加载状态
const detail = ref<any>({
  sliderImage: '',
  flatPattern: '',
})
const pinkInfo = ref<any>([])
// 添加通知轮播数据
const notifications = ref([
  { id: 1, name: 'Aamir Khan', time: '10s' },
  { id: 2, name: 'John Smith', time: '30s' },
  { id: 3, name: 'Maria Garcia', time: '1m' },
])
async function getCarousel() {
  const res = await carousel(productId.value)
  notifications.value = res.data
}
// 点击页面任意地方隐藏提示
function handlePageClick() {
  if (showTip.value) {
    showTip.value = false
  }
}

// 生命周期钩子
onMounted(() => {
  showTip.value = true // 显示提示
})

// 搜索结果
// 轮播图
const current = ref<number>(0)

// 拼团类型 join-加团 open-开团
const groupType = ref('open')
const pinkId = ref('') // 拼团id
const joinOrderId = ref('') // 加团的拼团-订单id

// sku 逻辑
const showSku = ref(false)
function openSku(type: string, id?: string, pinkOrderId?: string) {
  groupType.value = type

  // 区分不同的入团场景
  if (type === 'join') {
    if (id && pinkOrderId) {
      // 从拼团列表点击入团 - 加入指定拼团
      pinkId.value = id
      joinOrderId.value = pinkOrderId
    }
    else {
      // 从底部按钮点击入团 - 清空之前的参数，避免参数混乱
      pinkId.value = ''
      joinOrderId.value = ''
    }
  }
  else {
    // 开团场景 - 清空拼团相关参数
    pinkId.value = ''
    joinOrderId.value = ''
  }

  showSku.value = true
}
const formData = ref({
  productNum: 1,
  selectedSpecs: {}, // 存储选中的规格 { 颜色: '红色', 尺寸: 'M' }
})

const matchedAttrValue = ref<any>({})

// 计算选中规格的文案
const selectedSpecsText = computed(() => {
  if (!formData.value.selectedSpecs || Object.keys(formData.value.selectedSpecs).length === 0) {
    return ''
  }

  // 按照attr的顺序生成文案
  const specTexts = []
  if (detail.value.attr) {
    detail.value.attr.forEach((attr) => {
      const selectedValue = formData.value.selectedSpecs[attr.attrName]
      if (selectedValue) {
        specTexts.push(`${attr.attrName}: ${selectedValue}`)
      }
    })
  }

  return specTexts.length > 0 ? ` ${specTexts.join(',')}` : ''
})
// 选择规格方法
function selectSpec(attrName, specValue) {
  formData.value.selectedSpecs[attrName] = specValue

  // 按照attr的顺序重新构建对象
  const orderedSpecs = {}
  if (detail.value.attr) {
    detail.value.attr.forEach((attr) => {
      if (formData.value.selectedSpecs[attr.attrName]) {
        orderedSpecs[attr.attrName] = formData.value.selectedSpecs[attr.attrName]
      }
    })
  }

  // 打印当前选中的规格
  const selectedSpecsJson = JSON.stringify(orderedSpecs)
  console.log('当前选中规格:', selectedSpecsJson)

  // 检查是否所有规格都已选中
  const totalAttrs = detail.value.attr ? detail.value.attr.length : 0
  const selectedAttrs = Object.keys(orderedSpecs).length

  if (selectedAttrs === totalAttrs && totalAttrs > 0) {
    // 所有规格都选中了，匹配 attrValue
    matchedAttrValue.value = findMatchingAttrValue(orderedSpecs)
    if (matchedAttrValue.value) {
      console.log('匹配到的规格组合:', matchedAttrValue.value)
      console.log('对应的图片:', matchedAttrValue.value.image)
    }
    else {
      console.log('未找到匹配的规格组合')
    }
  }
}

// 匹配 attrValue 中对应的规格组合
function findMatchingAttrValue(selectedSpecs) {
  if (!detail.value.attrValue || !Array.isArray(detail.value.attrValue)) {
    return null
  }

  return detail.value.attrValue.find((attrValue) => {
    // 将 attrValue 的规格转换为对象进行比较
    const attrValueSpecs = {}
    if (attrValue.suk) {
      // 假设 suk 格式类似 "红色,M" 或者其他分隔符
      const sukParts = attrValue.suk.split(',')
      if (detail.value.attr && sukParts.length === detail.value.attr.length) {
        detail.value.attr.forEach((attr, index) => {
          attrValueSpecs[attr.attrName] = sukParts[index].trim()
        })
      }
    }

    // 比较选中的规格和当前 attrValue 的规格是否完全匹配
    const selectedKeys = Object.keys(selectedSpecs)
    const attrValueKeys = Object.keys(attrValueSpecs)

    if (selectedKeys.length !== attrValueKeys.length) {
      return false
    }

    return selectedKeys.every(key => selectedSpecs[key] === attrValueSpecs[key])
  })
}
// 查询商品详情
async function queryDetail() {
  const res = await getDetail({ id: productId.value })
  console.log(res)
  detail.value = res.data
  // 默认选择第一个规格
  setDefaultSpecs()
  paging.value.complete()
}

// 查询商品拼团信息
async function queryPinkInfo() {
  const res = await pinkList({ cid: detail.value.cid })
  if (res.code === '200') {
    const result = []
    // 循环截取：每次从 i 开始，取 maxLength 个元素
    for (let i = 0; i < res.data.list.length; i += 3) {
      const subArr = res.data.list.slice(i, i + 3)
      result.push(subArr)
    }
    console.log(result)

    pinkInfo.value = result
  }
}

// 设置默认规格选择
function setDefaultSpecs() {
  if (detail.value.attr && detail.value.attr.length > 0) {
    const defaultSpecs = {}

    // 为每个规格属性选择第一个值
    detail.value.attr.forEach((attr) => {
      if (attr.attrImgValues && attr.attrImgValues.length > 0) {
        defaultSpecs[attr.attrName] = attr.attrImgValues[0].name
      }
    })

    // 更新选中的规格
    formData.value.selectedSpecs = defaultSpecs

    // 按照attr的顺序重新构建对象
    const orderedSpecs = {}
    detail.value.attr.forEach((attr) => {
      if (formData.value.selectedSpecs[attr.attrName]) {
        orderedSpecs[attr.attrName] = formData.value.selectedSpecs[attr.attrName]
      }
    })

    // 匹配对应的规格组合
    matchedAttrValue.value = findMatchingAttrValue(orderedSpecs)
    if (matchedAttrValue.value) {
      console.log('默认选中规格:', JSON.stringify(orderedSpecs))
      console.log('默认匹配到的规格组合:', matchedAttrValue.value)
      console.log('默认对应的图片:', matchedAttrValue.value.image)
    }
  }
}

// 收藏/取消收藏
async function toggleFavorite() {
  if (!requireLogin()) {
    return
  }

  try {
    if (detail.value.favoriteFlag) {
      // 取消收藏
      const res = await myFavoriteDel({ id: detail.value.favoriteId })
      if (res.code === '200') {
        await queryDetail()
        toast.success(t('productDetail.unfavoriteSuccess'))
      }
    }
    else {
      // 添加收藏
      const res = await myFavoriteAdd({ productIdList: [productId.value] })
      if (res.code === '200') {
        await queryDetail() // 重新获取详情，更新 favoriteId
        toast.success(t('productDetail.favoriteSuccess'))
      }
    }
  }
  catch (error) {
    console.error('收藏操作失败:', error)
  }
}
const loading = ref<boolean>(false)
// 预下单
async function preOrder() {
  if (!requireLogin()) {
    return
  }
  loading.value = true
  try {
    const data = {
      orderDetails: {
        attrValueId: matchedAttrValue.value.id,
        productId: productId.value,
        cid: detail.value.cid,
        productNum: formData.value.productNum,
      },
      preOrderType: 'buyNow',
    }
    const res = await _preOrder(data)
    if (res.code === '200') {
      showSku.value = false
      toPage(
        {
          url: '/pages/productDetail/checkOut',
          params: {
            preOrderId: res.data,
            joinOrderId: joinOrderId.value,
            pinkId: pinkId.value,
            cid: detail.value.cid,
            groupType: groupType.value,
          },
        },
      )
    }
  }
  finally {
    loading.value = false
  }
}

// 商品详情初始化
onLoad((options) => {
  productId.value = options.productId || ''
})
onShow(async () => {
  try {
    isPageLoading.value = true
    getCarousel()
    await queryDetail()
    await queryPinkInfo()
  }
  finally {
    isPageLoading.value = false
  }
})
</script>

<template>
  <z-paging ref="paging" :use-page-scroll="!showSku" refresher-only @on-refresh="queryDetail" @click="handlePageClick">
    <wd-navbar :bordered="false" safe-area-inset-top fixed :left-arrow="false" :custom-style="`background: ${navBgColor}; transition: background 0.3s;`" custom-class="h-auto!">
      <template #title>
        <view class="box-border h-full flex items-center justify-between p-24rpx">
          <image :src="`/static/icons/left-icon${navBgColor === '#ffffff' ? '-tr' : ''}.png`" class="h-56rpx w-56rpx" @click="() => goBack()" />
          <image :src="`/static/icons/share-icon${navBgColor === '#ffffff' ? '-tr' : ''}.png`" class="h-56rpx w-56rpx" @click="() => goBack()" />
        </view>
      </template>
    </wd-navbar>

    <!-- 页面加载时显示骨架屏 -->
    <template v-if="isPageLoading">
      <!-- 轮播图骨架屏 -->
      <wd-skeleton
        :row-col="[{ height: '750rpx' }]"
        animation="gradient"
      />

      <!-- 价格区域骨架屏 -->
      <view class="relative -top-24rpx">
        <view class="rounded-t-24rpx bg-white px-24rpx pb-24rpx pt-18rpx">
          <wd-skeleton
            :row-col="[
              { width: '200rpx', height: '40rpx' }, // 价格标签
              { width: '300rpx', height: '60rpx', marginTop: '12rpx' }, // 价格数值
              { width: '150rpx', height: '32rpx', marginTop: '16rpx' }, // 销量
            ]"
            animation="gradient"
          />
        </view>
        <view class="bg-white px-24rpx pb-24rpx pt-20rpx">
          <wd-skeleton
            :row-col="[
              { width: '100%', height: '60rpx' }, // 商品标题
              { width: '200rpx', height: '40rpx', marginTop: '16rpx' }, // 规格选择
            ]"
            animation="gradient"
          />
        </view>
      </view>

      <!-- 拼团规则骨架屏 -->
      <view class="mb-20rpx bg-white p-24rpx">
        <wd-skeleton
          :row-col="[
            { width: '200rpx', height: '40rpx' }, // 标题
            { width: '100%', height: '200rpx', marginTop: '20rpx' }, // 图片
          ]"
          animation="gradient"
        />
      </view>

      <!-- 拼团信息骨架屏 -->
      <view class="mb-20rpx bg-white px-24rpx pt-24rpx">
        <wd-skeleton
          :row-col="[
            { width: '200rpx', height: '40rpx' }, // 标题
            // 拼团列表项
            [
              [
                { width: '56rpx', height: '56rpx', type: 'circle' },
                { width: '56rpx', height: '56rpx', type: 'circle', marginLeft: '8rpx' },
                { width: '56rpx', height: '56rpx', type: 'circle', marginLeft: '8rpx' },
              ],
              { width: '200rpx', height: '28rpx', marginLeft: '16rpx' },
              { width: '120rpx', height: '60rpx', marginLeft: 'auto' },
            ],
            [
              [
                { width: '56rpx', height: '56rpx', type: 'circle' },
                { width: '56rpx', height: '56rpx', type: 'circle', marginLeft: '8rpx' },
              ],
              { width: '200rpx', height: '28rpx', marginLeft: '16rpx' },
              { width: '120rpx', height: '60rpx', marginLeft: 'auto' },
            ],
          ]"
          animation="gradient"
        />
      </view>

      <!-- 商品详情骨架屏 -->
      <view class="bg-white p-24rpx">
        <wd-skeleton
          :row-col="[
            { width: '200rpx', height: '40rpx' }, // 标题
            { width: '100%', height: '400rpx', marginTop: '20rpx' }, // 详情图1
            { width: '100%', height: '400rpx', marginTop: '20rpx' }, // 详情图2
            { width: '100%', height: '400rpx', marginTop: '20rpx' }, // 详情图3
          ]"
          animation="gradient"
        />
      </view>
    </template>

    <!-- 实际内容 -->
    <template v-else>
      <view class="relative">
        <wd-swiper
          v-model:current="current" :list="detail.sliderImage.split(',')" autoplay height="750rpx"
          custom-indicator-class="bottom-40rpx!" :indicator="{ type: 'fraction' }" indicator-position="bottom-right"
          image-mode="aspectFit"
        />
        <NotificationCarousel
          :notifications="notifications"
          :top="`${safeAreaInsets?.top + 52}px`"
        />
      </view>
      <view class="relative -top-24rpx">
        <view
          class="flex items-center justify-between rounded-t-24rpx from-[#FF3779] to-[#FF334A] bg-gradient-to-br px-24rpx pb-24rpx pt-18rpx text-white"
        >
          <view>
            <view class="mb-12rpx flex items-baseline">
              <text class="text-28rpx">
                {{ $t('productDetail.price') }}
              </text>
              <view class="ml-8rpx rounded-t-18rpx rounded-br-18rpx bg-#202221 px-12rpx text-24rpx">
                {{ detail.people || 0 }}GB
              </view>
            </view>
            <view>
              <text class="text-48rpx">
                <text class="text-28rpx">
                  ৳
                </text>{{ formatNumber(detail.price) }}
              </text>
              <text class="ml-22rpx text-28rpx line-through">
                ৳{{ formatNumber(detail.otPrice) }}
              </text>
            </view>
          </view>
          <text class="text-28rpx">
            {{ t('productDetail.sold', [detail.ficti]) }}
          </text>
        </view>
        <view class="bg-white px-24rpx pb-24rpx pt-20rpx text-32rpx">
          <view class="line-clamp-2font-bold mb-16rpx">
            {{ detail.storeName }}
          </view>
          <view class="flex items-center justify-between" @click="openSku('open')">
            <view>
              <text class="text-28rpx text-#757575">
                {{ selectedSpecsText }}
              </text>
            </view>
            <wd-icon name="arrow-right" color="#7D7D7D" size="36rpx" />
          </view>
        </view>
      </view>
      <view class="mb-20rpx bg-white p-24rpx">
        <view class="mb-20rpx flex items-center justify-between">
          <view
            class="flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty"
          >
            <text class="ml-10rpx text-32rpx">
              {{ $t('productDetail.groupRules') }}
            </text>
          </view>
          <view class="flex items-center" @click="toPage({ url: '/pages/webLink/webLink', params: { title: $t('productDetail.viewRules'), link: 'http://' } })">
            <text class="mr-8rpx text-24rpx text-#3A444C">
              {{ $t('productDetail.viewRules') }}
            </text>
            <wd-icon name="arrow-right" color="#7D7D7D" size="24rpx" />
          </view>
        </view>
        <image src="/static/images/buy-flow.png" class="w-full" mode="widthFix" />
      </view>
      <view v-if="pinkInfo && pinkInfo.length" class="mb-20rpx bg-white px-24rpx pt-24rpx">
        <view
          class="mb-20rpx flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty"
        >
          <text class="ml-10rpx text-32rpx">
            {{ $t('productDetail.ongoingGroup') }}
          </text>
        </view>
        <swiper
          autoplay
          vertical
          circular
          class="py-10rpx"
          :style="{ height: pinkInfo[0].length <= 3 ? `${pinkInfo[0].length * 80}rpx` : '240rpx' }"
        >
          <swiper-item v-for="(list, y) in pinkInfo" :key="y">
            <view class="flex flex-col gap-24rpx">
              <view v-for="(item, index) in list" :key="index" class="flex items-center justify-between">
                <view class="flex items-center">
                  <view>
                    <!-- 头像组 最多五个 -->
                    <view class="mr-16rpx min-w-220rpx flex items-center">
                      <view
                        v-for="(e, i) in item.successAvatar.slice(0, 5)"
                        :key="i"
                        :style="{ marginLeft: i !== 0 ? '-20rpx' : '0', zIndex: 10 - i }"
                        class="h-56rpx w-56rpx overflow-hidden border-2rpx border-white rounded-full border-solid"
                      >
                        <image :src="e ? e : '/static/images/default-avatar.png'" class="h-full w-full" mode="aspectFill" />
                      </view>
                    </view>
                  </view>
                  <view>
                    <view class="text-28rpx">
                      {{ $t('productDetail.need') }}
                      <text class="text-[var(--wot-color-theme)]">
                        {{ item.totalNum - item.remainNum }}
                      </text>
                      {{ $t('productDetail.more') }}
                    </view>
                  </view>
                </view>
                <wd-button size="small" @click="openSku('join', item.id, item.orderId)">
                  {{ $t('productDetail.joinGroup') }}
                </wd-button>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="bg-white p-24rpx">
        <view
          class="mb-20rpx flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty"
        >
          <text class="ml-10rpx text-32rpx">
            {{ $t('productDetail.details') }}
          </text>
        </view>
        <view v-for="i in detail.flatPattern.split(',')" :key="i">
          <image
            :src="i"
            mode="widthFix"
            class="w-full"
          />
        </view>
      </view>
    </template>

    <!-- 底部按钮区域 -->
    <template #bottom>
      <view class="flex bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
        <view class="mr-30rpx flex flex-1 items-center justify-around gap-20rpx">
          <view class="flex flex-col items-center justify-center">
            <image
              src="/static/icons/go-home.png"
              class="h-40rpx w-40rpx"
              @click="goHome"
            />
            <text class="text-18rpx text-#757575">
              {{ $t('productDetail.home') }}
            </text>
          </view>
          <view class="flex flex-col items-center justify-center" @click="toggleFavorite">
            <image
              v-if="detail.favoriteFlag"
              src="/static/icons/favorite-active.png"
              class="h-40rpx w-40rpx"
            />
            <image
              v-else
              src="/static/icons/favorite.png"
              class="h-40rpx w-40rpx"
            />
            <text class="text-18rpx text-#757575">
              {{ $t('productDetail.favorite') }}
            </text>
          </view>
        </view>
        <view class="flex items-center justify-end text-32rpx">
          <view class="relative">
            <view class="rounded-l-full bg-#2F2D31 px-34rpx py-18rpx text-white" @click="openSku('open')">
              {{ $t('productDetail.openGroup') }}
            </view>
            <CustomTooltip
              v-model:visible="showTip"
            />
          </view>
          <view class="rounded-r-full bg-[var(--wot-color-theme)] px-34rpx py-18rpx text-white" @click="openSku('join')">
            {{ $t('productDetail.joinGroup') }}
          </view>
        </view>
      </view>
    </template>
  </z-paging>
  <wd-action-sheet v-model="showSku" :z-index="9999">
    <view class="px-24rpx">
      <view class="mb-16rpx flex items-center gap-24rpx border-b-1 border-b-color-#e8e8e8 border-b-solid py-24rpx">
        <image
          :src="matchedAttrValue.image || detail?.image"
          class="h-160rpx w-160rpx shrink-0"
          mode="aspectFit"
        />
        <view class="flex-1">
          <view class="line-clamp-2 mb-32rpx text-28rpx">
            {{ detail.storeName }}
          </view>
          <view class="flex items-baseline">
            <view class="text-#FF0010">
              <text class="text-28rpx">
                ৳
              </text>
              <text class="text-48rpx">
                {{ formatNumber(matchedAttrValue.price || 0) }}
              </text>
            </view>
            <view class="ml-20rpx text-28rpx text-#787878 line-through">
              ৳{{ formatNumber(matchedAttrValue.otPrice || 0) }}
            </view>
          </view>
        </view>
      </view>
      <view v-for="i in detail.attr" :key="i.id" class="mb-24rpx border-b-1 border-b-color-#e8e8e8 border-b-solid pb-40rpx">
        <view class="mb-12rpx text-32rpx">
          {{ i.attrName }}
        </view>
        <view class="grid grid-cols-4 gap-20rpx">
          <view v-for="(e, j) in i.attrImgValues" :key="j" class="flex flex-col justify-end">
            <view
              class="box-border flex flex-col border-1 border-transparent border-dashed bg-#F5F5F7 text-center"
              :style="{ borderColor: formData.selectedSpecs[i.attrName] === e.name ? 'var(--wot-color-theme)' : '' }"
              @click="selectSpec(i.attrName, e.name)"
            >
              <view>
                <view v-if="e.img" class="h-160rpx w-full">
                  <image
                    :src="e.img"
                    class="h-full w-full"
                    mode="aspectFit"
                  />
                </view>
                <view class="py-12rpx text-22rpx text-#757575">
                  {{ e.name }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mb-100rpx flex items-center justify-between text-32rpx">
        <view>{{ $t('productDetail.quantity') }}</view>
        <wd-input-number v-model="formData.productNum" :max="1" :min="1" />
      </view>
      <view class="py-24rpx">
        <wd-button block :loading="loading" :style="{ backgroundColor: groupType === 'open' ? '#2F2D31' : 'var(--wot-color-theme)' }" @click="preOrder">
          {{ groupType === 'open' ? $t('productDetail.openGroup') : $t('productDetail.joinGroup') }}
        </wd-button>
      </view>
    </view>
  </wd-action-sheet>
</template>

<style lang="scss" scoped>
:deep() {
  .wd-navbar__title {
    margin: 0;
    max-width: 100%;
  }
}
</style>