You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.6 KiB
67 lines
1.6 KiB
<template> |
|
<div class="home"> |
|
<swipe class="my-swipe" :autoplay="2000" indicator-color="white"> |
|
<swipe-item v-for="item in banners" :key="item.id"> |
|
<img :src="dalImageUrl(item.coverImage)" :alt="item.name" /> |
|
</swipe-item> |
|
</swipe> |
|
<grid :column-num="3"> |
|
<grid-item |
|
v-for="item in categories" |
|
:key="item.id" |
|
:icon="dalImageUrl(item.coverImage)" |
|
:text="item.name" |
|
:to="{ name: 'List', query: { tid: item.id } }" |
|
/> |
|
</grid> |
|
<card |
|
v-for="item in products" |
|
:key="item.id" |
|
:num="item.amount" |
|
:price="item.price.toFixed(2)" |
|
:title="item.name" |
|
:thumb="dalImageUrl(item.coverImage)" |
|
@click-thumb="toDetail(item.id)" |
|
/> |
|
</div> |
|
</template> |
|
|
|
<script setup> |
|
import { Card } from "vant"; |
|
import { Swipe, SwipeItem } from "vant"; |
|
import { Grid, GridItem } from "vant"; |
|
import { ref } from "vue"; |
|
import { useRouter } from "vue-router"; |
|
import { dalImageUrl } from "../utils/tools"; |
|
import { loadBannersAPI } from "../services/banners"; |
|
import { useCategories } from "../hooks/useCategories"; |
|
import { useProducts } from "../hooks/useProducts"; |
|
|
|
// 获取第一页的商品数据 |
|
const { products, onLoad } = useProducts(); |
|
onLoad(); |
|
|
|
// 轮播图 |
|
const banners = ref([]); |
|
loadBannersAPI().then((res) => { |
|
banners.value = res.data; |
|
}); |
|
|
|
// 商品分类 |
|
// const categories = useCategories().categories; |
|
// 和上述代码等价 |
|
const { categories } = useCategories(); |
|
|
|
// 跳转到详情页 |
|
const router = useRouter(); |
|
const toDetail = (id) => { |
|
router.push({ |
|
name: "Detail", |
|
query: { |
|
id, |
|
}, |
|
}); |
|
}; |
|
</script> |
|
|
|
<style scoped></style>
|
|
|