Merge branch 'main' of https://git.opencomputing.cn/yumoqing/kboss

f/web-kboss/src/api/ncmatch/index.js

@@ -239,3 +239,40 @@ export function reqFavoriteDelete(data){
     data
   })
 }
+//浏览记录 /user/user_browse_history_search.dspy
+export function reqUserBrowseHistorySearch(data){
+  return request({
+    url: '/user/user_browse_history_search.dspy',
+    method: 'post',
+    headers: { 'Content-Type': 'application/json' },
+    data
+  })
+}
+//删除浏览记录 /user/user_browse_history_delete.dspy    
+export function reqUserBrowseHistoryDeleteById(data){
+  return request({
+    url: '/user/user_browse_history_delete.dspy',
+    method: 'post',
+    headers: { 'Content-Type': 'application/json' },
+    data
+  })
+}
+
+//删除关注记录 /user/favorite_delete.dspy
+export function reqFavoriteDeleteById(data){
+  return request({
+    url: '/user/favorite_delete.dspy',
+    method: 'post',
+    headers: { 'Content-Type': 'application/json' },
+    data
+  })
+}
+//全部收藏列表 /user/favorite_search.dspy
+export function reqFavoriteSearch(data){
+  return request({
+    url: '/user/favorite_search.dspy',
+    method: 'post',
+    headers: { 'Content-Type': 'application/json' },
+    data
+  })
+}

f/web-kboss/src/router/index.js

@@ -192,6 +192,20 @@ export const constantRoutes = [
         hidden: true,
         meta: { title: "产品查询", fullPath: "/ncmatch/searchBox" },
       },
