Compare commits
No commits in common. "5ef36caa71388f5f826a287099dd6db27a0bf7e1" and "ceb8fe28f34c4224b74a86caf486757f7bad0ef1" have entirely different histories.
5ef36caa71
...
ceb8fe28f3
@ -1,17 +0,0 @@
|
|||||||
import request from "@/utils/request";
|
|
||||||
// 获取财务概览
|
|
||||||
export const reqFinancialOverview = (params = {}) => {
|
|
||||||
return request({
|
|
||||||
url: '/bill/finance_order_report_overview.dspy',
|
|
||||||
method: 'get',
|
|
||||||
params
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 计费统计
|
|
||||||
export const reqBillingStatistics = (params = {}) => {
|
|
||||||
return request({
|
|
||||||
url: '/bill/finance_order_report.dspy',
|
|
||||||
method: 'get',
|
|
||||||
params
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -126,25 +126,19 @@ export const reqTokenUsage = (params = {}) => {
|
|||||||
|
|
||||||
// 模型信息配置添加
|
// 模型信息配置添加
|
||||||
export const reqModelInfoConfig = (params = {}) => {
|
export const reqModelInfoConfig = (params = {}) => {
|
||||||
const isFormData = params instanceof FormData
|
|
||||||
return request({
|
return request({
|
||||||
url: '/cntoai/model_management_add.dspy',
|
url: '/cntoai/model_management_add.dspy',
|
||||||
method: isFormData ? 'post' : 'get',
|
method: 'get',
|
||||||
params: isFormData ? undefined : params,
|
params
|
||||||
data: isFormData ? params : undefined,
|
|
||||||
headers: isFormData ? { 'Content-Type': 'multipart/form-data' } : undefined
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 模型信息配置编辑（编辑时需要额外传 id）
|
// 模型信息配置编辑（编辑时需要额外传 id）
|
||||||
export const reqModelInfoConfigEdit = (params = {}) => {
|
export const reqModelInfoConfigEdit = (params = {}) => {
|
||||||
const isFormData = params instanceof FormData
|
|
||||||
return request({
|
return request({
|
||||||
url: '/cntoai/model_management_update.dspy',
|
url: '/cntoai/model_management_update.dspy',
|
||||||
method: isFormData ? 'post' : 'get',
|
method: 'get',
|
||||||
params: isFormData ? undefined : params,
|
params
|
||||||
data: isFormData ? params : undefined,
|
|
||||||
headers: isFormData ? { 'Content-Type': 'multipart/form-data' } : undefined
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -436,44 +436,6 @@ export const constantRoutes = [
|
|||||||
* 需要根据用户角色动态加载的路由
|
* 需要根据用户角色动态加载的路由
|
||||||
*/
|
*/
|
||||||
export const asyncRoutes = [
|
export const asyncRoutes = [
|
||||||
// 财务——财务概览
|
|
||||||
{
|
|
||||||
path: "/financialOverview",
|
|
||||||
component: Layout,
|
|
||||||
meta: {
|
|
||||||
title: "财务概览",
|
|
||||||
fullPath: "/financialOverview",
|
|
||||||
noCache: true,
|
|
||||||
icon: "el-icon-data-analysis",
|
|
||||||
roles: ["财务"]
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: "",
|
|
||||||
component: () => import('@/views/finance/financialOverview/index.vue'),
|
|
||||||
name: 'FinancialOverview',
|
|
||||||
meta: {
|
|
||||||
title: "财务概览",
|
|
||||||
fullPath: "/financialOverview",
|
|
||||||
noCache: true,
|
|
||||||
roles: ["财务"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 计费统计
|
|
||||||
{
|
|
||||||
path: "billingStatistics",
|
|
||||||
component: () => import('@/views/finance/billingStatistics/index.vue'),
|
|
||||||
name: 'BillingStatistics',
|
|
||||||
meta: {
|
|
||||||
title: "计费统计",
|
|
||||||
fullPath: "/financialOverview/billingStatistics",
|
|
||||||
noCache: false,
|
|
||||||
roles: ["财务"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// 运营——模型管理
|
// 运营——模型管理
|
||||||
{
|
{
|
||||||
path: "/modelManagement",
|
path: "/modelManagement",
|
||||||
@ -2087,19 +2049,9 @@ export const asyncRoutes = [
|
|||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: "/finance", component: Layout, redirect: "/finance/financialOverview", meta: {
|
path: "/finance", component: Layout, redirect: "/finance", meta: {
|
||||||
title: "财务", icon: "el-icon-s-data", noCache: true, fullPath: "/finance",
|
title: "财务", icon: "el-icon-s-data", noCache: true, fullPath: "/finance",
|
||||||
}, children: [{
|
}, children: [{
|
||||||
path: "financialOverview",
|
|
||||||
component: () => import("@/views/finance/financialOverview"),
|
|
||||||
name: "FinancialOverview",
|
|
||||||
meta: {
|
|
||||||
title: "财务概览",
|
|
||||||
fullPath: "/finance/financialOverview",
|
|
||||||
icon: "el-icon-data-analysis",
|
|
||||||
roles: ["财务"]
|
|
||||||
},
|
|
||||||
}, {
|
|
||||||
path: "supplierSettlement",
|
path: "supplierSettlement",
|
||||||
hidden: true,
|
hidden: true,
|
||||||
component: () => import(
|
component: () => import(
|
||||||
|
|||||||
@ -6,7 +6,6 @@ const MOBILE_UA_REGEXP = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Ope
|
|||||||
// 项目里用到的固定角色名，集中放这里，避免代码里到处写字符串。
|
// 项目里用到的固定角色名，集中放这里，避免代码里到处写字符串。
|
||||||
const CUSTOMER_ROLE = '客户';
|
const CUSTOMER_ROLE = '客户';
|
||||||
const OPERATION_ROLE = '运营';
|
const OPERATION_ROLE = '运营';
|
||||||
const FINANCE_ROLE = '财务';
|
|
||||||
|
|
||||||
// 这个用户能看到订单管理里的特殊子菜单，比如历史订单和订单详情。
|
// 这个用户能看到订单管理里的特殊子菜单，比如历史订单和订单详情。
|
||||||
const SPECIAL_ORDER_USER = 'ZhipuHZ';
|
const SPECIAL_ORDER_USER = 'ZhipuHZ';
|
||||||
@ -20,9 +19,6 @@ const COMMON_ROUTE_PATHS = ['/product', '/tokenManagement', '/tokenUsage', '/mod
|
|||||||
// 运营角色需要额外补出来的菜单。
|
// 运营角色需要额外补出来的菜单。
|
||||||
const OPERATION_EXTRA_ROUTE_PATHS = ['/modelManagement', '/modelInfoConfig', '/operationReport'];
|
const OPERATION_EXTRA_ROUTE_PATHS = ['/modelManagement', '/modelInfoConfig', '/operationReport'];
|
||||||
|
|
||||||
// 财务角色需要额外补出来的菜单。
|
|
||||||
const FINANCE_EXTRA_ROUTE_PATHS = ['/financialOverview'];
|
|
||||||
|
|
||||||
// 普通客户账号默认要补出来的基础菜单。
|
// 普通客户账号默认要补出来的基础菜单。
|
||||||
const BASE_USER_ROUTE_PATHS = ['/orderManagement', '/resourceManagement'];
|
const BASE_USER_ROUTE_PATHS = ['/orderManagement', '/resourceManagement'];
|
||||||
|
|
||||||
@ -340,15 +336,6 @@ function addOperationRoutes(accessedRoutes, routes, userRoles = [], deviceType =
|
|||||||
return appendMissingRoutes(accessedRoutes, getRoutesByPath(routes, OPERATION_EXTRA_ROUTE_PATHS));
|
return appendMissingRoutes(accessedRoutes, getRoutesByPath(routes, OPERATION_EXTRA_ROUTE_PATHS));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 财务角色额外补财务菜单，目前只在 PC 端展示。
|
|
||||||
function addFinanceRoutes(accessedRoutes, routes, userRoles = [], deviceType = 'pc') {
|
|
||||||
if (!userRoles.includes(FINANCE_ROLE) || deviceType !== 'pc') {
|
|
||||||
return accessedRoutes;
|
|
||||||
}
|
|
||||||
|
|
||||||
return appendMissingRoutes(accessedRoutes, getRoutesByPath(routes, FINANCE_EXTRA_ROUTE_PATHS));
|
|
||||||
}
|
|
||||||
|
|
||||||
// token市集是公共菜单，所有登录用户都要能看到。
|
// token市集是公共菜单，所有登录用户都要能看到。
|
||||||
function addCommonRoutes(accessedRoutes, routes, deviceType = 'pc') {
|
function addCommonRoutes(accessedRoutes, routes, deviceType = 'pc') {
|
||||||
const commonRoutes = getRoutesByPath(routes, COMMON_ROUTE_PATHS)
|
const commonRoutes = getRoutesByPath(routes, COMMON_ROUTE_PATHS)
|
||||||
@ -512,9 +499,6 @@ const actions = {
|
|||||||
// 6. 运营角色额外补模型管理。
|
// 6. 运营角色额外补模型管理。
|
||||||
accessedRoutes = addOperationRoutes(accessedRoutes, asyncRoutes, userRoles, deviceType);
|
accessedRoutes = addOperationRoutes(accessedRoutes, asyncRoutes, userRoles, deviceType);
|
||||||
|
|
||||||
// 6.1 财务角色额外补财务菜单。
|
|
||||||
accessedRoutes = addFinanceRoutes(accessedRoutes, asyncRoutes, userRoles, deviceType);
|
|
||||||
|
|
||||||
// 7. 最后处理订单管理里的特殊子菜单权限。
|
// 7. 最后处理订单管理里的特殊子菜单权限。
|
||||||
accessedRoutes = filterOrderChildrenByUser(accessedRoutes, username);
|
accessedRoutes = filterOrderChildrenByUser(accessedRoutes, username);
|
||||||
|
|
||||||
|
|||||||
@ -1,669 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="billing-statistics-page">
|
|
||||||
<div class="page-wrap">
|
|
||||||
<div class="page-head">
|
|
||||||
<div>
|
|
||||||
<h2>
|
|
||||||
财务概览
|
|
||||||
<span>{{ billingData.is_business_owner ? '业主机构' : '分销机构' }}</span>
|
|
||||||
</h2>
|
|
||||||
<p>核算机构：<b>{{ displayValue(billingData.accounting_orgname) }}</b></p>
|
|
||||||
<p>机构编号：{{ displayValue(billingData.accounting_orgid) }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="view-info">
|
|
||||||
<strong>管理员视图</strong>
|
|
||||||
<small>生成于 2026/5/29 17:00:06</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="summary-grid">
|
|
||||||
<div class="summary-card blue">
|
|
||||||
<i></i>
|
|
||||||
<span>客户支付总额</span>
|
|
||||||
<strong>{{ money(summary.customer_pay_total) }}<em>元</em></strong>
|
|
||||||
<p>customer_pay_total</p>
|
|
||||||
</div>
|
|
||||||
<div class="summary-card green">
|
|
||||||
<i></i>
|
|
||||||
<span>利润总额</span>
|
|
||||||
<strong>{{ money(summary.profit_total) }}<em>元</em></strong>
|
|
||||||
<p>profit_total</p>
|
|
||||||
</div>
|
|
||||||
<div class="summary-card amber">
|
|
||||||
<i></i>
|
|
||||||
<span>上游结算总额</span>
|
|
||||||
<strong>{{ money(summary.settle_upstream_total) }}<em>元</em></strong>
|
|
||||||
<p>settle_upstream_total</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="bill-panel">
|
|
||||||
<div class="panel-head">
|
|
||||||
<h3>账单明细</h3>
|
|
||||||
<span>第 {{ billingData.current_page || 1 }} 页 · 每页 {{ billingData.page_size || query.page_size }} 条 · 共 {{ billingData.total_count || 0 }} 条</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table class="bill-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>账单日期</th>
|
|
||||||
<th>客户</th>
|
|
||||||
<th>产品</th>
|
|
||||||
<th>供应商</th>
|
|
||||||
<th>操作</th>
|
|
||||||
<th class="num">数量</th>
|
|
||||||
<th class="num">客户支付</th>
|
|
||||||
<th class="num">利润</th>
|
|
||||||
<th class="num">上游结算</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="item in billItems" :key="item.bill_id" class="clickable-row" @click="openBillDetail(item)">
|
|
||||||
<td>{{ displayValue(item.bill_date) }}</td>
|
|
||||||
<td>{{ displayValue(item.customer && item.customer.name) }}</td>
|
|
||||||
<td>{{ displayValue(item.product && (item.product.name || item.product.servicename)) }}</td>
|
|
||||||
<td>{{ displayValue(item.provider && item.provider.name) }}</td>
|
|
||||||
<td><span class="op">{{ displayValue(item.business_op) }}</span></td>
|
|
||||||
<td class="num">{{ formatNumber(item.quantity) }}</td>
|
|
||||||
<td class="num" :class="amountClass(item.pricing && item.pricing.customer_pay_amount)">
|
|
||||||
{{ money(item.pricing && item.pricing.customer_pay_amount) }}
|
|
||||||
</td>
|
|
||||||
<td class="num" :class="amountClass(item.finance && item.finance.profit_amount)">
|
|
||||||
{{ money(item.finance && item.finance.profit_amount) }}
|
|
||||||
</td>
|
|
||||||
<td class="num" :class="amountClass(item.finance && item.finance.settle_upstream_amount)">
|
|
||||||
{{ money(item.finance && item.finance.settle_upstream_amount) }}
|
|
||||||
</td>
|
|
||||||
<td class="link" @click.stop="openBillDetail(item)">查看 ›</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td colspan="6">合计（财务概览）</td>
|
|
||||||
<td class="num">{{ money(summary.customer_pay_total) }}</td>
|
|
||||||
<td class="num">{{ money(summary.profit_total) }}</td>
|
|
||||||
<td class="num">{{ money(summary.settle_upstream_total) }}</td>
|
|
||||||
<td></td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
<div class="pagination-wrap">
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="billingData.total_count || 0"
|
|
||||||
:current-page="query.current_page"
|
|
||||||
:page-size="query.page_size"
|
|
||||||
:page-sizes="[3, 10, 20, 50]"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<p class="foot-note">
|
|
||||||
当前展示 {{ billItems.length }} 条明细，点击任意明细行查看详情。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-dialog
|
|
||||||
:visible.sync="detailVisible"
|
|
||||||
width="920px"
|
|
||||||
custom-class="billing-detail-dialog"
|
|
||||||
append-to-body
|
|
||||||
:show-close="false"
|
|
||||||
>
|
|
||||||
<div v-if="currentBill" class="detail-content">
|
|
||||||
<button class="detail-close" @click="detailVisible = false">×</button>
|
|
||||||
<div class="detail-head">
|
|
||||||
<h3>{{ displayValue(currentBill.product && currentBill.product.name) }} · {{ displayValue(currentBill.bill_date) }}</h3>
|
|
||||||
<p>
|
|
||||||
账单号 {{ displayValue(currentBill.bill_id) }}
|
|
||||||
<span>订单号 {{ displayValue(currentBill.order_id) }}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-title">基本信息</div>
|
|
||||||
<div class="info-grid">
|
|
||||||
<div><span>账单日期</span><b>{{ displayValue(currentBill.bill_date) }}</b></div>
|
|
||||||
<div><span>下单时间</span><b>{{ displayValue(currentBill.order_date) }}</b></div>
|
|
||||||
<div><span>业务操作</span><b>{{ displayValue(currentBill.business_op) }}</b></div>
|
|
||||||
<div><span>账单状态</span><b>{{ billStateText(currentBill) }}</b></div>
|
|
||||||
<div><span>客户</span><b>{{ displayValue(currentBill.customer && currentBill.customer.name) }}{{ currentBill.customer && currentBill.customer.is_direct_customer ? '（直客）' : '' }}</b></div>
|
|
||||||
<div><span>产品</span><b>{{ displayValue(currentBill.product && currentBill.product.name) }}</b></div>
|
|
||||||
<div><span>供应商</span><b>{{ displayValue(currentBill.provider && currentBill.provider.name) }}</b></div>
|
|
||||||
<div><span>数量</span><b>{{ formatNumber(currentBill.quantity) }}</b></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-title">价格信息</div>
|
|
||||||
<div class="info-grid">
|
|
||||||
<div><span>目录金额</span><b>{{ money(currentBill.pricing && currentBill.pricing.catalog_amount) }}</b></div>
|
|
||||||
<div><span>标价单价</span><b>{{ money(currentBill.pricing && currentBill.pricing.list_price_unit) }}</b></div>
|
|
||||||
<div><span>订单折扣</span><b>{{ discountText(currentBill.pricing && currentBill.pricing.order_discount) }}</b></div>
|
|
||||||
<div><span>成交单价</span><b>{{ money(currentBill.pricing && currentBill.pricing.order_unit_price) }}</b></div>
|
|
||||||
<div><span>客户支付金额</span><b>{{ money(currentBill.pricing && currentBill.pricing.customer_pay_amount) }}</b></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-title">协议 / 折扣</div>
|
|
||||||
<div class="info-grid">
|
|
||||||
<div><span>上游销售模式</span><b>{{ displayValue(currentBill.protocol && currentBill.protocol.parent_salemode) }}</b></div>
|
|
||||||
<div><span>上游给我方折扣</span><b>{{ discountText(currentBill.protocol && currentBill.protocol.parent_discount_to_us) }}</b></div>
|
|
||||||
<div><span>我方对客户模式</span><b>{{ displayValue(currentBill.protocol && currentBill.protocol.our_salemode_to_customer) }}</b></div>
|
|
||||||
<div><span>我方对客户折扣</span><b>{{ discountText(currentBill.protocol && currentBill.protocol.our_discount_to_customer) }}</b></div>
|
|
||||||
<div><span>我方作为分销给上游折扣</span><b>{{ discountText(currentBill.protocol && currentBill.protocol.our_discount_as_reseller_to_parent) }}</b></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-title">财务结算</div>
|
|
||||||
<div class="info-grid">
|
|
||||||
<div><span>利润金额</span><b>{{ money(currentBill.finance && currentBill.finance.profit_amount) }}</b></div>
|
|
||||||
<div><span>上游结算金额</span><b>{{ money(currentBill.finance && currentBill.finance.settle_upstream_amount) }}</b></div>
|
|
||||||
<div><span>结算类型</span><b>{{ displayValue(currentBill.finance && currentBill.finance.settle_upstream_type) }}</b></div>
|
|
||||||
<div><span>结算对象</span><b>{{ displayValue(currentBill.finance && currentBill.finance.settle_upstream_target && currentBill.finance.settle_upstream_target.name) }}</b></div>
|
|
||||||
<div><span>金额来源</span><b>{{ displayValue(currentBill.finance && currentBill.finance.amount_source) }}</b></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-title">记账分录（{{ billLegs.length }} 条）</div>
|
|
||||||
<table class="legs-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>科目</th>
|
|
||||||
<th>方向</th>
|
|
||||||
<th>参与方类型</th>
|
|
||||||
<th>核算机构</th>
|
|
||||||
<th class="num">金额</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="(leg, index) in billLegs" :key="`${leg.subjectname}-${index}`">
|
|
||||||
<td>{{ displayValue(leg.subjectname) }}</td>
|
|
||||||
<td><span class="dir-tag" :class="leg.accounting_dir === '贷' ? 'credit' : 'debit'">{{ displayValue(leg.accounting_dir) }}</span></td>
|
|
||||||
<td>{{ displayValue(leg.participanttype) }}</td>
|
|
||||||
<td>{{ displayValue(leg.accounting_orgid) }}</td>
|
|
||||||
<td class="num">{{ money(leg.amount) }}</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { reqBillingStatistics } from '@/api/FinancialOverview/FinancialOverview'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'BillingStatistics',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
orgid: '',
|
|
||||||
billingData: {},
|
|
||||||
query: {
|
|
||||||
current_page: 1,
|
|
||||||
page_size: 10,
|
|
||||||
only_accounted: true
|
|
||||||
},
|
|
||||||
detailVisible: false,
|
|
||||||
currentBill: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
summary() {
|
|
||||||
return this.billingData.summary || {}
|
|
||||||
},
|
|
||||||
billItems() {
|
|
||||||
return this.billingData.items || []
|
|
||||||
},
|
|
||||||
billLegs() {
|
|
||||||
return (this.currentBill && this.currentBill.bill_detail_legs) || []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getOrgId() {
|
|
||||||
const orgid = this.$route.query.orgid || sessionStorage.getItem('orgid') || localStorage.getItem('orgid') || ''
|
|
||||||
this.orgid = orgid
|
|
||||||
return orgid
|
|
||||||
},
|
|
||||||
async getData() {
|
|
||||||
const orgid = this.getOrgId()
|
|
||||||
const query = {
|
|
||||||
accounting_orgid:orgid,
|
|
||||||
current_page: this.query.current_page,
|
|
||||||
page_size: this.query.page_size,
|
|
||||||
only_accounted: this.query.only_accounted
|
|
||||||
}
|
|
||||||
const res = await reqBillingStatistics(query)
|
|
||||||
if (res && res.status === true) {
|
|
||||||
this.billingData = res.data || {}
|
|
||||||
this.query.current_page = Number(this.billingData.current_page || this.query.current_page)
|
|
||||||
this.query.page_size = Number(this.billingData.page_size || this.query.page_size)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSizeChange(size) {
|
|
||||||
this.query.page_size = size
|
|
||||||
this.query.current_page = 1
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
handleCurrentChange(page) {
|
|
||||||
this.query.current_page = page
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
openBillDetail(item) {
|
|
||||||
this.currentBill = item
|
|
||||||
this.detailVisible = true
|
|
||||||
},
|
|
||||||
billStateText(item) {
|
|
||||||
const state = item.bill_state === '1' ? '已生效' : this.displayValue(item.bill_state)
|
|
||||||
return `${state} · ${item.accounted ? '已入账' : '未入账'}`
|
|
||||||
},
|
|
||||||
discountText(value) {
|
|
||||||
if (value === undefined || value === null || value === '') return '-'
|
|
||||||
return `${Number(value) * 100}%`
|
|
||||||
},
|
|
||||||
money(value) {
|
|
||||||
return `¥${Number(value || 0).toLocaleString('zh-CN', {
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2
|
|
||||||
})}`
|
|
||||||
},
|
|
||||||
formatNumber(value) {
|
|
||||||
return Number(value || 0).toLocaleString('zh-CN')
|
|
||||||
},
|
|
||||||
displayValue(value) {
|
|
||||||
if (value === undefined || value === null || value === '') return '-'
|
|
||||||
return String(value)
|
|
||||||
},
|
|
||||||
amountClass(value) {
|
|
||||||
return Number(value || 0) > 0 ? 'green-text' : ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.billing-statistics-page {
|
|
||||||
// min-height: 100vh;
|
|
||||||
height: 100%;
|
|
||||||
padding: 18px 20px 36px;
|
|
||||||
|
|
||||||
// padding: 28px 24px 60px;
|
|
||||||
color: #1f2733;
|
|
||||||
background: #f4f6fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-wrap {
|
|
||||||
// max-width: 1180px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
span {
|
|
||||||
padding: 2px 10px;
|
|
||||||
color: #3a6df0;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
background: #eef3ff;
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 0 4px;
|
|
||||||
color: #6b7686;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-info {
|
|
||||||
color: #6b7686;
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
display: block;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
margin-top: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
gap: 18px;
|
|
||||||
margin-bottom: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-card {
|
|
||||||
position: relative;
|
|
||||||
min-height: 116px;
|
|
||||||
padding: 20px 22px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e6eaf1;
|
|
||||||
border-radius: 14px;
|
|
||||||
box-shadow: 0 1px 3px rgba(20, 30, 55, 0.06), 0 8px 24px rgba(20, 30, 55, 0.05);
|
|
||||||
|
|
||||||
i {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #6b7686;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
display: block;
|
|
||||||
font-size: 30px;
|
|
||||||
line-height: 1.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
margin-left: 4px;
|
|
||||||
color: #6b7686;
|
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 8px 0 0;
|
|
||||||
color: #98a2b3;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.blue {
|
|
||||||
i { background: #3a6df0; }
|
|
||||||
strong { color: #3a6df0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.green {
|
|
||||||
i { background: #18a058; }
|
|
||||||
strong { color: #18a058; }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.amber {
|
|
||||||
i { background: #d08e18; }
|
|
||||||
strong { color: #d08e18; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bill-panel {
|
|
||||||
overflow: hidden;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e6eaf1;
|
|
||||||
border-radius: 14px;
|
|
||||||
box-shadow: 0 1px 3px rgba(20, 30, 55, 0.06), 0 8px 24px rgba(20, 30, 55, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-bottom: 1px solid #e6eaf1;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #6b7686;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bill-table {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 880px;
|
|
||||||
border-collapse: collapse;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
th {
|
|
||||||
padding: 12px 16px;
|
|
||||||
color: #6b7686;
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
background: #fafbfe;
|
|
||||||
border-bottom: 1px solid #e6eaf1;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 12px 16px;
|
|
||||||
color: #1f2733;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-bottom: 1px solid #e6eaf1;
|
|
||||||
}
|
|
||||||
|
|
||||||
tfoot td {
|
|
||||||
font-weight: 700;
|
|
||||||
background: #fafbfe;
|
|
||||||
border-top: 2px solid #e6eaf1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.num {
|
|
||||||
text-align: right;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination-wrap {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding: 14px 16px 16px;
|
|
||||||
border-top: 1px solid #eef2f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clickable-row {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover td {
|
|
||||||
background: #f0f5ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.op {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 2px 8px;
|
|
||||||
color: #18a058;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
background: #e9f6ee;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green-text {
|
|
||||||
color: #18a058 !important;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
color: #6b7686;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .billing-detail-dialog {
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 14px;
|
|
||||||
|
|
||||||
.el-dialog__header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__body {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-content {
|
|
||||||
position: relative;
|
|
||||||
padding: 22px 28px 24px;
|
|
||||||
overflow: visible;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 18px;
|
|
||||||
right: 20px;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
color: #98a2b3;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 26px;
|
|
||||||
background: #f4f6fb;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 7px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-head {
|
|
||||||
padding-right: 38px;
|
|
||||||
padding-bottom: 14px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
border-bottom: 1px solid #eef2f7;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 6px;
|
|
||||||
color: #1f2733;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
color: #98a2b3;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
margin: 14px 0 8px;
|
|
||||||
color: #344054;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
gap: 0 28px;
|
|
||||||
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
min-height: 27px;
|
|
||||||
border-bottom: 1px solid #eef2f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #667085;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
b {
|
|
||||||
color: #1f2733;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.legs-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 7px 10px;
|
|
||||||
text-align: left;
|
|
||||||
border-bottom: 1px solid #eef2f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
color: #667085;
|
|
||||||
font-weight: 600;
|
|
||||||
background: #fafbfe;
|
|
||||||
}
|
|
||||||
|
|
||||||
.num {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dir-tag {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1px 7px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
&.credit {
|
|
||||||
color: #18a058;
|
|
||||||
background: #e9f6ee;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.debit {
|
|
||||||
color: #d03050;
|
|
||||||
background: #fdeef0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.foot-note {
|
|
||||||
margin: 16px 0 0;
|
|
||||||
color: #6b7686;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 760px) {
|
|
||||||
.page-head,
|
|
||||||
.panel-head {
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,736 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="finance-layout-page">
|
|
||||||
<div class="page-top">
|
|
||||||
<div>
|
|
||||||
<h2>
|
|
||||||
利润概览
|
|
||||||
<em>{{ financialOverview.is_business_owner ? '业主机构' : '分销机构' }}</em>
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
核算机构：<b>{{ displayValue(financialOverview.accounting_orgname) }}</b>
|
|
||||||
<span>编号 {{ displayValue(financialOverview.accounting_orgid) }}</span>
|
|
||||||
</p>
|
|
||||||
<div class="chips">
|
|
||||||
<span>含下级分销客户：<b>{{ customerScope.include_sub_reseller_customers ? '是' : '否' }}</b></span>
|
|
||||||
<span>下级分销机构：<b>{{ formatNumber(customerScope.descendant_reseller_count) }}</b> 家</span>
|
|
||||||
<span>账单总数：<b>{{ formatNumber(financialOverview.bill_count) }}</b></span>
|
|
||||||
<span>仅已入账：<b>{{ filters.only_accounted ? '是' : '否' }}</b></span>
|
|
||||||
<span>数据截断：<b>{{ financialOverview.truncated ? '是' : '否' }}</b></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="view-meta">
|
|
||||||
查看计费统计
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="summary-grid">
|
|
||||||
<div v-for="card in summaryCards" :key="card.label" class="summary-card" :class="card.type">
|
|
||||||
<i></i>
|
|
||||||
<span>{{ card.label }}</span>
|
|
||||||
<strong>{{ card.value }}</strong>
|
|
||||||
<p>{{ card.desc }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-card shadow="never" class="panel">
|
|
||||||
<div class="panel-head">
|
|
||||||
<h3>收益构成（按客户来源）</h3>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
v-loading="loading"
|
|
||||||
:data="sourceRows"
|
|
||||||
size="small"
|
|
||||||
class="finance-table"
|
|
||||||
show-summary
|
|
||||||
:summary-method="getSourceSummary"
|
|
||||||
>
|
|
||||||
<el-table-column label="客户来源" min-width="180">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<span class="source-cell">
|
|
||||||
<i class="dot" :class="row.type"></i>{{ row.name }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="销售额" align="right" min-width="140">
|
|
||||||
<template slot-scope="{ row }">{{ money(row.sales_total) }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="利润" align="right" min-width="140">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<span :class="amountClass(row.profit_total)">{{ money(row.profit_total) }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="利润率" align="right" width="120">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<span :class="amountClass(row.margin)">{{ percent(row.margin) }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column :label="settleLabel" align="right" min-width="140">
|
|
||||||
<template slot-scope="{ row }">{{ money(row.settle_upstream_total) }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="账单数" align="right" width="110">
|
|
||||||
<template slot-scope="{ row }">{{ formatNumber(row.bill_count) }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card shadow="never" class="panel">
|
|
||||||
<div class="panel-head">
|
|
||||||
<h3>供应商 / 产品明细</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
v-loading="loading"
|
|
||||||
:data="filteredProductRows"
|
|
||||||
size="small"
|
|
||||||
class="finance-table product-table"
|
|
||||||
show-summary
|
|
||||||
:summary-method="getProductSummary"
|
|
||||||
@row-click="openProductDetail"
|
|
||||||
>
|
|
||||||
<el-table-column label="供应商" min-width="170" show-overflow-tooltip>
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
{{ row.providerName }}
|
|
||||||
<el-tag v-if="row.hasSubReseller" size="mini" type="primary" effect="plain">含下级</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="productName" label="产品" min-width="190" show-overflow-tooltip />
|
|
||||||
<el-table-column prop="sales_total" label="销售额" align="right" min-width="140" sortable>
|
|
||||||
<template slot-scope="{ row }">{{ money(row.sales_total) }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="profit_total" label="利润" align="right" min-width="140" sortable>
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<span :class="amountClass(row.profit_total)">{{ money(row.profit_total) }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="margin" label="利润率" align="right" width="120" sortable>
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<span :class="amountClass(row.margin)">{{ percent(row.margin) }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="settle_upstream_total" :label="settleLabel" align="right" min-width="140">
|
|
||||||
<template slot-scope="{ row }">{{ money(row.settle_upstream_total) }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="bill_count" label="账单数" align="right" width="110" sortable>
|
|
||||||
<template slot-scope="{ row }">{{ formatNumber(row.bill_count) }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<p class="note">共 {{ productRows.length }} 个供应商/产品组合</p>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-dialog
|
|
||||||
:visible.sync="detailVisible"
|
|
||||||
width="680px"
|
|
||||||
custom-class="finance-detail-dialog"
|
|
||||||
append-to-body
|
|
||||||
:show-close="false"
|
|
||||||
>
|
|
||||||
<div v-if="currentProduct" class="detail-card">
|
|
||||||
<button class="detail-close" @click="detailVisible = false">×</button>
|
|
||||||
<div class="detail-head">
|
|
||||||
<h3>{{ currentProduct.providerName }} · {{ currentProduct.productName }}</h3>
|
|
||||||
<p>
|
|
||||||
销售额 {{ money(currentProduct.sales_total) }} ·
|
|
||||||
利润率 {{ percent(currentProduct.margin) }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<el-table :data="detailRows" size="small" class="detail-table">
|
|
||||||
<el-table-column label="客户来源" min-width="160">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<span class="source-cell">
|
|
||||||
<i class="dot" :class="row.type"></i>{{ row.name }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="销售额" align="right" min-width="150">
|
|
||||||
<template slot-scope="{ row }">{{ money(row.sales_total) }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="利润" align="right" min-width="150">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<span :class="amountClass(row.profit_total)">{{ money(row.profit_total) }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column :label="settleLabel" align="right" min-width="150">
|
|
||||||
<template slot-scope="{ row }">{{ money(row.settle_upstream_total) }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="账单数" align="right" width="110">
|
|
||||||
<template slot-scope="{ row }">{{ formatNumber(row.bill_count) }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { reqFinancialOverview } from '@/api/FinancialOverview/FinancialOverview'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'FinancialOverview',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
keyword: '',
|
|
||||||
orgid: '',
|
|
||||||
financialOverview: {},
|
|
||||||
detailVisible: false,
|
|
||||||
currentProduct: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// 客户范围信息：是否包含下级分销客户、下级分销数量等。
|
|
||||||
customerScope() {
|
|
||||||
return this.financialOverview.customer_scope || {}
|
|
||||||
},
|
|
||||||
// 接口筛选条件展示，例如是否仅统计已入账账单。
|
|
||||||
filters() {
|
|
||||||
return this.financialOverview.filters || {}
|
|
||||||
},
|
|
||||||
// 统计周期，接口为空时页面展示“全部周期”。
|
|
||||||
period() {
|
|
||||||
return this.financialOverview.period || {}
|
|
||||||
},
|
|
||||||
// 财务汇总数据，包含直客、下级分销和总计。
|
|
||||||
totals() {
|
|
||||||
return this.financialOverview.totals || {}
|
|
||||||
},
|
|
||||||
// 总计数据用于顶部卡片和表格合计行。
|
|
||||||
grandTotal() {
|
|
||||||
return this.totals.grand_total || {}
|
|
||||||
},
|
|
||||||
// 上游结算字段文案由接口返回，业主机构时通常为“应付供应商”。
|
|
||||||
settleLabel() {
|
|
||||||
return this.financialOverview.settle_upstream_label || '应付供应商'
|
|
||||||
},
|
|
||||||
// 格式化统计周期文案。
|
|
||||||
periodText() {
|
|
||||||
if (this.period.start_date || this.period.end_date) {
|
|
||||||
return `${this.period.start_date || '-'} 至 ${this.period.end_date || '-'}`
|
|
||||||
}
|
|
||||||
return '全部周期'
|
|
||||||
},
|
|
||||||
// 顶部四个核心指标卡片。
|
|
||||||
summaryCards() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
label: '销售总额',
|
|
||||||
value: this.money(this.grandTotal.sales_total),
|
|
||||||
desc: 'grand_total · sales_total',
|
|
||||||
type: 'blue'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '利润总额',
|
|
||||||
value: this.money(this.grandTotal.profit_total),
|
|
||||||
desc: `利润率 ${this.percent(this.margin(this.grandTotal.profit_total, this.grandTotal.sales_total))}`,
|
|
||||||
type: 'green'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.settleLabel,
|
|
||||||
value: this.money(this.grandTotal.settle_upstream_total),
|
|
||||||
desc: 'settle_upstream_total',
|
|
||||||
type: 'amber'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '账单总数',
|
|
||||||
value: this.formatNumber(this.grandTotal.bill_count),
|
|
||||||
desc: `含 ${this.formatNumber(this.totals.from_sub_resellers && this.totals.from_sub_resellers.bill_count)} 笔下级分销`,
|
|
||||||
type: 'purple'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// 收益构成表：按直接客户和下级分销客户拆分。
|
|
||||||
sourceRows() {
|
|
||||||
return [
|
|
||||||
this.buildSourceRow('直接客户', this.totals.direct_customers, 'blue-dot'),
|
|
||||||
this.buildSourceRow('下级分销客户', this.totals.from_sub_resellers, 'purple-dot')
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// 供应商/产品明细表：把接口 by_provider_product 结构扁平化，便于 el-table 渲染。
|
|
||||||
productRows() {
|
|
||||||
return (this.financialOverview.by_provider_product || []).map((item, index) => {
|
|
||||||
const total = item.total || {}
|
|
||||||
const direct = item.direct_customers || {}
|
|
||||||
const sub = item.from_sub_resellers || {}
|
|
||||||
return {
|
|
||||||
index,
|
|
||||||
providerName: this.displayValue(item.provider && item.provider.name),
|
|
||||||
productName: this.displayValue(item.product && item.product.name),
|
|
||||||
direct_customers: direct,
|
|
||||||
from_sub_resellers: sub,
|
|
||||||
sales_total: Number(total.sales_total || 0),
|
|
||||||
profit_total: Number(total.profit_total || 0),
|
|
||||||
settle_upstream_total: Number(total.settle_upstream_total || 0),
|
|
||||||
bill_count: Number(total.bill_count || 0),
|
|
||||||
margin: this.margin(total.profit_total, total.sales_total),
|
|
||||||
hasSubReseller: Number(sub.bill_count || 0) > 0 || Number(sub.sales_total || 0) !== 0 || Number(sub.profit_total || 0) !== 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 根据搜索关键词过滤供应商或产品名称。
|
|
||||||
filteredProductRows() {
|
|
||||||
const keyword = this.keyword.trim().toLowerCase()
|
|
||||||
if (!keyword) return this.productRows
|
|
||||||
return this.productRows.filter(item => {
|
|
||||||
return `${item.providerName} ${item.productName}`.toLowerCase().includes(keyword)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 明细弹窗数据：展示当前产品的直客、下级分销和合计拆分。
|
|
||||||
detailRows() {
|
|
||||||
if (!this.currentProduct) return []
|
|
||||||
return [
|
|
||||||
this.buildSourceRow('直接客户', this.currentProduct.direct_customers, 'blue-dot'),
|
|
||||||
this.buildSourceRow('下级分销客户', this.currentProduct.from_sub_resellers, 'purple-dot'),
|
|
||||||
this.buildSourceRow('合计', this.currentProduct, 'total-dot')
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getFinancialOverview()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取当前核算机构 orgid，优先使用路由参数，其次使用本地缓存。
|
|
||||||
getOrgId() {
|
|
||||||
const orgid = this.$route.query.orgid || sessionStorage.getItem('orgid') || localStorage.getItem('orgid') || ''
|
|
||||||
this.orgid = orgid
|
|
||||||
return orgid
|
|
||||||
},
|
|
||||||
// 请求财务概览接口，并保存原始返回数据供 computed 统一派生。
|
|
||||||
async getFinancialOverview() {
|
|
||||||
this.loading = true
|
|
||||||
try {
|
|
||||||
const orgid = this.getOrgId()
|
|
||||||
const res = await reqFinancialOverview({ accounting_orgid:orgid })
|
|
||||||
if (res && res.status === true) {
|
|
||||||
this.financialOverview = res.data || {}
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
this.loading = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 统一构造金额行，避免直客、下级分销、合计三类数据重复处理。
|
|
||||||
buildSourceRow(name, data = {}, type) {
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
type,
|
|
||||||
sales_total: Number(data.sales_total || 0),
|
|
||||||
profit_total: Number(data.profit_total || 0),
|
|
||||||
settle_upstream_total: Number(data.settle_upstream_total || 0),
|
|
||||||
bill_count: Number(data.bill_count || 0),
|
|
||||||
margin: this.margin(data.profit_total, data.sales_total)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 收益构成表合计行，取接口 totals.grand_total 保持与后端汇总一致。
|
|
||||||
getSourceSummary() {
|
|
||||||
return [
|
|
||||||
'合计',
|
|
||||||
this.money(this.grandTotal.sales_total),
|
|
||||||
this.money(this.grandTotal.profit_total),
|
|
||||||
this.percent(this.margin(this.grandTotal.profit_total, this.grandTotal.sales_total)),
|
|
||||||
this.money(this.grandTotal.settle_upstream_total),
|
|
||||||
this.formatNumber(this.grandTotal.bill_count)
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// 供应商/产品表合计行，金额同样以接口 grand_total 为准。
|
|
||||||
getProductSummary() {
|
|
||||||
return [
|
|
||||||
'合计',
|
|
||||||
'',
|
|
||||||
this.money(this.grandTotal.sales_total),
|
|
||||||
this.money(this.grandTotal.profit_total),
|
|
||||||
this.percent(this.margin(this.grandTotal.profit_total, this.grandTotal.sales_total)),
|
|
||||||
this.money(this.grandTotal.settle_upstream_total),
|
|
||||||
this.formatNumber(this.grandTotal.bill_count)
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// 打开单个供应商/产品的拆分详情弹窗。
|
|
||||||
openProductDetail(row) {
|
|
||||||
this.currentProduct = row
|
|
||||||
this.detailVisible = true
|
|
||||||
},
|
|
||||||
// 计算利润率：利润 / 销售额。
|
|
||||||
margin(profit, sales) {
|
|
||||||
const salesValue = Number(sales || 0)
|
|
||||||
return salesValue ? (Number(profit || 0) / salesValue) * 100 : 0
|
|
||||||
},
|
|
||||||
// 金额格式化，统一显示人民币和两位小数。
|
|
||||||
money(value) {
|
|
||||||
return `¥${Number(value || 0).toLocaleString('zh-CN', {
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2
|
|
||||||
})}`
|
|
||||||
},
|
|
||||||
// 百分比格式化，统一保留一位小数。
|
|
||||||
percent(value) {
|
|
||||||
return `${Number(value || 0).toFixed(1)}%`
|
|
||||||
},
|
|
||||||
// 数字格式化，补千分位。
|
|
||||||
formatNumber(value) {
|
|
||||||
return Number(value || 0).toLocaleString('zh-CN')
|
|
||||||
},
|
|
||||||
// 空值兜底，避免供应商或产品名称为空时页面留白。
|
|
||||||
displayValue(value) {
|
|
||||||
if (value === undefined || value === null || value === '') return '未命名'
|
|
||||||
return String(value)
|
|
||||||
},
|
|
||||||
// 金额正负颜色：负数标红，非负数标绿。
|
|
||||||
amountClass(value) {
|
|
||||||
return Number(value || 0) < 0 ? 'red-text' : 'green-text'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
.finance-layout-page {
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 18px 20px 36px;
|
|
||||||
color: #1f2733;
|
|
||||||
background: #f4f6fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-top {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
|
|
||||||
.crumb {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #667085;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin: 0 6px;
|
|
||||||
color: #c4cad5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 0 0 6px;
|
|
||||||
font-size: 22px;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
em {
|
|
||||||
padding: 2px 9px;
|
|
||||||
color: #6d5df6;
|
|
||||||
font-size: 12px;
|
|
||||||
font-style: normal;
|
|
||||||
background: #f0edff;
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
color: #667085;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-meta {
|
|
||||||
color: #667085;
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
margin-top: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chips {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
padding: 4px 10px;
|
|
||||||
color: #667085;
|
|
||||||
font-size: 12px;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e6eaf1;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
b {
|
|
||||||
color: #1f2733;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
||||||
gap: 14px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-card {
|
|
||||||
position: relative;
|
|
||||||
min-height: 102px;
|
|
||||||
padding: 16px 18px 14px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e6eaf1;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 1px 3px rgba(20, 30, 55, 0.06), 0 8px 24px rgba(20, 30, 55, 0.05);
|
|
||||||
|
|
||||||
i {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #667085;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
display: block;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 7px 0 0;
|
|
||||||
color: #98a2b3;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.blue {
|
|
||||||
i { background: #3a6df0; }
|
|
||||||
strong { color: #3a6df0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.green {
|
|
||||||
i { background: #18a058; }
|
|
||||||
strong { color: #18a058; }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.amber {
|
|
||||||
i { background: #d08e18; }
|
|
||||||
strong { color: #d08e18; }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.purple {
|
|
||||||
i { background: #7a5af0; }
|
|
||||||
strong { color: #7a5af0; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
margin-bottom: 14px;
|
|
||||||
border: 1px solid #e6eaf1;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 1px 3px rgba(20, 30, 55, 0.05);
|
|
||||||
|
|
||||||
.el-card__body {
|
|
||||||
padding: 14px 18px 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
color: #1f2733;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-tools {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
color: #98a2b3;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
.el-input {
|
|
||||||
width: 220px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.finance-table {
|
|
||||||
th {
|
|
||||||
padding: 8px 0;
|
|
||||||
color: #667085;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
background: #fafbfe;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 7px 0;
|
|
||||||
color: #273142;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__footer td {
|
|
||||||
color: #1f2733;
|
|
||||||
font-weight: 700;
|
|
||||||
background: #fafbfe;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-table {
|
|
||||||
.el-table__row {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__row:hover > td {
|
|
||||||
background: #f0f5ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .finance-detail-dialog {
|
|
||||||
overflow: hidden;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 18px;
|
|
||||||
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
|
|
||||||
|
|
||||||
.el-dialog__header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__body {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-card {
|
|
||||||
position: relative;
|
|
||||||
padding: 22px 24px 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 18px;
|
|
||||||
right: 22px;
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
color: #667085;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 32px;
|
|
||||||
text-align: center;
|
|
||||||
background: #f5f7fb;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-head {
|
|
||||||
padding-right: 48px;
|
|
||||||
margin-bottom: 18px;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 6px;
|
|
||||||
color: #1f2733;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
color: #667085;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-table {
|
|
||||||
/deep/ th {
|
|
||||||
padding: 12px 0;
|
|
||||||
color: #667085;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
background: #f7f8fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ td {
|
|
||||||
padding: 12px 0;
|
|
||||||
color: #273142;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .el-table__row:last-child td {
|
|
||||||
font-weight: 700;
|
|
||||||
background: #fafbfe;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.source-cell {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue-dot {
|
|
||||||
background: #3a6df0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.purple-dot {
|
|
||||||
background: #7a5af0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.total-dot {
|
|
||||||
background: #1f2733;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green-text {
|
|
||||||
color: #18a058 !important;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.red-text {
|
|
||||||
color: #d03050 !important;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note {
|
|
||||||
margin: 10px 0 2px;
|
|
||||||
color: #98a2b3;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
|
||||||
.summary-grid {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 760px) {
|
|
||||||
.page-top,
|
|
||||||
.panel-head,
|
|
||||||
.panel-tools {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -44,23 +44,10 @@
|
|||||||
<el-option label="多模态" value="多模态"></el-option>
|
<el-option label="多模态" value="多模态"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="模型LOGO">
|
<el-form-item label="供应商LOGO">
|
||||||
<div class="logo-upload">
|
<div class="logo-upload">
|
||||||
<input
|
<el-button size="small" icon="el-icon-upload2">选择文件</el-button>
|
||||||
ref="modelLogoInput"
|
<span>{{ editForm.logo || '未选择任何文件' }}</span>
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
class="logo-file-input"
|
|
||||||
@change="handleLogoFileChange"
|
|
||||||
>
|
|
||||||
<div v-if="editForm.modelLogoPreview" class="logo-preview">
|
|
||||||
<img :src="editForm.modelLogoPreview" alt="model logo">
|
|
||||||
</div>
|
|
||||||
<div class="logo-actions">
|
|
||||||
<el-button size="small" icon="el-icon-upload2" @click="triggerLogoUpload">选择文件</el-button>
|
|
||||||
<el-button v-if="editForm.modelLogoPreview" size="small" type="text" @click="clearModelLogo">移除</el-button>
|
|
||||||
<span>{{ editForm.logo || (editForm.modelLogoPreview ? '已上传图片' : '未选择任何文件') }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="接口地址" class="span-2">
|
<el-form-item label="接口地址" class="span-2">
|
||||||
@ -273,9 +260,6 @@ const DEFAULT_EDIT_FORM = {
|
|||||||
type: '',
|
type: '',
|
||||||
provider: '',
|
provider: '',
|
||||||
logo: '',
|
logo: '',
|
||||||
modelLogo: '',
|
|
||||||
modelLogoFile: null,
|
|
||||||
modelLogoPreview: '',
|
|
||||||
apiUrl: '',
|
apiUrl: '',
|
||||||
description: '',
|
description: '',
|
||||||
contextLength: '',
|
contextLength: '',
|
||||||
@ -337,7 +321,6 @@ export default {
|
|||||||
const apiUrl = this.toFormValue(apiDoc.api_url || row.api_url || '')
|
const apiUrl = this.toFormValue(apiDoc.api_url || row.api_url || '')
|
||||||
const curlCode = this.toTextareaValue(apiDoc.curl_code || row.curl_code || '')
|
const curlCode = this.toTextareaValue(apiDoc.curl_code || row.curl_code || '')
|
||||||
const pythonCode = this.toTextareaValue(apiDoc.python_code || row.python_code || '')
|
const pythonCode = this.toTextareaValue(apiDoc.python_code || row.python_code || '')
|
||||||
const modelLogo = row.model_logo || row.modelLogo || row.provider_logo || ''
|
|
||||||
|
|
||||||
this.editForm = {
|
this.editForm = {
|
||||||
...defaultForm,
|
...defaultForm,
|
||||||
@ -347,10 +330,7 @@ export default {
|
|||||||
displayName: row.display_name || row.displayName || row.model_name || row.name || '',
|
displayName: row.display_name || row.displayName || row.model_name || row.name || '',
|
||||||
type: row.model_type || row.type || '',
|
type: row.model_type || row.type || '',
|
||||||
provider: row.provider || '',
|
provider: row.provider || '',
|
||||||
logo: row.logo || '',
|
logo: row.provider_logo || row.logo || '',
|
||||||
modelLogo,
|
|
||||||
modelLogoFile: null,
|
|
||||||
modelLogoPreview: modelLogo,
|
|
||||||
apiUrl,
|
apiUrl,
|
||||||
requestUrl: apiUrl,
|
requestUrl: apiUrl,
|
||||||
description: row.description || '',
|
description: row.description || '',
|
||||||
@ -396,7 +376,7 @@ export default {
|
|||||||
this.submitLoading = true
|
this.submitLoading = true
|
||||||
try {
|
try {
|
||||||
const res = isEdit
|
const res = isEdit
|
||||||
? await reqModelInfoConfigEdit(this.appendEditId(params))
|
? await reqModelInfoConfigEdit({ ...params, id: this.editForm.id })
|
||||||
: await reqModelInfoConfig(params)
|
: await reqModelInfoConfig(params)
|
||||||
if (res && res.status) {
|
if (res && res.status) {
|
||||||
this.$message.success(res.msg || (isEdit ? '模型信息编辑成功' : '模型信息添加成功'))
|
this.$message.success(res.msg || (isEdit ? '模型信息编辑成功' : '模型信息添加成功'))
|
||||||
@ -412,7 +392,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
buildSubmitParams() {
|
buildSubmitParams() {
|
||||||
const params = {
|
return {
|
||||||
provider: this.editForm.provider,
|
provider: this.editForm.provider,
|
||||||
model_name: this.editForm.modelName,
|
model_name: this.editForm.modelName,
|
||||||
display_name: this.editForm.displayName,
|
display_name: this.editForm.displayName,
|
||||||
@ -428,68 +408,10 @@ export default {
|
|||||||
highlights: JSON.stringify(this.filterNameValueList(this.editForm.highlights)),
|
highlights: JSON.stringify(this.filterNameValueList(this.editForm.highlights)),
|
||||||
description: this.editForm.description,
|
description: this.editForm.description,
|
||||||
experience: this.editForm.experience,
|
experience: this.editForm.experience,
|
||||||
model_logo: this.editForm.modelLogo,
|
|
||||||
api_url: this.editForm.apiUrl || this.editForm.requestUrl,
|
api_url: this.editForm.apiUrl || this.editForm.requestUrl,
|
||||||
curl_code: this.editForm.curlCode,
|
curl_code: this.editForm.curlCode,
|
||||||
python_code: this.editForm.pythonCode
|
python_code: this.editForm.pythonCode
|
||||||
}
|
}
|
||||||
return this.editForm.modelLogoFile ? this.buildFormData(params) : params
|
|
||||||
},
|
|
||||||
buildFormData(params) {
|
|
||||||
const formData = new FormData()
|
|
||||||
Object.keys(params).forEach(key => {
|
|
||||||
if (params[key] !== undefined && params[key] !== null) {
|
|
||||||
formData.append(key, params[key])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
formData.set('model_logo', this.editForm.modelLogoFile)
|
|
||||||
return formData
|
|
||||||
},
|
|
||||||
appendEditId(params) {
|
|
||||||
if (params instanceof FormData) {
|
|
||||||
params.append('id', this.editForm.id)
|
|
||||||
return params
|
|
||||||
}
|
|
||||||
return { ...params, id: this.editForm.id }
|
|
||||||
},
|
|
||||||
triggerLogoUpload() {
|
|
||||||
if (this.$refs.modelLogoInput) {
|
|
||||||
this.$refs.modelLogoInput.click()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleLogoFileChange(event) {
|
|
||||||
const file = event.target.files && event.target.files[0]
|
|
||||||
if (!file) return
|
|
||||||
if (file.size > 5 * 1024 * 1024) {
|
|
||||||
this.$message.error('图片大小不能超过5MB')
|
|
||||||
event.target.value = ''
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!file.type || !file.type.startsWith('image/')) {
|
|
||||||
this.$message.error('请选择图片文件')
|
|
||||||
event.target.value = ''
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.editForm.modelLogoPreview && this.editForm.modelLogoPreview.startsWith('blob:')) {
|
|
||||||
URL.revokeObjectURL(this.editForm.modelLogoPreview)
|
|
||||||
}
|
|
||||||
this.editForm.modelLogoFile = file
|
|
||||||
this.editForm.modelLogo = ''
|
|
||||||
this.editForm.modelLogoPreview = URL.createObjectURL(file)
|
|
||||||
this.editForm.logo = file.name
|
|
||||||
event.target.value = ''
|
|
||||||
},
|
|
||||||
clearModelLogo() {
|
|
||||||
if (this.editForm.modelLogoPreview && this.editForm.modelLogoPreview.startsWith('blob:')) {
|
|
||||||
URL.revokeObjectURL(this.editForm.modelLogoPreview)
|
|
||||||
}
|
|
||||||
this.editForm.modelLogo = ''
|
|
||||||
this.editForm.modelLogoFile = null
|
|
||||||
this.editForm.modelLogoPreview = ''
|
|
||||||
this.editForm.logo = ''
|
|
||||||
if (this.$refs.modelLogoInput) {
|
|
||||||
this.$refs.modelLogoInput.value = ''
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
buildCapabilities() {
|
buildCapabilities() {
|
||||||
return [
|
return [
|
||||||
@ -853,36 +775,6 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
min-height: 32px;
|
min-height: 32px;
|
||||||
}
|
|
||||||
|
|
||||||
.logo-file-input {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-preview {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 0 0 42px;
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #f6f8fb;
|
|
||||||
border: 1px solid #edf1f7;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: #98a2b3;
|
color: #98a2b3;
|
||||||
|
|||||||
@ -100,7 +100,63 @@ export default {
|
|||||||
modelType: '',
|
modelType: '',
|
||||||
provider: ''
|
provider: ''
|
||||||
},
|
},
|
||||||
tableData: []
|
tableData: [
|
||||||
|
{
|
||||||
|
id: 'M006',
|
||||||
|
name: 'GPT-3.5-Turbo',
|
||||||
|
type: '文本生成',
|
||||||
|
provider: 'OpenAI',
|
||||||
|
logo: '-',
|
||||||
|
apiUrl: 'https://api.openai.com/v1/chat/completions',
|
||||||
|
description: 'GPT-3.5-Turbo高效对话模型，适合文本生成和问答。',
|
||||||
|
status: '待上架',
|
||||||
|
updatedAt: '2026-04-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'M007',
|
||||||
|
name: 'ViT-B/16',
|
||||||
|
type: '图像生成',
|
||||||
|
provider: 'Google',
|
||||||
|
logo: '-',
|
||||||
|
apiUrl: 'https://api.kaiyuan.cloud/v1/images',
|
||||||
|
description: 'ViT-B/16视觉Transformer模型，适合图像理解。',
|
||||||
|
status: '待上架',
|
||||||
|
updatedAt: '2026-04-14'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'M008',
|
||||||
|
name: 'Bark',
|
||||||
|
type: '语音合成',
|
||||||
|
provider: '开元云',
|
||||||
|
logo: '-',
|
||||||
|
apiUrl: 'https://api.kaiyuan.cloud/v1/audio',
|
||||||
|
description: 'Bark多语言语音合成模型，支持自然语音生成。',
|
||||||
|
status: '待上架',
|
||||||
|
updatedAt: '2026-04-13'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'M009',
|
||||||
|
name: 'CLIP',
|
||||||
|
type: '多模态',
|
||||||
|
provider: 'OpenAI',
|
||||||
|
logo: '-',
|
||||||
|
apiUrl: 'https://api.kaiyuan.cloud/v1/clip',
|
||||||
|
description: 'CLIP多模态模型，支持图文检索和理解。',
|
||||||
|
status: '待上架',
|
||||||
|
updatedAt: '2026-04-12'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'M011',
|
||||||
|
name: 'Falcon-180B',
|
||||||
|
type: '文本生成',
|
||||||
|
provider: 'Meta',
|
||||||
|
logo: '-',
|
||||||
|
apiUrl: 'https://api.kaiyuan.cloud/v1/chat',
|
||||||
|
description: 'Falcon-180B开源大语言模型，适合复杂文本任务。',
|
||||||
|
status: '待上架',
|
||||||
|
updatedAt: '2026-04-27'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|||||||
@ -116,65 +116,37 @@
|
|||||||
@click="goModelDetail(product)"
|
@click="goModelDetail(product)"
|
||||||
>
|
>
|
||||||
<div class="token-card-top">
|
<div class="token-card-top">
|
||||||
<span class="token-provider-avatar">
|
|
||||||
<img v-if="product.model_logo" :src="getModelLogoUrl(product.model_logo)" alt="">
|
|
||||||
<span v-else>{{ getProviderInitial(product.provider || product.display_name || product.model_name) }}</span>
|
|
||||||
</span>
|
|
||||||
<div class="token-title-group">
|
|
||||||
<h3>{{ product.display_name || product.model_name }}</h3>
|
<h3>{{ product.display_name || product.model_name }}</h3>
|
||||||
<p>{{ product.provider || product.model_name || '-' }}</p>
|
<!-- <span v-if="product.sort_order <= 10" class="token-new-badge">NEW</span> -->
|
||||||
|
<!-- <i class="el-icon-more token-more"></i> -->
|
||||||
</div>
|
</div>
|
||||||
|
<div class="token-tags">
|
||||||
|
<span>{{ product.model_type || '-' }}</span>
|
||||||
|
<span>{{ product.billing_method || '-' }}</span>
|
||||||
|
<span>{{ product.provider || '-' }}</span>
|
||||||
|
<span v-if="product.llmid">{{ product.llmid }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="token-price-line">
|
||||||
<div class="token-price-grid">
|
<span>输入 ¥{{ formatTokenPrice(product.input_token_price) }}/千Token</span>
|
||||||
<div class="token-price-item">
|
<span>输出 ¥{{ formatTokenPrice(product.output_token_price) }}/千Token</span>
|
||||||
<span>输入</span>
|
|
||||||
<strong>¥{{ formatTokenPrice(product.input_token_price) }}</strong>
|
|
||||||
<em>元/百万 tokens</em>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="token-price-item">
|
<div class="token-meta">
|
||||||
<span>输出</span>
|
<span class="token-provider-avatar">{{ getProviderInitial(product.provider) }}</span>
|
||||||
<strong>¥{{ formatTokenPrice(product.output_token_price) }}</strong>
|
<span>{{ product.provider || '-' }}</span>
|
||||||
<em>元/百万 tokens</em>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="token-price-item">
|
<div class="token-actions">
|
||||||
<span>缓存读</span>
|
<button @click.stop="goModelApiDocument(product)">
|
||||||
<strong>¥{{ formatTokenPrice(product.cache_hit_input_price) }}</strong>
|
<i class="el-icon-document"></i>
|
||||||
<em>元/百万 tokens</em>
|
API文档
|
||||||
</div>
|
</button>
|
||||||
<div class="token-price-item">
|
|
||||||
<span>缓存创建</span>
|
|
||||||
<strong>¥{{ formatTokenPrice(product.input_token_price) }}</strong>
|
|
||||||
<em>元/百万 tokens</em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="token-description">
|
|
||||||
{{ product.description || '该模型适用于文本生成、对话问答、复杂推理等多种业务场景。' }}
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<div class="token-card-footer">
|
|
||||||
<div class="token-feature-tags">
|
|
||||||
<span v-for="(tag, tagIndex) in getTokenFeatureTags(product)" :key="`${tag.type}-${tag.text}-${tagIndex}`" :class="tag.type">
|
|
||||||
<i :class="tag.icon"></i>
|
|
||||||
{{ tag.text }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="token-hover-actions">
|
|
||||||
<button
|
<button
|
||||||
class="primary-action"
|
class="experience"
|
||||||
:class="{ disabled: !isModelExperienceEnabled(product) }"
|
:class="{ disabled: !isModelExperienceEnabled(product) }"
|
||||||
:disabled="!isModelExperienceEnabled(product)"
|
:disabled="!isModelExperienceEnabled(product)"
|
||||||
@click.stop="goModelExperience(product)"
|
@click.stop="goModelExperience(product)"
|
||||||
>
|
>
|
||||||
<i class="el-icon-video-play"></i>
|
<i class="el-icon-video-play"></i>
|
||||||
快速体验
|
体验
|
||||||
</button>
|
|
||||||
<button @click.stop="goModelApiDocument(product)">
|
|
||||||
<i class="el-icon-document"></i>
|
|
||||||
API参考
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -230,20 +202,6 @@ import { reqNavList, reqNewHomeSync, reqNewHomeFestival } from "@/api/newHome";
|
|||||||
import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
|
import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
|
||||||
import TopBox from '@/views/homePage/components/topBox/index.vue'
|
import TopBox from '@/views/homePage/components/topBox/index.vue'
|
||||||
|
|
||||||
const getImageUrlPrefix = () => {
|
|
||||||
const origin = window.location.origin
|
|
||||||
if (origin.includes('localhost') || origin.includes('dev.opencomputing.cn')) {
|
|
||||||
return 'https://dev.opencomputing.cn/idfile?path='
|
|
||||||
}
|
|
||||||
if (origin.includes('www.opencomputing.cn')) {
|
|
||||||
return 'https://www.opencomputing.cn/idfile?path='
|
|
||||||
}
|
|
||||||
if (origin.includes('www.ncmatch.cn')) {
|
|
||||||
return 'https://www.ncmatch.cn/idfile?path='
|
|
||||||
}
|
|
||||||
return `${origin}/idfile?path=`
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ProductServicePage",
|
name: "ProductServicePage",
|
||||||
components: {
|
components: {
|
||||||
@ -261,8 +219,7 @@ export default {
|
|||||||
tokenModelTypeList: [],
|
tokenModelTypeList: [],
|
||||||
tokenProviderList: [],
|
tokenProviderList: [],
|
||||||
tokenActiveModelType: '',
|
tokenActiveModelType: '',
|
||||||
tokenActiveProvider: "",
|
tokenActiveProvider: ''
|
||||||
IMG_URL: getImageUrlPrefix(),
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -402,61 +359,6 @@ export default {
|
|||||||
return provider ? provider.slice(0, 1) : 'M';
|
return provider ? provider.slice(0, 1) : 'M';
|
||||||
},
|
},
|
||||||
|
|
||||||
getModelLogoUrl(modelLogo) {
|
|
||||||
if (!modelLogo) return '';
|
|
||||||
if (/^https?:\/\//.test(modelLogo) || modelLogo.startsWith('data:') || modelLogo.startsWith('blob:')) {
|
|
||||||
return modelLogo;
|
|
||||||
}
|
|
||||||
return `${this.IMG_URL}${modelLogo}`;
|
|
||||||
},
|
|
||||||
|
|
||||||
normalizeTokenConfigList(value) {
|
|
||||||
if (!value) return [];
|
|
||||||
let parsedValue = value;
|
|
||||||
if (typeof value === 'string') {
|
|
||||||
try {
|
|
||||||
parsedValue = JSON.parse(value);
|
|
||||||
} catch (error) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (Array.isArray(parsedValue)) {
|
|
||||||
return parsedValue.map(item => ({
|
|
||||||
name: item.name || item.label || item.key || '',
|
|
||||||
value: item.value || item.text || item.content || ''
|
|
||||||
})).filter(item => item.name || item.value);
|
|
||||||
}
|
|
||||||
if (parsedValue && typeof parsedValue === 'object') {
|
|
||||||
return Object.keys(parsedValue).map(key => ({ name: key, value: parsedValue[key] }));
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
|
|
||||||
getTokenFeatureTags(model) {
|
|
||||||
const capabilities = this.normalizeTokenConfigList(model.capabilities);
|
|
||||||
const highlights = this.normalizeTokenConfigList(model.highlights);
|
|
||||||
const inputType = capabilities.find(item => item.name === '输入类型');
|
|
||||||
const outputType = capabilities.find(item => item.name === '输出类型');
|
|
||||||
const highlight = highlights[0];
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
text: inputType && inputType.value ? inputType.value : (model.model_type || '模型能力'),
|
|
||||||
icon: 'el-icon-view',
|
|
||||||
type: 'green'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: outputType && outputType.value ? outputType.value : (highlight && (highlight.value || highlight.name)) || '智能生成',
|
|
||||||
icon: 'el-icon-magic-stick',
|
|
||||||
type: 'purple'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: model.billing_method || '按量计费',
|
|
||||||
icon: 'el-icon-coin',
|
|
||||||
type: 'blue'
|
|
||||||
}
|
|
||||||
].filter(item => item.text);
|
|
||||||
},
|
|
||||||
|
|
||||||
// experience 为 1 才允许模型体验，0 时按钮置灰禁用。
|
// experience 为 1 才允许模型体验，0 时按钮置灰禁用。
|
||||||
isModelExperienceEnabled(model) {
|
isModelExperienceEnabled(model) {
|
||||||
return Number(model && model.experience) === 1;
|
return Number(model && model.experience) === 1;
|
||||||
@ -1391,86 +1293,42 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.token-market-grid {
|
.token-market-grid {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
flex-wrap: wrap;
|
||||||
gap: 12px;
|
gap: 14px;
|
||||||
align-items: stretch;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.token-market-card {
|
.token-market-card {
|
||||||
position: relative;
|
flex: 0 0 calc((100% - 28px) / 3);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 224px;
|
padding: 14px;
|
||||||
padding: 12px;
|
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: 1px solid #dfe7f3;
|
border: 1px solid #edf1f7;
|
||||||
border-radius: 10px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 8px 20px rgba(31, 45, 61, 0.08);
|
box-shadow: 0 10px 24px rgba(31, 45, 61, 0.05);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: #8bbcff;
|
border-color: #d7e4f5;
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 0 0 3px rgba(30, 111, 255, 0.1), 0 18px 38px rgba(30, 111, 255, 0.18);
|
box-shadow: 0 16px 32px rgba(31, 45, 61, 0.08);
|
||||||
|
|
||||||
&:before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-hover-actions {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
content: '';
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
|
||||||
background: radial-gradient(420px circle at 45% 0%, rgba(51, 133, 255, 0.16), transparent 42%);
|
|
||||||
transition: opacity 0.35s ease;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.token-card-top {
|
.token-card-top {
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 6px;
|
||||||
min-height: 38px;
|
margin-bottom: 8px;
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.token-title-group {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
flex: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #111827;
|
color: #1f2d3d;
|
||||||
font-size: 15px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.25;
|
line-height: 1.35;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 3px 0 0;
|
|
||||||
color: #6b7890;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.2;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1488,164 +1346,70 @@ export default {
|
|||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.token-price-grid {
|
.token-tags {
|
||||||
position: relative;
|
display: flex;
|
||||||
z-index: 1;
|
flex-wrap: wrap;
|
||||||
display: grid;
|
gap: 6px;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
padding-bottom: 10px;
|
||||||
gap: 8px 12px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
border-bottom: 1px dashed #d8e0ee;
|
||||||
|
|
||||||
.token-price-item {
|
|
||||||
span,
|
|
||||||
em {
|
|
||||||
display: block;
|
|
||||||
color: #6b7890;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-bottom: 2px;
|
padding: 2px 6px;
|
||||||
|
color: #667085;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
background: #f8fafc;
|
||||||
|
border: 1px solid #edf1f7;
|
||||||
strong {
|
border-radius: 6px;
|
||||||
display: block;
|
|
||||||
color: #111827;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 800;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
margin-top: 0;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.token-description {
|
.token-price-line {
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
min-height: 58px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
color: #728096;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.5;
|
|
||||||
display: -webkit-box;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
line-clamp: 3;
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-card-footer {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
min-width: 0;
|
|
||||||
margin-top: auto;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-feature-tags {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex: 1;
|
gap: 10px;
|
||||||
min-width: 0;
|
margin-bottom: 8px;
|
||||||
gap: 5px;
|
color: #1f2937;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #667085;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token-provider-avatar {
|
.token-provider-avatar {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex: 0 0 36px;
|
width: 16px;
|
||||||
width: 34px;
|
height: 16px;
|
||||||
height: 34px;
|
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
font-size: 10px;
|
||||||
font-weight: 700;
|
background: #1e6fff;
|
||||||
// background: #7c3aed;
|
border-radius: 4px;
|
||||||
// border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
// box-shadow: 0 6px 16px rgba(124, 58, 237, 0.18);
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.token-feature-tags span {
|
.token-actions {
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
max-width: 104px;
|
|
||||||
height: 20px;
|
|
||||||
padding: 0 7px;
|
|
||||||
font-size: 11px;
|
|
||||||
border-radius: 999px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&.green {
|
|
||||||
color: #047857;
|
|
||||||
background: #dcfce7;
|
|
||||||
border: 1px solid #86efac;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.purple {
|
|
||||||
color: #4338ca;
|
|
||||||
background: #eef2ff;
|
|
||||||
border: 1px solid #c7d2fe;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.blue {
|
|
||||||
color: #1d4ed8;
|
|
||||||
background: #eff6ff;
|
|
||||||
border: 1px solid #bfdbfe;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-hover-actions {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 6px;
|
|
||||||
opacity: 0;
|
|
||||||
background: rgba(255, 255, 255, 0.94);
|
|
||||||
border-top: 1px solid #edf1f7;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
transform: translateY(100%);
|
|
||||||
transition: all 0.25s ease;
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
|
||||||
flex: 1;
|
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
padding: 0 8px;
|
padding: 0 10px;
|
||||||
color: #475467;
|
color: #475467;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: 1px solid #d8e0ee;
|
border: 1px solid #d8e0ee;
|
||||||
border-radius: 8px;
|
border-radius: 7px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
@ -1653,32 +1417,30 @@ export default {
|
|||||||
color: #1e6fff;
|
color: #1e6fff;
|
||||||
border-color: #9ec5ff;
|
border-color: #9ec5ff;
|
||||||
background: #f4f8ff;
|
background: #f4f8ff;
|
||||||
box-shadow: 0 0 0 3px rgba(30, 111, 255, 0.08);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-action {
|
.experience {
|
||||||
color: #ffffff;
|
color: #4f46e5;
|
||||||
background: #1e6fff;
|
border-color: #c7d2fe;
|
||||||
border-color: #1e6fff;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #ffffff;
|
color: #4338ca;
|
||||||
background: #155eef;
|
border-color: #a5b4fc;
|
||||||
border-color: #155eef;
|
background: #eef2ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: #ffffff;
|
color: #98a2b3;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
background: #cbd5e1;
|
background: #f3f4f6;
|
||||||
border-color: #cbd5e1;
|
border-color: #e5e7eb;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #ffffff;
|
color: #98a2b3;
|
||||||
background: #cbd5e1;
|
background: #f3f4f6;
|
||||||
border-color: #cbd5e1;
|
border-color: #e5e7eb;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1856,14 +1618,14 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-content .main-content .token-market-grid {
|
.product-content .main-content .token-market-card {
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
flex-basis: calc((100% - 14px) / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.product-content .main-content .token-market-grid {
|
.product-content .main-content .token-market-card {
|
||||||
grid-template-columns: 1fr;
|
flex-basis: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,7 +17,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
<div class="stat-row">
|
<div class="stat-row">
|
||||||
<div v-for="item in statCards" :key="item.label" class="stat-card" :class="item.type">
|
<div v-for="item in statCards" :key="item.label" class="stat-card" :class="item.type">
|
||||||
<div class="stat-card-head">
|
<div class="stat-card-head">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user