86 lines
3.2 KiB
Plaintext
86 lines
3.2 KiB
Plaintext
<template>
|
||
<AdminLayout currentPage="api-pay">
|
||
<view class="page">
|
||
<!-- TopBar (navigationStyle: custom 时需要自己做顶部) -->
|
||
<view class="topbar">
|
||
<view class="status-bar" />
|
||
<view class="nav">
|
||
<view class="nav-left" @click="goBack">
|
||
<text class="nav-icon">‹</text>
|
||
<text class="nav-text">返回</text>
|
||
</view>
|
||
|
||
<text class="nav-title">商城支付配置</text>
|
||
|
||
<view class="nav-right">
|
||
<text class="nav-action" @click="onPrimaryAction">保存</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Main -->
|
||
<scroll-view class="body" scroll-y="true">
|
||
<view class="container">
|
||
<view class="card">
|
||
<text class="h2">商城支付配置</text>
|
||
<text class="p">TODO：在这里实现 商城支付配置 的页面内容。</text>
|
||
<view class="divider" />
|
||
<text class="p muted">提示：当前为可跑的占位模板（TopBar + Container + Card）。</text>
|
||
</view>
|
||
|
||
<view class="card">
|
||
<text class="h3">建议你下一步先补齐</text>
|
||
<view class="list">
|
||
<text class="li">1）接口：拉取/保存数据（API 协议对齐后端）。</text>
|
||
<text class="li">2）列表/表单：搜索、分页、增删改</text>
|
||
<text class="li">3）权限：按钮/路由级权限控制。</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</AdminLayout>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
||
|
||
const goBack = () => {
|
||
uni.navigateBack({ delta: 1 })
|
||
}
|
||
|
||
const onPrimaryAction = () => {
|
||
uni.showToast({ title: 'TODO：保存逻辑', icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { width: 100%; height: 100%; background-color: #f6f7fb; }
|
||
|
||
/* 顶部栏（适配沉浸式状态栏） */
|
||
.topbar { position: sticky; top: 0; z-index: 10; background-color: #fff; }
|
||
.status-bar { height: var(--status-bar-height); }
|
||
.nav { height: 44px; display: flex; align-items: center; padding: 0 12px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eef0f5; }
|
||
.nav-left { width: 88px; display: flex; align-items: center; }
|
||
.nav-icon { font-size: 22px; margin-right: 4px; color: #111; }
|
||
.nav-text { font-size: 14px; color: #111; }
|
||
.nav-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: #111; }
|
||
.nav-right { width: 88px; display: flex; justify-content: flex-end; }
|
||
.nav-action { font-size: 14px; color: #1677ff; }
|
||
|
||
.body { height: calc(100vh - 44px - var(--status-bar-height)); }
|
||
.container { padding: 12px; }
|
||
|
||
.card { background-color: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06); }
|
||
|
||
.h2 { font-size: 18px; font-weight: 700; color: #111; }
|
||
.h3 { font-size: 16px; font-weight: 600; color: #111; margin-bottom: 8px; }
|
||
.p { font-size: 13px; color: #333; margin-top: 8px; line-height: 18px; }
|
||
.muted { color: #8892a6; }
|
||
|
||
.divider { height: 1px; background-color: #eef0f5; margin: 12px 0; }
|
||
|
||
.list { margin-top: 8px; }
|
||
.li { font-size: 13px; color: #333; line-height: 20px; }
|
||
</style>
|