+      {
+        path: "historyBox",
+      component: () => import("@/views/homePage/ncmatch/historyBox/index.vue"),
+      name: "historyBox",
+      hidden: true, 
+      meta: { title: "浏览记录", fullPath: "/ncmatch/historyBox" },
+    },
+    {
+      path: "favoriteBox",
+      component: () => import("@/views/homePage/ncmatch/favoriteBox/index.vue"),
+      name: "favoriteBox",
+      hidden: true,
+      meta: { title: "我的关注", fullPath: "/ncmatch/favoriteBox" },
+    },
     ]
   },
   {

f/web-kboss/src/views/homePage/ncmatch/favoriteBox/index.vue

@@ -0,0 +1,298 @@
+<template>
+    <div class="followBox">
+        <div class="followBox-title">
+            <span>我的</span>
+            <span class="hightText">关注</span>
+        </div>
+        <div class="radio-group">
+            <label class="radio-item" style="margin-right: 25px;" :class="{ active: publish_type === '1' }">
+                <input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
+                <span class="radio-text">企业商品</span>
+            </label>
+            <label class="radio-item" :class="{ active: publish_type === '2' }">
+                <input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
+                <span class="radio-text">企业需求</span>
+            </label>
+        </div>
+   <div class="history-list" v-if="productList.length > 0">
+    <div class="history-item" v-for="item in productList" :key="item.id">
+      <div class="history-date">
+        <span class="date-text">{{ formatBrowseDate(item.create_at) }}</span>
+        <span class="relative-time">{{ getRelativeTime(item.create_at) }}</span>
+      </div>
+      <div class="follow-content">
+                          <productCard 
+                    contentType="favorite"
+            :productList="item.products" 
+            :type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
+            @delete-item="handleDeleteItem">
+          </productCard>
+      </div>
+    </div>
+  </div>
+  <div class="empty-state" v-else>
+    <div class="empty-icon">📋</div>
+    <div class="empty-text">暂无关注记录</div>
+  </div>
+    </div>
+</template>
+<script>
+import { reqFavoriteSearch } from '@/api/ncmatch';
+import productCard from '../mainPage/productCard/index.vue';
+import { formatBrowseDate, getRelativeTime } from './tool.js';
+export default {
+    name: 'followBox',
+    data() {
+        return {
+            productList: [],
+            value1: null,
+            publish_type: '1', // 默认选择企业商品
+
+            myProductList: [
+       
+            ]
+        }
+    },
+    created() {
+        this.reqFavoriteSearch();
+    },
+    components: {
+        productCard
+    },
+    methods: {
+        formatBrowseDate,
+        getRelativeTime,
+        handleTypeChange() {
+            // 当类型改变时重新获取数据
+            this.reqFavoriteSearch();
+        },
+        reqFavoriteSearch() {
+            reqFavoriteSearch({
+                url_list: window.location.href,
+                publish_type: this.publish_type // 传递发布类型参数
+            }).then(res => {
+                if (res.status) {
+                    // 处理数据结构，将product_info的子项提升到上一级
+                    this.productList = this.flattenProductInfo(res.data.favorites);
+                    
+                } else {
+                    this.$message.error(res.msg);
+                }
+            })
+        },
+        /**
+         * 将product_info的所有子项提升到products中每个产品的上一级，去掉product_info字段
+         * @param {Array} historyList - 原始的历史记录列表
+         * @returns {Array} 处理后的历史记录列表
+         */
+        flattenProductInfo(historyList) {
+            if (!Array.isArray(historyList)) {
+                return [];
+            }
+            
+            return historyList.map(historyItem => {
+                if (historyItem.products && Array.isArray(historyItem.products)) {
+                    // 处理每个历史记录中的products数组
+                    const flattenedProducts = historyItem.products.map(product => {
+                        if (product.product_info) {
+                            // 将product_info的所有属性合并到product的上一级
+                            const flattenedProduct = { ...product };
+                            
+                            // 遍历product_info的所有属性
+                            Object.keys(product.product_info).forEach(key => {
+                                // 如果上一级已经有同名属性，则跳过（避免覆盖）
+                                if (!(key in flattenedProduct)) {
+                                    flattenedProduct[key] = product.product_info[key];
+                                }
+                            });
+                            
+                            // 删除product_info字段
+                            delete flattenedProduct.product_info;
+                            
+                            return flattenedProduct;
+                        }
+                        return product;
+                    });
+                    
+                    return {
+                        ...historyItem,
+                        products: flattenedProducts
+                    };
+                }
+                return historyItem;
+            });
+        },
+        /**
+         * 处理删除事件，从列表中移除被删除的项目
+         * @param {string} deletedId - 被删除项目的ID
+         */
+        handleDeleteItem(deletedId) {
+            // 遍历productList，找到包含被删除产品的历史记录
+            for (let i = 0; i < this.productList.length; i++) {
+                const historyItem = this.productList[i];
+                if (historyItem.products && Array.isArray(historyItem.products)) {
+                    // 在products数组中查找并删除指定ID的产品
+                    const productIndex = historyItem.products.findIndex(product => product.id === deletedId);
+                    if (productIndex !== -1) {
+                        // 删除该产品
+                        historyItem.products.splice(productIndex, 1);
+                        
+                        // 如果该历史记录下没有产品了，删除整个历史记录
+                        if (historyItem.products.length === 0) {
+                            this.productList.splice(i, 1);
+                        }
+                        
+                        // 更新视图
+                        this.$forceUpdate();
+                        break;
+                    }
+                }
+            }
+        }
+    }
+}
+</script>
+<style>
+.followBox-title {
+    font-size: 32px;
+    font-weight: bold;
+    color: #363a46;
+    margin-bottom: 15px;
+
+    .hightText {
+        background: linear-gradient(90deg, #275aff, #2ebdfa);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        display: inline-block;
+        font-weight: 700;
+    }
+}
+
+.radio-group-container {
+    width: 100% !important;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    max-width: 1400px;
+}
+
+.radio-group {
+    display: flex;
+    background: #fff;
+    border-radius: 8px;
+    margin-bottom: 15px;
+}
+
+.radio-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    margin-right: 4px;
+    font-size: 16px !important;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    input[type="radio"] {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .radio-text {
+        font-size: 16px;
+        color: #275AFF;
+        font-weight: 500;
+        transition: all 0.3s ease;
+    }
+
+    &:hover {
+        border-color: #275AFF;
+    }
+
+    &.active {
+        background: linear-gradient(to right, #275AFF, #2EBDFA);
+        border-color: #275AFF;
+        box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
+
+        .radio-text {
+            color: #fff;
+        }
+    }
+}
+
+/* 关注记录列表样式 */
+.follow-list {
+    margin-top: 20px;
+}
+
+.follow-item {
+    background: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: 1px solid #f0f0f0;
+    transition: all 0.3s ease;
+}
+
+.follow-item:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    /* transform: translateY(-2px); */
+}
+
+.follow-date {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f5f5f5;
+}
+
+.date-text {
+    font-size: 18px;
+    font-weight: 600;
+    color: #275AFF;
+    margin-right: 12px;
+}
+
+.relative-time {
+    font-size: 14px;
+    color: #999;
+    background: #f8f9fa;
+    padding: 4px 8px;
+    border-radius: 12px;
+}
+
+.follow-content {
+    margin-top: 8px;
+}
+
+/* 空状态样式 */
+.empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    color: #999;
+}
+
+.empty-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    opacity: 0.6;
+}
+
+.empty-text {
+    font-size: 16px;
+    color: #999;
+}
+</style>

