提交

src/api/index.js

@@ -84,7 +84,7 @@ export function getClass(ori){
  */
 export function getH5Mall(ori) {
     return ajax({
-        api: "/oridata.json",
+        api: "/oridata.json?" + Date.now(),
         data: ori.data,
         base: "oss1",
         type: "ajax",

src/view/allMedia/H5Editor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="H5Editor">
-    <div class="H5Editor_left"></div>
+    <div class="H5Editor_left">1</div>
     <div class="H5Editor_center">
       <div class="pageClient">
         <div class="page">
@@ -8,7 +8,7 @@
             class="pageMain"
             :style="{
               width: page.width + 'px',
-              'min-height': page.height + 'px',
+              'height': page.height ? page.height + 'px' : undefined,
               ...backgroundStyle(),
             }"
           >
@@ -16,7 +16,26 @@
               v-for="(item, index) in hoversList[selectPage].components || []"
               :key="index"
             >
-              <component :is="components[item.type]" :item="item"></component>
+              <h5-image v-if="item.type === 'image'" :item="item"></h5-image>
+              <h5-paragraph
+                v-if="item.type === 'paragraph'"
+                :item="item"
+                @saveParagraph="text => saveParagraph(text, index)"
+              ></h5-paragraph>
+              <h5-from-component
+                v-if="item.type === 'fromComponent'"
+                :item="item"
+              >
+                <!-- <div style="padding: 5px">
+                  <van-button block type="danger" native-type="submit" disabled>
+                    我要报名
+                  </van-button>
+                </div> -->
+                <template v-for="(v, i) in (item.child_list || [])" :key="i">
+                    <h5-van-field v-if="v.type === 'van-field'" :item="v"></h5-van-field>
+                    <h5-van-buttom v-if="v.type === 'van-buttom'" :item="v"></h5-van-buttom>
+                </template>
+              </h5-from-component>
             </template>
           </div>
         </div>
@@ -40,28 +59,21 @@
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 
-import image from './components/H5Editor/img.vue';
-import paragraph from './components/H5Editor/paragraph.vue';
-import fromComponent from './components/H5Editor/from.vue';
-
-const components = {
-  image,
-  paragraph,
-  fromComponent,
-};
+import H5Image from './components/H5Editor/img.vue';
+import H5Paragraph from './components/H5Editor/paragraph.vue';
+import H5FromComponent from './components/H5Editor/from.vue';
+import H5VanField from './components/H5Editor/van_field.vue';
+import H5VanButtom from './components/H5Editor/van_buttom.vue';
 
 const route = useRoute();
 const item = JSON.parse(route.query.item || '{}');
 const selectPage = ref(0);
 const hoversList = ref(item.hoversList || []);
 const page = ref({ width: 375, height: 0 });
-
 const selectPageFunc = (index = 0) => {
   selectPage.value = index;
 };
 
-console.log(item);
-
 // 查看页面大小，
 const img = new Image();
 img.src = hoversList.value[selectPage.value].background_url || '';
@@ -81,6 +93,10 @@ const backgroundStyle = () => {
     'background-image': 'url(' + back + ')',
   };
 };
+
+const saveParagraph = (paragraph, index) => {
+  console.log(paragraph, index);
+};
 </script>
 
 <style scoped>
@@ -108,13 +124,13 @@ const backgroundStyle = () => {
   position: relative;
 }
 
-.H5Editor_center .pageClient{
+.H5Editor_center .pageClient {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 15px 5px;
-  background-color: #000;
+  /* background-color: #000; */
   border-radius: 1em;
 }
 

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

@@ -1,87 +1,27 @@
 <template>
-  <van-form class="pragraph" disabled>
-    <van-cell-group inset>
-      <div class="text" contenteditable v-text="item.title" :style="item.title_style"></div>
-      <div class="edit"></div>
-      <van-field
-        required
-        v-model="from.name"
-        label="选手姓名"
-        placeholder="请输入用户名"
-      />
-      <van-field
-        name="radio"
-        label="参赛方式"
-        required
-      >
-        <template #input>
-          <van-radio-group disabled v-model="from.isOnLine" direction="horizontal">
-            <van-radio name="线上" checked-color="#ff2c2c">线上</van-radio>
-            <van-radio name="线下" checked-color="#ff2c2c">线下</van-radio>
-          </van-radio-group>
-        </template>
-      </van-field>
-      <van-field
-        required
-        v-model="from.tel"
-        label="联系方式"
-        type="tel"
-        placeholder="请输入手机号"
-      />
-      <van-field
-        required
-        v-model="from.university"
-        label="参赛院校"
-        placeholder="请输入院校名称"
-      />
-      <van-field
-        placeholder="上传作品"
-        required
-        label="上传作品"
-      >
-        <template #input>
-          <van-uploader
-            accept="video/*"
-            v-model="from.file"
-            :max-count="1"
-            :max-size="524288000"
-            result-type="file"
-          >
-            <template #preview-cover>
-              <van-icon
-                color="#fff"
-                size="40"
-                @click="previewClick"
-                name="play-circle-o play"
-              />
-            </template>
-          </van-uploader>
-          <p style="font-size: 12px; color: #666">
-            支持上传MP4、MOV格式的视频，视频时长三分钟以内，视频大小500M以内
-          </p>
-        </template>
-      </van-field>
-      <div style="padding: 5px">
-        <van-button block type="danger" native-type="submit" disabled>
-          我要报名
-        </van-button>
-      </div>
-    </van-cell-group>
-  </van-form>
-  <br />
+  <div>
+    <van-form class="pragraph" disabled>
+      <van-cell-group inset>
+        <div
+          class="text"
+          contenteditable
+          v-text="item.title"
+          :style="item.title_style"
+        ></div>
+        <slot></slot>
+      </van-cell-group>
+    </van-form>
+    <br />
+  </div>
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue';
+import { defineProps } from 'vue';
 import 'vant/lib/index.css';
 
-const props = defineProps({
+defineProps({
   item: Object,
 });
-console.log(props.item);
-
-const from = ref({});
-
 </script>
 
 <style scoped>
@@ -92,7 +32,7 @@ const from = ref({});
   outline: none;
   border: 1px solid #fff;
 }
-.text:focus{
-    border-color: red;
+.text:focus {
+  border-color: red;
 }
 </style>

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

@@ -1,17 +1,55 @@
 <template>
-  <img :src="item.src" class="componenet_img" :style="item.style" />
+  <div>
+    <van-popover v-model:show="showPopover"  placement="right">
+      <van-cell-group inset>
+        <van-field
+          v-model="url"
+          center
+          clearable
+          label=""
+          placeholder="请输入远程图片"
+        >
+          <template #button>
+            <van-button size="small" type="primary" @click="saveImg">保存并更新</van-button>
+          </template>
+        </van-field>
+      </van-cell-group>
+      <template #reference>
+        <img :src="oriUrl || item.src" class="componenet_img" :style="outStyle()" />
+      </template>
+    </van-popover>
+  </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
-defineProps({
+import { defineProps, ref } from 'vue';
+const props = defineProps({
   item: Object,
 });
+const showPopover = ref(false);
+const url = ref("");
+const oriUrl = ref("");
+
+const saveImg = () => {
+    oriUrl.value = url.value;
+    url.value = "";
+    showPopover.value = false;
+}
+const outStyle = () => {
+    const width = {
+        "100%": true,
+        "100vh": true
+    }
+    const styleClass = JSON.parse(JSON.stringify(props.item.style));
+    if(width[props.item.style.width]){
+        styleClass.width = '375px'
+    }
+    return styleClass
+}
 </script>
 
 <style scoped>
 .componenet_img {
-  width: 100%;
   cursor: pointer;
 }
 </style>

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

@@ -1,29 +1,44 @@
 <template>
-  <van-cell-group inset class="pragraph">
-    <div class="text" contenteditable v-text="item.title" :style="item.title_style"></div>
-    <div
-      contenteditable
-      class="text"
-      :style="item.style"
-      v-html="item.default_text"
-      @input="inputFunc"
-    ></div>
-  </van-cell-group>
-  <br />
+  <div>
+    <van-cell-group inset class="pragraph">
+      <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"
+        @input="inputFunc"
+      ></div>
+    </van-cell-group>
+    <br />
+  </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
+import { defineProps, defineEmits } from 'vue';
 import 'vant/lib/index.css';
 
 const props = defineProps({
   item: Object,
 });
+const emit = defineEmits(['saveParagraph']);
+
+const newItem = JSON.parse(JSON.stringify(props.item || {}));
 
 const inputFunc = e => {
-  console.log(e.target.innerHTML);
+  newItem.default_text = e.target.innerHTML;
+  emit('saveParagraph', newItem);
+};
+const inputFuncTitle = e => {
+  newItem.title = e.target.innerHTML;
+  emit('saveParagraph', newItem);
 };
-console.log(props.item);
 </script>
 
 <style scoped>
@@ -34,7 +49,7 @@ console.log(props.item);
   outline: none;
   border: 1px solid #fff;
 }
-.text:focus{
-    border-color: red;
+.text:focus {
+  border-color: red;
 }
 </style>

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

@@ -0,0 +1,18 @@
+<template>
+  <div :style="item.style">
+    <van-button :block="block" :type="btnType" disabled :native-type="nativeType">
+      {{ label }}
+    </van-button>
+  </div>
+</template>
+<script setup>
+import { ref, defineProps } from 'vue';
+const props = defineProps({
+  item: Object,
+});
+const item = JSON.parse(JSON.stringify(props.item || '{}'));
+const label = ref(item.text);
+const block = ref(item.attr.block);
+const nativeType = ref(item.attr.nativeType);
+const btnType = ref(item.attr.type);
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <van-field :required="isRequired" :label="label" :placeholder="placeholder">
+    <template v-if="item.child_list && item.child_list.length" #input>
+      <template v-for="(v, i) in item.child_list" :key="i">
+        <h5-van-radio-group
+          :item="v"
+          v-if="v.type === 'van-radio-group'"
+        ></h5-van-radio-group>
+        <h5-van-uploader
+          :item="v"
+          v-if="v.type === 'van-uploader'"
+        ></h5-van-uploader>
+      </template>
+    </template>
+  </van-field>
+</template>
+<script setup>
+import H5VanRadioGroup from './van_radio_group.vue';
+import H5VanUploader from './van_uploader.vue';
+import { ref, defineProps } from 'vue';
+const label = ref('');
+const placeholder = ref('');
+const isRequired = ref(false);
+const props = defineProps({
+  item: Object,
+});
+const item = JSON.parse(JSON.stringify(props.item || '{}'));
+label.value = item.attr.label;
+placeholder.value = item.attr.placeholder;
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+<van-radio :name="radioName">{{label}}</van-radio>
+</template>
+<script setup>
+import { defineProps, ref } from 'vue';
+const props = defineProps({
+  item: Object,
+});
+const item = JSON.parse(JSON.stringify(props.item || '{}'));
+const label = ref(item.attr.label || "");
+const radioName = ref(item.attr.name || "");
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+  <van-radio-group disabled :direction="item.attr.direction">
+    <h5-van-radio v-for="(v,i) in (item.child_list || [])" :key="i" :item="v"></h5-van-radio>
+  </van-radio-group>
+</template>
+<script setup>
+import { defineProps } from 'vue';
+import H5VanRadio from './van_radio.vue';
+defineProps({
+  item: Object,
+});
+</script>

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

@@ -0,0 +1,26 @@
+<template>
+  <van-uploader
+    accept="video/*"
+    disabled 
+    :max-count="maxCount"
+    :max-size="maxSize"
+    :result-type="resultType"
+  >
+    <template #preview-cover>
+      <van-icon resultType color="#fff" size="40" />
+    </template>
+  </van-uploader>
+  <p style="font-size: 12px; color: #666" v-text="subtitle" />
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue';
+const props = defineProps({
+  item: Object,
+});
+const item = JSON.parse(JSON.stringify(props.item || '{}'));
+const subtitle = ref(item.subtitle);
+const maxCount = ref(item.attr.maxCount);
+const maxSize = ref(item.attr.maxSize);
+const resultType = ref(item.attr.resultType);
+</script>