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