f/web-kboss/src/views/homePage/ncmatch/favoriteBox/tool.js

@@ -0,0 +1,75 @@
+// 日期格式化工具函数
+/**
+ * 如果是今年之展示xx月xxx日
+ * 如果是去年之展示xx年xx月xx日
+ * 如果是今年之前之展示xx年xx月xx日
+ * 如果是今年之后之展示xx月xx日
+ */
+
+/**
+ * 格式化浏览日期
+ * @param {string|Date} date - 日期字符串或Date对象
+ * @returns {string} 格式化后的日期字符串
+ */
+export function formatBrowseDate(date) {
+    if (!date) return '';
+    
+    const targetDate = new Date(date);
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const targetYear = targetDate.getFullYear();
+    
+    // 获取月份和日期
+    const month = targetDate.getMonth() + 1;
+    const day = targetDate.getDate();
+    
+    // 如果是今年
+    if (targetYear === currentYear) {
+        return `${month}月${day}日`;
+    }
+    // 如果是去年
+    else if (targetYear === currentYear - 1) {
+        return `${targetYear}年${month}月${day}日`;
+    }
+    // 如果是今年之前
+    else if (targetYear < currentYear) {
+        return `${targetYear}年${month}月${day}日`;
+    }
+    // 如果是今年之后（未来日期）
+    else {
+        return `${month}月${day}日`;
+    }
+}
+
+/**
+ * 获取相对时间描述
+ * @param {string|Date} date - 日期字符串或Date对象
+ * @returns {string} 相对时间描述
+ */
+export function getRelativeTime(date) {
+    if (!date) return '';
+    
+    const targetDate = new Date(date);
+    const currentDate = new Date();
+    const diffTime = currentDate - targetDate;
+    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+    
+    if (diffDays === 0) {
+        return '今天';
+    } else if (diffDays === 1) {
+        return '昨天';
+    } else if (diffDays === 2) {
+        return '前天';
+    } else if (diffDays < 7) {
+        return `${diffDays}天前`;
+    } else if (diffDays < 30) {
+        const weeks = Math.floor(diffDays / 7);
+        return `${weeks}周前`;
+    } else if (diffDays < 365) {
+        const months = Math.floor(diffDays / 30);
+        return `${months}个月前`;
+    } else {
+        const years = Math.floor(diffDays / 365);
+        return `${years}年前`;
+    }
+}

f/web-kboss/src/views/homePage/ncmatch/historyBox/index.vue

