feat: 易支付积分充值 + 站内公告 + OpenAI 视频修复 + grok/adobe 失败处理
充值/订单(易支付 mapi): - 订单表 + 30 分钟自动取消;支付弹窗(二维码/跳转监控、倒计时、轮询、5s 倒计时关闭) - 系统设置可配:开关/商户ID/密钥/支付地址(根地址拼 /mapi)/支付方式/最低额/积分比例(默认 1元=100积分) - 异步通知 MD5 验签、幂等到账;用户累计充值;前台/后台订单页(筛选+搜索+分页,前后台分风格);用户管理累计充值列 站内公告: - Markdown 公告,登录用户首次访问/刷新弹出;内容哈希做版本,改了就重新推;管理员不弹;空内容=下线 OpenAI 视频(/v1/videos)修复: - /content 拿不到视频:grok 资源 URL 需鉴权,改为用生成账号 token 取流;adobe/runway 公开 URL 直代理(不存 RustFS) - size→分辨率用短边判定(1280x720 = 720p,之前误判 1080p 被拒) 失败处理: - grok 429「Too many requests」/403 anti-bot 改判临时错误(不再误封号),真额度耗尽才算 quota - adobe 视频 408 / system under load 归为临时错误 → tempAsDead 封号 其它: - 充值默认关闭;签到格子浅色可见;登录验证码按钮浅色可读;并发/账户信息展示 - 创作记录/画图台只显示画图台作品(排除 API);日志页 API 视频预览显示 — - 视频去画中画/下载/投屏(全局);图片缩略图改背景图规避 Edge 视觉搜索 - 订单/兑换码/配置/日志菜单文案与图标;充值版块样式 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,191 @@
|
||||
<script setup>
|
||||
// Front-end 订单 page — the signed-in user's own recharge orders. Same light look
|
||||
// as the 日志 page: filter pills + search + numbered pagination. Unpaid/cancelled
|
||||
// orders can be resumed via 继续支付.
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { api, jsonBody } from '../api'
|
||||
import { openPayment } from '../payment'
|
||||
import { refreshMe } from '../auth'
|
||||
import Icon from '../components/Icon.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const items = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const status = ref('') // '' | pending | paid | cancelled
|
||||
const search = ref('')
|
||||
const page = ref(1)
|
||||
const pageSize = 20
|
||||
|
||||
const STATUS = { pending: '待支付', paid: '已支付', cancelled: '已取消' }
|
||||
const METHOD = { wxpay: '微信', alipay: '支付宝' }
|
||||
const statusPill = (s) => ({
|
||||
paid: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
|
||||
pending: 'bg-amber-50 text-amber-700 ring-amber-200',
|
||||
cancelled: 'bg-slate-100 text-slate-500 ring-slate-200',
|
||||
}[s] || 'bg-slate-100 text-slate-500 ring-slate-200')
|
||||
const statusDot = (s) => ({ paid: 'bg-emerald-500', pending: 'bg-amber-500', cancelled: 'bg-slate-400' }[s] || 'bg-slate-400')
|
||||
|
||||
function fmt(unix) {
|
||||
if (!unix) return '—'
|
||||
const d = new Date(unix * 1000)
|
||||
const p = (n) => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
const qs = new URLSearchParams({ limit: String(pageSize), offset: String((page.value - 1) * pageSize) })
|
||||
if (status.value) qs.set('status', status.value)
|
||||
const r = await api('/pay/orders?' + qs.toString())
|
||||
loading.value = false
|
||||
if (r.ok) {
|
||||
items.value = r.data?.data || []
|
||||
total.value = Number(r.data?.total ?? items.value.length)
|
||||
}
|
||||
}
|
||||
onMounted(load)
|
||||
|
||||
const displayed = computed(() => {
|
||||
const q = search.value.trim().toLowerCase()
|
||||
if (!q) return items.value
|
||||
return items.value.filter((o) =>
|
||||
(o.id || '').toLowerCase().includes(q) ||
|
||||
String(o.amount).includes(q) ||
|
||||
(METHOD[o.pay_type] || '').includes(q))
|
||||
})
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
|
||||
const pageStart = computed(() => total.value === 0 ? 0 : (page.value - 1) * pageSize + 1)
|
||||
const pageEnd = computed(() => Math.min(total.value, page.value * pageSize))
|
||||
function setStatus(v) { status.value = v; page.value = 1; load() }
|
||||
const pageNumbers = computed(() => {
|
||||
const n = totalPages.value, cur = page.value
|
||||
if (n <= 7) return Array.from({ length: n }, (_, i) => i + 1)
|
||||
const want = new Set([1, n, cur - 1, cur, cur + 1])
|
||||
if (cur <= 3) { want.add(2); want.add(3); want.add(4) }
|
||||
if (cur >= n - 2) { want.add(n - 1); want.add(n - 2); want.add(n - 3) }
|
||||
const list = [...want].filter((x) => x >= 1 && x <= n).sort((a, b) => a - b)
|
||||
const out = []
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (i > 0 && list[i] - list[i - 1] > 1) out.push(null)
|
||||
out.push(list[i])
|
||||
}
|
||||
return out
|
||||
})
|
||||
function goPage(n) {
|
||||
const t = Math.max(1, Math.min(totalPages.value, n))
|
||||
if (t === page.value) return
|
||||
page.value = t; load()
|
||||
}
|
||||
|
||||
const continuingId = ref('')
|
||||
async function cont(o) {
|
||||
if (continuingId.value) return
|
||||
continuingId.value = o.id
|
||||
try {
|
||||
const r = await api(`/pay/orders/${o.id}/continue`, jsonBody('POST', {}))
|
||||
if (!r.ok) return
|
||||
openPayment(r.data, { onPaid: () => { refreshMe(); router.push('/settings') } })
|
||||
} finally {
|
||||
continuingId.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="space-y-5 log-page">
|
||||
<div class="flex items-end justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-slate-900">订单</h1>
|
||||
<p class="text-sm text-slate-500 mt-1">{{ total }} 笔充值订单 · 未支付可继续支付</p>
|
||||
</div>
|
||||
<button @click="router.push('/settings')" class="btn-primary"><Icon name="spark" class="w-4 h-4" /> 去充值</button>
|
||||
</div>
|
||||
|
||||
<!-- Filter bar -->
|
||||
<div class="card p-3 flex items-center gap-3 flex-wrap">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button v-for="s in [['','全部'],['pending','待支付'],['paid','已支付'],['cancelled','已取消']]" :key="s[0]"
|
||||
@click="setStatus(s[0])"
|
||||
class="text-xs rounded-lg px-2.5 py-1.5 transition-colors"
|
||||
:class="status === s[0] ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'">{{ s[1] }}</button>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[180px]">
|
||||
<input v-model="search" class="field !py-1.5 text-xs" placeholder="搜索 订单号 / 金额 / 方式…" />
|
||||
</div>
|
||||
<button @click="load" class="btn-soft"><Icon name="refresh" class="w-3.5 h-3.5" /> 刷新</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading && !items.length" class="card text-center text-sm text-slate-400 py-24">加载中…</div>
|
||||
<div v-else-if="!total" class="card flex flex-col items-center gap-3 text-slate-400 py-24">
|
||||
<span class="w-14 h-14 rounded-2xl bg-slate-100 grid place-items-center"><Icon name="log" class="w-6 h-6" /></span>
|
||||
<span class="text-sm">还没有充值订单</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="card overflow-hidden !p-0">
|
||||
<table class="w-full text-sm log-table">
|
||||
<thead>
|
||||
<tr class="text-[10px] uppercase tracking-[0.18em] text-slate-400 border-b border-slate-200">
|
||||
<th class="text-left px-4 py-3 font-medium">订单号</th>
|
||||
<th class="text-left px-3 py-3 font-medium">下单时间</th>
|
||||
<th class="text-left px-3 py-3 font-medium">支付时间</th>
|
||||
<th class="text-right px-3 py-3 font-medium">金额</th>
|
||||
<th class="text-right px-3 py-3 font-medium">充值积分</th>
|
||||
<th class="text-left px-3 py-3 font-medium">状态</th>
|
||||
<th class="text-right px-4 py-3 font-medium">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="o in displayed" :key="o.id" class="log-row">
|
||||
<td class="px-4 py-3 align-middle font-mono text-xs text-slate-700">{{ o.id }}</td>
|
||||
<td class="px-3 py-3 align-middle text-xs text-slate-500 whitespace-nowrap">{{ fmt(o.created_at) }}</td>
|
||||
<td class="px-3 py-3 align-middle text-xs text-slate-500 whitespace-nowrap">{{ fmt(o.paid_at) }}</td>
|
||||
<td class="px-3 py-3 align-middle text-right tabular-nums text-slate-800 font-medium">¥{{ o.amount }}</td>
|
||||
<td class="px-3 py-3 align-middle text-right tabular-nums text-violet-600 font-medium">{{ o.points }}</td>
|
||||
<td class="px-3 py-3 align-middle">
|
||||
<span class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium ring-1 whitespace-nowrap" :class="statusPill(o.status)">
|
||||
<span class="w-1.5 h-1.5 rounded-full" :class="statusDot(o.status)"></span>{{ STATUS[o.status] }}
|
||||
<span class="text-slate-400">· {{ METHOD[o.pay_type] || o.pay_type }}</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 align-middle text-right">
|
||||
<button v-if="o.status === 'pending'" @click="cont(o)" :disabled="continuingId === o.id"
|
||||
class="rounded-lg bg-violet-600 text-white hover:bg-violet-500 disabled:opacity-60 disabled:cursor-not-allowed px-3 py-1.5 text-xs font-medium transition-colors inline-flex items-center gap-1.5">
|
||||
<span v-if="continuingId === o.id" class="w-3 h-3 rounded-full border-2 border-white/40 border-t-white animate-spin"></span>
|
||||
{{ continuingId === o.id ? '处理中…' : '继续支付' }}
|
||||
</button>
|
||||
<span v-else class="text-xs text-slate-300">—</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-if="total && totalPages > 1"
|
||||
class="flex items-center justify-between gap-3 border-t border-slate-200 px-5 py-3 text-xs text-slate-500">
|
||||
<div><span class="tabular-nums text-slate-700">{{ pageStart }}–{{ pageEnd }}</span><span class="ml-1">/ {{ total }} 笔</span></div>
|
||||
<div class="flex items-center gap-1">
|
||||
<template v-for="(n, i) in pageNumbers" :key="i">
|
||||
<span v-if="n === null" class="px-1 text-slate-300">…</span>
|
||||
<button v-else @click="goPage(n)" class="pg" :class="page === n && 'pg-on'">{{ n }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.log-table { border-collapse: separate; border-spacing: 0; }
|
||||
.log-row td { border-bottom: 1px solid rgb(15 23 42 / 0.06); transition: background-color 0.15s ease, box-shadow 0.15s ease; }
|
||||
.log-row:hover td { background: rgb(15 23 42 / 0.025); }
|
||||
.log-row:hover td:first-child { box-shadow: inset 2px 0 0 rgb(124 58 237 / 0.6); }
|
||||
.log-row:last-child td { border-bottom: none; }
|
||||
.pg {
|
||||
min-width: 1.75rem; padding: 0.3rem 0.55rem; font-size: 0.72rem; font-weight: 500; text-align: center;
|
||||
border-radius: 0.45rem; color: rgb(71 85 105); background: rgb(241 245 249);
|
||||
box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.06); transition: background 0.15s, color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.pg:hover:not(.pg-on) { background: rgb(226 232 240); color: rgb(15 23 42); }
|
||||
.pg-on { background: rgb(15 23 42); color: white; box-shadow: none; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user