refactor: 首页去掉用户信息/认证+金额区三卡片化
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- 移除card-user用户信息卡片 - 移除cert-section认证企业/姓名区块 - row-1改为单列stats-group占满全宽 - 新增row-finance三列grid:余额/本月消费/总消费各一张finance-card - 渐变图标+大字号数值+趋势标签
This commit is contained in:
@@ -21,34 +21,9 @@
|
||||
<el-main class="home-main">
|
||||
<div class="dashboard">
|
||||
|
||||
<!-- ====== Row 1: 用户信息 + 统计卡片 ====== -->
|
||||
<!-- ====== Row 1: 统计卡片 ====== -->
|
||||
<div class="row-1">
|
||||
<!-- 用户信息卡 -->
|
||||
<div class="card card-user" @click="goUser" v-loading="nameLoading">
|
||||
<div class="user-header">
|
||||
<div class="user-avatar" ref="headBoxRef">{{account.firstName}}</div>
|
||||
<div class="user-meta">
|
||||
<div class="user-greeting">
|
||||
{{lang.index_hello}}, <strong>{{account.username}}</strong>
|
||||
<span v-if="idcsmart_client_level.id" class="user-level"
|
||||
:style="{'color':idcsmart_client_level.background_color}">{{idcsmart_client_level.name}}</span>
|
||||
</div>
|
||||
<div class="user-id">ID: {{account.id}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-contacts">
|
||||
<div class="contact-item">
|
||||
<i class="ph ph-envelope"></i>
|
||||
<span>{{account.email ? account.email : '--'}}</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="ph ph-phone"></i>
|
||||
<span>{{account.phone ? account.phone : '--'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片组(单个卡片容器) -->
|
||||
<!-- 统计卡片组 -->
|
||||
<div class="card stats-group">
|
||||
<div class="stat-item stat-purple" @click="goProductList('using')">
|
||||
<i class="ph ph-pulse"></i>
|
||||
@@ -68,34 +43,46 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== Row 2: 余额 + 推介/认证 ====== -->
|
||||
<div class="row-2">
|
||||
<!-- 余额卡片 -->
|
||||
<div class="card card-balance" v-loading="nameLoading">
|
||||
<div class="balance-header">
|
||||
<span class="balance-title">{{lang.index_text3}}</span>
|
||||
<!-- ====== Row 2: 余额 / 本月消费 / 总消费 三卡片 ====== -->
|
||||
<div class="row-finance">
|
||||
<!-- 余额 -->
|
||||
<div class="card finance-card fc-balance" v-loading="nameLoading">
|
||||
<div class="fc-icon-wrap fc-icon-blue"><i class="ph ph-wallet"></i></div>
|
||||
<div class="fc-label">{{lang.index_text3}}</div>
|
||||
<div class="fc-value"><span class="fc-currency">{{commonData.currency_prefix}}</span>{{account.credit}}</div>
|
||||
<div class="fc-footer">
|
||||
<span class="balance-btn" @click="showCz" v-if="commonData.recharge_open == 1">{{lang.index_text2}}</span>
|
||||
<span class="recharge-link" @click="showCz" v-if="commonData.recharge_open == 1 && coinRecharge.length > 0">{{lang.index_text35}}</span>
|
||||
</div>
|
||||
<div class="balance-amount">
|
||||
<span class="currency">{{commonData.currency_prefix}}</span>{{account.credit}}
|
||||
</div>
|
||||
<!-- 本月消费 -->
|
||||
<div class="card finance-card fc-month" v-loading="nameLoading">
|
||||
<div class="fc-icon-wrap fc-icon-green"><i class="ph ph-chart-line-up"></i></div>
|
||||
<div class="fc-label">{{lang.index_text4}}</div>
|
||||
<div class="fc-value"><span class="fc-currency">{{commonData.currency_prefix}}</span>{{account.this_month_consume}}</div>
|
||||
<div class="fc-footer">
|
||||
<span :class="Number(account.this_month_consume_percent) >= 0 ? 'fc-trend-up' : 'fc-trend-down'">
|
||||
<template v-if="Number(account.this_month_consume_percent) >= 0">↑</template>
|
||||
<template v-else>↓</template>
|
||||
{{Math.abs(Number(account.this_month_consume_percent))}}%
|
||||
</span>
|
||||
<span class="fc-vs">vs 上月</span>
|
||||
</div>
|
||||
<div class="balance-extra" v-if="commonData.recharge_open == 1 && coinRecharge.length > 0">
|
||||
<span class="recharge-link" @click="showCz">{{lang.index_text35}}</span>
|
||||
</div>
|
||||
<div class="balance-footer">
|
||||
<div class="consume-item">
|
||||
<span class="consume-label">{{lang.index_text4}}</span>
|
||||
<span class="consume-value">{{commonData.currency_prefix}}{{account.this_month_consume}}</span>
|
||||
<span :class="Number(account.this_month_consume_percent) >= 0 ? 'trend-up' : 'trend-down'">
|
||||
{{Number(account.this_month_consume_percent)}}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="consume-divider"></div>
|
||||
<div class="consume-item">
|
||||
<span class="consume-label">{{lang.index_text5}}</span>
|
||||
<span class="consume-value">{{commonData.currency_prefix}}{{account.consume}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 总消费 -->
|
||||
<div class="card finance-card fc-total" v-loading="nameLoading">
|
||||
<div class="fc-icon-wrap fc-icon-amber"><i class="ph ph-coins"></i></div>
|
||||
<div class="fc-label">{{lang.index_text5}}</div>
|
||||
<div class="fc-value"><span class="fc-currency">{{commonData.currency_prefix}}</span>{{account.consume}}</div>
|
||||
<div class="fc-footer">
|
||||
<span class="fc-sub">{{lang.index_text1}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== Row 2b: 信用额度 + 代金券 + 代币 + 推介 ====== -->
|
||||
<div class="row-2">
|
||||
<div class="card card-balance" v-loading="nameLoading" v-if="(isShowCredit && creditData.status) || (coinData && coinData.name) || voucherList.length > 0">
|
||||
<!-- 信用额度 -->
|
||||
<div class="credit-section" v-if="isShowCredit && creditData.status">
|
||||
<div class="credit-row">
|
||||
@@ -127,30 +114,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧: 认证 + 推介 -->
|
||||
<!-- 右侧: 推介计划 -->
|
||||
<div class="card card-side">
|
||||
<!-- 实名认证 -->
|
||||
<div class="cert-section" v-plugin="'IdcsmartCertification'" v-if="certificationObj.certification_open === 1">
|
||||
<div class="cert-item">
|
||||
<div class="cert-icon"><i class="ph ph-buildings"></i></div>
|
||||
<div class="cert-info">
|
||||
<div class="cert-label">{{lang.index_compny}}</div>
|
||||
<div class="cert-value" v-if="certificationObj.company?.status === 1">{{certificationObj.company.certification_company}}</div>
|
||||
<div class="cert-action" @click="handelAttestation" v-else>{{lang.index_goAttestation}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-item">
|
||||
<div class="cert-icon"><i class="ph ph-user"></i></div>
|
||||
<div class="cert-info">
|
||||
<div class="cert-label">{{lang.index_name}}</div>
|
||||
<div class="cert-value" v-if="certificationObj.is_certification">
|
||||
{{certificationObj.company.status === 1 ? certificationObj.company.card_name : certificationObj.person.card_name}}
|
||||
</div>
|
||||
<div class="cert-action" @click="handelAttestation" v-else>{{lang.index_goAttestation}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 推介计划(已开启) -->
|
||||
<div class="referral-open" v-if="showRight && isOpen" v-plugin="'IdcsmartRecommend'">
|
||||
<div class="referral-title">
|
||||
|
||||
Reference in New Issue
Block a user