提交

src/api/index.js

@@ -82,18 +82,18 @@ export function getClass(ori) {
  * @param {Object} ori
  * @returns
  */
-export function getH5Mall(ori) {
-  return ajax({
-    api: '/oridata.json?' + Date.now(),
-    data: ori.data,
-    base: 'oss1',
-    type: 'ajax',
-    method: 'GET',
-    headers: {
-      Authorization: localStorage.getItem('token'),
-    },
-  });
-}
+// export function getH5Mall(ori) {
+//   return ajax({
+//     api: '/oridata.json?' + Date.now(),
+//     data: ori.data,
+//     base: 'oss1',
+//     type: 'ajax',
+//     method: 'GET',
+//     headers: {
+//       Authorization: localStorage.getItem('token'),
+//     },
+//   });
+// }
 
 /**
  * 行政区划接口
@@ -120,3 +120,18 @@ export function getreporting(ori) {
     },
   });
 }
+
+/**
+ * 获取模板列表
+ */
+export function getTemplateList(ori) {
+  return ajax({
+    api: '/h5template/list',
+    data: ori.data,
+    type: 'ajax',
+    method: 'POST',
+    headers: {
+      Authorization: localStorage.getItem('token'),
+    },
+  });
+}

src/view/allMedia/H5Editor.vue

@@ -35,20 +35,23 @@
               <h5-image
                 v-if="item.type === 'image'"
                 :item="item"
-                :index="index"
+                :index="index + ''"
               ></h5-image>
+                <!-- @saveParagraph="text => saveParagraph(text, index)" -->
               <h5-paragraph
                 v-if="item.type === 'paragraph'"
                 :item="item"
-                :index="index"
-                @saveParagraph="text => saveParagraph(text, index)"
+                :index="index + ''"
               ></h5-paragraph>
               <h5-from-component
                 v-if="item.type === 'fromComponent'"
-                :index="index"
+                :index="index + ''"
                 :item="item"
               >
-                <template v-for="(v, i) in item.child_list || []" :key="i">
+                <template
+                  v-for="(v, i) in item.child_list || []"
+                  :key="createKey(i)"
+                >
                   <h5-van-field
                     v-if="v.type === 'van-field'"
                     :item="v"
@@ -109,16 +112,19 @@ import H5VanButtom from './components/H5Editor/van_buttom.vue';
 import H5ImgEditor from './components/H5EditorLeft/imgEditor';
 import H5VanFieldLeft from './components/H5EditorLeft/vanField';
 import H5VanButtomLeft from './components/H5EditorLeft/vanButtom';
+import H5ParagraphLeft from './components/H5EditorLeft/paragraph';
 
 const H5EditorObj = {
   H5ImgEditor,
   H5VanFieldLeft,
   H5VanButtomLeft,
+  H5ParagraphLeft
 };
 const H5EditorObjEle = {
   image: 'H5ImgEditor',
   'van-field': 'H5VanFieldLeft',
   'van-buttom': 'H5VanButtomLeft',
+  paragraph: 'H5ParagraphLeft'
 };
 
 const H5Editor = ref({});
@@ -157,8 +163,14 @@ const backgroundStyle = () => {
   };
 };
 
