74 lines
2.9 KiB
Vue
74 lines
2.9 KiB
Vue
<template>
|
|
<div class="flex flex-col">
|
|
<ul class="flex items-center justify-between px-[30rpx] py-[20rpx]">
|
|
<li class="flex flex-col items-center" v-for="(item, index) in filterList" :key="index" @click="handleChange(item.id)">
|
|
<img
|
|
:src="item.icon"
|
|
alt="icon"
|
|
class="w-[96rpx] h-[96rpx] rounded-[40rpx] mb-[10rpx] border-solid border-[4rpx]"
|
|
:class="[activeMenu === item.id ? 'border-[#28BEBB] ' : 'border-[transparent]']" />
|
|
<span class="text-[40rpx] font-500" :class="[activeMenu === item.id ? 'text-[#28BEBB]' : '']">{{ item.name }}</span>
|
|
</li>
|
|
</ul>
|
|
<nut-list class="bg-[#F5F5F5]" :list-data="products" @scroll-bottom="onScrollBottom">
|
|
<template #default="{ item }">
|
|
<div class="flex items-center justify-center mt-[30rpx] mx-[30rpx]" @click="toProductInfo(item)">
|
|
<div class="h-[256rpx] rounded-[20rpx] bg-[#fff] flex">
|
|
<img :src="item.image" alt="thumb" class="h-full object-cover w-[256rpx] rounded-[20rpx_0_0_20rpx]" />
|
|
<div class="flex flex-col p-[30rpx] flex-auto justify-between">
|
|
<div class="text-[40rpx] font-500">{{ item.name }}</div>
|
|
<div class="flex justify-between items-end">
|
|
<nut-price :price="item.price" size="large" class="text-[56rpx] text-[#F03B25] font-600 leading-[1]" />
|
|
<div class="text-[24rpx] text-[#999] font-400">{{ item.soldCount }}人已购</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</nut-list>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { getRequest } from "@/api/customFetch";
|
|
import { getMallRecommend, getProductCategory } from "@/api/interfaceDocument";
|
|
import { useGetUserAddressList } from "@/composables/useUserAddress";
|
|
import { useRouter } from "vue-router";
|
|
|
|
useGetUserAddressList();
|
|
const router = useRouter();
|
|
const filterList = [
|
|
{ id: 1, name: "推荐", icon: "/images/shop/recommend.png" },
|
|
{ id: 2, name: "居家安全", icon: "/images/shop/wheelchair.png" },
|
|
{ id: 3, name: "出行助理", icon: "/images/shop/travel.png" },
|
|
{ id: 4, name: "洗护用品", icon: "/images/shop/toiletries.png" },
|
|
];
|
|
const activeMenu = ref(1);
|
|
|
|
const useProductCategory = () => {
|
|
getRequest(getProductCategory()).then((_resp) => {});
|
|
};
|
|
useProductCategory();
|
|
|
|
const products = ref<any[]>([]);
|
|
const useProducts = () => {
|
|
getRequest(getMallRecommend(),{type:activeMenu.value}).then((resp) => {
|
|
products.value = (resp.result as { products: any[] }).products;
|
|
});
|
|
};
|
|
useProducts();
|
|
|
|
const onScrollBottom = () => {
|
|
// useProducts()
|
|
};
|
|
|
|
const toProductInfo = (product: any) => {
|
|
router.push({ path: "/shop/product", query: { id: product.id } });
|
|
};
|
|
|
|
const handleChange = (id: number) => {
|
|
activeMenu.value = id;
|
|
useProducts();
|
|
};
|
|
</script>
|