|
|
@@ -0,0 +1,124 @@
|
|
|
+<route lang="json5">
|
|
|
+{
|
|
|
+ layout: 'tabbar',
|
|
|
+ style: {
|
|
|
+ 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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { t } from '@/locale'
|
|
|
+ import search from '@/static/images/category/search.svg'
|
|
|
+ const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
+ type childrenObj = {
|
|
|
+ name: string
|
|
|
+ imageUrl: string
|
|
|
+ }
|
|
|
+ const categoryIndex = ref(0)
|
|
|
+ const categoryChildrenList = ref([])
|
|
|
+
|
|
|
+ function handleSelectItem(idx: number, children: Array<childrenObj>) {
|
|
|
+ categoryIndex.value = idx
|
|
|
+ categoryChildrenList.value = children
|
|
|
+ }
|
|
|
+
|
|
|
+ function goToDlite(uid: string) {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index',
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ onLoad(() => {
|
|
|
+ console.log('商品详情')
|
|
|
+ console.log(safeAreaInsets, 'safeAreaInsets')
|
|
|
+ })
|
|
|
+
|
|
|
+ onMounted(() => {})
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .category-list {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: repeat(auto-fill, minmax(192rpx, 1fr)); /* 自动填充行，每行高度为 192rpx */
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ grid-auto-flow: row; /* 确保项目会填充所有的网格单元 */
|
|
|
+ grid-gap: 24rpx 32rpx;
|
|
|
+ }
|
|
|
+ /* 添加额外的空白行 */
|
|
|
+ .category-list::after {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+ height: 144rpx; /* 额外的空行高度 */
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
+
|
|
|
+ .border2 {
|
|
|
+ border-color: $shop-bg-line;
|
|
|
+ }
|
|
|
+</style>
|