@@ -0,0 +1,298 @@
+<template>
+    <div class="historyBox">
+        <div class="historyBox-title">
+            <span>浏览</span>
+            <span class="hightText">记录</span>
+        </div>
+        <div class="radio-group">
+            <label class="radio-item" style="margin-right: 25px;" :class="{ active: publish_type === '1' }">
+                <input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
+                <span class="radio-text">企业商品</span>
+            </label>
+            <label class="radio-item" :class="{ active: publish_type === '2' }">
+                <input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
+                <span class="radio-text">企业需求</span>
+            </label>
+        </div>
+   <div class="history-list" v-if="productList.length > 0">
+    <div class="history-item" v-for="item in productList" :key="item.id">
+      <div class="history-date">
+        <span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
+        <span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
+      </div>
+      <div class="history-content">
+                          <productCard 
+                  contentType="history"
+            :productList="item.products" 
+            :type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
+            @delete-item="handleDeleteItem">
+          </productCard>
+      </div>
+    </div>
+  </div>
+  <div class="empty-state" v-else>
+    <div class="empty-icon">📋</div>
+    <div class="empty-text">暂无浏览记录</div>
+  </div>
+    </div>
+</template>
+<script>
+import { reqUserBrowseHistorySearch } from '@/api/ncmatch';
+import productCard from '../mainPage/productCard/index.vue';
+import { formatBrowseDate, getRelativeTime } from './tool.js';
+export default {
+    name: 'historyBox',
+    data() {
+        return {
+            productList: [],
+            value1: null,
+            publish_type: '1', // 默认选择企业商品
+
+            myProductList: [
+       
+            ]
+        }
+    },
+    created() {
+        this.reqUserBrowseHistorySearch();
+    },
+    components: {
+        productCard
+    },
+    methods: {
+        formatBrowseDate,
+        getRelativeTime,
+        handleTypeChange() {
+            // 当类型改变时重新获取数据
+            this.reqUserBrowseHistorySearch();
+        },
+        reqUserBrowseHistorySearch() {
+            reqUserBrowseHistorySearch({
+                url_list: window.location.href,
+                publish_type: this.publish_type // 传递发布类型参数
+            }).then(res => {
+                if (res.status) {
+                    // 处理数据结构，将product_info的子项提升到上一级
+                    this.productList = this.flattenProductInfo(res.data.history_list);
+                    
+                } else {
+                    this.$message.error(res.msg);
+                }
+            })
+        },
+        /**
+         * 将product_info的所有子项提升到products中每个产品的上一级，去掉product_info字段
+         * @param {Array} historyList - 原始的历史记录列表
+         * @returns {Array} 处理后的历史记录列表
+         */
+        flattenProductInfo(historyList) {
+            if (!Array.isArray(historyList)) {
+                return [];
+            }
+            
+            return historyList.map(historyItem => {
+                if (historyItem.products && Array.isArray(historyItem.products)) {
+                    // 处理每个历史记录中的products数组
+                    const flattenedProducts = historyItem.products.map(product => {
+                        if (product.product_info) {
+                            // 将product_info的所有属性合并到product的上一级
+                            const flattenedProduct = { ...product };
+                            
+                            // 遍历product_info的所有属性
+                            Object.keys(product.product_info).forEach(key => {
+                                // 如果上一级已经有同名属性，则跳过（避免覆盖）
+                                if (!(key in flattenedProduct)) {
+                                    flattenedProduct[key] = product.product_info[key];
+                                }
+                            });
+                            
+                            // 删除product_info字段
+                            delete flattenedProduct.product_info;
+                            
+                            return flattenedProduct;
+                        }
+                        return product;
+                    });
+                    
+                    return {
+                        ...historyItem,
+                        products: flattenedProducts
+                    };
+                }
+                return historyItem;
+            });
+        },
+        /**
+         * 处理删除事件，从列表中移除被删除的项目
+         * @param {string} deletedId - 被删除项目的ID
+         */
+        handleDeleteItem(deletedId) {
+            // 遍历productList，找到包含被删除产品的历史记录
+            for (let i = 0; i < this.productList.length; i++) {
+                const historyItem = this.productList[i];
+                if (historyItem.products && Array.isArray(historyItem.products)) {
+                    // 在products数组中查找并删除指定ID的产品
+                    const productIndex = historyItem.products.findIndex(product => product.id === deletedId);
+                    if (productIndex !== -1) {
+                        // 删除该产品
+                        historyItem.products.splice(productIndex, 1);
+                        
+                        // 如果该历史记录下没有产品了，删除整个历史记录
+                        if (historyItem.products.length === 0) {
+                            this.productList.splice(i, 1);
+                        }
+                        
+                        // 更新视图
+                        this.$forceUpdate();
+                        break;
+                    }
+                }
+            }
+        }
+    }
+}
+</script>
+<style>
+.historyBox-title {
+    font-size: 32px;
+    font-weight: bold;
+    color: #363a46;
+    margin-bottom: 15px;
+
+    .hightText {
+        background: linear-gradient(90deg, #275aff, #2ebdfa);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        display: inline-block;
+        font-weight: 700;
+    }
+}
+
+.radio-group-container {
+    width: 100% !important;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    max-width: 1400px;
+}
+
+.radio-group {
+    display: flex;
+    background: #fff;
+    border-radius: 8px;
+    margin-bottom: 15px;
+}
+
+.radio-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    margin-right: 4px;
+    font-size: 16px !important;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    input[type="radio"] {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .radio-text {
+        font-size: 16px;
+        color: #275AFF;
+        font-weight: 500;
+        transition: all 0.3s ease;
+    }
+
+    &:hover {
+        border-color: #275AFF;
+    }
+
+    &.active {
+        background: linear-gradient(to right, #275AFF, #2EBDFA);
+        border-color: #275AFF;
+        box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
+
+        .radio-text {
+            color: #fff;
+        }
+    }
+}
+
+/* 历史记录列表样式 */
+.history-list {
+    margin-top: 20px;
+}
+
+.history-item {
+    background: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: 1px solid #f0f0f0;
+    transition: all 0.3s ease;
+}
+
+.history-item:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    /* transform: translateY(-2px); */
+}
+
+.history-date {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f5f5f5;
+}
+
+.date-text {
+    font-size: 18px;
+    font-weight: 600;
+    color: #275AFF;
+    margin-right: 12px;
+}
+
+.relative-time {
+    font-size: 14px;
+    color: #999;
+    background: #f8f9fa;
+    padding: 4px 8px;
+    border-radius: 12px;
+}
+
+.history-content {
+    margin-top: 8px;
+}
+
+/* 空状态样式 */
+.empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    color: #999;
+}
+
+.empty-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    opacity: 0.6;
+}
+
+.empty-text {
+    font-size: 16px;
+    color: #999;
+}
+</style>

