Web/daimp-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

电商平台开发页面

Browse Source
This commit is contained in:
姚俊旭 2025-05-22 16:11:32 +08:00
parent 93f13af072
commit 5bdde25ceb
3 changed files with 68 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sub-operation-service/index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" /> <link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="referrer" content="no-referrer" />
<title>运营服务</title> <title>运营服务</title>
</head> </head>
<body> <body>

25
sub-operation-service/src/views/ecommerce/components/goodsItem.vue
View File

@ -1,11 +1,12 @@
<template> <template>
<div class="c-goods-item-warp" @click="toDetail"> <div class="c-goods-item-warp" @click="toDetail(data.id)">
<div class="goods-img"> <div class="goods-img">
<el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? ''" fit="cover" /> <img :src="data.goodUrl ? data.goodUrl : ''" alt="" style="width: 100%" />
<!-- <el-image :src="encodeURIComponent(data.goodUrl) ? encodeURIComponent(data.goodUrl) : ''" fit="cover" @error="handleImageError" />-->
</div> </div>
<div class="goods-name txt-ellipsis clamp2">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div> <div class="goods-name txt-ellipsis clamp2">{{ data.title }}</div>
<div class="goods-do"> <div class="goods-do">
<div class="price txt-ellipsis clamp">25.00</div> <div class="price txt-ellipsis clamp">{{ data.goodPrice }}</div>
<div class="do"> <div class="do">
<div class="iconfont icon-cart"></div> <div class="iconfont icon-cart"></div>
</div> </div>
@ -13,13 +14,25 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, computed } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils'; import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { encodeURL } from 'js-base64';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const toDetail = () => { const props = defineProps({
let id = '01'; data: {
type: Object,
default: () => {},
},
});
const handleImageError = (e) => {
console.error('图片加载失败:', e);
};
const toDetail = (id) => {
router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id); router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id);
}; };
</script> </script>

52
sub-operation-service/src/views/ecommerce/index.vue
View File

@ -3,15 +3,25 @@
<common current-name="agricultural"> <common current-name="agricultural">
<template #main> <template #main>
<banner :imglist="bannerList"></banner> <banner :imglist="bannerList"></banner>
<filtertop :list="treeList"></filtertop> <filtertop :list="treeList" @select="selected"></filtertop>
<div class="goods-list-warp"> <div class="goods-list-warp">
<div class="goods-list"> <div class="goods-list">
<template v-for="(n, index) in 10" :key="n.id"> <template v-for="(n, index) in list" :key="n.id">
<div class="goods-item"> <div class="goods-item">
<goodsItem></goodsItem> <goodsItem :data="n"></goodsItem>
</div> </div>
</template> </template>
</div> </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> </div>
</template> </template>
</common> </common>
@ -81,15 +91,49 @@ let params = reactive({
parentId: null, parentId: null,
childrenId: null, childrenId: null,
}); });
let pagination = reactive({
current: 1,
size: 10,
total: 0,
});
const handleSizeChange = (val) => {
pagination.size = val;
getList();
};
const handleCurrentChange = (val) => {
pagination.current = val;
getList();
};
const getList = () => { const getList = () => {
params.current = pagination.current;
params.size = pagination.size;
agriculturalList(params).then((res) => { agriculturalList(params).then((res) => {
if (res.code === 200) { if (res.code === 200) {
console.log('res', res); list.splice(0, list.length, ...res.data.records);
pagination.total = res.data.total;
} }
}); });
}; };
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']); let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
const selected = (data) => {
// 获取所有值并转为数组
const val = Object.values(data);
console.log(data);
if (val.length === 1) {
params.parentId = val[0].id;
} else {
if (val[0].id === '') {
params.childrenId = '';
params.parentId = null;
} else {
params.childrenId = val[val.length - 1].id;
params.parentId = val[val.length - 1].parentId;
}
}
getList();
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.goods-list-warp { .goods-list-warp {