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 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)

// 添加导航栏背景色变量
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 notifications = ref([
  { id: 1, name: 'Aamir Khan', time: '10s' },
  { id: 2, name: 'John Smith', time: '30s' },
  { id: 3, name: 'Maria Garcia', time: '1m' },
])
// 点击页面任意地方隐藏提示
function handlePageClick() {
  if (showTip.value) {
    showTip.value = false
  }
}

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

// 搜索结果
// 轮播图
const current = ref<number>(0)
const swiperList = ref([
  '/static/images/avatar.jpg',
  '/static/images/vip-info-bg.png',
  '/static/images/vip-level1.png',
])

function handleClick(e) {
  // console.log(e)
}
function onChange(e) {
  // console.log(e)
}

// 添加头像列表数据
const avatarList = ref([
  '/static/images/avatar.jpg',
  '/static/images/avatar.jpg',
  '/static/images/avatar.jpg',
  '/static/images/avatar.jpg',
  '/static/images/avatar.jpg',
  '/static/images/avatar.jpg',
  '/static/images/avatar.jpg',
])

// sku 逻辑
const showSku = ref(false)

const formData = ref({
  colorSelect: 1,
  num: 1,
})

const dataList = ref([])
function queryList(pageNo, pageSize) {
  // 此处请求仅为演示，请替换为自己项目中的请求
  setTimeout(() => {
    dataList.value = [
      { title: '123' },
      { title: '123' },
      { title: '123' },
      { title: '12345' },
    ]
    paging.value.complete(dataList.value)
  }, 1000)
}
</script>

<template>
  <z-paging ref="paging" refresher-only use-page-scroll @query="queryList" @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" />
          <image :src="`/static/icons/menu-icon${navBgColor === '#ffffff' ? '-tr' : ''}.png`" class="h-56rpx w-56rpx" />
        </view>
      </template>
    </wd-navbar>
    <view class="relative">
      <wd-swiper
        v-model:current="current" :list="swiperList" autoplay height="750rpx"
        custom-indicator-class="bottom-40rpx!" :indicator="{ type: 'fraction' }" indicator-position="bottom-right"
        image-mode="aspectFit" @click="handleClick" @change="onChange"
      />
      <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">
              Price
            </text>
            <view class="ml-8rpx rounded-t-18rpx rounded-br-18rpx bg-#202221 px-12rpx text-24rpx">
              20GB
            </view>
          </view>
          <view>
            <text class="text-48rpx">
              <text class="text-28rpx">
                ৳
              </text>1000.00
            </text>
            <text class="ml-22rpx text-28rpx line-through">
              ৳1999.00
            </text>
          </view>
        </view>
        <text class="text-28rpx">
          1.8k sold
        </text>
      </view>
      <view class="bg-white px-24rpx pb-24rpx pt-20rpx text-32rpx">
        <view class="line-clamp-2font-bold mb-16rpx">
          BOLON Classic Aviator Polarized Sunglasses, Exclusive Eyewear Brand
        </view>
        <view class="flex items-center justify-between">
          <view>
            <text class="mr-20rpx">
              Color
            </text>
            <text class="text-#757575">
              Black Grey
            </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">
            Group Rules
          </text>
        </view>
        <view class="flex items-center">
          <text class="mr-8rpx text-24rpx text-#3A444C">
            View Rules
          </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 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">
          Ongoing Group
        </text>
      </view>
      <view class="flex flex-col gap-24rpx">
        <view v-for="i in 3" :key="i" class="flex items-center justify-between">
          <view class="flex items-center">
            <view>
              <!-- 头像组 最多五个 -->
              <view class="mr-16rpx flex items-center">
                <view
                  v-for="(avatar, index) in avatarList.slice(0, 5)"
                  :key="index"
                  :style="{ marginLeft: index !== 0 ? '-20rpx' : '0', zIndex: 10 - index }"
                  class="h-56rpx w-56rpx overflow-hidden border-2rpx border-white rounded-full border-solid"
                >
                  <image :src="avatar" class="h-full w-full" mode="aspectFill" />
                </view>
              </view>
            </view>
            <view>
              <view class="text-28rpx font-bold">
                Need <text class="text-[var(--wot-color-theme)]">
                  5
                </text> More
              </view>
            </view>
          </view>
          <wd-button size="small">
            Join Group
          </wd-button>
        </view>
      </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">
            Details
          </text>
        </view>
        <view v-for="i in 3" :key="i">
          <image
            src="/static/images/avatar.jpg"
            mode="widthFix"
            class="w-full"
          />
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="h-100rpx flex gap-32rpx bg-white bg-opacity-60 px-28rpx backdrop-blur-20">
        <view class="flex items-center justify-between gap-20rpx">
          <view class="flex flex-col items-center justify-center">
            <wd-icon color="#BDBDBD" name="home" size="40rpx" />
            <text class="text-18rpx text-#757575">
              Home
            </text>
          </view>
          <view class="flex flex-col items-center justify-center">
            <wd-icon color="#BDBDBD" name="heart-filled" size="40rpx" />
            <text class="text-18rpx text-#757575">
              Favorite
            </text>
          </view>
        </view>
        <view class="flex flex-1 items-center justify-end text-32rpx">
          <view class="relative">
            <view class="rounded-l-full bg-#2F2D31 px-34rpx py-18rpx text-white" @click="showSku = true">
              Open Group
            </view>
            <CustomTooltip
              v-model:visible="showTip"
              highlight-text1="$99.99"
              highlight-text2="$1.8"
            />
          </view>
          <view class="rounded-r-full bg-[var(--wot-color-theme)] px-34rpx py-18rpx text-white">
            Join Group
          </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-#E1E1E1 border-b-solid py-24rpx">
        <image
          src="/static/images/avatar.jpg"
          class="h-160rpx w-160rpx shrink-0"
        />
        <view class="flex-1">
          <view class="line-clamp-2 mb-32rpx text-28rpx">
            SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
          </view>
          <view class="flex items-baseline">
            <view class="text-#FF0010">
              <text class="text-28rpx">
                ৳
              </text>
              <text class="text-48rpx">
                1000
              </text>
            </view>
            <view class="ml-20rpx text-28rpx text-#787878 line-through">
              ৳1999
            </view>
          </view>
        </view>
      </view>
      <view class="mb-24rpx border-b-1 border-b-color-#E1E1E1 border-b-solid pb-40rpx">
        <view class="mb-12rpx text-32rpx">
          Color
        </view>
        <view class="grid grid-cols-4 gap-20rpx">
          <view v-for="i in 5" :key="i" class="box-border flex flex-col border-1 border-transparent border-dashed bg-#F5F5F7 text-center" :style="{ borderColor: formData.colorSelect === i ? 'var(--wot-color-theme)' : '' }">
            <view class="h-160rpx w-full">
              <image
                src="/static/images/avatar.jpg"
                class="h-full w-full"
                mode="aspectFit"
              />
            </view>
            <view class="text-22rpx text-#757575">
              Black
            </view>
          </view>
        </view>
      </view>
      <view class="mb-100rpx flex items-center justify-between text-32rpx">
        <view>Quantity</view>
        <wd-input-number v-model="formData.num" />
      </view>
      <view class="py-24rpx">
        <wd-button block>
          Join Group
        </wd-button>
      </view>
    </view>
  </wd-action-sheet>
</template>

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