|
|
@@ -2,75 +2,25 @@
|
|
|
{
|
|
|
layout: 'tabbar',
|
|
|
style: {
|
|
|
+ navigationStyle: 'custom',
|
|
|
navigationBarTitleText: '%product.details%',
|
|
|
},
|
|
|
}
|
|
|
</route>
|
|
|
<template>
|
|
|
- <view
|
|
|
- style="height: 100vh; border-top: 2rpx solid #f2f2f2"
|
|
|
- class="flex justify-between box-border"
|
|
|
- >
|
|
|
- <view class="w-183rpx box-border h-full overflow-auto bg-[#F2F2F2] pb-144rpx">
|
|
|
- <view
|
|
|
- v-for="(i, idx) in 30"
|
|
|
- :key="i"
|
|
|
- @click="handleSelectItem(idx, [])"
|
|
|
- :class="`relative w-full box-border p-32rpx h-[108rpx] text-28rpx ${idx === categoryIndex ? ' text-[#FF4C1B] bg-white font-600' : 'bg-[#F2F2F2] font-400'}`"
|
|
|
- >
|
|
|
- <view class="truncate">7{{ i }}Luggage</view>
|
|
|
-
|
|
|
- <view
|
|
|
- v-if="idx === categoryIndex"
|
|
|
- class="absolute top-1/2 left-0 -translate-y-1/2 w-6rpx h-28rpx bg-[#FF4C1B] rounded-full"
|
|
|
- ></view>
|
|
|
- <image
|
|
|
- v-if="idx === categoryIndex && categoryIndex != 0"
|
|
|
- class="absolute right-0 -top-18rpx w-18rpx z-20 h-18rpx object-cover"
|
|
|
- src="@/static/images/category/suffix.svg"
|
|
|
- mode="widthFix"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <image
|
|
|
- v-if="idx === categoryIndex"
|
|
|
- class="absolute right-0 -bottom-18rpx z-20 w-18rpx h-18rpx object-cover"
|
|
|
- src="@/static/images/category/prefix.svg"
|
|
|
- mode="widthFix"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view style="width: calc(100vw - 183rpx)" class="box-border px-32rpx pt-24rpx overflow-auto">
|
|
|
- <view
|
|
|
- class="flex justify-start h-72rpx items-center box-border px-24rpx rounded-full border-2rpx border-solid border2 mb-32rpx"
|
|
|
- >
|
|
|
- <image class="w-32rpx h-32rpx object-cover" :src="search" mode="widthFix" alt="" />
|
|
|
-
|
|
|
- <text class="ml-20rpx text-28rpx text-[#999]">{{ t('category.search') }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view
|
|
|
- style="height: calc(100vh - 72rpx - 24rpx - 32rpx - 144rpx)"
|
|
|
- class="category-list box-border w-full flex"
|
|
|
- >
|
|
|
- <view
|
|
|
- v-for="(item, index) in 50"
|
|
|
- :key="index"
|
|
|
- @click="goToDlite('1')"
|
|
|
- class="bg-white w-full"
|
|
|
- >
|
|
|
- <view class="w-110rpx h-110rpx mx-auto mb-16rpx">
|
|
|
- <image
|
|
|
- class="w-full"
|
|
|
- src="https://t.xiaoyaotravel.com/image/TourImComplait/messageContent/7ce4d7df18b1416d866483d55fd91ceb.png"
|
|
|
- mode="widthFix"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <view class="line-clamp-1 overflow-hidden">Women's sports shoes</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="w-full h-[100vh]" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
|
|
|
+ <wd-navbar
|
|
|
+ style="background-color: transparent"
|
|
|
+ :title="t('product.details')"
|
|
|
+ left-arrow
|
|
|
+ fixed
|
|
|
+ safeAreaInsetTop
|
|
|
+ @click-left="handleClickLeft"
|
|
|
+ >
|
|
|
+ <template #right>
|
|
|
+ <wd-icon name="search" size="18" />
|
|
|
+ </template>
|
|
|
+ </wd-navbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -85,6 +35,10 @@
|
|
|
const categoryIndex = ref(0)
|
|
|
const categoryChildrenList = ref([])
|
|
|
|
|
|
+ function handleClickLeft() {
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
+
|
|
|
function handleSelectItem(idx: number, children: Array<childrenObj>) {
|
|
|
categoryIndex.value = idx
|
|
|
categoryChildrenList.value = children
|
|
|
@@ -96,9 +50,8 @@
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- onLoad(() => {
|
|
|
- console.log('商品详情')
|
|
|
- console.log(safeAreaInsets, 'safeAreaInsets')
|
|
|
+ onLoad((id) => {
|
|
|
+ console.log(id, '商品详情')
|
|
|
})
|
|
|
|
|
|
onMounted(() => {})
|
|
|
@@ -121,4 +74,8 @@
|
|
|
.border2 {
|
|
|
border-color: $shop-bg-line;
|
|
|
}
|
|
|
+
|
|
|
+ ::v-deep .wd-navbar {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
</style>
|
