|
|
@@ -1,124 +0,0 @@
|
|
|
-<route lang="json5">
|
|
|
-{
|
|
|
- layout: 'tabbar',
|
|
|
- style: {
|
|
|
- navigationBarTitleText: '%tabbar.category%',
|
|
|
- },
|
|
|
-}
|
|
|
-</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 | number) {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/product/details?id=${uid}`,
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- 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>
|
