bugfiox
This commit is contained in:
parent
15d135e2f5
commit
c969a62f63
@ -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
|
||||
})
|
||||
}
|
||||
@ -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" },
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
298
f/web-kboss/src/views/homePage/ncmatch/favoriteBox/index.vue
Normal file
298
f/web-kboss/src/views/homePage/ncmatch/favoriteBox/index.vue
Normal file
@ -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>
|
||||
75
f/web-kboss/src/views/homePage/ncmatch/favoriteBox/tool.js
Normal file
75
f/web-kboss/src/views/homePage/ncmatch/favoriteBox/tool.js
Normal file
@ -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}年前`;
|
||||
}
|
||||
}
|
||||
298
f/web-kboss/src/views/homePage/ncmatch/historyBox/index.vue
Normal file
298
f/web-kboss/src/views/homePage/ncmatch/historyBox/index.vue
Normal file
@ -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>
|
||||
75
f/web-kboss/src/views/homePage/ncmatch/historyBox/tool.js
Normal file
75
f/web-kboss/src/views/homePage/ncmatch/historyBox/tool.js
Normal file
@ -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}年前`;
|
||||
}
|
||||
}
|
||||
@ -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">
|
||||
<li><img src="./img/eye.png" alt="">浏览记录</li>
|
||||
<li><img src="./img/collect.png" alt="">收藏商品</li>
|
||||
<li><img src="./img/like.png" alt="">关注需求</li>
|
||||
</ul> -->
|
||||
<ul class="userBtn">
|
||||
<li @click="$router.push('/ncmatchHome/historyBox')"><img style="width: 26px;height: 26px;" src="./img/eye.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> -->
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,8 +444,24 @@ export default {
|
||||
font-size: 14px;
|
||||
color: #275AFF;
|
||||
cursor: pointer;
|
||||
min-width: 50px;
|
||||
margin-left: 25px;
|
||||
width: fit-content;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user