f/web-kboss/src/views/homePage/ncmatch/historyBox/tool.js

@@ -0,0 +1,75 @@
+// 日期格式化工具函数
+/**
+ * 如果是今年之展示xx月xxx日
+ * 如果是去年之展示xx年xx月xx日
+ * 如果是今年之前之展示xx年xx月xx日
+ * 如果是今年之后之展示xx月xx日
+ */
+
+/**
+ * 格式化浏览日期
+ * @param {string|Date} date - 日期字符串或Date对象
+ * @returns {string} 格式化后的日期字符串
+ */
+export function formatBrowseDate(date) {
+    if (!date) return '';
+    
+    const targetDate = new Date(date);
+    const currentDate = new Date();
+    const currentYear = currentDate.getFullYear();
+    const targetYear = targetDate.getFullYear();
+    
+    // 获取月份和日期
+    const month = targetDate.getMonth() + 1;
+    const day = targetDate.getDate();
+    
+    // 如果是今年
+    if (targetYear === currentYear) {
+        return `${month}月${day}日`;
+    }
+    // 如果是去年
+    else if (targetYear === currentYear - 1) {
+        return `${targetYear}年${month}月${day}日`;
+    }
+    // 如果是今年之前
+    else if (targetYear < currentYear) {
+        return `${targetYear}年${month}月${day}日`;
+    }
+    // 如果是今年之后（未来日期）
+    else {
+        return `${month}月${day}日`;
+    }
+}
+
+/**
+ * 获取相对时间描述
+ * @param {string|Date} date - 日期字符串或Date对象
+ * @returns {string} 相对时间描述
+ */
+export function getRelativeTime(date) {
+    if (!date) return '';
+    
+    const targetDate = new Date(date);
+    const currentDate = new Date();
+    const diffTime = currentDate - targetDate;
+    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+    
+    if (diffDays === 0) {
+        return '今天';
+    } else if (diffDays === 1) {
+        return '昨天';
+    } else if (diffDays === 2) {
+        return '前天';
+    } else if (diffDays < 7) {
+        return `${diffDays}天前`;
+    } else if (diffDays < 30) {
+        const weeks = Math.floor(diffDays / 7);
+        return `${weeks}周前`;
+    } else if (diffDays < 365) {
+        const months = Math.floor(diffDays / 30);
+        return `${months}个月前`;
+    } else {
+        const years = Math.floor(diffDays / 365);
+        return `${years}年前`;
+    }
+}

f/web-kboss/src/views/homePage/ncmatch/mainPage/index.vue

@@ -16,7 +16,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      boxLoading:false,
+      boxLoading: false,
       selectedCategory: "",
       showTip: false,
       total: 0,
