1
This commit is contained in:
张成
291
admin/src/views/subscription/subscriptions.vue
Normal file
291
admin/src/views/subscription/subscriptions.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="sub-page">
|
||||
<div class="sub-toolbar">
|
||||
<h2 class="sub-title">订阅</h2>
|
||||
<Button type="primary" @click="openOpen">开通订阅</Button>
|
||||
<Button class="ml8" @click="load(1)">刷新</Button>
|
||||
<Button class="ml8" @click="doExport">导出 CSV</Button>
|
||||
</div>
|
||||
<div class="sub-search">
|
||||
<Form inline>
|
||||
<FormItem label="用户ID">
|
||||
<Input v-model="param.seachOption.value" style="width: 140px" placeholder="筛选 user_id" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Select v-model="param.seachOption.key" style="width: 120px">
|
||||
<Option value="user_id">用户ID</Option>
|
||||
<Option value="status">状态</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<Button type="primary" @click="load(1)">查询</Button>
|
||||
</Form>
|
||||
</div>
|
||||
<Table :columns="columns" :data="rows" border stripe />
|
||||
<div class="sub-page-bar">
|
||||
<Page
|
||||
:total="total"
|
||||
:current="param.pageOption.page"
|
||||
:page-size="param.pageOption.pageSize"
|
||||
show-total
|
||||
@on-change="onPage"
|
||||
@on-page-size-change="onSize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Modal v-model="openModal" title="开通订阅" width="640" :loading="saving" @on-ok="submitOpen">
|
||||
<Form :label-width="110">
|
||||
<FormItem label="用户ID"><Input v-model="openForm.user_id" type="number" /></FormItem>
|
||||
<FormItem label="套餐ID"><Input v-model="openForm.plan_id" type="number" /></FormItem>
|
||||
<FormItem label="开始时间"><Input v-model="openForm.start_time" placeholder="2025-01-01 00:00:00" /></FormItem>
|
||||
<FormItem label="结束时间"><Input v-model="openForm.end_time" placeholder="2025-12-31 23:59:59" /></FormItem>
|
||||
<FormItem label="状态">
|
||||
<Select v-model="openForm.status" style="width: 100%">
|
||||
<Option value="pending">pending</Option>
|
||||
<Option value="active">active</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="续费方式">
|
||||
<Select v-model="openForm.renew_mode" style="width: 100%">
|
||||
<Option value="manual">manual</Option>
|
||||
<Option value="auto">auto</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="支付渠道">
|
||||
<Select v-model="openForm.payment_channel" clearable style="width: 100%">
|
||||
<Option value="offline">offline</Option>
|
||||
<Option value="pay_link">pay_link</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="支付单号"><Input v-model="openForm.payment_ref" /></FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal v-model="renewModal" title="续费" :loading="saving" @on-ok="submitRenew">
|
||||
<Form :label-width="100">
|
||||
<FormItem label="新结束时间"><Input v-model="renewForm.end_time" /></FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal v-model="upgradeModal" title="升级套餐" :loading="saving" @on-ok="submitUpgrade">
|
||||
<Form :label-width="100">
|
||||
<FormItem label="新套餐ID"><Input v-model="upgradeForm.new_plan_id" type="number" /></FormItem>
|
||||
<FormItem label="开始"><Input v-model="upgradeForm.start_time" /></FormItem>
|
||||
<FormItem label="结束"><Input v-model="upgradeForm.end_time" /></FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import subscriptionsServer from '@/api/subscription/subscriptions_server.js'
|
||||
import { downloadCsvFromRows } from '@/utils/csvExport.js'
|
||||
|
||||
export default {
|
||||
name: 'SubscriptionRecords',
|
||||
data() {
|
||||
return {
|
||||
rows: [],
|
||||
total: 0,
|
||||
param: {
|
||||
seachOption: { key: 'user_id', value: '' },
|
||||
pageOption: { page: 1, pageSize: 20, total: 0 },
|
||||
},
|
||||
openModal: false,
|
||||
renewModal: false,
|
||||
upgradeModal: false,
|
||||
saving: false,
|
||||
currentRow: null,
|
||||
openForm: {},
|
||||
renewForm: { end_time: '' },
|
||||
upgradeForm: { new_plan_id: '', start_time: '', end_time: '' },
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return [
|
||||
{ title: 'ID', key: 'id', width: 70 },
|
||||
{ title: '用户', key: 'user_id', width: 90 },
|
||||
{ title: '套餐', key: 'plan_id', width: 90 },
|
||||
{ title: '状态', key: 'status', width: 100 },
|
||||
{ title: '开始', key: 'start_time', minWidth: 150 },
|
||||
{ title: '结束', key: 'end_time', minWidth: 150 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'a',
|
||||
width: 200,
|
||||
render: (h, p) =>
|
||||
h('div', [
|
||||
h('Button', { props: { size: 'small' }, on: { click: () => this.openRenew(p.row) } }, '续费'),
|
||||
h('Button', { props: { size: 'small' }, class: { ml8: true }, on: { click: () => this.openUpgrade(p.row) } }, '升级'),
|
||||
h('Button', { props: { type: 'error', size: 'small' }, class: { ml8: true }, on: { click: () => this.doCancel(p.row) } }, '取消'),
|
||||
]),
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.load(1)
|
||||
},
|
||||
methods: {
|
||||
async load(page) {
|
||||
if (page) this.param.pageOption.page = page
|
||||
const res = await subscriptionsServer.page({ param: this.param })
|
||||
if (res && res.code === 0) {
|
||||
this.rows = res.data.rows || []
|
||||
this.total = res.data.count || 0
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '加载失败')
|
||||
}
|
||||
},
|
||||
onPage(p) {
|
||||
this.param.pageOption.page = p
|
||||
this.load()
|
||||
},
|
||||
onSize(s) {
|
||||
this.param.pageOption.pageSize = s
|
||||
this.load(1)
|
||||
},
|
||||
openOpen() {
|
||||
const now = new Date()
|
||||
const end = new Date(now)
|
||||
end.setFullYear(end.getFullYear() + 1)
|
||||
const fmt = (d) =>
|
||||
`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(
|
||||
d.getHours()
|
||||
).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:00`
|
||||
this.openForm = {
|
||||
user_id: '',
|
||||
plan_id: '',
|
||||
start_time: fmt(now),
|
||||
end_time: fmt(end),
|
||||
status: 'pending',
|
||||
renew_mode: 'manual',
|
||||
payment_channel: '',
|
||||
payment_ref: '',
|
||||
}
|
||||
this.openModal = true
|
||||
},
|
||||
async submitOpen() {
|
||||
this.saving = true
|
||||
try {
|
||||
const body = {
|
||||
user_id: Number(this.openForm.user_id),
|
||||
plan_id: Number(this.openForm.plan_id),
|
||||
start_time: this.openForm.start_time,
|
||||
end_time: this.openForm.end_time,
|
||||
status: this.openForm.status,
|
||||
renew_mode: this.openForm.renew_mode,
|
||||
payment_channel: this.openForm.payment_channel || null,
|
||||
payment_ref: this.openForm.payment_ref || null,
|
||||
}
|
||||
const res = await subscriptionsServer.open(body)
|
||||
if (res && res.code === 0) {
|
||||
this.$Message.success('已创建订阅')
|
||||
this.openModal = false
|
||||
this.load(1)
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '失败')
|
||||
}
|
||||
} finally {
|
||||
this.saving = false
|
||||
}
|
||||
},
|
||||
openRenew(row) {
|
||||
this.currentRow = row
|
||||
this.renewForm = { end_time: row.end_time || '' }
|
||||
this.renewModal = true
|
||||
},
|
||||
async submitRenew() {
|
||||
if (!this.currentRow) return
|
||||
this.saving = true
|
||||
try {
|
||||
const res = await subscriptionsServer.renew({
|
||||
subscription_id: this.currentRow.id,
|
||||
end_time: this.renewForm.end_time,
|
||||
})
|
||||
if (res && res.code === 0) {
|
||||
this.$Message.success('已续费')
|
||||
this.renewModal = false
|
||||
this.load(1)
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '失败')
|
||||
}
|
||||
} finally {
|
||||
this.saving = false
|
||||
}
|
||||
},
|
||||
openUpgrade(row) {
|
||||
this.currentRow = row
|
||||
this.upgradeForm = { new_plan_id: row.plan_id, start_time: '', end_time: '' }
|
||||
this.upgradeModal = true
|
||||
},
|
||||
async submitUpgrade() {
|
||||
if (!this.currentRow) return
|
||||
this.saving = true
|
||||
try {
|
||||
const res = await subscriptionsServer.upgrade({
|
||||
subscription_id: this.currentRow.id,
|
||||
new_plan_id: Number(this.upgradeForm.new_plan_id),
|
||||
start_time: this.upgradeForm.start_time || undefined,
|
||||
end_time: this.upgradeForm.end_time || undefined,
|
||||
})
|
||||
if (res && res.code === 0) {
|
||||
this.$Message.success('已升级')
|
||||
this.upgradeModal = false
|
||||
this.load(1)
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '失败')
|
||||
}
|
||||
} finally {
|
||||
this.saving = false
|
||||
}
|
||||
},
|
||||
doCancel(row) {
|
||||
this.$Modal.confirm({
|
||||
title: '取消订阅',
|
||||
content: '确认取消？',
|
||||
onOk: async () => {
|
||||
const res = await subscriptionsServer.cancel({ subscription_id: row.id })
|
||||
if (res && res.code === 0) {
|
||||
this.$Message.success('已取消')
|
||||
this.load(1)
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
async doExport() {
|
||||
const res = await subscriptionsServer.exportRows({ param: this.param })
|
||||
if (res && res.code === 0 && res.data && res.data.rows) {
|
||||
downloadCsvFromRows(res.data.rows, 'subscriptions.csv')
|
||||
this.$Message.success('已导出')
|
||||
} else {
|
||||
this.$Message.error((res && res.message) || '导出失败')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sub-page {
|
||||
padding: 16px;
|
||||
}
|
||||
.sub-toolbar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sub-title {
|
||||
display: inline-block;
|
||||
margin: 0 16px 0 0;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ml8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.sub-page-bar {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user