1
This commit is contained in:
张成
9028
_docs/sql/swagger.json
Normal file
9028
_docs/sql/swagger.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -119,13 +119,17 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.content-view {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding: 26px 36px 36px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-head-tool {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-title-row {
|
||||
@@ -144,9 +148,6 @@ export default {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
}
|
||||
|
||||
.table-page-bar {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
|
||||
@@ -1,43 +1,41 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool">
|
||||
<div class="table-title-row">
|
||||
<h2 class="table-title">订阅运营看板</h2>
|
||||
<Button type="primary" @click="load">刷新</Button>
|
||||
<div class="sub-page dash-page">
|
||||
<header class="page-header">
|
||||
<div class="page-header__text">
|
||||
<h1 class="page-header__title">订阅运营看板</h1>
|
||||
<p class="page-header__desc">关键指标一览，点击刷新同步最新数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="primary" ghost class="page-header__btn" @click="load">
|
||||
<Icon type="md-refresh" /> 刷新
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
<div class="table-body">
|
||||
<Row :gutter="16" v-if="stats">
|
||||
<Col span="6">
|
||||
<Card dis-hover><p class="lbl">业务用户总数</p><p class="num">{{ stats.users.total }}</p></Card>
|
||||
<div class="dash-body">
|
||||
<Row v-if="stats" :gutter="28" class="dash-grid">
|
||||
<Col v-for="(item, idx) in statCards" :key="idx" :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<Card dis-hover :bordered="false" :class="['stat-card', `stat-card--${item.tone}`]">
|
||||
<div class="stat-card__inner">
|
||||
<div class="stat-card__icon-wrap" aria-hidden="true">
|
||||
<Icon :type="item.icon" class="stat-card__icon" />
|
||||
</div>
|
||||
<div class="stat-card__main">
|
||||
<p class="stat-card__label">{{ item.label }}</p>
|
||||
<p :class="['stat-card__value', item.warn && 'stat-card__value--warn']">{{ item.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Card dis-hover><p class="lbl">正常用户</p><p class="num">{{ stats.users.active }}</p></Card>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Card dis-hover><p class="lbl">上线套餐数</p><p class="num">{{ stats.plans.active }}</p></Card>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Card dis-hover><p class="lbl">有效 Token</p><p class="num">{{ stats.tokens.active }}</p></Card>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Card dis-hover><p class="lbl">待支付订阅</p><p class="num">{{ stats.subscriptions.pending }}</p></Card>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Card dis-hover><p class="lbl">生效中订阅</p><p class="num">{{ stats.subscriptions.active }}</p></Card>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Card dis-hover><p class="lbl">已过期订阅</p><p class="num">{{ stats.subscriptions.expired }}</p></Card>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<Card dis-hover
|
||||
><p class="lbl">7 天内到期（活跃）</p><p class="num warn">{{ stats.subscriptions.renew_within_7d }}</p></Card
|
||||
>
|
||||
</Col>
|
||||
</Row>
|
||||
<p v-else class="muted">加载中…</p>
|
||||
<p class="muted small">数据时间：{{ stats && stats.server_time }}</p>
|
||||
|
||||
<div v-else class="dash-loading">
|
||||
<Spin size="large" />
|
||||
<p class="dash-loading__txt">加载中…</p>
|
||||
</div>
|
||||
|
||||
<footer v-if="stats" class="dash-footer">
|
||||
<Icon type="md-time" class="dash-footer__icon" />
|
||||
<span>数据时间：{{ stats.server_time }}</span>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -52,6 +50,28 @@ export default {
|
||||
stats: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
statCards() {
|
||||
if (!this.stats) return []
|
||||
const s = this.stats
|
||||
return [
|
||||
{ label: '业务用户总数', value: s.users.total, icon: 'md-people', tone: 'blue' },
|
||||
{ label: '正常用户', value: s.users.active, icon: 'md-checkmark-circle', tone: 'teal' },
|
||||
{ label: '上线套餐数', value: s.plans.active, icon: 'md-pricetags', tone: 'violet' },
|
||||
{ label: '有效 Token', value: s.tokens.active, icon: 'md-key', tone: 'amber' },
|
||||
{ label: '待支付订阅', value: s.subscriptions.pending, icon: 'md-cart', tone: 'orange' },
|
||||
{ label: '生效中订阅', value: s.subscriptions.active, icon: 'md-star', tone: 'green' },
|
||||
{ label: '已过期订阅', value: s.subscriptions.expired, icon: 'md-close-circle', tone: 'slate' },
|
||||
{
|
||||
label: '7 天内到期（活跃）',
|
||||
value: s.subscriptions.renew_within_7d,
|
||||
icon: 'md-notifications',
|
||||
tone: 'rose',
|
||||
warn: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.load()
|
||||
},
|
||||
@@ -68,44 +88,191 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-view {
|
||||
padding: 16px;
|
||||
<style lang="less" scoped>
|
||||
@sub-text: #17233d;
|
||||
@sub-text-secondary: #515a6e;
|
||||
@sub-muted: #808695;
|
||||
@sub-border: #e8eaec;
|
||||
@sub-error: #ed4014;
|
||||
|
||||
.dash-page {
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 40px 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-head-tool {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.table-title-row {
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
gap: 20px;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid @sub-border;
|
||||
|
||||
&__title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: @sub-text;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: @sub-muted;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
:deep(.ivu-icon) {
|
||||
margin-right: 4px;
|
||||
vertical-align: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-title {
|
||||
.dash-grid {
|
||||
/* Row 的 gutter 只稳定管左右；换行后的上下间距用列 margin-bottom */
|
||||
:deep(.ivu-col) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep(.ivu-card) {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgba(23, 35, 61, 0.06);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
|
||||
:deep(.ivu-card-body) {
|
||||
padding: 22px 24px 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6px 20px rgba(23, 35, 61, 0.09);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__icon-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin: 0 0 6px;
|
||||
font-size: 13px;
|
||||
color: @sub-muted;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
&__value {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: @sub-text;
|
||||
line-height: 1.2;
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
&--warn {
|
||||
color: @sub-error;
|
||||
}
|
||||
}
|
||||
|
||||
&--blue .stat-card__icon-wrap {
|
||||
background: rgba(45, 140, 240, 0.12);
|
||||
color: #2d8cf0;
|
||||
}
|
||||
|
||||
&--teal .stat-card__icon-wrap {
|
||||
background: rgba(25, 190, 107, 0.12);
|
||||
color: #19be6b;
|
||||
}
|
||||
|
||||
&--violet .stat-card__icon-wrap {
|
||||
background: rgba(114, 46, 209, 0.1);
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
&--amber .stat-card__icon-wrap {
|
||||
background: rgba(255, 153, 0, 0.14);
|
||||
color: #ff9900;
|
||||
}
|
||||
|
||||
&--orange .stat-card__icon-wrap {
|
||||
background: rgba(255, 102, 0, 0.12);
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
&--green .stat-card__icon-wrap {
|
||||
background: rgba(25, 190, 107, 0.14);
|
||||
color: #19be6b;
|
||||
}
|
||||
|
||||
&--slate .stat-card__icon-wrap {
|
||||
background: rgba(128, 134, 149, 0.15);
|
||||
color: #515a6e;
|
||||
}
|
||||
|
||||
&--rose .stat-card__icon-wrap {
|
||||
background: rgba(237, 64, 20, 0.1);
|
||||
color: #ed4014;
|
||||
}
|
||||
}
|
||||
.lbl {
|
||||
margin: 0;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
|
||||
.dash-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
color: @sub-muted;
|
||||
|
||||
&__txt {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.num {
|
||||
margin: 8px 0 0;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.num.warn {
|
||||
color: #ed4014;
|
||||
}
|
||||
.muted {
|
||||
color: #888;
|
||||
}
|
||||
.small {
|
||||
margin-top: 16px;
|
||||
|
||||
.dash-footer {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 28px;
|
||||
padding: 10px 18px;
|
||||
font-size: 12px;
|
||||
color: @sub-muted;
|
||||
background: #f8f8f9;
|
||||
border-radius: 20px;
|
||||
border: 1px solid @sub-border;
|
||||
|
||||
&__icon {
|
||||
font-size: 15px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,37 +1,72 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<h2 class="sub-title">支付确认（轻量）</h2>
|
||||
<p class="sub-desc">将 <code>pending</code> 订阅置为 <code>active</code>，并写入支付单号。</p>
|
||||
<Card dis-hover title="线下确认" style="max-width: 520px; margin-bottom: 16px">
|
||||
<Form :label-width="110">
|
||||
<FormItem label="订阅ID">
|
||||
<Input v-model="offline.subscription_id" type="number" placeholder="订阅记录 id" />
|
||||
</FormItem>
|
||||
<FormItem label="支付单号">
|
||||
<Input v-model="offline.payment_ref" placeholder="流水号/凭证号" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" :loading="loading1" @click="doOffline">确认线下收款</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
<Alert type="info" show-icon style="max-width: 720px; margin-bottom: 16px">
|
||||
对外鉴权接口（免登录，见白名单）：<code>POST /api/auth/verify</code>，body 示例：
|
||||
<code>{"token":"明文","feature":"msg","usage_delta":{"msg":1}}</code>
|
||||
</Alert>
|
||||
<Card dis-hover title="链接支付确认" style="max-width: 520px">
|
||||
<Form :label-width="110">
|
||||
<FormItem label="订阅ID">
|
||||
<Input v-model="link.subscription_id" type="number" />
|
||||
</FormItem>
|
||||
<FormItem label="第三方单号">
|
||||
<Input v-model="link.payment_ref" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" :loading="loading2" @click="doLink">确认链接支付</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
<div class="sub-page pay-page">
|
||||
<header class="page-header">
|
||||
<div class="page-header__text">
|
||||
<h1 class="page-header__title">支付确认</h1>
|
||||
<p class="page-header__desc">
|
||||
将 <code class="inline-code">pending</code> 订阅置为 <code class="inline-code">active</code>，并写入支付单号。
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Row :gutter="32" class="pay-row">
|
||||
<Col :xs="24" :lg="12">
|
||||
<Card :bordered="false" class="pay-panel pay-panel--offline">
|
||||
<p slot="title" class="pay-panel__title">
|
||||
<span class="pay-panel__badge pay-panel__badge--offline">线下</span>
|
||||
<Icon type="md-cash" class="pay-panel__title-icon" />
|
||||
确认收款
|
||||
</p>
|
||||
<Form :label-width="96" class="pay-form">
|
||||
<FormItem label="订阅 ID">
|
||||
<Input v-model="offline.subscription_id" type="number" placeholder="订阅记录 id" size="large" />
|
||||
</FormItem>
|
||||
<FormItem label="支付单号">
|
||||
<Input v-model="offline.payment_ref" placeholder="流水号 / 凭证号" size="large" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" size="large" :loading="loading1" @click="doOffline">
|
||||
<Icon type="md-checkmark" /> 确认线下收款
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col :xs="24" :lg="12">
|
||||
<Card :bordered="false" class="pay-panel pay-panel--link">
|
||||
<p slot="title" class="pay-panel__title">
|
||||
<span class="pay-panel__badge pay-panel__badge--link">链接</span>
|
||||
<Icon type="md-link" class="pay-panel__title-icon" />
|
||||
第三方单号确认
|
||||
</p>
|
||||
<Form :label-width="96" class="pay-form">
|
||||
<FormItem label="订阅 ID">
|
||||
<Input v-model="link.subscription_id" type="number" placeholder="订阅记录 id" size="large" />
|
||||
</FormItem>
|
||||
<FormItem label="第三方单号">
|
||||
<Input v-model="link.payment_ref" placeholder="支付平台回传单号" size="large" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="success" size="large" :loading="loading2" @click="doLink">
|
||||
<Icon type="md-checkmark" /> 确认链接支付
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div class="pay-doc">
|
||||
<Icon type="md-information-circle" class="pay-doc__icon" />
|
||||
<div class="pay-doc__body">
|
||||
<p class="pay-doc__lead">对外鉴权（免登录，见白名单）</p>
|
||||
<p class="pay-doc__line">
|
||||
<code class="block-code">POST /api/auth/verify</code>
|
||||
</p>
|
||||
<p class="pay-doc__hint">body 示例：</p>
|
||||
<pre class="pay-doc__pre">{"token":"明文","feature":"msg","usage_delta":{"msg":1}}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -85,16 +120,191 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-view {
|
||||
padding: 16px;
|
||||
<style lang="less" scoped>
|
||||
@sub-text: #17233d;
|
||||
@sub-text-secondary: #515a6e;
|
||||
@sub-muted: #808695;
|
||||
@sub-border: #e8eaec;
|
||||
@sub-error: #ed4014;
|
||||
|
||||
.pay-page {
|
||||
width: 100%;
|
||||
max-width: 1520px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 40px 44px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sub-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid @sub-border;
|
||||
|
||||
&__title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: @sub-text;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: @sub-text-secondary;
|
||||
line-height: 1.65;
|
||||
}
|
||||
}
|
||||
.sub-desc {
|
||||
color: #666;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.inline-code {
|
||||
padding: 1px 6px;
|
||||
font-size: 12px;
|
||||
font-family: Consolas, 'SF Mono', Menlo, monospace;
|
||||
color: #c41d7f;
|
||||
background: #fff0f6;
|
||||
border: 1px solid #ffadd2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 数字 gutter 才会稳定产生列左右 padding，两卡并排中间才有缝；小屏换行保留下间距 */
|
||||
.pay-row {
|
||||
:deep(.ivu-col) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-panel {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(23, 35, 61, 0.07);
|
||||
transition: box-shadow 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 24px rgba(23, 35, 61, 0.1);
|
||||
}
|
||||
|
||||
&--offline {
|
||||
:deep(.ivu-card-head) {
|
||||
background: linear-gradient(135deg, #f6fbff 0%, #fff 48%);
|
||||
border-bottom: 1px solid #e8f4ff;
|
||||
}
|
||||
}
|
||||
|
||||
&--link {
|
||||
:deep(.ivu-card-head) {
|
||||
background: linear-gradient(135deg, #f6fffb 0%, #fff 48%);
|
||||
border-bottom: 1px solid #e6ffee;
|
||||
}
|
||||
|
||||
.pay-panel__title-icon {
|
||||
color: #19be6b;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: @sub-text;
|
||||
}
|
||||
|
||||
&__title-icon {
|
||||
font-size: 18px;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
border-radius: 4px;
|
||||
margin-right: 4px;
|
||||
|
||||
&--offline {
|
||||
color: #2d8cf0;
|
||||
background: rgba(45, 140, 240, 0.12);
|
||||
}
|
||||
|
||||
&--link {
|
||||
color: #19be6b;
|
||||
background: rgba(25, 190, 107, 0.14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-form {
|
||||
:deep(.ivu-form-item) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep(.ivu-btn .ivu-icon) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-doc {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
background: #f8f9fc;
|
||||
border: 1px solid @sub-border;
|
||||
border-radius: 10px;
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 22px;
|
||||
color: #2d8cf0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&__body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__lead {
|
||||
margin: 0 0 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: @sub-text-secondary;
|
||||
}
|
||||
|
||||
&__line {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
margin: 0 0 6px;
|
||||
font-size: 12px;
|
||||
color: @sub-muted;
|
||||
}
|
||||
|
||||
&__pre {
|
||||
margin: 0;
|
||||
padding: 12px 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: @sub-text-secondary;
|
||||
background: #fff;
|
||||
border: 1px solid @sub-border;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
font-family: Consolas, 'SF Mono', Menlo, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.block-code {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-family: Consolas, 'SF Mono', Menlo, monospace;
|
||||
color: #c41d7f;
|
||||
background: #fff;
|
||||
border: 1px solid @sub-border;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -259,13 +259,17 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.content-view {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding: 26px 36px 36px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-head-tool {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-title-row {
|
||||
@@ -288,9 +292,6 @@ export default {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
}
|
||||
|
||||
.table-page-bar {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
|
||||
@@ -278,13 +278,17 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.content-view {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding: 26px 36px 36px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-head-tool {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-title-row {
|
||||
|
||||
@@ -191,13 +191,17 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.content-view {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding: 26px 36px 36px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-head-tool {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-title-row {
|
||||
@@ -216,9 +220,6 @@ export default {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
}
|
||||
|
||||
.table-page-bar {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
<Button type="primary" @click="openEdit(null)">新增</Button>
|
||||
</div>
|
||||
|
||||
<Form ref="formInline" :model="param.seachOption" inline :label-width="80">
|
||||
<Form ref="formInline" :model="param.seachOption" inline :label-width="80" class="usage-query-form">
|
||||
<FormItem label="条件">
|
||||
<Select v-model="param.seachOption.key" style="width: 140px">
|
||||
<Select v-model="param.seachOption.key" class="usage-select">
|
||||
<Option value="user_id">用户ID</Option>
|
||||
<Option value="stat_month">月份</Option>
|
||||
<Option value="plan_id">套餐ID</Option>
|
||||
</Select>
|
||||
<Input v-model="param.seachOption.value" class="ml10" style="width: 200px" />
|
||||
<Input v-model="param.seachOption.value" class="ml10 usage-search-input" placeholder="关键字" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="load(1)">查询</Button>
|
||||
@@ -23,7 +23,7 @@
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<div class="table-body">
|
||||
<div class="table-body table-scroll">
|
||||
<Table :columns="columns" :data="rows" border stripe />
|
||||
<div class="table-page-bar">
|
||||
<Page
|
||||
@@ -79,19 +79,19 @@ export default {
|
||||
computed: {
|
||||
columns() {
|
||||
return [
|
||||
{ title: 'ID', key: 'id', width: 70 },
|
||||
{ title: '用户', key: 'user_id', width: 90 },
|
||||
{ title: '套餐', key: 'plan_id', width: 90 },
|
||||
{ title: '月份', key: 'stat_month', width: 100 },
|
||||
{ title: 'msg', key: 'msg_count', width: 80 },
|
||||
{ title: 'mass', key: 'mass_count', width: 80 },
|
||||
{ title: 'friend', key: 'friend_count', width: 80 },
|
||||
{ title: 'sns', key: 'sns_count', width: 80 },
|
||||
{ title: 'active_user', key: 'active_user_count', width: 110 },
|
||||
{ title: 'ID', key: 'id', minWidth: 64 },
|
||||
{ title: '用户', key: 'user_id', minWidth: 80 },
|
||||
{ title: '套餐', key: 'plan_id', minWidth: 80 },
|
||||
{ title: '月份', key: 'stat_month', minWidth: 96 },
|
||||
{ title: 'msg', key: 'msg_count', minWidth: 72 },
|
||||
{ title: 'mass', key: 'mass_count', minWidth: 72 },
|
||||
{ title: 'friend', key: 'friend_count', minWidth: 72 },
|
||||
{ title: 'sns', key: 'sns_count', minWidth: 72 },
|
||||
{ title: 'active_user', key: 'active_user_count', minWidth: 100 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'a',
|
||||
width: 140,
|
||||
minWidth: 132,
|
||||
render: (h, p) =>
|
||||
h('div', [
|
||||
h('Button', { props: { type: 'info', size: 'small' }, on: { click: () => this.openEdit(p.row) } }, '编辑'),
|
||||
@@ -196,20 +196,51 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.content-view {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding: 26px 36px 36px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.usage-query-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 8px 0;
|
||||
}
|
||||
|
||||
.usage-select {
|
||||
width: 140px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.usage-search-input {
|
||||
width: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
:deep(.ivu-table) {
|
||||
min-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-tool {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
@@ -225,11 +256,8 @@ export default {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
}
|
||||
|
||||
.table-page-bar {
|
||||
margin-top: 12px;
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -295,13 +295,17 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.content-view {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding: 26px 36px 36px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-head-tool {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-title-row {
|
||||
@@ -324,9 +328,6 @@ export default {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
}
|
||||
|
||||
.table-page-bar {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
|
||||
Reference in New Issue
Block a user