121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<common current-name="agricultural">
|
|
<template #main>
|
|
<banner :imglist="bannerList"></banner>
|
|
<filtertop :list="treeList"></filtertop>
|
|
<div class="goods-list-warp">
|
|
<div class="goods-list">
|
|
<template v-for="(n, index) in 10" :key="n.id">
|
|
<div class="goods-item">
|
|
<goodsItem></goodsItem>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</common>
|
|
</div>
|
|
</template>
|
|
<script setup name="ecommerce">
|
|
import common from './components/common.vue';
|
|
import banner from './components/banner.vue';
|
|
import filtertop from './components/filtertop.vue';
|
|
import goodsItem from './components/goodsItem.vue';
|
|
import { ref, reactive, onMounted, onBeforeMount, onUnmounted, watch, computed } from 'vue';
|
|
import { transaction, agriculturalList } from '@/apis/agricultural';
|
|
let treeList = reactive([
|
|
// {
|
|
// id: '01',
|
|
// name: '种子/种苗',
|
|
// children: [
|
|
// { parentId: '01', id: '0101', name: '小麦种子' },
|
|
// { parentId: '01', id: '0102', name: '水稻种子' },
|
|
// { parentId: '01', id: '0103', name: '玉米种子' },
|
|
// { parentId: '01', id: '0104', name: '番茄种子' },
|
|
// { parentId: '01', id: '0105', name: '白菜种子' },
|
|
// ],
|
|
// },
|
|
// {
|
|
// id: '02',
|
|
// name: '农药',
|
|
// children: [
|
|
// { parentId: '03', id: '0101', name: '杀虫剂' },
|
|
// { parentId: '03', id: '0102', name: '杀菌剂' },
|
|
// { parentId: '03', id: '0103', name: '除草剂' },
|
|
// { parentId: '03', id: '0104', name: '杀螨剂' },
|
|
// ],
|
|
// },
|
|
// {
|
|
// id: '03',
|
|
// name: '化肥',
|
|
// children: [
|
|
// { parentId: '02', id: '0101', name: '有机肥' },
|
|
// { parentId: '02', id: '0102', name: '水溶肥' },
|
|
// { parentId: '02', id: '0103', name: '天然肥料' },
|
|
// ],
|
|
// },
|
|
]);
|
|
onBeforeMount(() => {
|
|
// 在 DOM 挂载前调用
|
|
getTree();
|
|
getList();
|
|
});
|
|
|
|
//获取农资商品分类
|
|
const getTree = () => {
|
|
transaction().then((res) => {
|
|
if (res.code === 200) {
|
|
let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
|
|
treeList.splice(0, treeList.length, ...a);
|
|
// console.log('treeList', treeList);
|
|
}
|
|
});
|
|
};
|
|
|
|
//获取农资商品列表
|
|
let list = reactive([]);
|
|
let params = reactive({
|
|
current: 1,
|
|
size: 10,
|
|
parentId: null,
|
|
childrenId: null,
|
|
});
|
|
const getList = () => {
|
|
agriculturalList(params).then((res) => {
|
|
if (res.code === 200) {
|
|
console.log('res', res);
|
|
}
|
|
});
|
|
};
|
|
|
|
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.goods-list-warp {
|
|
margin-top: 16px;
|
|
width: 100%;
|
|
.goods-list {
|
|
display: inline-flex;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
.goods-item {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
margin-bottom: 16px;
|
|
width: calc((100% - 50px) / 5);
|
|
border-radius: 16px;
|
|
background: $color-fff;
|
|
}
|
|
}
|
|
|
|
/* 添加伪元素占位 */
|
|
.goods-list::after {
|
|
content: '';
|
|
flex: auto;
|
|
}
|
|
}
|
|
</style>
|