ymlandClaude Opus 4.7
5d5bd5af77
新增功能： - 添加租后须知查看功能（PC端+移动端） - 管理后台支持配置租后须知内容 - 默认提供完整的租后须知模板 功能实现： - 后端：新增 PostRentalNotice API 接口和配置管理 - PC端：在用户下拉菜单添加租后须知入口，独立页面展示 - 移动端：在个人中心实名认证下方添加入口，弹窗展示 - 管理端：新增租后须知配置弹窗，支持编辑和恢复默认 优化改进： - 修复发布页面默认选中"参考比例"而非"自定比例" - 移除错误的迁移测试脚本（与 MySQL 8.0 不兼容） Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
Vue
<script setup lang="ts">
|
||
import { InfoFilled } from '@element-plus/icons-vue'
|
||
import { onMounted, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
import { fetchPostRentalNotice, type PostRentalNotice } from '@/features/orders/api/orders'
|
||
import { useSessionStore } from '@/stores/session'
|
||
|
||
const session = useSessionStore()
|
||
const router = useRouter()
|
||
const loading = ref(false)
|
||
const notice = ref<PostRentalNotice | null>(null)
|
||
|
||
onMounted(async () => {
|
||
if (!session.isLoggedIn) {
|
||
router.replace({ path: '/login', query: { redirect: '/post-rental-notice' } })
|
||
return
|
||
}
|
||
await loadNotice()
|
||
})
|
||
|
||
async function loadNotice() {
|
||
loading.value = true
|
||
try {
|
||
notice.value = await fetchPostRentalNotice()
|
||
} catch (error) {
|
||
console.error('Failed to load post rental notice:', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page-container">
|
||
<div class="page-card">
|
||
<header class="page-header">
|
||
<div class="page-header-content">
|
||
<el-icon class="page-icon" :size="32"><InfoFilled /></el-icon>
|
||
<div>
|
||
<p class="page-eyebrow">Post Rental Notice</p>
|
||
<h1 class="page-title">{{ notice?.title || '租后须知' }}</h1>
|
||
<p class="page-subtitle">租赁账号后的重要须知事项，请仔细阅读</p>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div v-loading="loading" class="notice-body">
|
||
<div v-if="notice" class="notice-content">
|
||
{{ notice.content }}
|
||
</div>
|
||
<el-empty v-else-if="!loading" description="暂无租后须知内容" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page-container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.page-card {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
border: 1px solid #eef1f5;
|
||
box-shadow: 0 4px 16px rgba(23, 35, 61, 0.04);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.page-header {
|
||
padding: 32px 32px 24px;
|
||
background: linear-gradient(135deg, #fff9f5 0%, #fff 100%);
|
||
border-bottom: 1px solid #f5f6f8;
|
||
}
|
||
|
||
.page-header-content {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
}
|
||
|
||
.page-icon {
|
||
color: #ff6a00;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.page-eyebrow {
|
||
margin: 0 0 6px;
|
||
color: #ff6a00;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.page-title {
|
||
margin: 0 0 8px;
|
||
color: #17233d;
|
||
font-size: 28px;
|
||
font-weight: 900;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.page-subtitle {
|
||
margin: 0;
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.notice-body {
|
||
padding: 32px;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.notice-content {
|
||
color: #334155;
|
||
font-size: 15px;
|
||
line-height: 1.8;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
}
|
||
</style>
|