@@ -302,11 +302,11 @@ export default Vue.extend({
           <span class="publish-goods" @click="sendInfo('2')">发布需求</span>
           <span class="publish-goods" @click="sendInfo('1')">发布商品</span>
 
-          <!-- <ul class="userBtn">
+          <ul class="userBtn">
-            <li><img src="./img/eye.png" alt="">浏览记录</li>
+            <li @click="$router.push('/ncmatchHome/historyBox')"><img style="width: 26px;height: 26px;" src="./img/eye.png" alt="">浏览记录</li>
-            <li><img src="./img/collect.png" alt="">收藏商品</li>
+            <li @click="$router.push('/ncmatchHome/favoriteBox')"><img style="width: 26px;height: 26px;" src="./img/collect.png" alt="">我的收藏</li>
-            <li><img src="./img/like.png" alt="">关注需求</li>
+            <!-- <li><img src="./img/like.png" alt="">关注需求</li> -->
-          </ul> -->
+          </ul>
         </aside>
       </div>
     </main>
@@ -355,12 +355,20 @@ export default Vue.extend({
     justify-content: center;
     transition: all 0.3s;
 
+    * {
+      img {
+        width: 20px !important;
+        height: 20px !important;
+      }
+    }
+
     &:hover {
       transition: all 0.3s;
       cursor: pointer;
       color: #2c96fc;
 
       svg {
+
         path {
           fill: #2c96fc !important;
         }
@@ -482,7 +490,7 @@ export default Vue.extend({
   display: flex;
   justify-content: center;
   align-items: center;
-
+  margin-top: 50px;
   .activeMenu {
     background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
     color: white;
@@ -697,8 +705,9 @@ export default Vue.extend({
 
 .user-sidebar {
   height: 100%;
-  *{
+
-    font-size: 20px!important;
+  * {
+    font-size: 20px !important;
   }
 }
 

f/web-kboss/src/views/homePage/ncmatch/mainPage/productCard/index.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- 产品列表 -->
   <div>
+    {{   contentType }}
     <ul v-if="type === 'homePage'" class="productListContent" style="padding-top: 16px;">
       <li class="product-item" v-for="item in productList" :key="item.id">
         <div v-if="item.img!=null" class="product-image">
@@ -52,9 +53,9 @@
           </div>
           <div class="product-price">
             <span class="price">¥{{ item.discount_price }}</span>
-            <span class="price-unit">{{ item.unit }} {{ item.short_term === '1' ? '（可短租）' : '' }} </span> <el-tag v-if="item.favorite=='1'" type="success">已收藏</el-tag>
+            <span class="price-unit">{{ item.unit }} {{ item.short_term === '1' ? '（可短租）' : '' }} </span> <el-tag size="mini" style="margin-left: 10px;" v-if="item.favorite=='1'" type="success">已收藏</el-tag>
           </div>
-          <div style="display: flex;justify-content: flex-start;align-items: center;gap: 16px;">
+          <div class="action-buttons">
             <el-button :disabled="loadingStates[item.id]" class="consult-btn" @click="openTalk">立即咨询</el-button>
             <span @click="openDetail(item)" class="detail-btn">
               详情 <i v-if="loadingStates[item.id]" class="el-icon-loading"></i> <span v-else>>></span>
@@ -73,6 +74,11 @@
                 style="width: 14px;height: 14px;margin-left: 2px;"
               ></i>
             </span>
+            <span v-if="contentType === 'history'||contentType === 'favorite'" @click="deleteProduct(item)" class="delete-btn" :class="{ 'loading': deleteLoadingStates[item.id] }">
+              删除
+              <i v-if="deleteLoadingStates[item.id]" class="el-icon-loading"></i>
+              <i v-else style="color: red;" class="el-icon-delete"></i>
+            </span>
           </div>
 
         </div>
@@ -110,7 +116,7 @@
             <span class="price">¥{{ item.discount_price }}</span>
             <span class="price-unit">{{ item.unit }} {{ item.short_term === '1' ? '（可短租）' : '' }} </span>
           </div>
-          <div style="display: flex;justify-content: flex-start;align-items: center;gap: 16px;">
+          <div class="action-buttons">
             <el-button :disabled="loadingStates[item.id]" class="consult-btn" @click="openTalk">立即咨询</el-button>
             <span @click="openDetail(item)" class="detail-btn">
               详情 <i v-if="loadingStates[item.id]" class="el-icon-loading"></i> <span v-else>>></span>
@@ -129,6 +135,11 @@
                 style="width: 14px;height: 14px;margin-left: 2px;"
               ></i>
             </span>
+            <span v-if="contentType === 'history'||contentType === 'favorite'" @click="deleteProduct(item)" class="delete-btn" :class="{ 'loading': deleteLoadingStates[item.id] }">
+              删除
+              <i v-if="deleteLoadingStates[item.id]" class="el-icon-loading"></i>
+              <i v-else style="color: red;" class="el-icon-delete"></i>
+            </span>
           </div>
         </div>
       </li>
@@ -138,13 +149,17 @@
 </template>
 <script>
 import Talk from '@/views/homePage/dialog/talk/index.vue'
-import { reqGetProductDetail,reqPublishProductCollect,reqFavoriteDelete } from '@/api/ncmatch'
+import { reqGetProductDetail,reqPublishProductCollect,reqFavoriteDelete,reqUserBrowseHistoryDeleteById,reqFavoriteDeleteById } from '@/api/ncmatch'
 export default {
   name: 'productCard',
   components: {
     Talk
   },
   props: {
+    contentType: {
+      type: String,
+      default: ''
+    },
     productList: {
       type: Array,
       default: () => []
@@ -161,18 +176,70 @@ export default {
   data(){
     return{
       loadingStates: {},
-      collectLoadingStates: {}
+      collectLoadingStates: {},
+      deleteLoadingStates: {}
     }
   },
   methods: {
+    //删除历史记录
+    deleteHistory(item){
+      this.$set(this.deleteLoadingStates, item.id, true);
+      reqUserBrowseHistoryDeleteById({id:item.id}).then(res=>{
+        if(res.status){
+          this.$emit('delete-item', item.id);
+        }else{
+          this.$message.error(res.msg);
+        }
+        this.$set(this.deleteLoadingStates, item.id, false);
+      }).catch(err => {
+        console.error('删除失败:', err);
+        this.$message.error('删除失败，请重试');
+        this.$set(this.deleteLoadingStates, item.id, false);
+      });
+    },
+    //删除关注记录
+    deleteFavorite(item){
+      console.log("删除",item);
+      this.$set(this.deleteLoadingStates, item.id, true);
+      reqFavoriteDeleteById({id:item.id}).then(res=>{
+        if(res.status){
+          this.$message.success("删除成功");
+          this.$emit('delete-item', item.id);
+        }else{
+          this.$message.error(res.msg);
+        }
+        this.$set(this.deleteLoadingStates, item.id, false);
+      }).catch(err => {
+        console.error('删除失败:', err);
+        this.$message.error('删除失败，请重试');
+        this.$set(this.deleteLoadingStates, item.id, false);
+      });
+    },
+    deleteProduct(item){
+      console.log("删除",item);
+      if(this.contentType === 'history'){
+        this.deleteHistory(item);
+      }else if(this.contentType === 'favorite'){
+        this.deleteFavorite(item);
+      }
+      
+      // reqPublishProductDelete({
+      //   id:item.id,
+      // }).then(res=>{
+      //   console.log("删除",res);
+      // })
+    }, 
     collect(item){
       this.$set(this.collectLoadingStates, item.id, true);
       // 这里添加收藏/取消收藏的逻辑
       console.log("收藏",item);
+      
       if(item.favorite=='1'){
+  
         reqFavoriteDelete({
           id:item.id,
         }).then(res=>{
+                item.favorite='0'
           if(res.status){
             this.$message.success(res.msg);
             this.$set(this.collectLoadingStates, item.id, false);
@@ -182,10 +249,12 @@ export default {
           }
         })
       }else if(item.favorite=='0'){
+
         reqPublishProductCollect({
           productid:item.id,
           favorite_type:item.publish_type
         }).then(res=>{
+          item.favorite='1'
           if(res.status){
             this.$message.success(res.msg);
             this.$set(this.collectLoadingStates, item.id, false);
@@ -350,14 +419,24 @@ export default {
         cursor: pointer;
         transition: all 0.3s ease;
         white-space: nowrap;
+        flex: 1;
         min-width: 120px;
-        flex-shrink: 0;
+        max-width: 200px;
 
         &:hover {
           box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
         }
       }
 
+      .action-buttons {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: nowrap;
+        margin-top: 16px;
+      }
+
       .detail-btn {
         display: flex;
         align-items: center;
@@ -365,9 +444,25 @@ export default {
         font-size: 14px;
         color: #275AFF;
         cursor: pointer;
-        min-width: 50px;
+        width: fit-content;
-        margin-left: 25px;
+        white-space: nowrap;
       }
+
+             .delete-btn {
+         display: flex;
+         align-items: center;
+         justify-content: flex-start;
+         font-size: 14px;
+         color: #e74c3c;
+         cursor: pointer;
+         width: fit-content;
+         white-space: nowrap;
+         
+         &.loading {
+           cursor: not-allowed;
+           opacity: 0.7;
+         }
+       }
     }
   }
 }