提交

src/api/index.js

@@ -84,9 +84,9 @@ export function getClass(ori) {
  */
 // export function getH5Mall(ori) {
 //   return ajax({
-//     api: '/oridata.json?' + Date.now(),
+//     api: '/topic/tool/img/cache/oridata.json?' + Date.now(),
 //     data: ori.data,
-//     base: 'oss1',
+//     base: 'json',
 //     type: 'ajax',
 //     method: 'GET',
 //     headers: {
@@ -284,3 +284,16 @@ export function getUpdateTime(ori) {
     },
   });
 }
+
+/**
+ * 获取组件列表
+ */
+export function getComponentsList(ori) {
+  return ajax({
+    api: '/operate/h5Template/json/components.json?' + Date.now(),
+    data: ori.data,
+    type: 'ajax',
+    base: 'json',
+    method: 'GET'
+  });
+}

src/config/index.js

@@ -3,7 +3,7 @@ export default {
     tableCol,
     base:{
         origin: "https://open.sxtvs.net",
-        oss1: "https://cxzx.smcic.net/topic/tool/img/cache",
+        json: "https://cxzx.smcic.net",
         GaoDeMap: "https://restapi.amap.com"
     }
 }

src/view/allMedia/H5Editor.vue

@@ -36,17 +36,20 @@
                 v-if="item.type === 'image'"
                 :item="item"
                 :index="index + ''"
+                @addComponent="addComponent"
               ></h5-image>
               <!-- @saveParagraph="text => saveParagraph(text, index)" -->
               <h5-paragraph
                 v-if="item.type === 'paragraph'"
                 :item="item"
                 :index="index + ''"
+                @addComponent="addComponent"
               ></h5-paragraph>
               <h5-from-component
                 v-if="item.type === 'fromComponent'"
                 :index="index + ''"
                 :item="item"
+                @addComponent="addComponent"
               >
                 <template
                   v-for="(v, i) in item.child_list || []"
@@ -113,14 +116,28 @@
         "
         width="50vw"
       >
-        <span>This is a message</span>
-        <template #footer>
-          <span class="dialog-footer">
-            <el-button type="primary" @click="dialogVisible = false">
-              新 增
-            </el-button>
-          </span>
-        </template>
+        <el-table :data="visbileData.list || []">
+          <el-table-column property="title" label="组件名称">
+            <template #default="scope">
+              <span
+                v-text="
+                  scope.row.title ? scope.row.title : scope.row.attr ? scope.row.attr.label : scope.row.type
+                "
+              ></span>
+            </template>
+          </el-table-column>
+          <el-table-column property="address" label="操作">
+            <template #default="scope">
+              <el-button
+                type="primary"
+                link
+                @click="() => addComponentItem(scope.row)"
+              >
+                添加
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-dialog>
     </div>
     <div class="H5Editor_right">
@@ -140,7 +157,7 @@
 <script setup>
 import { ref, provide } from 'vue';
 import { useRoute } from 'vue-router';
-import { createTemplateList } from '../../api/index';
+import { createTemplateList, getComponentsList } from '../../api/index';
 import { ElMessage } from 'element-plus';
 
 // 中间显示模块组件
@@ -179,7 +196,6 @@ const item = JSON.parse(route.query.item || '{}');
 const selectPage = ref(0);
 const hoversList = ref(item.hoversList || []);
 const page = ref({ width: 375, height: 0 });
