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.
56 lines
1.4 KiB
56 lines
1.4 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)" |
|
/> |
|
</div> |
|
</template> |
|
|
|
<script setup> |
|
import { Card } from "vant"; |
|
import { Swipe, SwipeItem } from "vant"; |
|
import { Grid, GridItem } from "vant"; |
|
import { ref } from "vue"; |
|
import { loadProductAPI } from "../services/products"; |
|
import { dalImageUrl } from "../utils/tools"; |
|
import { loadBannersAPI } from "../services/banners"; |
|
import { useCategories } from "../hooks/useCategories"; |
|
|
|
// 商品 |
|
const products = ref([]); |
|
loadProductAPI().then((res) => { |
|
products.value = res.data; |
|
}); |
|
|
|
// 轮播图 |
|
const banners = ref([]); |
|
loadBannersAPI().then((res) => { |
|
banners.value = res.data; |
|
}); |
|
|
|
// 商品分类 |
|
// const categories = useCategories().categories; |
|
// 和上述代码等价 |
|
const { categories } = useCategories(); |
|
</script> |
|
|
|
<style scoped></style>
|
|
|