155 lines
4.2 KiB
Vue
155 lines
4.2 KiB
Vue
<template>
|
||
<div>
|
||
<common current-name="supplier">
|
||
<template #main>
|
||
<banner name="supplier" :imglist="bannerList"></banner>
|
||
<filtertop :list="treeList" @select="selected" @search="search"></filtertop>
|
||
<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="2"></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 { ref, reactive, onMounted, watch, computed } from 'vue';
|
||
import { agriculturalList, transaction } from '@/apis/supplier.js';
|
||
let treeList = reactive([]);
|
||
|
||
let list = reactive([
|
||
// {
|
||
// goodId: '10101',
|
||
// parentId: '101',
|
||
// goodUrl: 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/6216cf638fc1407e8ae1b4a65ef594ab.jpg',
|
||
// title:
|
||
// '甘蔗富含天然蔗糖,糖分含量达12%-22%，甜度自然纯净，无人工添加剂，是追求健康甜味人群的理想选择。\\r\\n相比加工糖，甘蔗中的糖分更易被人体吸收，且富含矿物质（如钙、铁、磷）和维生素（如维生素B族,营养价值更高',
|
||
// goodPrice: '25',
|
||
// },
|
||
// {
|
||
// goodId: '10201',
|
||
// parentId: '102',
|
||
// goodUrl: 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/54bf4b3511be4c99bc2cf5b7c6c4a7da.jpg',
|
||
// title: '正品耿马铁皮石斛 500g产地直发 批发零售 支持代发',
|
||
// goodPrice: '25',
|
||
// },
|
||
]);
|
||
let params = reactive({
|
||
current: 1,
|
||
size: 10,
|
||
parentId: null,
|
||
childrenId: null,
|
||
});
|
||
let pagination = reactive({
|
||
current: 1,
|
||
size: 50,
|
||
total: 4,
|
||
});
|
||
let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']);
|
||
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;
|
||
}
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
getList();
|
||
getTree();
|
||
});
|
||
|
||
const search = (data) => {
|
||
getList(data);
|
||
};
|
||
|
||
const handleSizeChange = (val) => {
|
||
pagination.size = val;
|
||
getList();
|
||
};
|
||
const handleCurrentChange = (val) => {
|
||
pagination.current = val;
|
||
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);
|
||
}
|
||
});
|
||
};
|
||
|
||
const selected = (data) => {
|
||
console.log(data);
|
||
params.categoryId = data.id;
|
||
// 获取所有值并转为数组
|
||
// const val = Object.values(data);
|
||
// if (val.length === 1) {
|
||
// params.parentId = Number(val[0].id);
|
||
// } else {
|
||
// if (val[0].id === '') {
|
||
// params.childrenId = '';
|
||
// params.parentId = null;
|
||
// } else {
|
||
// params.childrenId = Number(val[val.length - 1].id);
|
||
// params.parentId = Number(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;
|
||
}
|
||
}
|
||
</style>
|