-const saveParagraph = (paragraph, index) => {
-  console.log(paragraph, index);
+// 保存数据
+// const saveParagraph = (paragraph, index) => {
+//   console.log(paragraph, index);
+// };
+
+// 防止组件不刷新生成自定义key
+const createKey = i => {
+  return i + Date.now();
 };
 
 // provide 传递方法
@@ -167,23 +179,31 @@ provide('starEditorFormwork', (value, i) => {
 });
 
 provide('saveComponents', value => {
-  console.log(value);
+  const vList = value.index.toString().split('-');
+  const list = JSON.parse(JSON.stringify(hoversList.value));
+  if (vList.length == 1) {
+    list[selectPage.value].components[vList[0]] = value.item;
+  } else {
+    // 2层组件
+    list[selectPage.value].components[vList[0]].child_list[vList[1]] =
+      value.item;
+  }
+  hoversList.value = list;
+  leftEle.value = false;
   //   保存修改
 });
 
 provide('deleteItemComponents', value => {
   const vList = value.toString().split('-');
-  const list = JSON.parse(
-    JSON.stringify(hoversList.value[selectPage.value].components)
-  );
-  console.log(list,vList);
+  const list = JSON.parse(JSON.stringify(hoversList.value));
   if (vList.length == 1) {
-    list.splice(vList[0], 1);
+    list[selectPage.value].components.splice(vList[0], 1);
   } else {
     // 2层组件，只删除里层
-    list[vList[0]].child_list.splice(vList[1],1);
+    list[selectPage.value].components[vList[0]].child_list.splice(vList[1], 1);
   }
-  hoversList.value[selectPage.value].components = list;
+  hoversList.value = list;
+  leftEle.value = false;
   //   删除组件
 });
 </script>

src/view/allMedia/H5Mall.vue

@@ -38,7 +38,7 @@ import eyeIcon from '../../assets/img/eye.png';
 import H5 from './components/H5.vue';
 import LONGPAGE from './components/LONGPAGE.vue';
 import POSTER from './components/POSTER.vue';
-import { getH5Mall } from '../../api/index.js';
+import { getTemplateList } from '../../api/index.js';
 
 const components = {
   H5,
@@ -51,8 +51,9 @@ const router = useRouter();
 const searchText = ref('');
 const list = ref([]);
 
-getH5Mall({}).then(r => {
-  list.value = r.list || [];
+getTemplateList({}).then(r => {
+  console.log(r);
+  list.value = r || [];
 });
 
 const toH5Editor = item => {

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

@@ -12,7 +12,7 @@ import { defineProps, ref, inject } from 'vue';
 const starEditorFormwork  = inject("starEditorFormwork");
 const props = defineProps({
   item: Object,
-  index: Number
+  index: String
 });
 const oriUrl = ref('');
 const outStyle = () => {

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

@@ -4,12 +4,10 @@
       <div
         class="text"
         @input="inputFuncTitle"
-        contenteditable
         v-text="item.title"
         :style="item.title_style"
       ></div>
       <div
-        contenteditable
         class="text"
         :style="item.style"
         v-html="item.default_text"
@@ -21,35 +19,38 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits,inject } from 'vue';
+import { defineProps, inject } from 'vue';
 import 'vant/lib/index.css';
-const starEditorFormwork  = inject("starEditorFormwork");
+const starEditorFormwork = inject('starEditorFormwork');
 
 const props = defineProps({
   item: Object,
-  index: Number
+  index: String,
 });
-const emit = defineEmits(['saveParagraph']);
+// const emit = defineEmits(['saveParagraph']);
 
-const newItem = JSON.parse(JSON.stringify(props.item || {}));
+// 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 inputFunc = e => {
+//   newItem.default_text = e.target.innerHTML;
+//   emit('saveParagraph', newItem);
+// };
+// const inputFuncTitle = e => {
+//   newItem.title = e.target.innerHTML;
+//   emit('saveParagraph', newItem);
+// };
 
 const selectThis = () => {
-    starEditorFormwork(newItem, props.index);
-}
+  const newItem = JSON.parse(JSON.stringify(props.item || {}));
+  newItem.leftEle = true;
+  starEditorFormwork(newItem, props.index);
+};
 </script>
 
 <style scoped>
 .pragraph {
   font-weight: 400;
+  cursor: pointer;
 }
 .text {
   outline: none;

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

@@ -33,7 +33,7 @@ const props = defineProps({
   item: Object,
 });
 const item = JSON.parse(JSON.stringify(props.item || '{}'));
-label.value = item.attr.label;
+label.value = item.attr.label || item.attr.name;
 placeholder.value = item.attr.placeholder;
 </script>
 

src/view/allMedia/components/H5EditorLeft/imgEditor.vue

@@ -10,11 +10,9 @@
       :headers="{ Authorization: token }"
     >
       <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-      <div class="el-upload__text">
-        拖拽图片到此处或<em>点击上传图片</em>
-      </div>
+      <div class="el-upload__text">拖拽图片到此处或<em>点击上传图片</em></div>
     </el-upload>
-    <img :src="inputText" style="width: 100%;" />
+    <img :src="inputText" style="width: 100%" />
   </left-skeleton>
 </template>
 
@@ -29,7 +27,7 @@ const deleteItemComponents = inject('deleteItemComponents');
 
 const props = defineProps({
   item: Object,
-  index: Number,
+  index: String,
 });
 
 const item = JSON.parse(JSON.stringify(props.item));
@@ -43,7 +41,8 @@ const onSuccess = res => {
 };
 
 const save = () => {
-  saveComponents('保存');
+  item.item.src = inputText.value;
+  saveComponents(item);
 };
 
 const deleteFunc = () => {
@@ -54,7 +53,6 @@ const deleteFunc = () => {
   deleteItemComponents(props.index);
 };
 
-console.log(props.item);
 </script>
 
 <style scoped>

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

@@ -0,0 +1,64 @@
+<template>
+  <left-skeleton @save="save" @deleteFunc="deleteFunc">
+    <el-form :model="form">
+      <el-form-item label="标题">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="内容">
+        <div class="input" v-html="form.detail" contenteditable @input="setDate"></div>
+      </el-form-item>
+    </el-form>
+  </left-skeleton>
+</template>
+
+<script setup>
+// import config from '../../../../config/index';
+import { defineProps, ref, inject } from 'vue';
+import leftSkeleton from '../H5Editor/leftSkeleton.vue';
+
+const saveComponents = inject('saveComponents');
+const deleteItemComponents = inject('deleteItemComponents');
+
+const props = defineProps({
+  item: Object,
+  index: String,
+});
+
+const item = JSON.parse(JSON.stringify(props.item));
+console.log(item);
+const form = ref({
+  title: item.item.title,
+  detail: item.item.default_text,
+});
+
+const setDate = e => {
+  form.value.detail = e.target.innerHTML;
+};
+
+const save = () => {
+  item.item.title = form.value.title;
+  item.item.default_text = form.value.detail;
+  saveComponents(item);
+};
+
+const deleteFunc = () => {
+  /**
+   * 1.删除本地
+   * 2.删除远程
+   */
+  deleteItemComponents(props.index);
+};
+</script>
+
+<style scoped>
+.el-upload {
+  margin: 1em 0;
+}
+
+.input{
+    background-color: #fff;
+    border: 1px solid #eee;
+    outline: none;
+    padding: 10px
+}
+</style>

src/view/allMedia/components/H5EditorLeft/vanField.vue

@@ -2,7 +2,7 @@
   <left-skeleton @save="save" @deleteFunc="deleteFunc">
     <el-form :model="form" v-if="defaultForm">
       <el-form-item label="组件名称">
-        <el-input v-model="form.name" />
+        <el-input v-model="form.label" />
       </el-form-item>
       <el-form-item label="默认提示">
         <el-input v-model="form.placeholder" />
@@ -14,18 +14,18 @@
     <div v-else>
       <el-form :model="form">
         <el-form-item label="组件名称">
-          <el-input v-model="form.name" />
+          <el-input v-model="form.label" />
         </el-form-item>
         <el-form-item label="是否必填">
           <el-switch v-model="form.isRequired" />
         </el-form-item>
       </el-form>
       <component
-        v-for="(item, index) in form.eleList"
+        v-for="(item, index) in form.child_list"
         :key="index"
         :is="H5EditorObj[item.type]"
         :item="item"
-        :index="index"
+        :index="index + ''"
         @change="seacechange"
       ></component>
     </div>
@@ -57,13 +57,13 @@ const defaultForm = ref(false);
 const formSele = {};
 if (!item.child_list || !item.child_list.length) {
   defaultForm.value = true;
-  formSele.name = item.attr.label;
+  formSele.label = item.attr.label;
   formSele.placeholder = item.attr.placeholder;
   formSele.isRequired = item.attr.isRequired;
 } else {
   defaultForm.value = false;
-  formSele.eleList = item.child_list;
-  formSele.name = item.attr.label;
+  formSele.child_list = item.child_list;
+  formSele.label = item.attr.label;
   formSele.isRequired = item.attr.isRequired;
 }
 
@@ -71,18 +71,21 @@ const form = ref(formSele);
 
 // 获取子组件内更新的数据
 const seacechange = (item, index) => {
-  form.value.eleList[index] = item;
+  console.log(item, index, form.value.child_list);
+  form.value.child_list[index] = item;
 };
 
 const save = () => {
-  let V = {};
   if (defaultForm.value) {
-    V = { ...item, attr: { ...form.value } };
+    item.attr.label = form.value.label;
+    item.attr.placeholder = form.value.placeholder;
+    item.attr.isRequired = form.value.isRequired;
   } else {
-    V = { ...item, ...form.value, child_list: { ...form.value.eleList } };
+    item.child_list = form.value.child_list;
+    item.attr.label = form.value.label;
+    item.attr.isRequired = form.value.isRequired;
   }
-  delete V.eleList;
-  saveComponents({ item: V, index: props.index });
+  saveComponents({ item, index: props.index });
 };
 
 const deleteFunc = () => {
@@ -90,7 +93,7 @@ const deleteFunc = () => {
    * 1.删除本地
    * 2.删除远程
    */
-  deleteItemComponents(props.index );
+  deleteItemComponents(props.index);
 };
 </script>
 

src/view/allMedia/components/H5EditorLeft/van_uploader.vue

@@ -17,7 +17,6 @@ const props = defineProps({
 
 
 const localitem = ref(JSON.parse(JSON.stringify(props.item)));
-
 const emit = defineEmits(['change']);
 const setData = () => {
     emit('change', localitem.value, props.index);