Compare commits
No commits in common. "3bbbc8276f5c8fdde64fae33f7a16fbf88ad6a41" and "c2b740a1917c01931a99a258f517299fee60d586" have entirely different histories.
3bbbc8276f
...
c2b740a191
@ -1,45 +0,0 @@
|
||||
async def home_page_product_add(ns={}):
|
||||
"""
|
||||
添加产品信息
|
||||
:param ns: 包含产品信息的字典
|
||||
"""
|
||||
ns_dic = {
|
||||
'id': uuid(), # 固定写法
|
||||
'menu_id': ns.get('menu_id'),
|
||||
'name': ns.get('name'),
|
||||
'description': ns.get('description'),
|
||||
'label': ns.get('label'),
|
||||
'product_group': ns.get('product_group'),
|
||||
'url': ns.get('url'),
|
||||
'list_url': ns.get('list_url'),
|
||||
'icon_url': ns.get('icon_url'),
|
||||
'source': ns.get('source'),
|
||||
'sort_order': ns.get('sort_order', 0),
|
||||
'del_flg': '0'
|
||||
}
|
||||
|
||||
# 验证必填字段
|
||||
if not ns_dic.get('menu_id') or not ns_dic.get('name'):
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'menu_id and name are required'
|
||||
}
|
||||
|
||||
db = DBPools()
|
||||
async with db.sqlorContext('kboss') as sor:
|
||||
try:
|
||||
await sor.C('home_page_product_info', ns_dic)
|
||||
return {
|
||||
'status': True,
|
||||
'msg': 'create product success',
|
||||
'data': {'id': ns_dic['id']}
|
||||
}
|
||||
except Exception as e:
|
||||
await sor.rollback()
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'create product failed, %s' % str(e)
|
||||
}
|
||||
|
||||
ret = await home_page_product_add(params_kw)
|
||||
return ret
|
||||
@ -1,33 +0,0 @@
|
||||
async def home_page_product_delete(ns={}):
|
||||
"""
|
||||
软删除产品信息 id值必传 并且把del_flg值修改为1
|
||||
:param ns:
|
||||
:return:
|
||||
"""
|
||||
if not ns.get('id'):
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'product id is required'
|
||||
}
|
||||
|
||||
ns_dic = {
|
||||
'id': ns.get('id'),
|
||||
'del_flg': '1'
|
||||
}
|
||||
db = DBPools()
|
||||
async with db.sqlorContext('kboss') as sor:
|
||||
try:
|
||||
await sor.U('home_page_product_info', ns_dic)
|
||||
return {
|
||||
'status': True,
|
||||
'msg': 'delete product success'
|
||||
}
|
||||
except Exception as e:
|
||||
await sor.rollback()
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'delete product failed, %s' % str(e)
|
||||
}
|
||||
|
||||
ret = await home_page_product_delete(params_kw)
|
||||
return ret
|
||||
@ -1,45 +0,0 @@
|
||||
async def home_page_product_menu_add(ns={}):
|
||||
"""
|
||||
添加首页产品菜单
|
||||
:param ns: 包含菜单信息的字典
|
||||
"""
|
||||
ns_dic = {
|
||||
'id': uuid(), # 固定写法
|
||||
'parent_id': ns.get('parent_id'), # NULL表示一级菜单
|
||||
'menu_level': ns.get('menu_level'), # 1-一级, 2-二级, 3-三级
|
||||
'title': ns.get('title'),
|
||||
'sort_order': ns.get('sort_order', 0)
|
||||
}
|
||||
|
||||
|
||||
# 验证必填字段
|
||||
if not ns_dic.get('menu_level') or not ns_dic.get('title'):
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'menu_level and title are required'
|
||||
}
|
||||
|
||||
if ns.get('menu_level') > 1 and not ns.get('parent_id'):
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'parent_id is required for menu_level > 1'
|
||||
}
|
||||
|
||||
db = DBPools()
|
||||
async with db.sqlorContext('kboss') as sor:
|
||||
try:
|
||||
await sor.C('home_page_product_menu', ns_dic)
|
||||
return {
|
||||
'status': True,
|
||||
'msg': 'create menu success',
|
||||
'data': {'id': ns_dic['id']}
|
||||
}
|
||||
except Exception as e:
|
||||
await sor.rollback()
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'create menu failed, %s' % str(e)
|
||||
}
|
||||
|
||||
ret = await home_page_product_menu_add(params_kw)
|
||||
return ret
|
||||
@ -1,33 +0,0 @@
|
||||
async def home_page_product_menu_delete(ns={}):
|
||||
"""
|
||||
软删除菜单 id值必传 并且把del_flg值修改为1
|
||||
:param ns:
|
||||
:return:
|
||||
"""
|
||||
if not ns.get('id'):
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'menu id is required'
|
||||
}
|
||||
|
||||
ns_dic = {
|
||||
'id': ns.get('id'),
|
||||
'del_flg': '1'
|
||||
}
|
||||
db = DBPools()
|
||||
async with db.sqlorContext('kboss') as sor:
|
||||
try:
|
||||
await sor.U('home_page_product_menu', ns_dic)
|
||||
return {
|
||||
'status': True,
|
||||
'msg': 'delete menu success'
|
||||
}
|
||||
except Exception as e:
|
||||
await sor.rollback()
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'delete menu failed, %s' % str(e)
|
||||
}
|
||||
|
||||
ret = await home_page_product_menu_delete(params_kw)
|
||||
return ret
|
||||
@ -1,229 +0,0 @@
|
||||
async def home_page_product_menu_search(ns={}):
|
||||
"""
|
||||
查找菜单，支持按层级和父级ID筛选
|
||||
规则：
|
||||
1. 无参数时，返回所有数据并有嵌套层级
|
||||
2. 有参数时，menu_level和title必传，返回当前层级以及向下的嵌套层级数据
|
||||
:param ns:
|
||||
:return:
|
||||
"""
|
||||
db = DBPools()
|
||||
async with db.sqlorContext('kboss') as sor:
|
||||
try:
|
||||
# 无参数时，返回所有数据
|
||||
if not ns:
|
||||
conditions = {"del_flg": "0"}
|
||||
result = await sor.R('home_page_product_menu', conditions)
|
||||
menu_tree = await build_menu_tree(result)
|
||||
return {
|
||||
'status': True,
|
||||
'msg': 'search all menu success',
|
||||
'data': menu_tree
|
||||
}
|
||||
|
||||
# 有参数时，验证必填参数
|
||||
# if not ns.get('menu_level') or not ns.get('title'):
|
||||
# return {
|
||||
# 'status': False,
|
||||
# 'msg': 'menu_level and title are required when parameters are provided'
|
||||
# }
|
||||
|
||||
# 获取指定层级及向下层级的数据
|
||||
menu_level = int(ns.get('menu_level'))
|
||||
title = ns.get('title')
|
||||
|
||||
# 构建查询条件，获取当前层级及向下层级的数据
|
||||
conditions = {"del_flg": "0"}
|
||||
|
||||
# 根据层级获取相应的数据
|
||||
if menu_level == 1:
|
||||
# 获取所有层级的数据，用于构建完整的树形结构
|
||||
all_conditions = {"del_flg": "0"}
|
||||
if title:
|
||||
# 如果指定了标题，获取所有层级中标题匹配的数据
|
||||
all_result = await sor.R('home_page_product_menu', all_conditions)
|
||||
filtered_result = [item for item in all_result if title in item.get('title', '')]
|
||||
|
||||
# 获取匹配项的所有子级数据
|
||||
result = []
|
||||
parent_ids = set()
|
||||
|
||||
# 收集一级菜单的ID
|
||||
for item in filtered_result:
|
||||
if item['menu_level'] == 1:
|
||||
parent_ids.add(item['id'])
|
||||
result.append(item)
|
||||
|
||||
# 获取所有子级数据
|
||||
if parent_ids:
|
||||
all_data = await sor.R('home_page_product_menu', {"del_flg": "0"})
|
||||
for item in all_data:
|
||||
if item['parent_id'] in parent_ids:
|
||||
result.append(item)
|
||||
|
||||
menu_tree = await build_menu_tree(result)
|
||||
else:
|
||||
# 获取所有数据
|
||||
result = await sor.R('home_page_product_menu', all_conditions)
|
||||
menu_tree = await build_menu_tree(result)
|
||||
|
||||
elif menu_level == 2:
|
||||
# 获取二级菜单及其子级（三级）
|
||||
all_conditions = {"del_flg": "0"}
|
||||
all_result = await sor.R('home_page_product_menu', all_conditions)
|
||||
|
||||
# 筛选匹配的二级菜单
|
||||
level2_items = [item for item in all_result if item['menu_level'] == 2 and title in item.get('title', '')]
|
||||
|
||||
if level2_items:
|
||||
parent_ids = set(item['id'] for item in level2_items)
|
||||
|
||||
# 获取对应的一级菜单
|
||||
result = []
|
||||
for item in all_result:
|
||||
if item['menu_level'] == 1 and any(level2['parent_id'] == item['id'] for level2 in level2_items):
|
||||
result.append(item)
|
||||
|
||||
# 添加匹配的二级菜单
|
||||
result.extend(level2_items)
|
||||
|
||||
# 获取三级子菜单
|
||||
for item in all_result:
|
||||
if item['menu_level'] == 3 and item['parent_id'] in parent_ids:
|
||||
result.append(item)
|
||||
|
||||
menu_tree = await build_menu_tree(result)
|
||||
else:
|
||||
menu_tree = []
|
||||
|
||||
elif menu_level == 3:
|
||||
# 获取三级菜单
|
||||
all_conditions = {"del_flg": "0"}
|
||||
all_result = await sor.R('home_page_product_menu', all_conditions)
|
||||
|
||||
# 筛选匹配的三级菜单
|
||||
level3_items = [item for item in all_result if item['menu_level'] == 3 and title in item.get('title', '')]
|
||||
|
||||
if level3_items:
|
||||
result = []
|
||||
|
||||
# 获取对应的二级和一级菜单
|
||||
level2_ids = set()
|
||||
level1_ids = set()
|
||||
|
||||
for item in level3_items:
|
||||
level2_ids.add(item['parent_id'])
|
||||
|
||||
for item in all_result:
|
||||
if item['menu_level'] == 2 and item['id'] in level2_ids:
|
||||
result.append(item)
|
||||
level1_ids.add(item['parent_id'])
|
||||
|
||||
for item in all_result:
|
||||
if item['menu_level'] == 1 and item['id'] in level1_ids:
|
||||
result.append(item)
|
||||
|
||||
# 添加匹配的三级菜单
|
||||
result.extend(level3_items)
|
||||
|
||||
menu_tree = await build_menu_tree(result)
|
||||
else:
|
||||
menu_tree = []
|
||||
else:
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'Invalid menu_level, must be 1, 2, or 3'
|
||||
}
|
||||
|
||||
return {
|
||||
'status': True,
|
||||
'msg': 'search menu success',
|
||||
'data': menu_tree
|
||||
}
|
||||
|
||||
except Exception as e:
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'search menu failed, %s' % str(e)
|
||||
}
|
||||
|
||||
async def get_home_page_product(ns={}):
|
||||
db = DBPools()
|
||||
async with db.sqlorContext('kboss') as sor:
|
||||
find_sql = """select * from home_page_product_info where menu_id = '%s' and del_flg = '0' order by sort_order asc;""" % ns.get("menu_id")
|
||||
result = await sor.sqlExe(find_sql, {})
|
||||
return result
|
||||
|
||||
# 构建菜单树形结构
|
||||
async def build_menu_tree(menu_list, target_level=None, target_title=None):
|
||||
"""
|
||||
将扁平的菜单列表转换为树形结构
|
||||
:param menu_list: 菜单列表
|
||||
:param target_level: 目标层级（可选）
|
||||
:param target_title: 目标标题（可选）
|
||||
:return: 树形结构的菜单
|
||||
"""
|
||||
|
||||
# 通过sort_order对菜单进行排序
|
||||
menu_list.sort(key=lambda x: x['sort_order'], reverse=True)
|
||||
|
||||
menu_dict = {}
|
||||
result = []
|
||||
|
||||
# 先创建所有菜单的字典
|
||||
for menu in menu_list:
|
||||
# 创建菜单节点的基本结构
|
||||
menu_node = {
|
||||
'id': menu['id'],
|
||||
'title': menu['title'],
|
||||
'menu_level': menu['menu_level'],
|
||||
'parent_id': menu['parent_id'],
|
||||
'children': [] # 动态子菜单数组
|
||||
}
|
||||
menu_dict[menu['id']] = menu_node
|
||||
|
||||
# 构建父子关系
|
||||
for menu in menu_list:
|
||||
menu_node = menu_dict[menu['id']]
|
||||
parent_id = menu['parent_id']
|
||||
|
||||
# 如果有父级且父级存在
|
||||
if parent_id and parent_id in menu_dict:
|
||||
parent_node = menu_dict[parent_id]
|
||||
parent_node['children'].append(menu_node)
|
||||
else:
|
||||
# 没有父级的菜单（根节点）
|
||||
result.append(menu_node)
|
||||
|
||||
# 递归构建层级结构
|
||||
async def build_hierarchy(node, level=1):
|
||||
"""递归构建层级结构"""
|
||||
if level == 1:
|
||||
return {
|
||||
'id': node['id'],
|
||||
'firTitle': node['title'],
|
||||
'secMenu': [await build_hierarchy(child, 2) for child in node['children']]
|
||||
}
|
||||
elif level == 2:
|
||||
return {
|
||||
'id': node['id'],
|
||||
'secTitle': node['title'],
|
||||
'thrMenu': [await build_hierarchy(child, 3) for child in node['children']]
|
||||
}
|
||||
else:
|
||||
# 三级及以上
|
||||
return {
|
||||
'id': node['id'],
|
||||
'thrTitle': node['title'],
|
||||
'value': await get_home_page_product({'menu_id': node['id']}) # 三级菜单没有子菜单，value为空列表
|
||||
}
|
||||
|
||||
# 构建最终的树形结构
|
||||
final_result = []
|
||||
for root_node in result:
|
||||
final_result.append(await build_hierarchy(root_node))
|
||||
|
||||
return final_result
|
||||
|
||||
ret = await home_page_product_menu_search(params_kw)
|
||||
return ret
|
||||
@ -1,40 +0,0 @@
|
||||
async def home_page_product_menu_update(ns={}):
|
||||
"""
|
||||
更新菜单信息
|
||||
:param ns:
|
||||
:return:
|
||||
"""
|
||||
if not ns.get('id'):
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'menu id is required'
|
||||
}
|
||||
|
||||
# 构建更新字段，只更新传入的字段
|
||||
ns_dic = {'id': ns.get('id')}
|
||||
if ns.get('title'):
|
||||
ns_dic['title'] = ns.get('title')
|
||||
if ns.get('parent_id') is not None:
|
||||
ns_dic['parent_id'] = ns.get('parent_id')
|
||||
if ns.get('menu_level'):
|
||||
ns_dic['menu_level'] = ns.get('menu_level')
|
||||
if ns.get('sort_order') is not None:
|
||||
ns_dic['sort_order'] = ns.get('sort_order')
|
||||
|
||||
db = DBPools()
|
||||
async with db.sqlorContext('kboss') as sor:
|
||||
try:
|
||||
await sor.U('home_page_product_menu', ns_dic)
|
||||
return {
|
||||
'status': True,
|
||||
'msg': 'update menu success'
|
||||
}
|
||||
except Exception as e:
|
||||
await sor.rollback()
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'update menu failed, %s' % str(e)
|
||||
}
|
||||
|
||||
ret = await home_page_product_menu_update(params_kw)
|
||||
return ret
|
||||
@ -1,86 +0,0 @@
|
||||
async def home_page_product_search(ns={}):
|
||||
"""
|
||||
查找产品信息，支持按菜单ID、产品名称等筛选
|
||||
:param ns:
|
||||
:return:
|
||||
"""
|
||||
# 分页参数
|
||||
current_page = int(ns.get('current_page', 1))
|
||||
page_size = int(ns.get('page_size', 10))
|
||||
offset = (current_page - 1) * page_size
|
||||
|
||||
# 构建查询条件
|
||||
conditions = ["hp.del_flg = '0'"]
|
||||
|
||||
if ns.get('menu_id'):
|
||||
conditions.append(f"hp.menu_id = '{ns.get('menu_id')}'")
|
||||
if ns.get('name'):
|
||||
conditions.append(f"hp.name LIKE '%{ns.get('name')}%'")
|
||||
if ns.get('product_group'):
|
||||
conditions.append(f"hp.product_group = '{ns.get('product_group')}'")
|
||||
if ns.get('source'):
|
||||
conditions.append(f"hp.source = '{ns.get('source')}'")
|
||||
|
||||
where_clause = " AND ".join(conditions)
|
||||
|
||||
db = DBPools()
|
||||
async with db.sqlorContext('kboss') as sor:
|
||||
try:
|
||||
# 查询总数
|
||||
count_sql = f"""
|
||||
SELECT COUNT(*) AS total_count
|
||||
FROM home_page_product_info hp
|
||||
WHERE {where_clause}
|
||||
"""
|
||||
total_count = (await sor.sqlExe(count_sql, {}))[0]['total_count']
|
||||
|
||||
# 查询产品列表
|
||||
find_sql = f"""
|
||||
SELECT hp.*, hm.title as menu_title, hm.menu_level
|
||||
FROM home_page_product_info hp
|
||||
LEFT JOIN home_page_product_menu hm ON hp.menu_id = hm.id
|
||||
WHERE {where_clause}
|
||||
ORDER BY hp.sort_order ASC, hp.create_at DESC
|
||||
LIMIT {page_size} OFFSET {offset}
|
||||
"""
|
||||
result = await sor.sqlExe(find_sql, {})
|
||||
|
||||
# 格式化返回数据，匹配home_page_menu.json的数据格式
|
||||
product_list = []
|
||||
for product in result:
|
||||
product_data = {
|
||||
'id': product['id'],
|
||||
'name': product['name'],
|
||||
'description': product['description'],
|
||||
'label': product['label'],
|
||||
'product_group': product['product_group'], # 注意字段名映射
|
||||
'url': product['url'],
|
||||
'list_url': product['list_url'], # 注意字段名映射
|
||||
'iconUrl': product['icon_url'], # 注意字段名映射
|
||||
'icon_url': product['source'],
|
||||
'menu_id': product['menu_id'],
|
||||
'menu_title': product['menu_title'],
|
||||
'menu_level': product['menu_level']
|
||||
}
|
||||
product_list.append(product_data)
|
||||
|
||||
return {
|
||||
'status': True,
|
||||
'msg': 'search product success',
|
||||
'data': {
|
||||
'product_list': product_list
|
||||
},
|
||||
'pagination': {
|
||||
'total': total_count,
|
||||
'page_size': page_size,
|
||||
'current_page': current_page,
|
||||
}
|
||||
}
|
||||
except Exception as e:
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'search product failed, %s' % str(e)
|
||||
}
|
||||
|
||||
ret = await home_page_product_search(params_kw)
|
||||
return ret
|
||||
@ -1,52 +0,0 @@
|
||||
async def home_page_product_update(ns={}):
|
||||
"""
|
||||
更新产品信息
|
||||
:param ns:
|
||||
:return:
|
||||
"""
|
||||
if not ns.get('id'):
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'product id is required'
|
||||
}
|
||||
|
||||
# 构建更新字段，只更新传入的字段
|
||||
ns_dic = {'id': ns.get('id')}
|
||||
if ns.get('name'):
|
||||
ns_dic['name'] = ns.get('name')
|
||||
if ns.get('description') is not None:
|
||||
ns_dic['description'] = ns.get('description')
|
||||
if ns.get('label') is not None:
|
||||
ns_dic['label'] = ns.get('label')
|
||||
if ns.get('product_group') is not None:
|
||||
ns_dic['product_group'] = ns.get('product_group')
|
||||
if ns.get('url') is not None:
|
||||
ns_dic['url'] = ns.get('url')
|
||||
if ns.get('list_url') is not None:
|
||||
ns_dic['list_url'] = ns.get('list_url')
|
||||
if ns.get('icon_url') is not None:
|
||||
ns_dic['icon_url'] = ns.get('icon_url')
|
||||
if ns.get('source') is not None:
|
||||
ns_dic['source'] = ns.get('source')
|
||||
if ns.get('sort_order') is not None:
|
||||
ns_dic['sort_order'] = ns.get('sort_order')
|
||||
if ns.get('menu_id'):
|
||||
ns_dic['menu_id'] = ns.get('menu_id')
|
||||
|
||||
db = DBPools()
|
||||
async with db.sqlorContext('kboss') as sor:
|
||||
try:
|
||||
await sor.U('home_page_product_info', ns_dic)
|
||||
return {
|
||||
'status': True,
|
||||
'msg': 'update product success'
|
||||
}
|
||||
except Exception as e:
|
||||
await sor.rollback()
|
||||
return {
|
||||
'status': False,
|
||||
'msg': 'update product failed, %s' % str(e)
|
||||
}
|
||||
|
||||
ret = await home_page_product_update(params_kw)
|
||||
return ret
|
||||
Binary file not shown.
@ -4,15 +4,15 @@
|
||||
<div id="topContainer" class="container">
|
||||
<!-- 统一显示logo和导航 -->
|
||||
<div class="logo">
|
||||
<!-- Logo图片，点击跳转首页 - 使用与goHome相同的逻辑 -->
|
||||
<img v-if="JSON.stringify(logoInfoNew) !== '{}'" @click="goHome" style="cursor:pointer;"
|
||||
<!-- Logo图片，点击跳转首页 -->
|
||||
<img v-if="JSON.stringify(logoInfoNew) !== '{}'" @click="$router.push(homePath)" style="cursor:pointer;"
|
||||
class="logoImg" :src="logoInfoNew.home.logoImg || ''" alt="">
|
||||
|
||||
<!-- 主导航菜单 -->
|
||||
<nav class="main-nav">
|
||||
<div class="nav-list">
|
||||
<!-- 首页 -->
|
||||
<p :class="{ active: isActiveHome }">
|
||||
<p :class="{ active: $route.path.includes('/index') }">
|
||||
<!-- 动态判断域名跳转首页 -->
|
||||
<a @click="goHome">{{ translations[language].home }}</a>
|
||||
</p>
|
||||
@ -488,14 +488,6 @@ export default Vue.extend({
|
||||
// 判断当前是否为ncmatch.cn域名
|
||||
isNcmatchDomain() {
|
||||
return window.location.hostname.includes('ncmatch.cn');
|
||||
},
|
||||
// 首页激活状态计算
|
||||
isActiveHome() {
|
||||
if (this.isNcmatchDomain) {
|
||||
return this.$route.path.includes('/ncmatchHome/index');
|
||||
} else {
|
||||
return this.$route.path.includes('/homePage/index');
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -912,7 +904,7 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
|
||||
// 首页跳转方法 - 根据域名判断跳转到不同的首页
|
||||
// 首页跳转方法
|
||||
goHome() {
|
||||
if (this.isNcmatchDomain) {
|
||||
this.$router.push('/ncmatchHome/index');
|
||||
@ -957,12 +949,6 @@ export default Vue.extend({
|
||||
|
||||
.logoImg {
|
||||
width: 148px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -986,7 +972,6 @@ export default Vue.extend({
|
||||
font-size: 18px !important;
|
||||
padding: 5px 0;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #1E6FFF;
|
||||
@ -1047,7 +1032,6 @@ export default Vue.extend({
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
|
||||
@ -1,87 +1,57 @@
|
||||
<template>
|
||||
<div class="followBox">
|
||||
<!-- 页面标题区域 -->
|
||||
<div class="follow-header">
|
||||
<div class="followBox-title">
|
||||
<span>我的</span>
|
||||
<span class="hightText">关注</span>
|
||||
</div>
|
||||
<div class="follow-subtitle">管理您关注的企业商品和需求</div>
|
||||
<div class="followBox-title">
|
||||
<span>我的</span>
|
||||
<span class="hightText">关注</span>
|
||||
</div>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="filter-section">
|
||||
<div class="radio-group">
|
||||
<label class="radio-item" :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="stats-info" v-if="productList.length > 0">
|
||||
共 {{ getTotalItems() }} 个关注
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关注列表 -->
|
||||
<div v-loading="loadingBox" class="follow-list" v-if="productList.length > 0">
|
||||
<div class="follow-item" v-for="item in productList" :key="item.id">
|
||||
<div class="follow-header-info">
|
||||
<div class="follow-date">
|
||||
<span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
|
||||
<span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
|
||||
</div>
|
||||
<div class="follow-count" v-if="item.products && item.products.length > 0">
|
||||
关注了 {{ item.products.length }} 个项目
|
||||
</div>
|
||||
</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-content">
|
||||
<div class="empty-icon">⭐</div>
|
||||
<div class="empty-text">暂无关注记录</div>
|
||||
<div class="empty-desc">您还没有关注任何{{ publish_type === '1' ? '商品' : '需求' }}，快去发现精彩内容吧</div>
|
||||
<div class="empty-action">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="$router.push('/ncmatchHome')"
|
||||
class="explore-btn">
|
||||
去首页探索
|
||||
</el-button>
|
||||
</div>
|
||||
</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 v-loading="loadingBox" 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="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 {
|
||||
loadingBox: false,
|
||||
loadingBox:false,
|
||||
productList: [],
|
||||
value1: null,
|
||||
publish_type: '1', // 默认选择企业商品
|
||||
|
||||
myProductList: [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -101,49 +71,55 @@ export default {
|
||||
this.loadingBox = true;
|
||||
reqFavoriteSearch({
|
||||
url_list: window.location.href,
|
||||
publish_type: this.publish_type
|
||||
publish_type: this.publish_type // 传递发布类型参数
|
||||
}).then(res => {
|
||||
this.loadingBox = false;
|
||||
if (res.status) {
|
||||
// 处理数据结构，将product_info的子项提升到上一级
|
||||
this.productList = this.flattenProductInfo(res.data.favorites);
|
||||
|
||||
} else {
|
||||
this.$message.error(res.msg || '获取关注记录失败');
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
}).catch(error => {
|
||||
this.loadingBox = false;
|
||||
this.$message.error('网络错误，请稍后重试');
|
||||
console.error('获取关注记录失败:', error);
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 将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 == 'id') {
|
||||
if(key == 'id'){
|
||||
flattenedProduct.productid = product.product_info.id;
|
||||
}
|
||||
// 如果上一级已经有同名属性，则跳过（避免覆盖）
|
||||
if (!(key in flattenedProduct)) {
|
||||
flattenedProduct[key] = product.product_info[key];
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 删除product_info字段
|
||||
delete flattenedProduct.product_info;
|
||||
|
||||
return flattenedProduct;
|
||||
}
|
||||
return product;
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
...historyItem,
|
||||
products: flattenedProducts
|
||||
@ -154,93 +130,64 @@ export default {
|
||||
},
|
||||
/**
|
||||
* 处理删除事件，从列表中移除被删除的项目
|
||||
* @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();
|
||||
this.$message.success('取消关注成功');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取总关注数
|
||||
*/
|
||||
getTotalItems() {
|
||||
return this.productList.reduce((total, item) => {
|
||||
return total + (item.products ? item.products.length : 0);
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.followBox {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
/* 页面标题区域 */
|
||||
.follow-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
<style>
|
||||
.followBox-title {
|
||||
font-size: 36px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #363a46;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.2;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.followBox-title .hightText {
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.follow-subtitle {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 筛选区域 */
|
||||
.filter-section {
|
||||
.radio-group-container {
|
||||
width: 100% !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
@ -248,317 +195,110 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.radio-item input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.radio-item:hover {
|
||||
background: rgba(255, 107, 107, 0.05);
|
||||
}
|
||||
|
||||
.radio-item.active {
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
|
||||
.radio-item.active .radio-text {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background: #f8f9fa;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 关注列表样式 */
|
||||
.follow-list {
|
||||
/* 关注记录列表样式 */
|
||||
.history-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.follow-item {
|
||||
.history-item {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
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;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.follow-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
.history-item:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
/* transform: translateY(-2px); */
|
||||
}
|
||||
|
||||
.follow-item:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.follow-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.follow-header-info {
|
||||
.history-date {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.follow-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #ff6b6b;
|
||||
color: #275AFF;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.relative-time {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
background: #f8f9fa;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-weight: 500;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.follow-count {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.follow-content {
|
||||
.history-content {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.explore-btn {
|
||||
padding: 12px 32px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.explore-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.followBox {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.follow-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.followBox-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.follow-item {
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.follow-header-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.follow-date {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px 15px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.followBox {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.followBox-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.follow-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载状态优化 */
|
||||
::v-deep .el-loading-mask {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-spinner .circular {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-spinner .path {
|
||||
stroke: #ff6b6b;
|
||||
}
|
||||
|
||||
/* 特殊样式 - 关注页面的独特视觉效果 */
|
||||
.follow-item .heart-pulse {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6b6b'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -1,84 +1,57 @@
|
||||
<template>
|
||||
<div class="historyBox">
|
||||
<!-- 页面标题 -->
|
||||
<div class="history-header">
|
||||
<div class="historyBox-title">
|
||||
<span>浏览</span>
|
||||
<span class="hightText">记录</span>
|
||||
</div>
|
||||
<div class="history-subtitle">查看您的商品和需求浏览历史</div>
|
||||
<div class="historyBox-title">
|
||||
<span>浏览</span>
|
||||
<span class="hightText">记录</span>
|
||||
</div>
|
||||
|
||||
<!-- 筛选标签 -->
|
||||
<div class="filter-section">
|
||||
<div class="radio-group">
|
||||
<label class="radio-item" :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="stats-info" v-if="productList.length > 0">
|
||||
共 {{ getTotalItems() }} 条记录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 历史记录列表 -->
|
||||
<div v-loading="loadingBox" class="history-list" v-if="productList.length > 0">
|
||||
<div class="history-item" v-for="item in productList" :key="item.id">
|
||||
<div class="history-date">
|
||||
<div class="date-content">
|
||||
<span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
|
||||
<span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
|
||||
</div>
|
||||
</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-content">
|
||||
<div class="empty-icon">📋</div>
|
||||
<div class="empty-text">暂无浏览记录</div>
|
||||
<div class="empty-desc">您还没有浏览过任何{{ publish_type === '1' ? '商品' : '需求' }}，快去探索吧</div>
|
||||
<div class="empty-action">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="$router.push('/ncmatchHome')"
|
||||
class="explore-btn">
|
||||
去首页逛逛
|
||||
</el-button>
|
||||
</div>
|
||||
</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 v-loading="loadingBox" 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 {
|
||||
loadingBox: false,
|
||||
loadingBox:false,
|
||||
productList: [],
|
||||
value1: null,
|
||||
publish_type: '1', // 默认选择企业商品
|
||||
|
||||
myProductList: [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -98,49 +71,55 @@ export default {
|
||||
this.loadingBox = true;
|
||||
reqUserBrowseHistorySearch({
|
||||
url_list: window.location.href,
|
||||
publish_type: this.publish_type
|
||||
publish_type: this.publish_type // 传递发布类型参数
|
||||
}).then(res => {
|
||||
this.loadingBox = false;
|
||||
if (res.status) {
|
||||
// 处理数据结构，将product_info的子项提升到上一级
|
||||
this.productList = this.flattenProductInfo(res.data.history_list);
|
||||
|
||||
} else {
|
||||
this.$message.error(res.msg || '获取浏览记录失败');
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
}).catch(error => {
|
||||
this.loadingBox = false;
|
||||
this.$message.error('网络错误，请稍后重试');
|
||||
console.error('获取浏览记录失败:', error);
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 将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 == 'id') {
|
||||
if(key == 'id'){
|
||||
flattenedProduct.productid = product.product_info.id;
|
||||
}
|
||||
// 如果上一级已经有同名属性，则跳过（避免覆盖）
|
||||
if (!(key in flattenedProduct)) {
|
||||
flattenedProduct[key] = product.product_info[key];
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 删除product_info字段
|
||||
delete flattenedProduct.product_info;
|
||||
|
||||
return flattenedProduct;
|
||||
}
|
||||
return product;
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
...historyItem,
|
||||
products: flattenedProducts
|
||||
@ -151,93 +130,64 @@ export default {
|
||||
},
|
||||
/**
|
||||
* 处理删除事件，从列表中移除被删除的项目
|
||||
* @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();
|
||||
this.$message.success('删除成功');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取总记录数
|
||||
*/
|
||||
getTotalItems() {
|
||||
return this.productList.reduce((total, item) => {
|
||||
return total + (item.products ? item.products.length : 0);
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.historyBox {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
/* 页面标题区域 */
|
||||
.history-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
<style>
|
||||
.historyBox-title {
|
||||
font-size: 36px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #363a46;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.2;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.historyBox-title .hightText {
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.history-subtitle {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 筛选区域 */
|
||||
.filter-section {
|
||||
.radio-group-container {
|
||||
width: 100% !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
@ -245,53 +195,46 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
background: #fff;
|
||||
border: 1px solid #e8e8e8;
|
||||
margin-right: 4px;
|
||||
font-size: 16px !important;
|
||||
|
||||
.radio-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.radio-item input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.radio-text {
|
||||
font-size: 16px;
|
||||
color: #275AFF;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.radio-item:hover {
|
||||
background: rgba(39, 90, 255, 0.05);
|
||||
}
|
||||
&:hover {
|
||||
border-color: #275AFF;
|
||||
}
|
||||
|
||||
.radio-item.active {
|
||||
background: linear-gradient(135deg, #275AFF, #2EBDFA);
|
||||
box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
&.active {
|
||||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||||
border-color: #275AFF;
|
||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
|
||||
|
||||
.radio-item.active .radio-text {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background: #f8f9fa;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
.radio-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 历史记录列表样式 */
|
||||
@ -301,66 +244,40 @@ export default {
|
||||
|
||||
.history-item {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
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;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: linear-gradient(to bottom, #275AFF, #2EBDFA);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.history-item:hover::before {
|
||||
opacity: 1;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
/* transform: translateY(-2px); */
|
||||
}
|
||||
|
||||
.history-date {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.date-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
font-size: 18px;
|
||||
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: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-weight: 500;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.history-content {
|
||||
@ -370,145 +287,18 @@ export default {
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80px;
|
||||
margin-bottom: 24px;
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.explore-btn {
|
||||
padding: 12px 32px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(135deg, #275AFF, #2EBDFA);
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.explore-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.historyBox {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.historyBox-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.date-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px 15px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.historyBox {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.historyBox-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载状态优化 */
|
||||
::v-deep .el-loading-mask {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-spinner .circular {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-spinner .path {
|
||||
stroke: #275AFF;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 873 KiB After Width: | Height: | Size: 873 KiB |
@ -1,11 +1,24 @@
|
||||
<template>
|
||||
<div id="homeOut" class="homeOut">
|
||||
<TopBox id="topBox"></TopBox>
|
||||
|
||||
<div class="banner-box">
|
||||
<div class="conter">
|
||||
<div class="title">
|
||||
供需广场
|
||||
</div>
|
||||
<div class="banner-title">
|
||||
开元云供需对接广场，是企业级云服务合作核心阵地。围绕云资源、算力、网络服务、模型及应用，企业可灵活发布资源供给或业务需求，通过精准匹配打破信息壁垒。这里既能盘活企业闲置算力与云资源，又能快速对接所需技术服务与合作机会，助力企业降本增效，加速数字化与智能化转型。
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="btn-box" @click="sendInfo('2')">发布需求</div>
|
||||
<div class="btn-box" @click="sendInfo('1')">发布商品</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="search-box">
|
||||
<search></search>
|
||||
</div> -->
|
||||
<div style="width: 100%;">
|
||||
<div style="width: 90%;max-width: 1600px;">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
@ -79,6 +92,7 @@ import { mapGetters, mapState } from "vuex";
|
||||
import search from "./search/index.vue";
|
||||
import { reqEnterpriseAuditInfoSearch } from '@/api/ncmatch'
|
||||
import productDetail from "./proDetail/index.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "indexLast",
|
||||
components: {
|
||||
@ -214,7 +228,54 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deep/.banner-box {
|
||||
height: 700px!important;
|
||||
background: url('./img/tt-banner.png') no-repeat ;
|
||||
width: 100%;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.conter {
|
||||
width: 700px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 140px 240px 0px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
width: 700px;
|
||||
font-size: 16px;
|
||||
color: #8890ab;
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.btn{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-box{
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(90deg, rgb(39, 90, 255), rgb(46, 189, 250));
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
|
||||
@ -1,97 +1,7 @@
|
||||
<template>
|
||||
<div class="jd-homepage">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-box">
|
||||
<search></search>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main-content">
|
||||
<div class="content-wrapper">
|
||||
<!-- 左侧菜单 -->
|
||||
<menuAside></menuAside>
|
||||
|
||||
<!-- 中间主内容 -->
|
||||
<section class="main-section">
|
||||
<!-- 顶部促销横幅 -->
|
||||
<div id="banner" class="banner">
|
||||
<div class="centerBox">
|
||||
<div class="title">
|
||||
<span class="leftText">NCMatch</span>
|
||||
<span class="rightText">算力供需对接平台</span>
|
||||
</div>
|
||||
<ul class="tagUl">
|
||||
<li>匠造臻品 <span class="separator"></span> 精奢惠选</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 右侧用户信息栏 -->
|
||||
<aside class="user-sidebar">
|
||||
<div class="sidebar-content">
|
||||
<span class="publish-goods" @click="$router.push('/ncmatchHome/supplyAndDemandSquare')">
|
||||
算力供需广场
|
||||
</span>
|
||||
<span class="publish-goods" @click="sendInfo('2')">发布需求</span>
|
||||
<span class="publish-goods" @click="sendInfo('1')">发布商品</span>
|
||||
|
||||
<ul class="userBtn">
|
||||
<li @click="goHistory">
|
||||
<img src="./img/eye.png" alt="浏览记录">
|
||||
浏览记录
|
||||
</li>
|
||||
<li @click="goFavorite">
|
||||
<img src="./img/collect.png" alt="我的收藏">
|
||||
我的收藏
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 产品列表区域 -->
|
||||
<div class="productList">
|
||||
<ul class="myTab">
|
||||
<li v-for="menu in product" :class="currentHotMenu === menu.id ? 'activeMenu' : ''" @click="clickNetMenu(menu)"
|
||||
:key="menu.name">
|
||||
<span class="tab-text">{{ menu.product_category }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<productCard v-loading="boxLoading" :productList="hotProductList"></productCard>
|
||||
|
||||
<el-pagination @current-change="handleCurrentChange" :page-size="page_size" layout="total, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<!-- 发布商品/需求对话框 -->
|
||||
<el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
|
||||
:visible.sync="sendProductVisible">
|
||||
<sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
|
||||
</sendProduct>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 提示对话框 -->
|
||||
<el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
|
||||
<span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<span>
|
||||
<span style="margin-right: 10px;">跳转到</span>
|
||||
<el-button size="small" type="primary" @click="goInfo">信息完善</el-button>
|
||||
</span>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { reqPublishProductSearchFirstPage, reqEnterpriseAuditInfoSearch, reqHomepageProductCategory, reqGetSupplyAndDemandSquareList } from '@/api/ncmatch'
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "mainPage",
|
||||
components: {
|
||||
@ -102,6 +12,7 @@ export default Vue.extend({
|
||||
},
|
||||
created() {
|
||||
this.getHomepageProductCategory()
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -113,12 +24,110 @@ export default Vue.extend({
|
||||
sendProductVisible: false,
|
||||
currentHotMenu: "",
|
||||
product: [],
|
||||
hotProductList: [],
|
||||
hotProductList: [
|
||||
// {
|
||||
// id: 1,
|
||||
// name: 'NVIDIA-4090',
|
||||
// image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
// price: 6000,
|
||||
// cpu: 'AMD EPYC 7542 32 C * 2',
|
||||
// memory: '64G DDR4-3200 * 8',
|
||||
// gpu: 'NVIDIA-4090-24GB * 8',
|
||||
// sys_disk: '960G SATA SSD * 2 (Raid)',
|
||||
// data_disk: '3.84T U.2 NVMe SSD * 1',
|
||||
// net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: 'NVIDIA-4090',
|
||||
// image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
// price: 6000,
|
||||
// cpu: 'AMD EPYC 7542 32 C * 2',
|
||||
// memory: '64G DDR4-3200 * 8',
|
||||
// gpu: 'NVIDIA-4090-24GB * 8',
|
||||
// sys_disk: '960G SATA SSD * 2 (Raid)',
|
||||
// data_disk: '3.84T U.2 NVMe SSD * 1',
|
||||
// net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
|
||||
// }
|
||||
],
|
||||
hotMenuList: [
|
||||
{
|
||||
id: "hot",
|
||||
name: "热门推荐",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png")
|
||||
},
|
||||
{
|
||||
id: "hlzx",
|
||||
name: "互联网专线",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png"),
|
||||
},
|
||||
{
|
||||
id: "SDWAN",
|
||||
name: "SDWAN",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png"),
|
||||
},
|
||||
{
|
||||
id: "DCI",
|
||||
name: "DCI",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png"),
|
||||
},
|
||||
{
|
||||
id: "AI",
|
||||
name: "AI专线",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png"),
|
||||
}
|
||||
],
|
||||
searchKeyword: '',
|
||||
hotSearchKeywords: [
|
||||
'昆仑芯-P800',
|
||||
'天垓-150',
|
||||
'4090',
|
||||
'云服务器-GPU',
|
||||
'人脸识别',
|
||||
'SDWAN',
|
||||
'互联网专线',
|
||||
'DCI',
|
||||
'AI专线',
|
||||
'对象存储',
|
||||
'智慧医疗',
|
||||
'智慧客服',
|
||||
'A800',
|
||||
'A100',
|
||||
'910B'
|
||||
],
|
||||
topNavItems: [
|
||||
{ name: '早十好价', icon: '10', color: 'red' },
|
||||
{ name: '司法拍卖', icon: '⚖️', color: 'red' },
|
||||
{ name: '企业购', icon: '🏢', color: 'blue' },
|
||||
{ name: '京东新品', icon: '🎁', color: 'blue' },
|
||||
{ name: '男装馆', icon: '👔', color: 'blue' },
|
||||
{ name: '黑色星期五', icon: '🍃', color: 'green' },
|
||||
{ name: '服饰美妆', icon: '👗', color: 'purple' },
|
||||
{ name: '清洁馆', icon: '💧', color: 'blue' },
|
||||
{ name: '五金城', icon: '⚙️', color: 'red' },
|
||||
{ name: '全部频道', icon: '📱', color: 'rainbow' }
|
||||
],
|
||||
categories: [
|
||||
{ name: '云', icon: require('./img/cloud.png'), product_list: ['百度云'] },
|
||||
{ name: '国产算力', icon: require('./img/computing.png'), product_list: ['昇腾910B', 'P800', '其他'] },
|
||||
{ name: 'NVIDIA', icon: require('./img/nvidia.png'), product_list: ['3090', '4090', '5080', '5090'] },
|
||||
{ name: '网', icon: require('./img/net.png'), product_list: ['AI专线', 'SDWAN', '互联网专线', 'DCI'] },
|
||||
{ name: '一体机', icon: require('./img/computer.png'), product_list: ['昆仑芯', '天数智芯'] },
|
||||
{ name: '硬件', icon: require('./img/ying.png'), product_list: ['机器人', 'AR眼镜'] },
|
||||
{ name: 'AI应用', icon: require('./img/aiApp.png'), product_list: ['数字人', '智慧医疗', '智能客服'] },
|
||||
],
|
||||
current_page: 1,
|
||||
page_size: 8,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
...mapGetters(["sidebar", "avatar", "device"]),
|
||||
...mapState({
|
||||
isShowPanel: (state) => state.product.showHomeNav,
|
||||
@ -152,10 +161,12 @@ export default Vue.extend({
|
||||
goInfo() {
|
||||
this.showTip = false
|
||||
this.$router.push('/customer/approve')
|
||||
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.current_page = val
|
||||
this.initData()
|
||||
// this.init_product_list()
|
||||
},
|
||||
sendInfo(type) {
|
||||
if (this.loginState) {
|
||||
@ -189,6 +200,8 @@ export default Vue.extend({
|
||||
this.showTip = true
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
} else {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
@ -213,18 +226,13 @@ export default Vue.extend({
|
||||
this.hotProductList = res.data[0].product_list
|
||||
this.total = res.data[0].total_count
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
init_product_list() {
|
||||
reqPublishProductSearchFirstPage({
|
||||
publish_type: "1",
|
||||
url_link: window.location.href,
|
||||
to_page: 'first_page',
|
||||
page_size: this.page_size,
|
||||
current_page: this.current_page,
|
||||
product_type: this.currentHotMenu
|
||||
}).then(res => {
|
||||
reqPublishProductSearchFirstPage({ publish_type: "1", url_link: window.location.href, to_page: 'first_page', page_size: this.page_size, current_page: this.current_page, product_type: this.currentHotMenu }).then(res => {
|
||||
if (res.status) {
|
||||
if (res.data.length > 0) {
|
||||
this.currentHotMenu = res.data[0].id
|
||||
@ -232,6 +240,7 @@ export default Vue.extend({
|
||||
this.product = res.data
|
||||
this.total = res.data[0].total_count
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -244,6 +253,11 @@ export default Vue.extend({
|
||||
this.currentHotMenu = menu.id;
|
||||
this.selectedCategory = menu.id
|
||||
this.initData()
|
||||
// this.hotProductList = menu.product_list || [];
|
||||
},
|
||||
handleSearch() {
|
||||
console.log('搜索:1', this.searchKeyword)
|
||||
|
||||
},
|
||||
goFavorite() {
|
||||
if (this.loginState) {
|
||||
@ -263,55 +277,155 @@ export default Vue.extend({
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="jd-homepage">
|
||||
<!-- 顶部Header -->
|
||||
<!-- <header class="header">
|
||||
<div class="header-content">
|
||||
|
||||
|
||||
</div>
|
||||
</header> -->
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main-content">
|
||||
<div class="content-wrapper">
|
||||
|
||||
<menuAside></menuAside>
|
||||
<!-- 中间主内容 -->
|
||||
<section class="main-section">
|
||||
<!-- 顶部促销横幅 -->
|
||||
<div id="banner" class="banner">
|
||||
<div class="centerBox">
|
||||
<span style="margin-top: 100px" class="title">
|
||||
<span class="leftText">
|
||||
NCMatch
|
||||
</span>
|
||||
<span class="rightText" style="margin-left: 10px;"> 算力供需对接平台</span>
|
||||
</span>
|
||||
<!-- <span class="description">支持模型训练、推理和数据处理，灵活配置，助您高效释放AI潜能</span>-->
|
||||
<ul style="margin-top: 50px" class="tagUl">
|
||||
<li>匠造臻品 <span style="display: inline-block;margin: 0 15px;"></span> 精奢惠选</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 右侧用户信息栏 -->
|
||||
<aside class="user-sidebar" style="background-color: #f8fbfe;padding: 10px;padding-top: 20px;">
|
||||
<span class="publish-goods" @click="$router.push('/ncmatchHome/supplyAndDemandSquare')"> 算力供需广场</span>
|
||||
<span class="publish-goods" @click="sendInfo('2')">发布需求</span>
|
||||
<span class="publish-goods" @click="sendInfo('1')">发布商品</span>
|
||||
|
||||
<ul class="userBtn">
|
||||
<li @click="goHistory"><img style="width: 26px;height: 26px;" src="./img/eye.png" alt="">浏览记录</li>
|
||||
<li @click="goFavorite"><img style="width: 26px;height: 26px;" src="./img/collect.png" alt="">我的收藏</li>
|
||||
<!-- <li><img src="./img/like.png" alt="">关注需求</li> -->
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
<div class="productList">
|
||||
<ul class="myTab">
|
||||
<li v-for="menu in product" :class="currentHotMenu === menu.id ? 'activeMenu' : ''" @click="clickNetMenu(menu)"
|
||||
:key="menu.name">
|
||||
<!-- <img :src="currentHotMenu === menu.id ? menu.activeIcon : menu.icon" alt="" /> -->
|
||||
<span class="tab-text">{{ menu.product_category }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<productCard v-loading="boxLoading" :productList="hotProductList"></productCard>
|
||||
<el-pagination style="background-color: white;" @current-change="handleCurrentChange" :page-size="page_size"
|
||||
layout="total, prev, pager, next" :total="total">
|
||||
</el-pagination>
|
||||
<el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
|
||||
:visible.sync="sendProductVisible">
|
||||
<sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
|
||||
</sendProduct>
|
||||
</el-dialog>
|
||||
<el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
|
||||
<span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
||||
<span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary"
|
||||
@click="goInfo">信息完善</el-button></span>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.jd-homepage {
|
||||
margin: 30px;
|
||||
margin-top: 100px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
.userBtn {
|
||||
margin-top: 40px !important;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
li {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-radius: 10px;
|
||||
|
||||
.content-wrapper {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 300px;
|
||||
gap: 20px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
grid-template-columns: 250px 1fr 250px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
grid-template-columns: 200px 1fr;
|
||||
|
||||
.user-sidebar {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 20px;
|
||||
* {
|
||||
img {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
&:hover {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
color: #2c96fc;
|
||||
|
||||
.user-sidebar {
|
||||
margin-top: 20px;
|
||||
svg {
|
||||
|
||||
path {
|
||||
fill: #2c96fc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.productList {
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
// padding-bottom: 45px;
|
||||
}
|
||||
|
||||
.publish-goods {
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
background: url('./img//btnBg.png');
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
color: #222F60 !important;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// background: #2EBDFA;
|
||||
}
|
||||
}
|
||||
|
||||
/* 横幅样式 */
|
||||
.banner {
|
||||
border-radius: 10px;
|
||||
background: url("../../newImg/banner.png");
|
||||
@ -319,11 +433,7 @@ export default Vue.extend({
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 200px;
|
||||
}
|
||||
height: 100%;
|
||||
|
||||
.centerBox {
|
||||
display: flex;
|
||||
@ -331,7 +441,7 @@ export default Vue.extend({
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
@ -340,35 +450,27 @@ export default Vue.extend({
|
||||
color: #222F60;
|
||||
font-size: 42px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 28px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.leftText {
|
||||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||||
/* 渐变方向颜色 */
|
||||
-webkit-background-clip: text;
|
||||
/* 关键属性：裁剪背景到文字 */
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
/* 文字颜色透明 */
|
||||
display: inline-block;
|
||||
/* 确保渐变生效 */
|
||||
}
|
||||
}
|
||||
|
||||
.rightText {
|
||||
margin-left: 10px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-left: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.description {
|
||||
margin: 15px 0;
|
||||
color: #7A82A0;
|
||||
font-size: 24px;
|
||||
height: 75px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tagUl {
|
||||
@ -377,112 +479,22 @@ export default Vue.extend({
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
margin-top: 30px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0 30px;
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.separator {
|
||||
display: inline-block;
|
||||
margin: 0 15px;
|
||||
&:not(:last-child) {
|
||||
border-right: 2px solid #D2D7E6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户侧边栏 */
|
||||
.user-sidebar {
|
||||
background-color: #f8fbfe;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.publish-goods {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
background: url('./img/btnBg.png');
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
color: #222F60 !important;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.userBtn {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f7ff;
|
||||
color: #2c96fc;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 产品列表区域 */
|
||||
.productList {
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 40px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 10px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.myTab {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
@ -493,13 +505,6 @@ export default Vue.extend({
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.activeMenu {
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
color: white;
|
||||
@ -508,69 +513,243 @@ export default Vue.extend({
|
||||
li {
|
||||
transition: all .2s ease-in-out;
|
||||
z-index: 2;
|
||||
padding: 10px 100px;
|
||||
margin: 5px;
|
||||
padding: 10px 20px;
|
||||
margin-right: 45px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 8px 15px;
|
||||
margin: 3px;
|
||||
&:hover {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.el-pagination {
|
||||
padding: 20px 0;
|
||||
|
||||
.jd-homepage {
|
||||
min-height: 100vh;
|
||||
background-color: #f8fbfe;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
// Header样式
|
||||
.header {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-content {
|
||||
width: 100%;
|
||||
max-width: 950px;
|
||||
// margin: 0 auto;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// gap: 20px;
|
||||
position: absolute;
|
||||
left: 420px;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination__total,
|
||||
::v-deep .el-pagination__jump {
|
||||
display: none;
|
||||
.logo-section {
|
||||
|
||||
margin: 0 50px;
|
||||
|
||||
img {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.logo-text {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #e1251b;
|
||||
}
|
||||
|
||||
.logo-mascot {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.signin-section {
|
||||
.signin-btn {
|
||||
background: linear-gradient(45deg, #ffd700, #ff6b35);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.signin-icon {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 576px) {
|
||||
.jd-homepage {
|
||||
margin: 15px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
// 主内容区域
|
||||
.main-content {
|
||||
// padding: 16px;
|
||||
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin: 20px auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 10px;
|
||||
overflow: visible;
|
||||
background-color: white;
|
||||
height: 320px;
|
||||
|
||||
.content-wrapper {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 250px;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 中间主内容区域
|
||||
.main-section {
|
||||
.promo-banner {
|
||||
background: linear-gradient(45deg, #52c41a, #73d13d);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.banner {
|
||||
height: 150px;
|
||||
.banner-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.centerBox .title {
|
||||
font-size: 22px;
|
||||
.banner-text {
|
||||
color: white;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
position: relative;
|
||||
|
||||
.fridge-img {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.flower-decoration {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centerBox .tagUl {
|
||||
font-size: 16px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.subsidy-section,
|
||||
.live-section,
|
||||
.seckill-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.official-tag,
|
||||
.live-tag,
|
||||
.seckill-tag {
|
||||
background: #e1251b;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-sidebar .publish-goods {
|
||||
height: 45px;
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.user-sidebar {
|
||||
height: 100%;
|
||||
|
||||
* {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 1200px) {
|
||||
.main-content .content-wrapper {
|
||||
grid-template-columns: 180px 1fr 220px;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content .content-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.myTab {
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
.category-sidebar,
|
||||
.user-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .header-content {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,21 +1,6 @@
|
||||
<template>
|
||||
<div class="conter">
|
||||
<div class="banner-box">
|
||||
<div class="conter">
|
||||
<div class="Toptitle">
|
||||
供需广场
|
||||
</div>
|
||||
<div class="banner-title">
|
||||
开元云供需对接广场，是企业级云服务合作核心阵地。围绕云资源、算力、网络服务、模型及应用，企业可灵活发布资源供给或业务需求，通过精准匹配打破信息壁垒。这里既能盘活企业闲置算力与云资源，又能快速对接所需技术服务与合作机会，助力企业降本增效，加速数字化与智能化转型。
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="btn-box" @click="sendInfo('2')">发布需求</div>
|
||||
<div class="btn-box" @click="sendInfo('1')">发布商品</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-box">
|
||||
<!-- <div style="margin-top: 25px;">
|
||||
<!-- <div style="margin-top: 25px;">
|
||||
<span style="margin-top: 100px;" class="title">
|
||||
<span class="leftText">
|
||||
算力供需
|
||||
@ -23,70 +8,70 @@
|
||||
<span class="rightText"> 广场</span></span>
|
||||
</div> -->
|
||||
|
||||
<!-- 发布商品/需求弹窗 -->
|
||||
<el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
|
||||
:visible.sync="sendProductVisible">
|
||||
<sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
|
||||
</sendProduct>
|
||||
</el-dialog>
|
||||
<!-- 发布商品/需求弹窗 -->
|
||||
<el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
|
||||
:visible.sync="sendProductVisible">
|
||||
<sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
|
||||
</sendProduct>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 审核提示弹窗 -->
|
||||
<el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
|
||||
<span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary"
|
||||
@click="goInfo">信息完善</el-button></span>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- 审核提示弹窗 -->
|
||||
<el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
|
||||
<span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary"
|
||||
@click="goInfo">信息完善</el-button></span>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 筛选条件区域 - 整合到一个卡片中 -->
|
||||
<div class="filter-card">
|
||||
<!-- <div class="filter-header">
|
||||
<!-- 筛选条件区域 - 整合到一个卡片中 -->
|
||||
<div class="filter-card">
|
||||
<!-- <div class="filter-header">
|
||||
<span class="filter-title">筛选条件</span>
|
||||
</div> -->
|
||||
|
||||
<div class="filter-content">
|
||||
<!-- 发布类型 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-label">发布类型</div>
|
||||
<div class="filter-options">
|
||||
<label class="filter-option" :class="{ active: publish_type === '1' }">
|
||||
<input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
|
||||
<span class="option-text">企业商品</span>
|
||||
</label>
|
||||
<label class="filter-option" :class="{ active: publish_type === '2' }">
|
||||
<input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
|
||||
<span class="option-text">企业需求</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-content">
|
||||
<!-- 发布类型 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-label">发布类型</div>
|
||||
<div class="filter-options">
|
||||
<label class="filter-option" :class="{ active: publish_type === '1' }">
|
||||
<input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
|
||||
<span class="option-text">企业商品</span>
|
||||
</label>
|
||||
<label class="filter-option" :class="{ active: publish_type === '2' }">
|
||||
<input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
|
||||
<span class="option-text">企业需求</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 所属类别 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-label">所属类别</div>
|
||||
<div class="filter-options">
|
||||
<span v-for="category in firstCategories" :key="category.id"
|
||||
:class="['filter-option', { active: activeFirstId === category.id }]"
|
||||
@click="selectFirstCategory(category.id)">
|
||||
{{ category.product_category || category.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 所属类别 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-label">所属类别</div>
|
||||
<div class="filter-options">
|
||||
<span v-for="category in firstCategories" :key="category.id"
|
||||
:class="['filter-option', { active: activeFirstId === category.id }]"
|
||||
@click="selectFirstCategory(category.id)">
|
||||
{{ category.product_category || category.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 所属品类 -->
|
||||
<div class="filter-section" v-if="secondCategories.length > 0">
|
||||
<div class="filter-label">所属品类</div>
|
||||
<div class="filter-options">
|
||||
<span v-for="category in secondCategories" :key="category.id"
|
||||
:class="['filter-option', { active: activeSecondId === category.id }]"
|
||||
@click="selectSecondCategory(category.id)">
|
||||
{{ category.product_category || category.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 所属品类 -->
|
||||
<div class="filter-section" v-if="secondCategories.length > 0">
|
||||
<div class="filter-label">所属品类</div>
|
||||
<div class="filter-options">
|
||||
<span v-for="category in secondCategories" :key="category.id"
|
||||
:class="['filter-option', { active: activeSecondId === category.id }]"
|
||||
@click="selectSecondCategory(category.id)">
|
||||
{{ category.product_category || category.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公司类别 -->
|
||||
<!-- <div class="filter-section">
|
||||
<!-- 公司类别 -->
|
||||
<!-- <div class="filter-section">
|
||||
<div class="filter-label">公司类别</div>
|
||||
<div class="filter-options">
|
||||
<span v-for="company in companies" :key="company.id"
|
||||
@ -96,25 +81,25 @@
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品列表 -->
|
||||
<div class="product-card-container">
|
||||
<div v-if="productList.length > 0">
|
||||
<productCard type="supplyAndDemandSquare" :publish_type="publish_type" :productList="productList">
|
||||
</productCard>
|
||||
<el-pagination @current-change="handleCurrentChange" :page-size="page_size" layout="total, prev, pager, next"
|
||||
:total="total" style="width: 100%; text-align: center;">
|
||||
</el-pagination>
|
||||
<!-- 产品列表 -->
|
||||
<div class="product-card-container">
|
||||
<div v-if="productList.length > 0">
|
||||
<productCard type="supplyAndDemandSquare" :publish_type="publish_type"
|
||||
:productList="productList">
|
||||
</productCard>
|
||||
<el-pagination @current-change="handleCurrentChange" :page-size="page_size"
|
||||
layout="total, prev, pager, next" :total="total" style="width: 100%; text-align: center;">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
<img style="width: 150px;height: 150px;" src="./img/empty.svg" alt="">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
<img style="width: 150px;height: 150px;" src="./img/empty.svg" alt="">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -122,470 +107,415 @@ import { reqGetSupplyAndDemandSquareList, reqCompanyCategorySearch, reqSupplyAnd
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'supplyAndDemandSquare',
|
||||
components: {
|
||||
productCard: () => import('@/views/homePage/ncmatch/mainPage/productCard/index.vue'),
|
||||
sendProduct: () => import('@/views/homePage/ncmatch/mainPage/sendProduct/index.vue')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page_size: 8,
|
||||
current_page: 1,
|
||||
typeList: [],
|
||||
publish_type: '1',
|
||||
selectedCategory: '',
|
||||
selectedCompanies: [],
|
||||
categories: [],
|
||||
companies: [],
|
||||
productList: [],
|
||||
total: 0,
|
||||
firstCategories: [],
|
||||
secondCategories: [],
|
||||
activeFirstId: null,
|
||||
activeSecondId: null,
|
||||
showTip: false,
|
||||
sendProductVisible: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initAllData()
|
||||
},
|
||||
computed: {
|
||||
isNcmatchHome() {
|
||||
return window.location.href.includes('ncmatchHome')
|
||||
name: 'supplyAndDemandSquare',
|
||||
components: {
|
||||
productCard: () => import('@/views/homePage/ncmatch/mainPage/productCard/index.vue'),
|
||||
sendProduct: () => import('@/views/homePage/ncmatch/mainPage/sendProduct/index.vue')
|
||||
},
|
||||
...mapGetters(["sidebar", "avatar", "device"]),
|
||||
...mapState({
|
||||
isShowPanel: (state) => state.product.showHomeNav,
|
||||
navIndex: (state) => state.product.navIndex,
|
||||
gridObj: state => state.operationAnalysis.gridObj,
|
||||
mybalance: state => state.user.mybalance,
|
||||
logoutUrl: state => state.login.logoutUrl,
|
||||
loginStateVuex: state => state.login.loginState,
|
||||
logoInfoNew: state => state.product.logoInfoNew,
|
||||
}),
|
||||
loginState() {
|
||||
const userId = sessionStorage.getItem('userId');
|
||||
return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
|
||||
data() {
|
||||
return {
|
||||
page_size: 8,
|
||||
current_page: 1,
|
||||
typeList: [],
|
||||
publish_type: '1',
|
||||
selectedCategory: '',
|
||||
selectedCompanies: [],
|
||||
categories: [],
|
||||
companies: [],
|
||||
productList: [],
|
||||
total: 0,
|
||||
firstCategories: [],
|
||||
secondCategories: [],
|
||||
activeFirstId: null,
|
||||
activeSecondId: null,
|
||||
showTip: false,
|
||||
sendProductVisible: false,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 发布需求/商品方法
|
||||
sendInfo(type) {
|
||||
if (this.loginState) {
|
||||
reqEnterpriseAuditInfoSearch({
|
||||
url_link: window.location.href,
|
||||
}).then(res => {
|
||||
const dataList = res && res.data && res.data.data
|
||||
const hasAuditInfo = Array.isArray(dataList) && dataList.length !== 0
|
||||
const roles = sessionStorage.getItem('jueseNew')
|
||||
const isCustomer = roles ? roles.includes('客户') : true
|
||||
created() {
|
||||
this.initAllData()
|
||||
},
|
||||
computed: {
|
||||
isNcmatchHome() {
|
||||
return window.location.href.includes('ncmatchHome')
|
||||
},
|
||||
...mapGetters(["sidebar", "avatar", "device"]),
|
||||
...mapState({
|
||||
isShowPanel: (state) => state.product.showHomeNav,
|
||||
navIndex: (state) => state.product.navIndex,
|
||||
gridObj: state => state.operationAnalysis.gridObj,
|
||||
mybalance: state => state.user.mybalance,
|
||||
logoutUrl: state => state.login.logoutUrl,
|
||||
loginStateVuex: state => state.login.loginState,
|
||||
logoInfoNew: state => state.product.logoInfoNew,
|
||||
}),
|
||||
loginState() {
|
||||
const userId = sessionStorage.getItem('userId');
|
||||
return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 发布需求/商品方法
|
||||
sendInfo(type) {
|
||||
if (this.loginState) {
|
||||
reqEnterpriseAuditInfoSearch({
|
||||
url_link: window.location.href,
|
||||
}).then(res => {
|
||||
const dataList = res && res.data && res.data.data
|
||||
const hasAuditInfo = Array.isArray(dataList) && dataList.length !== 0
|
||||
const roles = sessionStorage.getItem('jueseNew')
|
||||
const isCustomer = roles ? roles.includes('客户') : true
|
||||
|
||||
if (hasAuditInfo && dataList[0]) {
|
||||
const auditStatus = dataList[0].audit_status
|
||||
if (hasAuditInfo && dataList[0]) {
|
||||
const auditStatus = dataList[0].audit_status
|
||||
|
||||
if (auditStatus === 'pending') {
|
||||
this.$message.warning('您的审核状态为待审核，请等待审核通过后发布~')
|
||||
} else if (auditStatus === 'rejected') {
|
||||
this.$message.warning('您的审核状态为驳回，请重新提交~')
|
||||
if (auditStatus === 'pending') {
|
||||
this.$message.warning('您的审核状态为待审核，请等待审核通过后发布~')
|
||||
} else if (auditStatus === 'rejected') {
|
||||
this.$message.warning('您的审核状态为驳回，请重新提交~')
|
||||
} else {
|
||||
this.publish_type = type
|
||||
this.sendProductVisible = true
|
||||
}
|
||||
} else if (!isCustomer) {
|
||||
this.publish_type = type
|
||||
this.sendProductVisible = true
|
||||
} else {
|
||||
this.showTip = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.publish_type = type
|
||||
this.sendProductVisible = true
|
||||
this.$router.push('/login')
|
||||
}
|
||||
} else if (!isCustomer) {
|
||||
this.publish_type = type
|
||||
this.sendProductVisible = true
|
||||
} else {
|
||||
this.showTip = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// 发布成功回调
|
||||
sendProductSuccess() {
|
||||
this.sendProductVisible = false;
|
||||
this.initData()
|
||||
},
|
||||
// 发布成功回调
|
||||
sendProductSuccess() {
|
||||
this.sendProductVisible = false;
|
||||
this.initData()
|
||||
},
|
||||
|
||||
// 跳转到信息完善页面
|
||||
goInfo() {
|
||||
this.showTip = false
|
||||
this.$router.push('/customer/approve')
|
||||
},
|
||||
// 跳转到信息完善页面
|
||||
goInfo() {
|
||||
this.showTip = false
|
||||
this.$router.push('/customer/approve')
|
||||
},
|
||||
|
||||
handleCurrentChange(val) {
|
||||
this.current_page = val
|
||||
this.initData()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.current_page = val
|
||||
this.initData()
|
||||
},
|
||||
|
||||
initAllData() {
|
||||
this.init_product_category().then(() => {
|
||||
this.init_company_category().then(() => {
|
||||
this.initData()
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
init_company_category() {
|
||||
return reqCompanyCategorySearch({ url_link: window.location.href }).then(res => {
|
||||
if (res.status) {
|
||||
this.company_category_list = []
|
||||
for (let item of res.data) {
|
||||
this.company_category_list.push({
|
||||
label: item.company_category,
|
||||
value: item.company_category
|
||||
initAllData() {
|
||||
this.init_product_category().then(() => {
|
||||
this.init_company_category().then(() => {
|
||||
this.initData()
|
||||
})
|
||||
})
|
||||
}
|
||||
this.companies = this.company_category_list
|
||||
}
|
||||
return res
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
// 选中一级分类
|
||||
selectFirstCategory(id) {
|
||||
if (id === this.activeFirstId) return
|
||||
this.activeFirstId = id
|
||||
this.activeSecondId = null
|
||||
this.selectedCategory = id
|
||||
this.loadSecondCategories(id)
|
||||
this.initData()
|
||||
},
|
||||
init_company_category() {
|
||||
return reqCompanyCategorySearch({ url_link: window.location.href }).then(res => {
|
||||
if (res.status) {
|
||||
this.company_category_list = []
|
||||
for (let item of res.data) {
|
||||
this.company_category_list.push({
|
||||
label: item.company_category,
|
||||
value: item.company_category
|
||||
})
|
||||
}
|
||||
this.companies = this.company_category_list
|
||||
}
|
||||
return res
|
||||
})
|
||||
},
|
||||
|
||||
// 选中二级分类
|
||||
selectSecondCategory(id) {
|
||||
if (id === this.activeSecondId) return
|
||||
this.activeSecondId = id
|
||||
this.selectedCategory = id
|
||||
this.initData()
|
||||
},
|
||||
|
||||
init_product_category() {
|
||||
return reqSupplyAndDemandFirstCategory({ to_page: 'show', url_link: window.location.href }).then(res => {
|
||||
if (res.status) {
|
||||
this.firstCategories = Array.isArray(res.data) ? res.data : []
|
||||
if (this.firstCategories.length > 0) {
|
||||
this.activeFirstId = this.firstCategories[0].id
|
||||
this.selectedCategory = this.activeFirstId
|
||||
// 选中一级分类
|
||||
selectFirstCategory(id) {
|
||||
if (id === this.activeFirstId) return
|
||||
this.activeFirstId = id
|
||||
this.activeSecondId = null
|
||||
return this.loadSecondCategories(this.activeFirstId)
|
||||
} else {
|
||||
this.activeFirstId = null
|
||||
this.activeSecondId = null
|
||||
this.selectedCategory = ''
|
||||
this.secondCategories = []
|
||||
}
|
||||
}
|
||||
return res
|
||||
})
|
||||
},
|
||||
this.selectedCategory = id
|
||||
this.loadSecondCategories(id)
|
||||
this.initData()
|
||||
},
|
||||
|
||||
loadSecondCategories(firstId) {
|
||||
return reqSupplyAndDemandFirstCategory({ to_page: 'show', url_link: window.location.href, first_level_id: firstId }).then(res => {
|
||||
if (res.status) {
|
||||
this.secondCategories = Array.isArray(res.data) ? res.data : []
|
||||
} else {
|
||||
this.secondCategories = []
|
||||
}
|
||||
return res
|
||||
})
|
||||
},
|
||||
// 选中二级分类
|
||||
selectSecondCategory(id) {
|
||||
if (id === this.activeSecondId) return
|
||||
this.activeSecondId = id
|
||||
this.selectedCategory = id
|
||||
this.initData()
|
||||
},
|
||||
|
||||
handleTypeChange() {
|
||||
console.log('切换到:', this.publish_type)
|
||||
this.initData()
|
||||
},
|
||||
init_product_category() {
|
||||
return reqSupplyAndDemandFirstCategory({to_page: 'show', url_link: window.location.href }).then(res => {
|
||||
if (res.status) {
|
||||
this.firstCategories = Array.isArray(res.data) ? res.data : []
|
||||
if (this.firstCategories.length > 0) {
|
||||
this.activeFirstId = this.firstCategories[0].id
|
||||
this.selectedCategory = this.activeFirstId
|
||||
this.activeSecondId = null
|
||||
return this.loadSecondCategories(this.activeFirstId)
|
||||
} else {
|
||||
this.activeFirstId = null
|
||||
this.activeSecondId = null
|
||||
this.selectedCategory = ''
|
||||
this.secondCategories = []
|
||||
}
|
||||
}
|
||||
return res
|
||||
})
|
||||
},
|
||||
|
||||
initData() {
|
||||
let ploay = {
|
||||
product_category: this.selectedCategory,
|
||||
to_page: "square",
|
||||
url_link: window.location.href,
|
||||
page_size: this.page_size,
|
||||
current_page: this.current_page,
|
||||
company_type: this.selectedCompanies.length > 0 ? this.selectedCompanies.join(",") : "",
|
||||
publish_type: this.publish_type
|
||||
}
|
||||
reqGetSupplyAndDemandSquareList(ploay).then(res => {
|
||||
if (res.status) {
|
||||
if (res.data.length === 0) {
|
||||
this.productList = []
|
||||
} else {
|
||||
this.productList = res.data[0].product_list
|
||||
}
|
||||
this.total = res.data[0].total_count
|
||||
}
|
||||
})
|
||||
},
|
||||
loadSecondCategories(firstId) {
|
||||
return reqSupplyAndDemandFirstCategory({ to_page: 'show',url_link: window.location.href, first_level_id: firstId }).then(res => {
|
||||
if (res.status) {
|
||||
this.secondCategories = Array.isArray(res.data) ? res.data : []
|
||||
} else {
|
||||
this.secondCategories = []
|
||||
}
|
||||
return res
|
||||
})
|
||||
},
|
||||
|
||||
selectCompany(companyId) {
|
||||
const index = this.selectedCompanies.indexOf(companyId)
|
||||
if (index > -1) {
|
||||
this.selectedCompanies.splice(index, 1)
|
||||
} else {
|
||||
this.selectedCompanies.push(companyId)
|
||||
}
|
||||
this.initData()
|
||||
},
|
||||
}
|
||||
handleTypeChange() {
|
||||
console.log('切换到:', this.publish_type)
|
||||
this.initData()
|
||||
},
|
||||
|
||||
initData() {
|
||||
let ploay = {
|
||||
product_category: this.selectedCategory,
|
||||
to_page: "square",
|
||||
url_link: window.location.href,
|
||||
page_size: this.page_size,
|
||||
current_page: this.current_page,
|
||||
company_type: this.selectedCompanies.length > 0 ? this.selectedCompanies.join(",") : "",
|
||||
publish_type: this.publish_type
|
||||
}
|
||||
reqGetSupplyAndDemandSquareList(ploay).then(res => {
|
||||
if (res.status) {
|
||||
if (res.data.length === 0) {
|
||||
this.productList = []
|
||||
} else {
|
||||
this.productList = res.data[0].product_list
|
||||
}
|
||||
this.total = res.data[0].total_count
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
selectCompany(companyId) {
|
||||
const index = this.selectedCompanies.indexOf(companyId)
|
||||
if (index > -1) {
|
||||
this.selectedCompanies.splice(index, 1)
|
||||
} else {
|
||||
this.selectedCompanies.push(companyId)
|
||||
}
|
||||
this.initData()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.conter{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.banner-box {
|
||||
height: 700px!important;
|
||||
background: url('./img/tt-banner.png') no-repeat ;
|
||||
width: 100%;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.conter {
|
||||
width: 700px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 100px 280px 0px;
|
||||
}
|
||||
|
||||
.Toptitle {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 18px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
width: 700px;
|
||||
font-size: 16px;
|
||||
color: #8890ab;
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.btn{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-box{
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(90deg, rgb(39, 90, 255), rgb(46, 189, 250));
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: #666 !important;
|
||||
font-size: 36px;
|
||||
margin: 25px;
|
||||
color: #666 !important;
|
||||
font-size: 36px;
|
||||
margin: 25px;
|
||||
|
||||
.leftText {
|
||||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
.leftText {
|
||||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card-container {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-box {
|
||||
width: 90%;
|
||||
// min-width: 1600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1600px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
/* 筛选卡片样式 */
|
||||
.filter-card {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin: 20px 0;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin: 20px 0;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-header {
|
||||
padding: 20px 25px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
|
||||
padding: 20px 25px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #111e52;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #111e52;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: linear-gradient(135deg, #275AFF, #2EBDFA);
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: linear-gradient(135deg, #275AFF, #2EBDFA);
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-content {
|
||||
padding: 25px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
line-height: 32px;
|
||||
width: 80px;
|
||||
margin-right: 20px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
line-height: 32px;
|
||||
width: 80px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
position: relative;
|
||||
padding: 8px 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 8px 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
border-color: #275AFF;
|
||||
color: #275AFF;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.2);
|
||||
}
|
||||
&:hover {
|
||||
border-color: #275AFF;
|
||||
color: #275AFF;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, #275AFF, #2EBDFA);
|
||||
color: white;
|
||||
border-color: #275AFF;
|
||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
&.active {
|
||||
background: linear-gradient(135deg, #275AFF, #2EBDFA);
|
||||
color: white;
|
||||
border-color: #275AFF;
|
||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 隐藏原生radio */
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
/* 隐藏原生radio */
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.option-text {
|
||||
font-weight: 500;
|
||||
pointer-events: none;
|
||||
}
|
||||
.option-text {
|
||||
font-weight: 500;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.no-data {
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #7A82A0;
|
||||
flex-direction: column;
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #7A82A0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.filter-card {
|
||||
margin: 15px 10px;
|
||||
}
|
||||
.filter-card {
|
||||
margin: 15px 10px;
|
||||
}
|
||||
|
||||
.filter-content {
|
||||
padding: 15px;
|
||||
}
|
||||
.filter-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.filter-section {
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.filter-label {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
.filter-options {
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
min-width: 60px;
|
||||
}
|
||||
.filter-option {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.filter-card {
|
||||
max-width: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
.filter-card {
|
||||
max-width: calc(100% - 40px);
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 MiB |
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div @keyup.enter.native="handleLogin('loginForm')" class="main-box" style="position: relative ">
|
||||
<div @keyup.enter.native="handleLogin('loginForm')" class="main-box" style="position: relative">
|
||||
<!-- 广告弹窗（当前未启用） -->
|
||||
<div class="ad-dialog" v-if="adShow">
|
||||
<div class="showAdImg" style=""></div>
|
||||
@ -1022,7 +1022,7 @@ $light_gray: #eee;
|
||||
$dark_gray: #889aa4;
|
||||
|
||||
.main-box {
|
||||
background: url('/static/img/banner.0798e703.png') no-repeat center center;
|
||||
background: url('/static/img/banner.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
@ -30,8 +30,7 @@ class BaiduSMS:
|
||||
self.sms_client = self.create_client(self.access_key, self.access_key_secret, self.host)
|
||||
# 替换为您的百度短信签名名称
|
||||
# self.signature_id = 'sms-sign-qQHYeC17077' # 开元云科技
|
||||
# self.signature_id = 'sms-sign-BqOhYB33019' # 开元云
|
||||
self.signature_id = 'sms-sign-LOShPq75464' # 开元云北京
|
||||
self.signature_id = 'sms-sign-BqOhYB33019' # 开元云
|
||||
# 短信模板类型映射（键为业务类型，值为对应模板ID）
|
||||
self.sms_types = {
|
||||
"注册登录验证": "sms-tpl-123", # 示例模板ID
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user