wip(special-area-list): 添加专区列表组件

src/api/goods.js

@@ -216,3 +216,12 @@ export function validShop(data) {
     data,
   });
 }
+
+// 获取专区商品
+export function getAreaGoods(params) {
+  return request({
+    url: "/sale/api/wares/list-wares",
+    method: "get",
+    params,
+  });
+}

src/components/special-area-list/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="area-product-list">
+    <div class="area-header">
+      <div class="header-bg"></div>
+      <span class="area-title">{{ title }}</span>
+      <el-button
+        v-if="list.length > 0"
+        type="primary"
+        size="mini"
+        round
+        plain
+        class="more-button"
+        @click="goToMore"
+      >
+        <span class="more-text">更多</span>
+        <el-icon class="el-icon--right"><ArrowRight /></el-icon>
+      </el-button>
+    </div>
+    <div class="product-container">
+      <div
+        class="product-item"
+        v-for="item in list"
+        :key="item.pkWares"
+        @click="handleProductClick"
+      >
+        <img :src="item.cover1" class="product-image" alt="product image" />
+        <div class="product-info">
+          <div class="product-name">{{ item.waresName }}</div>
+          <div class="product-price-row">
+            <div class="product-price">
+              {{ formatPrice(item.waresPrice) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { numberToCurrencyNo, isLocal } from "@/util/numberToCurrency";
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    specialAreaId: {
+      type: [Number, String],
+      default: "",
+    },
+    subCategoryId: {
+      type: [Number, String],
+      default: "",
+    },
+  },
+  methods: {
+    formatPrice(price) {
+      return isLocal(numberToCurrencyNo(price));
+    },
+    goToMore() {
+      if (this.$router && this.specialAreaId && this.subCategoryId) {
+        this.$router.push({
+          path: "/special",
+          query: {
+            code: this.specialAreaId,
+            id: this.subCategoryId,
+          },
+        });
+      } else if (!this.specialAreaId) {
+        console.error("Special area ID (code) is missing.");
+      } else if (!this.subCategoryId) {
+        console.error("Sub category ID (id) is missing.");
+      } else {
+        console.error("Vue Router is not available.");
+      }
+    },
+    handleProductClick() {
+      this.goToMore();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.area-product-list {
+  background-color: #ffffff;
+  padding: 20px;
+  padding-top: 0;
+  border-radius: 8px;
+  margin-bottom: 24px;
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.area-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  position: relative;
+  padding: 20px 0;
+  height: 46px;
+  box-sizing: content-box;
+}
+
+.header-bg {
+  position: absolute;
+  top: 0;
+  left: -20px;
+  right: -20px;
+  height: 100%;
+  background: linear-gradient(to bottom, #e0f0ff, #ffffff);
+  z-index: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.area-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333333;
+  position: relative;
+  z-index: 1;
+}
+
+.more-button {
+  position: relative;
+  z-index: 1;
+  height: 30px;
+  padding: 0 12px;
+  &.el-button--mini {
+    padding: 7px 15px;
+    font-size: 12px;
+  }
+  .more-text {
+    margin-right: 4px;
+  }
+  .el-icon {
+    font-size: 14px;
+  }
+}
+
+.product-container {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -10px;
+}
+
+.product-item {
+  width: 20%;
+  padding: 0 10px;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.product-image {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  height: auto;
+  border-radius: 8px;
+  background-color: #f5f5f5;
+  object-fit: cover;
+  display: block;
+}
+
+.product-info {
+  margin-top: 12px;
+  position: relative;
+}
+
+.product-name {
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 1.5em;
+  line-height: 1.5em;
+}
+
+.product-price-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .product-price {
+    font-size: 16px;
+    font-weight: bold;
+    color: #f82c1a;
+  }
+  .add-cart-button {
+    &.el-button--mini {
+      padding: 5px;
+    }
+    .el-icon {
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/views/index/index.vue

@@ -207,7 +207,7 @@ import { forgetPwd, forgetSms } from "@/api/login";
 
 import * as goods from "@/api/goods.js";
 import znNewsPopup from "@/components/znNewsPopup.vue";
-
+import specialAreaList from "@/components/special-area-list/index.vue";
 // import { getAlertUserAgreement } from "@/api/index.js";
 export default {
   name: "Index",
@@ -219,6 +219,7 @@ export default {
     performance,
     noticePopup,
     znNewsPopup,
+    specialAreaList,
   },
   computed: {
     ...mapGetters(["userInfo"]),
@@ -264,12 +265,14 @@ export default {
       promptFlag: 0, //提示标记（0=弹窗提示，1=不弹窗提示）
       promptMsg: "", //提示信息
       jumpPage: 1, //跳转页面（1=实名认证，2=续约专区）
+      areaGoodsList: [],
     };
   },
 
   mounted() {
     this.getBanner();
     this.getMenuList();
+    this.getAreaGoods();
     this.getService();
   },
   methods: {
@@ -435,11 +438,11 @@ export default {
         this.bannerList = res.rows;
       });
     },
-    // getMarket() {
+    getAreaGoods() {
-    //   api.getMyMarket().then((res) => {
+      goods.getAreaGoods().then((res) => {
-    //     this.marketData = res.data;
+        this.areaGoodsList = res?.data?.recommendSpecialAreaList || [];
-    //   });
+      });
-    // },
+    },
   },
 };
 </script>