272 lines
7.4 KiB
Vue
272 lines
7.4 KiB
Vue
<template>
|
||
<div>
|
||
<common current-name="agricultural">
|
||
<template #main>
|
||
<!-- <banner :imglist="bannerList"></banner> -->
|
||
<!-- 原来的顶部筛选组件，不好用 -->
|
||
<!-- <filtertop :list="treeList" @select="selected" @search="search"></filtertop> -->
|
||
|
||
<!-- 顶部筛选条件 -->
|
||
<div class="filter-container">
|
||
<div style="width: 40%; margin-left: 10px; margin-bottom: 10px">
|
||
<div class="search-container">
|
||
<div class="search-box">
|
||
<input v-model="searchName" type="text" placeholder="请输入农资商品名称" class="search-input" />
|
||
<button class="search-button" @click.stop="onQuery()">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<circle cx="11" cy="11" r="8"></circle>
|
||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<costomTabs :list="treeList" @change="changeTabs"></costomTabs>
|
||
</div>
|
||
|
||
<div class="goods-list-warp">
|
||
<div class="goods-list">
|
||
<template v-for="(n, index) in list" :key="n.id">
|
||
<div class="goods-item">
|
||
<goodsItem :data="n" :type="1"></goodsItem>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<el-pagination
|
||
:current-page="pagination.current"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="pagination.size"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="pagination.total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
</el-pagination>
|
||
</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 costomTabs from '@/components/costomTabs.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 changeTabs = (paramsArr) => {
|
||
console.log('tabs选项', paramsArr);
|
||
let level1Id = 0;
|
||
let level2Id = 0;
|
||
let level3Id = 0;
|
||
|
||
if (paramsArr.length >= 1) {
|
||
level1Id = paramsArr[0]?.name == '全部' ? 0 : paramsArr[0]?.id || 0;
|
||
}
|
||
if (paramsArr.length >= 2) {
|
||
level2Id = paramsArr[1]?.name == '全部' ? 0 : paramsArr[1]?.id || 0;
|
||
}
|
||
if (paramsArr.length >= 3) {
|
||
level3Id = paramsArr[2]?.name == '全部' ? 0 : paramsArr[2]?.id || 0;
|
||
}
|
||
|
||
console.log('处理后的ID:', level1Id, level2Id, level3Id);
|
||
};
|
||
//获取农资商品分类
|
||
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 searchName = ref('');
|
||
let list = reactive([]);
|
||
let params = reactive({
|
||
current: 1,
|
||
size: 10,
|
||
parentId: null,
|
||
childrenId: null,
|
||
});
|
||
let pagination = reactive({
|
||
current: 1,
|
||
size: 20,
|
||
total: 0,
|
||
});
|
||
const handleSizeChange = (val) => {
|
||
pagination.size = val;
|
||
getList();
|
||
};
|
||
const handleCurrentChange = (val) => {
|
||
pagination.current = val;
|
||
getList();
|
||
};
|
||
const getList = (data) => {
|
||
if (data) {
|
||
params.goodName = data.searchName;
|
||
}
|
||
params.current = pagination.current;
|
||
params.size = pagination.size;
|
||
agriculturalList(params).then((res) => {
|
||
if (res.code === 200) {
|
||
list.splice(0, list.length, ...res.data.records);
|
||
pagination.total = res.data.total;
|
||
}
|
||
});
|
||
};
|
||
|
||
// let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
|
||
const onQuery = () => {
|
||
getList({ searchName: searchName.value });
|
||
};
|
||
const search = (data) => {
|
||
getList();
|
||
};
|
||
|
||
const selected = (data) => {
|
||
// 获取所有值并转为数组
|
||
// const val = Object.values(data);
|
||
params.categoryId = data.id;
|
||
// if (val.length === 1) {
|
||
// params.parentId = val[0].id;
|
||
// } else {
|
||
// if (val[0].id === '') {
|
||
// params.childrenId = null;
|
||
// params.parentId = null;
|
||
// } else {
|
||
// params.childrenId = val[val.length - 1].id;
|
||
// params.parentId = val[val.length - 1].parentId;
|
||
// }
|
||
// }
|
||
getList();
|
||
};
|
||
</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;
|
||
}
|
||
}
|
||
|
||
// 顶部筛选条件背景容器
|
||
.filter-container {
|
||
padding: 16px 16px 6px 16px;
|
||
width: 100%;
|
||
border-radius: 16px;
|
||
text-align: left;
|
||
background: $color-fff;
|
||
// 搜索框样式
|
||
.search-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 0 16px 0 0;
|
||
.search-box {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
}
|
||
.search-input {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid black;
|
||
border-radius: 14px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
outline: none;
|
||
transition: border-color 0.3s;
|
||
}
|
||
.search-input:focus {
|
||
border-color: #409eff;
|
||
}
|
||
.search-input::placeholder {
|
||
color: #999;
|
||
}
|
||
.search-button {
|
||
position: absolute;
|
||
right: -10px;
|
||
top: 55%;
|
||
transform: translateY(-50%);
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
color: #000;
|
||
}
|
||
.search-button:hover {
|
||
color: #409eff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|