parent
ac463184f9
commit
70cd57273f
5 changed files with 149 additions and 95 deletions
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"singleQuote": false, |
||||||
|
"semi": true |
||||||
|
} |
@ -0,0 +1,53 @@ |
|||||||
|
import { loadProductAPI } from '../services/products'; |
||||||
|
import { ref } from "vue"; |
||||||
|
|
||||||
|
/** |
||||||
|
* 返回商品接口的数据 |
||||||
|
* @param {*} categoryId 当前的商品分类id, 空表示获取所有分类 |
||||||
|
* @returns
|
||||||
|
*/ |
||||||
|
|
||||||
|
export const useProducts = (categoryId='') => { |
||||||
|
|
||||||
|
const page = ref(1); // 当前页码
|
||||||
|
const loading = ref(false); // 是否在加载中
|
||||||
|
const finished = ref(false); // 是否加载完成
|
||||||
|
const currentCategoryId = ref(categoryId); // 当前分类id
|
||||||
|
const products = ref([]); // 商品数据
|
||||||
|
|
||||||
|
/** |
||||||
|
* 加载products |
||||||
|
* @param {*} needReset 是否需要重置products |
||||||
|
* @param {*} categoryId 分类id |
||||||
|
*/ |
||||||
|
const onLoad = (needReset=false,categoryId='') => { |
||||||
|
if (needReset) { |
||||||
|
// 重置一些参数
|
||||||
|
finished.value = false; |
||||||
|
products.value = []; |
||||||
|
page.value = 1; |
||||||
|
} |
||||||
|
// 分类id不为空才需要修改
|
||||||
|
if (categoryId !=='' ) { |
||||||
|
currentCategoryId.value = categoryId; |
||||||
|
} |
||||||
|
loading.value = true; // 开始加载
|
||||||
|
loadProductAPI(page.value, currentCategoryId.value).then((res) => { |
||||||
|
finished.value = page.value > res.pages; // 当前页码超过总页数时表示加载完成
|
||||||
|
loading.value = false; |
||||||
|
// 将获取的数据存入products
|
||||||
|
products.value.push(...res.data); |
||||||
|
page.value++; // 页码+1
|
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
// page,
|
||||||
|
loading, |
||||||
|
finished, |
||||||
|
products, |
||||||
|
currentCategoryId, |
||||||
|
onLoad, |
||||||
|
} |
||||||
|
}; |
||||||
|
|
@ -1,82 +1,81 @@ |
|||||||
<template> |
<template> |
||||||
<div class="list"> |
<div class="list"> |
||||||
<sidebar v-model="active"> |
<sidebar v-model="active"> |
||||||
<sidebar-item |
<sidebar-item |
||||||
v-for="item in categories" |
v-for="item in categories" |
||||||
:title="item.name" |
:title="item.name" |
||||||
:key="item.id" |
:key="item.id" |
||||||
:to="{ name: 'List', query: { tid: item.id } }" |
:to="{ name: 'List', query: { tid: item.id } }" |
||||||
/> |
/> |
||||||
</sidebar> |
</sidebar> |
||||||
|
<!-- @load="onLoad": 当loading和finished同时为false时执行--> |
||||||
<div class="products"> |
<list |
||||||
<card |
class="products" |
||||||
v-for="item in products" |
:loading="loading" |
||||||
:key="item.id" |
:finished="finished" |
||||||
:num="item.amount" |
@load="onLoad" |
||||||
:price="item.price.toFixed(2)" |
finished-text="没有更多了" |
||||||
:title="item.name" |
> |
||||||
:thumb="dalImageUrl(item.coverImage)" |
<card |
||||||
/> |
v-for="item in products" |
||||||
</div> |
:key="item.id" |
||||||
</div> |
:num="item.amount" |
||||||
|
:price="item.price.toFixed(2)" |
||||||
|
:title="item.name" |
||||||
|
:thumb="dalImageUrl(item.coverImage)" |
||||||
|
/> |
||||||
|
</list> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script setup> |
<script setup> |
||||||
import { Sidebar, SidebarItem, Card } from "vant"; |
import { Sidebar, SidebarItem, Card, List } from "vant"; |
||||||
import { ref, computed } from "vue"; |
import { computed } from "vue"; |
||||||
import { onBeforeRouteUpdate } from "vue-router"; |
import { onBeforeRouteUpdate } from "vue-router"; |
||||||
import { useCategories } from "../hooks/useCategories"; |
import { useCategories } from "../hooks/useCategories"; |
||||||
import { useRoute } from "vue-router"; |
import { useRoute } from "vue-router"; |
||||||
import { loadProductAPI } from "../services/products"; |
|
||||||
import { dalImageUrl } from "../utils/tools"; |
import { dalImageUrl } from "../utils/tools"; |
||||||
|
import { useProducts } from "../hooks/useProducts"; |
||||||
const route = useRoute(); |
const route = useRoute(); |
||||||
|
const {loading, finished, products, currentCategoryId, onLoad} = useProducts(route.query.tid); |
||||||
|
|
||||||
// 当前分类 |
|
||||||
const currentCategoryId = ref(route.query.tid); |
|
||||||
// 解构字典中的数据 |
// 解构字典中的数据 |
||||||
const { categories } = useCategories(); |
const { categories } = useCategories(); |
||||||
// 当前选择的分类是哪一个 |
// 当前选择的分类是哪一个 |
||||||
const active = computed({ |
const active = computed({ |
||||||
// 设置属性值 |
// 设置属性值 |
||||||
set(v) { |
set(v) { |
||||||
return v; |
return v; |
||||||
}, |
}, |
||||||
// 获取属性值 |
// 获取属性值 |
||||||
get() { |
get() { |
||||||
return categories.value.findIndex( |
return categories.value.findIndex( |
||||||
(item) => item.id == currentCategoryId.value |
(item) => item.id == currentCategoryId.value |
||||||
); |
); |
||||||
}, |
}, |
||||||
}); |
}); |
||||||
|
|
||||||
// 路由改变时执行 |
// 路由改变时执行(点击不同分类时执行) |
||||||
onBeforeRouteUpdate((to, from) => { |
onBeforeRouteUpdate((to, from) => { |
||||||
currentCategoryId.value = to.query.tid; |
// currentCategoryId.value = to.query.tid; |
||||||
loadDataFromServer(); |
// 重新加载数据 |
||||||
|
onLoad(true,to.query.tid); |
||||||
}); |
}); |
||||||
|
|
||||||
// 获取对应分类的商品 |
|
||||||
const products = ref([]); |
|
||||||
|
|
||||||
const loadDataFromServer = () => { |
|
||||||
loadProductAPI(1, currentCategoryId.value).then((res) => { |
|
||||||
products.value = res.data; |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
loadDataFromServer(); |
// loadDataFromServer(); |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped> |
<style scoped> |
||||||
.list { |
.list { |
||||||
display: flex; |
display: flex; |
||||||
} |
} |
||||||
|
|
||||||
.list .van-sidebar { |
.list .van-sidebar { |
||||||
width: 105px; |
width: 105px; |
||||||
} |
} |
||||||
|
|
||||||
.products { |
.products { |
||||||
overflow: auto; |
overflow: auto; |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
Loading…
Reference in new issue