medical-mall/pages/mall/admin/setting/agreement.uvue

<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>