-
 document.title = item.title;
 
 const selectPageFunc = (index = 0) => {
@@ -191,12 +207,44 @@ const selectComponent = (v, i) => {
   leftEle.value = v.leftEle || false;
 };
 
-const addComponent = (type, index) => {
-  dialogVisible.value = true;
-  visbileData.value = {
-    type,
-    index,
-  };
+const addComponent = (type, componentTyep, index) => {
+  getComponentsList({}).then(r => {
+    const li = r || [];
+    const list = [];
+    for (let i = 0; i < li.length; i++) {
+      const v = li[i];
+      if (componentTyep != 'van-field') {
+        list.push(v);
+        continue;
+      } else if (componentTyep == 'van-field' && v.type == 'fromComponent') {
+        for (let o = 0; o < v.child_list.length; o++) {
+          const item = v.child_list[o];
+          item.type == componentTyep && list.push(item);
+        }
+        break;
+      }
+    }
+    dialogVisible.value = true;
+    visbileData.value = {
+      type,
+      index,
+      list,
+    };
+  });
+};
+
+const addComponentItem = row => {
+  const indexs = visbileData.value.index.split('-');
+  const page = item.hoversList
+    ? item.hoversList[selectPage.value]
+    : { components: [] };
+  let i = visbileData.value.type === 'top' ? 0 : 1;
+  if (indexs.length == 1) {
+    page.components.splice(indexs[0] - 0 + i, 0, row);
+  } else {
+    page.components[indexs[0]].child_list.splice(indexs[1] - 0 + i, 0, row);
+  }
+  dialogVisible.value = false;
 };
 
 // 查看页面大小，

src/view/allMedia/components/H5Editor/from.vue

@@ -1,36 +1,46 @@
 <template>
-  <div>
+  <div style="position: relative" class="formbg" @click.stop="select">
     <van-form class="pragraph">
       <van-cell-group inset>
-        <div
-          class="text"
-          v-text="item.title"
-          :style="item.title_style"
-          @click.stop="select"
-        ></div>
+        <div class="text" v-text="item.title" :style="item.title_style"></div>
         <slot></slot>
       </van-cell-group>
     </van-form>
     <br />
+
+    <div class="com addTop" @click.stop="addTop">
+      <el-icon><Upload /></el-icon>
+    </div>
+    <div class="com addBottom" @click.stop="addBottom">
+      <el-icon><Download /></el-icon>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { defineProps,inject } from 'vue';
+import { defineProps, inject, defineEmits } from 'vue';
 import 'vant/lib/index.css';
 const starEditorFormwork = inject('starEditorFormwork');
+const emit = defineEmits(['addComponent']);
 
 const props = defineProps({
   item: Object,
-  index: String
+  index: String,
 });
 
-const select= () => {
+const select = () => {
   const newItem = JSON.parse(JSON.stringify(props.item || {}));
   newItem.leftEle = true;
   newItem.nodetail = true;
   starEditorFormwork(newItem, props.index);
-}
+};
+
+const addTop = () => {
+  emit('addComponent', 'top', props.item.type, props.index);
+};
+const addBottom = () => {
+  emit('addComponent', 'bottom', props.item.type, props.index);
+};
 </script>
 
 <style scoped>
@@ -42,4 +52,37 @@ const select= () => {
   border: 1px solid #fff;
   cursor: pointer;
 }
+
+.com {
+  position: absolute;
+  display: none;
+  right: 0;
+  color: #fff;
+  background: #409eff;
+  border-radius: 3px;
+  padding: 3px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.formbg:hover .com{
+    display: block;
+}
+
+.addTop {
+  top: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.addBottom {
+  bottom: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.van_field_item:hover .addTop,
+.van_field_item:hover .addBottom {
+  display: block;
+}
 </style>

src/view/allMedia/components/H5Editor/img.vue

@@ -1,19 +1,31 @@
 <template>
-  <img
-    :src="oriUrl || item.src"
-    class="componenet_img"
-    @click.stop="editorFunc"
-    :style="outStyle()"
-  />
+  <div style="position: relative;" @click.stop="editorFunc">
+    <img
+      :src="oriUrl || item.src"
+      class="componenet_img"
+      :style="outStyle()"
+    />
+    <div class="van_field_item">
+      <div class="addMo">
+        <div class="com addTop" @click.stop="addTop">
+          <el-icon><Upload /></el-icon>
+        </div>
+        <div class="com addBottom" @click.stop="addBottom">
+          <el-icon><Download /></el-icon>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { defineProps, ref, inject } from 'vue';
-const starEditorFormwork  = inject("starEditorFormwork");
+import { defineProps, ref, inject,defineEmits } from 'vue';
+const starEditorFormwork = inject('starEditorFormwork');
 const props = defineProps({
   item: Object,
-  index: String
+  index: String,
 });
+const emit = defineEmits(['addComponent']);
 const oriUrl = ref('');
 const outStyle = () => {
   const width = {
@@ -28,12 +40,19 @@ const outStyle = () => {
 };
 
 const editorFunc = () => {
-    const p = {
-        ...props.item,
-        leftEle: true
-    }
-    if(oriUrl.value) p.src = oriUrl.value;
-    starEditorFormwork(p, props.index);
+  const p = {
+    ...props.item,
+    leftEle: true,
+  };
+  if (oriUrl.value) p.src = oriUrl.value;
+  starEditorFormwork(p, props.index);
+};
+
+const addTop = () => {
+  emit('addComponent', 'top', props.item.type, props.index);
+};
+const addBottom = () => {
+  emit('addComponent', 'bottom', props.item.type, props.index);
 };
 </script>
 
@@ -41,4 +60,50 @@ const editorFunc = () => {
 .componenet_img {
   cursor: pointer;
 }
+.van_field_item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.van_field_item:hover {
+  background-color: #00000020;
+}
+
+.addMo {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.com {
+  position: absolute;
+  display: none;
+  right: 0;
+  color: #fff;
+  background: #409eff;
+  border-radius: 3px;
+  padding: 3px;
+  text-align: center;
+  cursor: pointer;
+}
+.addTop {
+  top: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.addBottom {
+  bottom: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.van_field_item:hover .addTop,
+.van_field_item:hover .addBottom {
+  display: block;
+}
 </style>

src/view/allMedia/components/H5Editor/paragraph.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <van-cell-group inset class="pragraph" @click.stop="selectThis">
+  <div style="position: relative;" @click.stop="selectThis">
+    <van-cell-group inset class="pragraph">
       <div
         class="text"
         @input="inputFuncTitle"
@@ -15,11 +15,21 @@
       ></div>
     </van-cell-group>
     <br />
+    <div class="van_field_item">
+      <div class="addMo">
+        <div class="com addTop" @click.stop="addTop">
+          <el-icon><Upload /></el-icon>
+        </div>
+        <div class="com addBottom" @click.stop="addBottom">
+          <el-icon><Download /></el-icon>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { defineProps, inject } from 'vue';
+import { defineProps, inject, defineEmits } from 'vue';
 import 'vant/lib/index.css';
 const starEditorFormwork = inject('starEditorFormwork');
 
@@ -27,24 +37,21 @@ const props = defineProps({
   item: Object,
   index: String,
 });
-// const emit = defineEmits(['saveParagraph']);
-
-// const newItem = JSON.parse(JSON.stringify(props.item || {}));
-
-// const inputFunc = e => {
-//   newItem.default_text = e.target.innerHTML;
-//   emit('saveParagraph', newItem);
-// };
-// const inputFuncTitle = e => {
-//   newItem.title = e.target.innerHTML;
-//   emit('saveParagraph', newItem);
-// };
+const emit = defineEmits(['addComponent']);
 
 const selectThis = () => {
   const newItem = JSON.parse(JSON.stringify(props.item || {}));
   newItem.leftEle = true;
   starEditorFormwork(newItem, props.index);
 };
+
+
+const addTop = () => {
+  emit('addComponent', 'top', props.item.type, props.index);
+};
+const addBottom = () => {
+  emit('addComponent', 'bottom', props.item.type, props.index);
+};
 </script>
 
 <style scoped>
@@ -59,4 +66,50 @@ const selectThis = () => {
 .text:focus {
   border-color: red;
 }
+.van_field_item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.van_field_item:hover {
+  background-color: #00000020;
+}
+
+.addMo {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.com {
+  position: absolute;
+  display: none;
+  right: 0;
+  color: #fff;
+  background: #409eff;
+  border-radius: 3px;
+  padding: 3px;
+  text-align: center;
+  cursor: pointer;
+}
+.addTop {
+  top: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.addBottom {
+  bottom: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.van_field_item:hover .addTop,
+.van_field_item:hover .addBottom {
+  display: block;
+}
 </style>

src/view/allMedia/components/H5Editor/van_field.vue

@@ -50,10 +50,10 @@ const component = {
 };
 
 const addTop = () => {
-  emit('addComponent', 'top', props.index);
+  emit('addComponent', 'top', item.type, props.index);
 };
 const addBottom = () => {
-  emit('addComponent', 'bottom', props.index);
+  emit('addComponent', 'bottom', item.type, props.index);
 };
 </script>