From 5bdde25ceb7eabc8d37152a02f8225c12e76d045 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9A=E4=BF=8A=E6=97=AD?= <398847134@qq.com>
Date: Thu, 22 May 2025 16:11:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E5=95=86=E5=B9=B3=E5=8F=B0=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sub-operation-service/index.html              |  1 +
 .../views/ecommerce/components/goodsItem.vue  | 25 ++++++---
 .../src/views/ecommerce/index.vue             | 52 +++++++++++++++++--
 3 files changed, 68 insertions(+), 10 deletions(-)
diff --git a/sub-operation-service/index.html b/sub-operation-service/index.html
index 47cef74..42ede08 100644
--- a/sub-operation-service/index.html
+++ b/sub-operation-service/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="referrer" content="no-referrer" />
     <title>运营服务</title>
   </head>
   <body>
diff --git a/sub-operation-service/src/views/ecommerce/components/goodsItem.vue b/sub-operation-service/src/views/ecommerce/components/goodsItem.vue
index 3cb375a..e0884fd 100644
--- a/sub-operation-service/src/views/ecommerce/components/goodsItem.vue
+++ b/sub-operation-service/src/views/ecommerce/components/goodsItem.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="c-goods-item-warp" @click="toDetail">
+  <div class="c-goods-item-warp" @click="toDetail(data.id)">
     <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 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="price txt-ellipsis clamp">25.00</div>
+      <div class="price txt-ellipsis clamp">{{ data.goodPrice }}</div>
       <div class="do">
         <div class="iconfont icon-cart"></div>
       </div>
@@ -13,13 +14,25 @@
   </div>
 </template>
 <script setup>
+import { ref, onMounted, computed } from 'vue';
 import { isEmpty, getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
+import { encodeURL } from 'js-base64';
 const route = useRoute();
 const router = useRouter();
 
-const toDetail = () => {
-  let id = '01';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const handleImageError = (e) => {
+  console.error('图片加载失败:', e);
+};
+
+const toDetail = (id) => {
   router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id);
 };
 </script>
diff --git a/sub-operation-service/src/views/ecommerce/index.vue b/sub-operation-service/src/views/ecommerce/index.vue
index 6efe892..93d1110 100644
--- a/sub-operation-service/src/views/ecommerce/index.vue
+++ b/sub-operation-service/src/views/ecommerce/index.vue
@@ -3,15 +3,25 @@
     <common current-name="agricultural">
       <template #main>
         <banner :imglist="bannerList"></banner>
-        <filtertop :list="treeList"></filtertop>
+        <filtertop :list="treeList" @select="selected"></filtertop>
         <div class="goods-list-warp">
           <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">
-                <goodsItem></goodsItem>
+                <goodsItem :data="n"></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>
@@ -81,15 +91,49 @@ let params = reactive({
   parentId: 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 = () => {
+  params.current = pagination.current;
+  params.size = pagination.size;
   agriculturalList(params).then((res) => {
     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']);
+
+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>
 <style lang="scss" scoped>
 .goods-list-warp {
