coding:模板数据

src/components/H5/css/base.css

@@ -1,9 +1,10 @@
 .parent-div{
-  border: 2px dashed transparent;
+  border: none;
   /*padding: 5px 0;*/
 }
 .parent-div.active{
-  border-color: #02ff9b;
+  outline: 2px dashed #02ff9b;
+  outline-offset: -2px;
 }
 .footer{
   position: absolute;

src/components/H5Editor/index.vue

@@ -61,6 +61,16 @@
           <span class="device-info">手机预览 (375px)</span>
         </div>
         <div class="parent-container">
+          <!-- 模拟手机导航栏 -->
+          <div class="mobile-nav-bar">
+            <div class="nav-left">
+              <i class="el-icon-arrow-left"></i>
+            </div>
+            <div class="nav-title">{{ pageTitle || '落地页标题' }}</div>
+            <div class="nav-right">
+              <i class="el-icon-more"></i>
+            </div>
+          </div>
           <div class="view-body" @dragover.prevent="handleDragOver" @drop="handleDrop" @dragleave="handleDragLeave" @mousemove="handleMouseMove">
             <draggable 
               v-model="list" 
@@ -218,7 +228,40 @@ export default {
     }
   },
   methods: {
-    initData(json) {
+    initData(json, templateType) {
+      // 根据模板类型设置页面列表
+      if (templateType === '小程序表单类') {
+        this.pageList = [
+          { pageStep: 'home', name: '首页', icon: 'el-icon-house' },
+          { pageStep: 'appletLand', name: '小程序授权页', icon: 'el-icon-document' },
+          { pageStep: 'purchaseSuccess', name: '小程序出码页', icon: 'el-icon-success' }
+        ]
+      } else if (templateType === '小程序加粉类') {
+        this.pageList = [
+          { pageStep: 'home', name: '首页', icon: 'el-icon-house' },
+          { pageStep: 'purchaseSuccess', name: '小程序出码页', icon: 'el-icon-success' }
+        ]
+      } else if (templateType === '免费加粉类') {
+        this.pageList = [
+          { pageStep: 'home', name: '首页', icon: 'el-icon-house' }
+        ]
+      } else if (templateType === '免费表单类') {
+        this.pageList = [
+          { pageStep: 'home', name: '首页', icon: 'el-icon-house' },
+          { pageStep: 'receiveSuccess', name: '领取成功页', icon: 'el-icon-circle-check' }
+        ]
+      } else if (templateType === '一站式小程序表单类') {
+        this.pageList = [
+          { pageStep: 'home', name: '首页', icon: 'el-icon-house' },
+          { pageStep: 'purchaseSuccess', name: '小程序出码页', icon: 'el-icon-success' }
+        ]
+      } else {
+        // 默认显示首页
+        this.pageList = [
+          { pageStep: 'home', name: '首页', icon: 'el-icon-house' }
+        ]
+      }
+
       // 防止switchPage将当前的空list保存到新加载的configList中
       this.currentPageStep = ''
       try {
@@ -262,16 +305,10 @@ export default {
       } catch (e) {
         // 初始化为新格式
         this.pageTitle = ''
-        this.configList = [{
-          pageStep: 'home',
+        this.configList = this.pageList.map(page => ({
+          pageStep: page.pageStep,
           moduleList: []
-        }, {
-          pageStep: 'appletLand',
-          moduleList: []
-        }, {
-          pageStep: 'purchaseSuccess',
-          moduleList: []
-        }]
+        }))
         this.switchPage('home')
       }
       // 重置选中状态和属性表单
@@ -279,11 +316,11 @@ export default {
       this.index = -1
     },
     initializeConfigList() {
-      const pageSteps = ['home', 'appletLand', 'purchaseSuccess']
-      pageSteps.forEach(pageStep => {
-        if (!this.configList.find(config => config.pageStep === pageStep)) {
+      // 根据当前的pageList初始化配置
+      this.pageList.forEach(page => {
+        if (!this.configList.find(config => config.pageStep === page.pageStep)) {
           this.configList.push({
-            pageStep: pageStep,
+            pageStep: page.pageStep,
             moduleList: []
           })
         }
@@ -652,96 +689,99 @@ export default {
 .h5-editor-container {
   width: 100%;
   height: 100%;
-  background: #f5f7fa;
+  background: #f0f2f5;
   display: flex;
   flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
 // 标题编辑栏
 .title-bar {
-  padding: 12px 16px;
+  padding: 10px 20px;
   background: #fff;
-  border-bottom: 1px solid #e8e8e8;
+  border-bottom: 1px solid #ebeef5;
   flex-shrink: 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.04);
+  z-index: 100;
 
   .title-input {
-    height: 36px;
+    width: 300px;
     
     ::v-deep .el-input__inner {
-      font-size: 14px;
-      font-weight: 500;
-      color: #303133;
-      padding: 0 12px;
-
-      &::placeholder {
-        color: #909399;
+      border: 1px solid #dcdfe6;
+      border-radius: 4px;
+      &:focus {
+        border-color: #409eff;
       }
     }
   }
 }
 
 .editor-wrapper {
-  height: 100%;
+  flex: 1;
   padding: 0;
   margin: 0 !important;
   display: flex !important;
+  overflow: hidden;
 }
 
 // 面板公共样式
 .panel-header {
-  padding: 16px;
-  background: #fff;
-  border-bottom: 1px solid #e8e8e8;
-  margin-bottom: 12px;
-  border-radius: 4px;
+  padding: 15px 20px;
+  border-bottom: 1px solid #f0f0f0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
+  background: #fff;
 
   h3 {
     margin: 0;
-    font-size: 14px;
+    font-size: 15px;
     font-weight: 600;
-    color: #303133;
+    color: #1f2d3d;
   }
 
   .device-info {
     font-size: 12px;
     color: #909399;
+    background: #f4f4f5;
+    padding: 2px 8px;
+    border-radius: 10px;
   }
 }
 
-// 页面选择面板
-.page-panel {
+// 左侧通用面板样式
+.page-panel,
+.left-panel {
   display: flex;
   flex-direction: column;
   height: 100%;
   background: #fff;
+  border-right: 1px solid #ebeef5;
+  box-shadow: none;
+  z-index: 10;
   border-radius: 0;
-  overflow: hidden;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
 
+// 页面选择面板
+.page-panel {
   .page-list {
     flex: 1;
     overflow-y: auto;
-    padding: 12px;
+    padding: 15px;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 12px;
 
     &::-webkit-scrollbar {
-      width: 6px;
+      width: 4px;
     }
-
     &::-webkit-scrollbar-thumb {
-      background: #d0d0d0;
-      border-radius: 3px;
-
-      &:hover {
-        background: #aaa;
-      }
+      background: #e0e0e0;
+      border-radius: 2px;
     }
   }
 
@@ -749,43 +789,48 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     gap: 8px;
-    padding: 12px 8px;
-    border: 2px solid #e8e8e8;
-    border-radius: 6px;
-    background: #f9f9f9;
+    padding: 15px 10px;
+    border: 1px solid #ebeef5;
+    border-radius: 8px;
+    background: #fff;
     cursor: pointer;
-    transition: all 0.3s ease;
-    user-select: none;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    position: relative;
+    overflow: hidden;
 
     .page-icon {
       font-size: 24px;
-      color: #409eff;
+      color: #606266;
+      transition: color 0.3s;
     }
 
     .page-name {
-      font-size: 11px;
+      font-size: 12px;
       color: #606266;
-      text-align: center;
-      word-break: break-word;
-      width: 100%;
+      font-weight: 500;
+      transition: color 0.3s;
     }
 
     &:hover {
-      border-color: #409eff;
-      background: #e6f2ff;
-      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+      border-color: #b3d8ff;
+      background: #ecf5ff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+
+      .page-icon, .page-name {
+        color: #409eff;
+      }
     }
 
     &.active {
+      background: #409eff;
       border-color: #409eff;
-      background: #d3e8ff;
-      font-weight: 600;
-      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
 
-      .page-name {
-        color: #409eff;
-        font-weight: 600;
+      .page-icon, .page-name {
+        color: #fff;
       }
     }
   }
@@ -853,21 +898,19 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 16px 12px;
-  font-size: 12px;
-  border: 1px solid #e8e8e8;
-  background: #f9f9f9;
-  color: #606266;
-  transition: all 0.3s ease;
-  border-radius: 6px;
+  padding: 15px 10px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
   cursor: grab;
+  transition: all 0.2s ease;
   min-height: 80px;
-  gap: 8px;
 
   i {
     font-size: 24px;
-    flex-shrink: 0;
-    color: #409eff;
+    color: #606266;
+    margin-bottom: 8px;
+    transition: transform 0.2s;
   }
 
   span {
@@ -877,15 +920,23 @@ export default {
   }
 
   &:hover {
-    background: #e6f2ff;
     border-color: #409eff;
     color: #409eff;
-    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
-    cursor: grab;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+
+    i {
+      color: #409eff;
+      transform: scale(1.1);
+    }
+    
+    span {
+      color: #409eff;
+    }
   }
 
   &:active {
-    background: #d3e8ff;
+    background: #f0f9ff;
     transform: scale(0.98);
     cursor: grabbing;
   }
@@ -896,49 +947,112 @@ export default {
   display: flex;
   flex-direction: column;
   height: 100%;
+  background: #eaedf1;
+  border-left: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+  box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
+  
+  .panel-header {
+    background: #fff;
+    border-bottom: 1px solid #ebeef5;
+  }
+}
+
+// 模拟手机外壳
+.mobile-nav-bar {
+  width: 375px;
   background: #fff;
-  border-radius: 0;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid #f2f2f2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  flex-shrink: 0;
+  z-index: 20;
+  
+  border-top-left-radius: 30px; 
+  border-top-right-radius: 30px; 
+  padding-top: 10px; 
+  height: 54px; 
+  box-sizing: border-box;
+
+  box-shadow: 0 0 0 12px #333; 
+  margin: 0 auto;
+  
+  .nav-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #000;
+  }
+  
+  i {
+    font-size: 18px;
+    color: #333;
+  }
+    
+    .nav-left, .nav-right {
+      width: 40px;
+      display: flex;
+      align-items: center;
+      
+      i {
+        font-size: 18px;
+        color: #333;
+        cursor: pointer;
+      }
+    }
+
+    .nav-right {
+      justify-content: flex-end;
+    }
 }
 
 .view-body {
   width: 375px;
-  height: auto;
+  min-height: 667px;
   background: #fff;
-  position: relative;
   padding: 0;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  min-height: 500px;
-  border: 2px solid #e8e8e8;
-  transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
+  position: relative;
+  
+  border-bottom-left-radius: 30px; 
+  border-bottom-right-radius: 30px; 
+  padding-bottom: 30px; 
+  
+  box-shadow: 0 0 0 12px #333, 0 20px 40px -10px rgba(0,0,0,0.4); 
   margin: 0 auto;
-
-  &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-
+  
   &.drag-over {
-    border-color: #409eff;
     background-color: #f0f9ff;
-    box-shadow: 0 2px 12px rgba(64, 158, 255, 0.3);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 2px dashed #409eff;
+      border-radius: 0 0 30px 30px;
+      pointer-events: none;
+      z-index: 100;
+    }
+  }
+  
+  &:hover {
+    box-shadow: 0 0 0 12px #333, 0 25px 50px -12px rgba(0,0,0,0.5);
   }
 }
 
 .parent-container {
   flex: 1;
-  background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
+  padding: 40px 0;
   overflow-y: auto;
-  border: none;
-  padding: 24px 0 120px 0;
-  border-radius: 0 0 4px 0;
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
-
+  flex-direction: column;
+  align-items: center;
+  
   &::-webkit-scrollbar {
-    width: 6px;
+    width: 0; 
   }
 
   &::-webkit-scrollbar-thumb {
@@ -973,7 +1087,7 @@ export default {
 .view-item {
   cursor: pointer;
   transition: background-color 0.2s ease;
-  border: 2px solid transparent;
+  border: none;
   position: relative;
   margin: 0;
   padding: 0;
@@ -989,7 +1103,9 @@ export default {
   }
 
   &.active {
-    border-color: #409eff;
+    outline: 2px solid #409eff;
+    outline-offset: -2px;
+    z-index: 2;
     background-color: #ecf5ff;
   }
 }

src/views/adv/landingPageTemplate/index.vue

@@ -114,7 +114,7 @@
           <el-input v-model="form.templateName" placeholder="请输入模板名称" />
         </el-form-item>
         <el-form-item label="模板类型" prop="templateType">
-          <el-select v-model="form.templateType" placeholder="请选择模板类型" style="width: 100%">
+          <el-select v-model="form.templateType" placeholder="请选择模板类型" style="width: 100%" @change="handleTemplateTypeChange" :disabled="form.id != undefined">
             <el-option label="免费表单类" value="免费表单类" />
             <el-option label="小程序表单类" value="小程序表单类" />
             <el-option label="一站式小程序表单类" value="一站式小程序表单类" />
@@ -236,6 +236,36 @@ export default {
         row.status = row.status === 0 ? 1 : 0;
       });
     },
+    // 处理模板类型改变
+    handleTemplateTypeChange(val) {
+      let id = null;
+      switch (val) {
+        case '免费表单类':
+          id = 1;
+          break;
+        case '小程序表单类':
+          id = 2;
+          break;
+        case '一站式小程序表单类':
+          id = 3;
+          break;
+        case '免费加粉类':
+          id = 4;
+          break;
+        case '小程序加粉类':
+          id = 5;
+          break;
+      }
+      
+      if (id) {
+        getTemplate(id).then(response => {
+          if (response.data && response.data.templateData) {
+            this.form.templateData = response.data.templateData;
+            // 如果是在新增模式下且没有填写标题，可以考虑是否要同步其他信息，暂时只同步内容
+          }
+        });
+      }
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -356,7 +386,7 @@ export default {
       this.h5Open = true
       this.$nextTick(() => {
         // 支持新旧数据格式
-        this.$refs.h5Editor.initData(templateData || '{"pageTitle":"","configList":[]}')
+        this.$refs.h5Editor.initData(templateData || '{"pageTitle":"","configList":[]}', this.form.templateType)
       })
     },
     /** H5编辑器确定 */