完成代码路径重构
This commit is contained in:
225
pages/mall/admin/setting/agreement/index.uvue
Normal file
225
pages/mall/admin/setting/agreement/index.uvue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<view class="admin-page agreement-settings">
|
||||
<view class="admin-sections">
|
||||
<view class="admin-card">
|
||||
<!-- 协议类型标签页 -->
|
||||
<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false">
|
||||
<view class="tabs-bar">
|
||||
<view
|
||||
v-for="(tab, index) in agreementTabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === index }"
|
||||
@click="currentTab = index"
|
||||
>
|
||||
<text class="tab-text">{{ tab }}</text>
|
||||
<view class="tab-line" v-if="currentTab === index"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="editor-layout">
|
||||
<!-- 左侧编辑器区域 -->
|
||||
<view class="editor-main">
|
||||
<view class="editor-toolbar">
|
||||
<!-- 模拟富文本工具栏 -->
|
||||
<view class="toolbar-icon">H</view>
|
||||
<view class="toolbar-icon">B</view>
|
||||
<view class="toolbar-icon">I</view>
|
||||
<view class="toolbar-icon">U</view>
|
||||
<view class="toolbar-icon">S</view>
|
||||
<view class="toolbar-icon">🔗</view>
|
||||
<view class="toolbar-icon">🖼️</view>
|
||||
</view>
|
||||
<textarea
|
||||
class="rich-textarea"
|
||||
v-model="agreementContent"
|
||||
placeholder="请输入协议内容..."
|
||||
></textarea>
|
||||
<view class="editor-footer">
|
||||
<button class="btn btn-primary" @click="handleSave">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧手机预览 -->
|
||||
<view class="preview-area">
|
||||
<view class="phone-frame">
|
||||
<view class="phone-header">
|
||||
<text class="phone-title">{{ agreementTabs[currentTab] }}</text>
|
||||
</view>
|
||||
<scroll-view class="phone-content" scroll-y="true">
|
||||
<rich-text :nodes="agreementContent"></rich-text>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<text class="preview-tip">协议预览</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view></template>
|
||||
<script setup lang="uts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const currentTab = ref(0)
|
||||
const agreementTabs = [
|
||||
'付费会员协议', '代理商协议', '隐私协议', '用户协议', '注销协议', '积分协议', '分销协议'
|
||||
]
|
||||
|
||||
const agreementContent = ref(`
|
||||
<h2 style="text-align: center;">第1条 相关定义</h2>
|
||||
<p>1.1 SVIP会员：SVIP会员是为商城客户打造的高级会员服务，通过提供高品质的客户服务，让网购变的更加方便，省钱和放心。</p>
|
||||
<p>1.5 实名信息：用户开通SVIP11会员需保证商城用户信息真实，同一自然人如有多个商城账号，可同时开通对应的多个会员。</p>
|
||||
<h2 style="text-align: center;">第2条 本站服务条款的确认和接纳</h2>
|
||||
<p>2.1 本站所提供的SVIP会员试用期及正式期活动的所有权和运作权归本公司所有。</p>
|
||||
<p>2.2 用户支付会员成功，即视为用户确认自己同意接受SVIP会员相关服务的条款，且同意按本协议内容履行，如产生用户相关责任的，同意承担相应法律责任。</p>
|
||||
`)
|
||||
|
||||
const handleSave = () => {
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.agreement-settings {
|
||||
/* 使用 AdminLayout 的统一内边距和背景色 */
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
background-color: #fff;
|
||||
padding: var(--admin-card-padding);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tabs-scroll {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.tabs-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 12px 25px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.editor-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.editor-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
background-color: #f8f8f9;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.toolbar-icon {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rich-textarea {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.editor-footer {
|
||||
padding: 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-area {
|
||||
width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.phone-frame {
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
border: 12px solid #333;
|
||||
border-radius: 36px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.phone-header {
|
||||
height: 44px;
|
||||
background-color: #f8f8f8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
.phone-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.phone-content {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.preview-tip {
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0 30px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user