2f0cf620a2
All checks were successful
continuous-integration/drone/push Build is passing
v-cloak的!important与asideMenu的inline style冲突 导致.template永远不可见。恢复原有的loading机制。
208 lines
11 KiB
PHP
208 lines
11 KiB
PHP
<link rel="stylesheet" href="/{$template_catalog_home}/template/{$themes_home}/css/home.css">
|
|
<!-- Phosphor Icons -->
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css" />
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<!-- mounted之前显示 -->
|
|
<div id="mainLoading">
|
|
<div class="ddr ddr1"></div>
|
|
<div class="ddr ddr2"></div>
|
|
<div class="ddr ddr3"></div>
|
|
<div class="ddr ddr4"></div>
|
|
<div class="ddr ddr5"></div>
|
|
</div>
|
|
<div class="template">
|
|
<el-container>
|
|
<aside-menu></aside-menu>
|
|
<el-container>
|
|
<top-menu></top-menu>
|
|
<el-main class="home-main">
|
|
<div class="dashboard">
|
|
|
|
<!-- ====== Row 1: 统计卡片 ====== -->
|
|
<div class="row-1">
|
|
<!-- 统计卡片组 -->
|
|
<div class="card stats-group">
|
|
<div class="stat-item stat-purple" @click="goProductList('using')">
|
|
<i class="ph ph-pulse"></i>
|
|
<div class="stat-value">{{account.host_active_num}}</div>
|
|
<div class="stat-label">{{lang.index_text6}}</div>
|
|
</div>
|
|
<div class="stat-item stat-blue" @click="goProductList()">
|
|
<i class="ph ph-cube"></i>
|
|
<div class="stat-value">{{account.host_num}}</div>
|
|
<div class="stat-label">{{lang.index_text7}}</div>
|
|
</div>
|
|
<div class="stat-item stat-red" @click="goProductList()">
|
|
<i class="ph ph-clock-countdown"></i>
|
|
<div class="stat-value">{{expiringCount}}</div>
|
|
<div class="stat-label">即将到期</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== Row 2: 余额 / 总消费 ====== -->
|
|
<div class="row-finance">
|
|
<!-- 余额 -->
|
|
<div class="card finance-card fc-balance">
|
|
<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>
|
|
<!-- 总消费 -->
|
|
<div class="card finance-card fc-total">
|
|
<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-extra" v-if="(isShowCredit && creditData.status) || (coinData && coinData.name) || voucherList.length > 0">
|
|
<div class="card card-balance" v-loading="nameLoading">
|
|
<!-- 信用额度 -->
|
|
<div class="credit-section" v-if="isShowCredit && creditData.status">
|
|
<div class="credit-row">
|
|
<span class="credit-label">{{lang.finance_text42}}({{commonData.currency_suffix}})</span>
|
|
<span class="credit-val">{{commonData.currency_prefix}}{{creditData.account?.status === 'Repaid' ? '0.00' : creditData.account?.amount}}</span>
|
|
</div>
|
|
<div class="credit-row">
|
|
<span class="credit-label">
|
|
{{lang.finance_text38}}
|
|
<span class="credit-tag" v-if="creditData.status === 'Expired'">{{lang.finance_text93}}</span>
|
|
<span class="credit-tag" v-if="creditData.status === 'Overdue'">{{lang.finance_text94}}</span>
|
|
<span class="credit-tag" v-if="creditData.status === 'Active'">{{lang.finance_text95}}</span>
|
|
<span class="credit-tag" v-if="creditData.status === 'Suspended'">{{lang.finance_text96}}</span>
|
|
</span>
|
|
<span class="credit-val">{{commonData.currency_prefix}}{{creditData.remaining_amount}}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 代币 -->
|
|
<div class="coin-section" v-plugin="'Coin'" v-if="coinData.name">
|
|
<div class="coin-header">
|
|
<span>{{coinData.name}}</span>
|
|
<a href="/finance.htm?tab=7" target="_blank" class="coin-link">{{lang.index_text34}}</a>
|
|
</div>
|
|
<div class="coin-amount">{{commonData.currency_prefix}}{{coinData.leave_amount}}</div>
|
|
</div>
|
|
<div class="voucher-row" v-if="voucherList.length > 0">
|
|
{{lang.index_text24}}
|
|
<a href="/finance.htm?tab=4" target="_blank" class="voucher-link">{{lang.index_text25}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== Row 3: 产品列表 + 工单/公告 ====== -->
|
|
<div class="row-3">
|
|
<div class="card card-products">
|
|
<h3 class="section-title">{{lang.index_text9}}</h3>
|
|
<el-table :data="productList" style="width: 100%" v-if="productList.length !== 0"
|
|
v-loading="productListLoading">
|
|
<el-table-column prop="product_name" :label="lang.index_text10">
|
|
<template slot-scope="{row}">
|
|
<a :href="`/productdetail.htm?id=${row.id}`" class="product-link" target="_blank">{{row.product_name}}</a>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" :label="lang.index_text12"></el-table-column>
|
|
<el-table-column prop="due_time" :label="lang.index_text13">
|
|
<template slot-scope="{row}">
|
|
<span :class="row.isOverdue ? 'text-danger' : ''">{{row.due_time | formateTime}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="client_notes" :label="lang.invoice_text139" show-overflow-tooltip>
|
|
<template slot-scope="{row}">
|
|
<span>{{row.client_notes || '--'}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div v-if="productList.length === 0 && !productListLoading" class="empty-state">
|
|
<i class="ph ph-package"></i>
|
|
<h3>{{lang.index_text14}}</h3>
|
|
<p>{{lang.index_text15}}</p>
|
|
<el-button @click="goGoodsList" type="primary" round>{{lang.index_text16}}</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工单 + 公告侧栏 -->
|
|
<div class="card card-sidebar" v-if="ticketList.length !== 0 || homeNewList.length !== 0">
|
|
<!-- 工单 -->
|
|
<div class="sidebar-section" v-if="ticketList.length !== 0" v-plugin="'IdcsmartTicket'">
|
|
<div class="sidebar-header">
|
|
<span>{{lang.index_text22}}</span>
|
|
<span class="sidebar-more" @click="goWorkPage">···</span>
|
|
</div>
|
|
<div class="ticket-list">
|
|
<div class="ticket-item" v-for="item in ticketList" :key="item.id" @click="goTickDetail(item.id)">
|
|
<span class="ticket-status" :style="{'background': item.color}">{{item.status}}</span>
|
|
<div class="ticket-info">
|
|
<div class="ticket-title">#{{item.ticket_num}} - {{item.title}}</div>
|
|
<div class="ticket-dept">{{item.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 公告 -->
|
|
<div class="sidebar-section" v-if="homeNewList.length !== 0" v-plugin="'IdcsmartNews'">
|
|
<div class="sidebar-header">
|
|
<span>{{lang.index_text23}}</span>
|
|
<span class="sidebar-more" @click="goNoticePage">···</span>
|
|
</div>
|
|
<div class="notice-list">
|
|
<div class="notice-item" v-for="item in homeNewList" :key="item.id" @click="goNoticeDetail(item.id)">
|
|
<div class="notice-info">
|
|
<div class="notice-title">{{item.title}}</div>
|
|
<div class="notice-meta">{{item.type}} · {{item.create_time | formareDay}}</div>
|
|
</div>
|
|
<i class="el-icon-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 确认开启弹窗 -->
|
|
<el-dialog :title="lang.referral_title8" :visible.sync="openVisible" width="4.8rem"
|
|
custom-class="open-dialog">
|
|
<span>{{lang.referral_tips7}}</span>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button class="btn-ok" type="primary" @click="openReferral">{{lang.referral_btn6}}</el-button>
|
|
<el-button class="btn-no" @click="openVisible = false">{{lang.referral_btn7}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<pay-dialog ref="payDialog" @payok="paySuccess"></pay-dialog>
|
|
<credit-notice ref="creditNotice" @success="paySuccess"></credit-notice>
|
|
<recharge-dialog ref="rechargeDialog" @success="rechargeSuccess"></recharge-dialog>
|
|
<!-- 微信公众号 -->
|
|
<div class="wx-code" v-if="hasWxPlugin && conectInfo.is_subscribe === 0">
|
|
<el-popover width="200" trigger="hover" @show="getWxcode" placement="left">
|
|
<div class="wx-box">
|
|
<p class="tit">{{lang.wx_tip1}}</p>
|
|
<div class="img" v-loading="codeLoading">
|
|
<img :src="wxQrcode" alt="" v-if="wxQrcode">
|
|
</div>
|
|
</div>
|
|
<div class="wx-img" slot="reference"></div>
|
|
</el-popover>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
<!-- =======页面独有======= -->
|
|
<script src="/{$template_catalog}/template/{$themes}/components/creditNotice/creditNotice.js"></script>
|
|
<script src="/{$template_catalog}/template/{$themes}/components/payDialog/payDialog.js"></script>
|
|
<script src="/{$template_catalog}/template/{$themes}/components/rechargeDialog/rechargeDialog.js"></script>
|
|
<script src="/{$template_catalog_home}/template/{$themes_home}/api/finance.js"></script>
|
|
<script src="/{$template_catalog_home}/template/{$themes_home}/api/home.js"></script>
|
|
<script src="/{$template_catalog_home}/template/{$themes_home}/js/home.js"></script>
|